Skip to content

Commit

Permalink
Merge branch 'main' into feature/responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@josharagon
josharagon authored Mar 3, 2021
2 parents 77bd595 + 0e968f1 commit 21030f5
Show file tree
Hide file tree
Showing 6 changed files with 238 additions and 111 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ This project has challenged our team in many ways and utilizes technologies that
* css-loader ^5.0.1
* node-sass ^5.0.0
* sass-loader ^2.0.0
* JSCharting ^3.0.2 (dependency providing chart functionality)



Expand Down
Empty file added src/css/_mixins.scss
View file
Empty file.
3 changes: 3 additions & 0 deletions src/css/_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
$main-color: #a4Ebf3;
$grey-background: #AAAAAA;
$secondary-color: #F4F9F9;
72 changes: 71 additions & 1 deletion src/css/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@

@import "_variables";

* {
font-family: 'Montserrat', sans-serif !important;
Expand Down Expand Up @@ -433,6 +433,76 @@ h2{
width: 75%;
}


// ~~~~~~~~~~~~ FORM STYLING ~~~~~~~~~~~ //

.main-section {
display: flex;
justify-content: center;
height: 65em;
width: 100%;
}

.form-container {
height: 60%;
width: 70%;
background-color: $grey-background;
border-radius: 5%;
display: flex;
align-items: center;
}

.user-input-form {
width: 100%;
vertical-align: top;
}

.form-header{
text-align: center;
font-weight: 900;
font-size: 1.2em;
}

.label-container {
justify-content: flex-start;
align-self: center;
width: 30%;
}

.form-input {
display: flex;
flex-direction: row;
width: 90%;
margin: 30px;
}

.input-container {
width: 100%;
justify-content: flex-end;
}

.user-input {
width: 100%;
height: 1.5em;
font-size: 1.2em;
text-align: center;
}

.button-container {
width: 100%;
height: 30%;
display: flex;
justify-content: center;
justify-self: flex-end;
}

.submit-button {
background-color: #8b8b8b;
height: 3em;
border-radius: 5%;
margin: 2em 0 .5em 0;
}

.error-message{
color: red;
}
Expand Down
261 changes: 151 additions & 110 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,116 +64,174 @@ <h2 class="middle" id="chart-num">0<span>oz</span></h2>
</div>
</section>
</section>
<section class="main-column-activity">
<section class="infoContainer-cardContainer-card-horizontal">
<h1 class="titleactivity">Activity</h1>
<div class="data-radio-activity" id="user-selector">
<input type="radio" name="dataBtn" id="personal-data" value="small" checked="checked" />
<label id="data-selector" for="personal-data">Personal</label>
<input type="radio" name="dataBtn" id="all-users" value="small" />
<label id="data-selector" for="all-users">All Users</label>
</div>
<div class="activity-charts">
<div class="box" id="personal-data-chart">
<div class="percent">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle id="chart-baractivity" cx="70" cy="70" r="70"></circle>
</svg>
<div class="numberactivity">
<h2 class="middle" id="activity-chart-num">0<span></span></h2>
<p class="textactivity" id="activity-chart-text">Today</p>
<section class="main-column-activity">
<section class="infoContainer-cardContainer-card-horizontal">
<h1 class="titleactivity">Activity</h1>
<div class="data-radio-activity" id="user-selector">
<input type="radio" name="dataBtn" id="personal-data" value="small" checked="checked" />
<label id="data-selector" for="personal-data">Personal</label>
<input type="radio" name="dataBtn" id="all-users" value="small" />
<label id="data-selector" for="all-users">All Users</label>
</div>
<div class="activity-charts">
<div class="box" id="personal-data-chart">
<div class="percent">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle id="chart-baractivity" cx="70" cy="70" r="70"></circle>
</svg>
<div class="numberactivity">
<h2 class="middle" id="activity-chart-num">0<span></span></h2>
<p class="textactivity" id="activity-chart-text">Today</p>
</div>
</div>
</div>
</div>
<div class="box hidden" id="all-user-chart">
<div class="percent">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle class="all-user-bar" id="chart-baractivity" cx="70" cy="70" r="70"></circle>
</svg>
<div class="numberactivity">
<h2 class="middle all-user-num" id="activity-chart-num">0<span></span></h2>
<p class="textactivity" id="activity-chart-text">Today</p>
<div class="box hidden" id="all-user-chart">
<div class="percent">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle class="all-user-bar" id="chart-baractivity" cx="70" cy="70" r="70"></circle>
</svg>
<div class="numberactivity">
<h2 class="middle all-user-num" id="activity-chart-num">0<span></span></h2>
<p class="textactivity" id="activity-chart-text">Today</p>
</div>
</div>
</div>
</div>
</div>
<h2>Activity Category</h2>
<div class="data-radio-activity" id="category">
<input type="radio" name="categoryBtn" id="category-steps" value="small" checked="checked" />
<label id="category-label-steps" for="category-steps">Steps</label>
<input type="radio" name="categoryBtn" id="category-miles" value="small" />
<label id="category-label-miles" for="category-miles">Miles</label>
<input type="radio" name="categoryBtn" id="category-stairs" value="small" />
<label id="category-label-stairs" for="category-stairs">Stairs</label>
<input type="radio" name="categoryBtn" id="category-active" value="small" />
<label id="category-label-active" for="category-active">Active Minutes</label>
</div>
</section>
<section class="infoContainer-cardContainer-card-horizontal">
<section class="horizontalCard-activity-container">
<div class="card-history-activity" id="steps-graph">
<p class="activity-chart-header">Your steps this week</p>
<div class="sidebar-header-line"></div>
<div class="activity-chart" id="chartDiv-numSteps"></div>
<h2>Activity Category</h2>
<div class="data-radio-activity" id="category">
<input type="radio" name="categoryBtn" id="category-steps" value="small" checked="checked" />
<label id="category-label-steps" for="category-steps">Steps</label>
<input type="radio" name="categoryBtn" id="category-miles" value="small" />
<label id="category-label-miles" for="category-miles">Miles</label>
<input type="radio" name="categoryBtn" id="category-stairs" value="small" />
<label id="category-label-stairs" for="category-stairs">Stairs</label>
<input type="radio" name="categoryBtn" id="category-active" value="small" />
<label id="category-label-active" for="category-active">Active Minutes</label>
</div>
</section>
<section class="infoContainer-cardContainer-card-horizontal">
<section class="horizontalCard-activity-container">
<div class="card-history-activity" id="steps-graph">
<p class="activity-chart-header">Your steps this week</p>
<div class="sidebar-header-line"></div>
<div class="activity-chart" id="chartDiv-numSteps"></div>
</div>
</section>
</section>
</section>
</section>
<section class="main-column-sleep">
<section class="infoContainer-cardContainer-card-horizontal">
<h1 class="titlesleep">Sleep</h1>
<div class="data-radio-sleep" id="selector-sleep">
<input type="radio" name="dataBtnSleep" id="personal-sleep" value="small" checked="checked" />
<label id="data-selector-sleep" for="personal-sleep">Today</label>
<input type="radio" name="dataBtnSleep" id="all-sleep" value="small" />
<label id="data-selector-sleep" for="all-sleep">All Time</label>
</div>
<div class="activity-charts">
<div class="box" id="personal-sleep-chart">
<div class="percent">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle id="chart-barsleep" cx="70" cy="70" r="70"></circle>
</svg>
<div class="numbersleep">
<h2 class="middle" id="sleep-chart-num">0<span></span></h2>
<p class="textsleep" id="sleep-chart-text">Today</p>
<section class="main-column-sleep">
<section class="infoContainer-cardContainer-card-horizontal">
<h1 class="titlesleep">Sleep</h1>
<div class="data-radio-sleep" id="selector-sleep">
<input type="radio" name="dataBtnSleep" id="personal-sleep" value="small" checked="checked" />
<label id="data-selector-sleep" for="personal-sleep">Today</label>
<input type="radio" name="dataBtnSleep" id="all-sleep" value="small" />
<label id="data-selector-sleep" for="all-sleep">All Time</label>
</div>
<div class="activity-charts">
<div class="box" id="personal-sleep-chart">
<div class="percent">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle id="chart-barsleep" cx="70" cy="70" r="70"></circle>
</svg>
<div class="numbersleep">
<h2 class="middle" id="sleep-chart-num">0<span></span></h2>
<p class="textsleep" id="sleep-chart-text">Today</p>
</div>
</div>
</div>
</div>
<div class="box hidden" id="all-sleep-chart">
<div class="percent">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle class="all-sleep-bar" id="chart-barsleep" cx="70" cy="70" r="70"></circle>
</svg>
<div class="numbersleep">
<h2 class="middle all-sleep-num" id="all-chart-num">0<span></span></h2>
<p class="textsleep" id="sleep-chart-text">On Average</p>
<div class="box hidden" id="all-sleep-chart">
<div class="percent">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle class="all-sleep-bar" id="chart-barsleep" cx="70" cy="70" r="70"></circle>
</svg>
<div class="numbersleep">
<h2 class="middle all-sleep-num" id="all-chart-num">0<span></span></h2>
<p class="textsleep" id="sleep-chart-text">On Average</p>
</div>
</div>
</div>
</div>
</div>
<div class="data-radio-sleep" id="sleep-type">
<input type="radio" name="typeBtn" id="type-hours" value="small" checked="checked" />
<label id="type-label-hours" for="type-hours">Hours Slept</label>
<input type="radio" name="typeBtn" id="type-quality" value="small" />
<label id="type-label-quality" for="type-quality">Sleep Quality</label>
</div>
</section>
<section class="infoContainer-cardContainer-card-horizontal">
<section class="horizontalCard-sleep-container">
<div class="card-history-sleep" id="sleep-graph">
<p class="sleepChartHeader">Your sleep this week</p>
<div class="sidebar-header-line"></div>
<div class="sleep-chart" id="chartDiv-hoursSlept"></div>
<div class="data-radio-sleep" id="sleep-type">
<input type="radio" name="typeBtn" id="type-hours" value="small" checked="checked" />
<label id="type-label-hours" for="type-hours">Hours Slept</label>
<input type="radio" name="typeBtn" id="type-quality" value="small" />
<label id="type-label-quality" for="type-quality">Sleep Quality</label>
</div>
</section>
<section class="infoContainer-cardContainer-card-horizontal">
<section class="horizontalCard-sleep-container">
<div class="card-history-sleep" id="sleep-graph">
<p class="sleepChartHeader">Your sleep this week</p>
<div class="sidebar-header-line"></div>
<div class="sleep-chart" id="chartDiv-hoursSlept"></div>
</div>
</section>
</section>
</section>
</section>
</section>
<section class="form-container" id="formContainer">
<form class="user-input-form" id="userInputForm" action="index.html" method="post">
<h2 class="form-header">LOG TODAY'S ACTIVITY</h2>
<div class="form-input">
<div class="label-container">
<label for="hoursSleptEntry" class="label"">Time Slept: </label>
</div>
<div class="input-container">
<input class="user-input" id="hoursSleptEntry" type="text" placeholder="hours">
</div>
</div>
<div class="form-input">
<div class="label-container">
<label for="sleepQualityEntry" class="label">Sleep Quality: </label>
</div>
<div class="input-container">
<input class="user-input" type="number" id="sleepQualityEntry" min="0" max="5" placeholder="rating out of 5">
</div>
</div>
<div class="form-input">
<div class="label-container">
<label for="numOuncesEntry" class="label">Amount drank: </label>
</div>
<div class="input-container">
<input class="user-input" id="numOuncesEntry" type="text" placeholder="in ounces">
</div>
</div>
<div class="form-input">
<div class="label-container">
<label for="numStepsEntry" class="label">Number of Steps: </label>
</div>
<div class="input-container">
<input class="user-input" id="numStepsEntry" type="text" placeholder="555">
</div>
</div>
<div class="form-input">
<div class="label-container">
<label for="minutesActiveEntry" class="label">Minutes Active: </label>
</div>
<div class="input-container">
<input class="user-input" id="minutesActiveEntry" type="text" placeholder="132">
</div>
</div>
<div class="form-input">
<div class="label-container">
<label for="flightsOfStairsEntry" class="label">Flights of Stairs: </label>
</div>
<div class="input-container">
<input class="user-input" id="flightsOfStairsEntry" type="text" placeholder="Total stair flights climbed">
</div>
</div>
<div class="button-container">
<button class="submit-button" type="button" name="button" style="font-size:14px">SUBMIT ACTIVITIES UPDATE</button>
</div>
<p class="user-input" id="updatingDisplay"></p>
</form>
</section>
</div>
</section>
<section class="main-sidebar-body hidden">
<section class="body-sidebar-sidebarContainer">
Expand Down Expand Up @@ -206,23 +264,6 @@ <h2 class="sidebar-header-name" id="sidebarName">FRIENDLY STEP CHALLENGE!</h2>
</section>
</section>
</section>
<form class="userInputField hidden" action="index.html" method="post">
<label for="hoursSleptEntry">Time Slept: </label>
<input class="userInput" id="hoursSleptEntry" type="text" placeholder="hours">
<label for="sleepQualityEntry">Sleep Quality: </label>
<input class="userInput" id="sleepQualityEntry" type="text" placeholder="rating">
<label for="numOuncesEntry">Amount drank: </label>
<input class="userInput" id="numOuncesEntry" type="text" placeholder="in ounces">
<label for="numStepsEntry">Number of Steps: </label>
<input class="userInput" id="numStepsEntry" type="text" placeholder="555">
<label for="minutesActiveEntry">Minutes Active: </label>
<input class="userInput" id="minutesActiveEntry" type="text" placeholder="132">
<label for="flightsOfStairsEntry">Flights of Stairs: </label>
<input class="userInput" id="flightsOfStairsEntry" type="text" placeholder="Enter total stair flights climbed">
<button class="submit-button" type="button" name="button" style="font-size:14px">SUBMIT ACTIVITIES UPDATE</button>
<p class="user-input" id="updatingDisplay"></p>
</form>
</section>
</body>

</html>
Loading

0 comments on commit 21030f5

Please sign in to comment.