From dfdb694b798bdf02180fba9efca6648cebeabff7 Mon Sep 17 00:00:00 2001 From: Josh Aragon Date: Thu, 25 Feb 2021 21:25:20 -0700 Subject: [PATCH 01/10] Add circle chart to display water data --- src/css/style.scss | 94 +++++++++++++++++++++++++++++++++++++++++ src/index.html | 103 +++++++++++++++++++++++++++++---------------- src/index.js | 1 - src/scripts.js | 34 +++++++++++++-- 4 files changed, 191 insertions(+), 41 deletions(-) diff --git a/src/css/style.scss b/src/css/style.scss index ed4a5b5..de31cdb 100644 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -248,3 +248,97 @@ h1 { font-weight: bold; font-family: sans-serif; } + + +.box{ + position:relative; + width:300px; + height:400px; + display:flex; + justify-content:center; + align-items:center; + flex-direction:column; + background: #fff0; + box-shadow: 0 30px 60px rgba(0,0,0,0.2); +} + + +.box .percent svg{ + position:relative; + width: 150px; + height: 150px; +} + +.box .percent svg circle { + width: 150px; + height: 150px; + fill: none; + stroke-width: 10; + stroke: #000; + transform: translate(5px,5px); + stroke-dasharray:440; + stroke-dashoffset:440; + stroke-linecap:round; +} + +.box .percent svg circle:nth-child(1){ + stroke-dashoffset:0; + stroke:#f3f3f3; +} + +.box .percent svg circle:nth-child(2){ + stroke-dashoffset: calc(440 - (440*87) / 100); + stroke:#03a9f4; +} + +.box .percent .number{ + flex-direction: column; + position: absolute; + top:0; + left:0; + width:100%; + height:90%; + display:flex; + justify-content:center; + align-items: center; + color: #999; +} + +.box .percent .number h2{ + font-size: 48px; +} + +.box .percent .number h2 span{ + font-size:22px; +} + +.box .text{ + color: #fff; + font-size: 14px; + font-weight: 700; + letter-spacing: 1px; + width: max-content; + height: 0px; +} + +.hydration-data{ + display: flex; + flex-direction: row; +} + +.hydration-data input[type="radio"] { + // opacity: 0; + // position: fixed; + // width: 0; +} + +.hydration-data label { + display: inline-block; + background-color: #e5e5e5; + padding: 5px 15px; + font-family: sans-serif, Arial; + font-size: 13px; + border: 1px solid #07a9f4; + border-radius: 18px; + z-index: 1; +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 0b80902..e30a9da 100644 --- a/src/index.html +++ b/src/index.html @@ -1,10 +1,12 @@ + Activity Tracker - + @@ -24,26 +26,37 @@

-

-
-

Friends

-
-
    - -
-
-
-

Keep up the good work! You were increasingly active on these dates:

- -
+

+

+
+

Friends

+
+
    + +
+
+
+

Keep up the good work! You were increasingly active on these dates:

+ +
+

@@ -67,6 +80,24 @@
+
+
+ + + + +
+

87oz

+

Drank Today

+
+
+
+ + + + +
+
@@ -170,28 +201,28 @@

-

-
-

Rank this week

-
    - -
-
-

- Historical Rank

-
    - -
-
-
-

You had 3 DAY STEP STREAKS on these days:

-
    - -
-
+

+

+
+

Rank this week

+
    + +
+
+

- Historical Rank

+
    + +
+
+
+

You had 3 DAY STEP STREAKS on these days:

+
    + +
+
- + \ No newline at end of file diff --git a/src/index.js b/src/index.js index f20c896..fc21283 100644 --- a/src/index.js +++ b/src/index.js @@ -10,4 +10,3 @@ import './css/base.scss'; // An example of how you tell webpack to use an image (also need to link to it in the index.html) import './images/turing-logo.png' -console.log('This is the JavaScript entry file - your code begins here.'); diff --git a/src/scripts.js b/src/scripts.js index 8dc64da..021c6d1 100644 --- a/src/scripts.js +++ b/src/scripts.js @@ -49,8 +49,14 @@ var userMinutesThisWeek = document.getElementById('userMinutesThisWeek'); var bestUserSteps = document.getElementById('bestUserSteps'); var streakList = document.getElementById('streakList'); var streakListMinutes = document.getElementById('streakListMinutes'); - - +var hydrationChartText = document.getElementById('chart-text'); +var hydrationChartNum = document.getElementById('chart-num'); +var hydrationBar = document.getElementById('chart-bar'); +var hydrationDay = document.getElementById('day-oz') +var hydrationAvg = document.getElementById('avg-oz') +var radioBox = document.querySelector('.hydration-data') +hydrationDay.addEventListener('click', updateHydrationChart); +var hydrationForToday = null; function startApp() { fetchData() let userList = []; @@ -63,7 +69,7 @@ function startApp() { let userNow = getUserById(userNowId, userRepo); let today = makeToday(userRepo, userNowId, hydrationData); let activityRepo = new Activity(activityData, today, userNow, userRepo); - + window.averageIntake = 'test' fetchData() .then(allData => { let currentUser = new User(allData.userData.userData[Math.floor(Math.random() * allData.userData.userData.length)]); @@ -76,6 +82,7 @@ function startApp() { let hydrationObject = new Hydration(hydrationData, user); let averageHydration = hydrationObject.calculateAverageOunces(); hydrationAverage.insertAdjacentHTML('afterBegin', `

Your average water intake is

${averageHydration}

oz per day.

`); + } function displayActivityData(activityData, user, userRepo) { @@ -158,13 +165,32 @@ function makeRandomDate(userStorage, id, dataSet) { } function addHydrationInfo(id, hydrationInfo, dateString, userStorage, laterDateString) { - hydrationToday.insertAdjacentHTML('afterBegin', `

You drank

${hydrationInfo.calculateDailyOunces(id, dateString)}

oz water today.

`); + const dayAmount = hydrationInfo.calculateDailyOunces(id, dateString) + hydrationToday.insertAdjacentHTML('afterBegin', `

You drank

${dayAmount}

oz water today.

`); // hydrationAverage.insertAdjacentHTML('afterBegin', `

Your average water intake is

${hydrationInfo.calculateAverageOunces(id)}

oz per day.

`) // hydrationAverage.insertAdjacentHTML('afterBegin', `

Your average water intake is

${hydrationInfo.calculateAverageOunces(id)}

oz per day.

`) hydrationThisWeek.insertAdjacentHTML('afterBegin', makeHydrationHTML(id, hydrationInfo, userStorage, hydrationInfo.calculateFirstWeekOunces(userStorage, id))); hydrationEarlierWeek.insertAdjacentHTML('afterBegin', makeHydrationHTML(id, hydrationInfo, userStorage, hydrationInfo.calculateRandomWeekOunces(laterDateString, id, userStorage))); + hydrationChartNum.innerHTML = `${dayAmount}oz` + hydrationBar.style.strokeDashoffset = `calc(440 - (440* ${dayAmount}) / 100)` + +} + +function updateHydrationChart() { + // let hydrationRepo = new Hydration(hydrationData); + // today = + // const dayAmount = hydrationRepo.calculateDailyOunces(userNowId, dateString); + // const avgAmount = hydrationRepo.calculateFirstWeekOunces(, userNowId); + console.log(hydrationForToday) + if(hydrationDay.checked === true){ + hydrationBar.style.strokeDashoffset = `calc(440 - (440* ${dayAmount}) / 100)` + } else if (hydrationAvg.checked === true) { + + } + } + function makeHydrationHTML(id, hydrationInfo, userStorage, method) { return method.map(drinkData => `
  • On ${drinkData}oz
    • `).join(''); } From adabc3abe1da6f19abd2538610cd3ae4fad4901a Mon Sep 17 00:00:00 2001 From: Josh Aragon Date: Thu, 25 Feb 2021 22:26:55 -0700 Subject: [PATCH 02/10] Add animation on page load --- src/css/style.scss | 21 ++++++++++++++++----- src/scripts.js | 19 +++++++++---------- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/src/css/style.scss b/src/css/style.scss index de31cdb..a3144be 100644 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -264,6 +264,8 @@ h1 { .box .percent svg{ + padding-bottom: 5px; + overflow: visible; position:relative; width: 150px; height: 150px; @@ -284,9 +286,18 @@ h1 { .box .percent svg circle:nth-child(1){ stroke-dashoffset:0; stroke:#f3f3f3; + transform: rotate(-90deg); + transform-origin: center; +} + +@keyframes circle-chart-fill { + to { stroke-dasharray: 0 100; } } .box .percent svg circle:nth-child(2){ + animation: circle-chart-fill 4s reverse; + transform: rotate(-90deg); + transform-origin: center; stroke-dashoffset: calc(440 - (440*87) / 100); stroke:#03a9f4; } @@ -327,9 +338,9 @@ h1 { } .hydration-data input[type="radio"] { - // opacity: 0; - // position: fixed; - // width: 0; + opacity: 0; + position: fixed; + width: 0; } .hydration-data label { @@ -338,7 +349,7 @@ h1 { padding: 5px 15px; font-family: sans-serif, Arial; font-size: 13px; - border: 1px solid #07a9f4; + border: 1px solid #00aeff; border-radius: 18px; z-index: 1; -} \ No newline at end of file +} diff --git a/src/scripts.js b/src/scripts.js index 021c6d1..bc79a61 100644 --- a/src/scripts.js +++ b/src/scripts.js @@ -55,8 +55,8 @@ var hydrationBar = document.getElementById('chart-bar'); var hydrationDay = document.getElementById('day-oz') var hydrationAvg = document.getElementById('avg-oz') var radioBox = document.querySelector('.hydration-data') -hydrationDay.addEventListener('click', updateHydrationChart); -var hydrationForToday = null; +radioBox.addEventListener('click', updateHydrationChart); + function startApp() { fetchData() let userList = []; @@ -69,7 +69,6 @@ function startApp() { let userNow = getUserById(userNowId, userRepo); let today = makeToday(userRepo, userNowId, hydrationData); let activityRepo = new Activity(activityData, today, userNow, userRepo); - window.averageIntake = 'test' fetchData() .then(allData => { let currentUser = new User(allData.userData.userData[Math.floor(Math.random() * allData.userData.userData.length)]); @@ -81,6 +80,7 @@ function startApp() { function displayHydrationData(hydrationData, user) { let hydrationObject = new Hydration(hydrationData, user); let averageHydration = hydrationObject.calculateAverageOunces(); + window.averageHydration = hydrationObject.calculateAverageOunces(); hydrationAverage.insertAdjacentHTML('afterBegin', `

    Your average water intake is

    ${averageHydration}

    oz per day.

    `); } @@ -166,6 +166,7 @@ function makeRandomDate(userStorage, id, dataSet) { function addHydrationInfo(id, hydrationInfo, dateString, userStorage, laterDateString) { const dayAmount = hydrationInfo.calculateDailyOunces(id, dateString) + window.dailyHydration = dayAmount hydrationToday.insertAdjacentHTML('afterBegin', `

    You drank

    ${dayAmount}

    oz water today.

    `); // hydrationAverage.insertAdjacentHTML('afterBegin', `

    Your average water intake is

    ${hydrationInfo.calculateAverageOunces(id)}

    oz per day.

    `) // hydrationAverage.insertAdjacentHTML('afterBegin', `

    Your average water intake is

    ${hydrationInfo.calculateAverageOunces(id)}

    oz per day.

    `) @@ -177,15 +178,13 @@ function addHydrationInfo(id, hydrationInfo, dateString, userStorage, laterDateS } function updateHydrationChart() { - // let hydrationRepo = new Hydration(hydrationData); - // today = - // const dayAmount = hydrationRepo.calculateDailyOunces(userNowId, dateString); - // const avgAmount = hydrationRepo.calculateFirstWeekOunces(, userNowId); - console.log(hydrationForToday) + console.log(dailyHydration) if(hydrationDay.checked === true){ - hydrationBar.style.strokeDashoffset = `calc(440 - (440* ${dayAmount}) / 100)` + hydrationChartNum.innerHTML = `${dailyHydration}oz` + hydrationBar.style.strokeDashoffset = `calc(440 - (440* ${dailyHydration}) / 100)` } else if (hydrationAvg.checked === true) { - + hydrationChartNum.innerHTML = `${averageHydration}oz` + hydrationBar.style.strokeDashoffset = `calc(440 - (440* ${averageHydration}) / 100)` } } From 2d7525c549d29b8352965686e9b8778b39debdaa Mon Sep 17 00:00:00 2001 From: Josh Aragon Date: Fri, 26 Feb 2021 16:30:53 -0700 Subject: [PATCH 03/10] Add shadow to chart buttons and change inner text to be dynamic on button press --- src/css/style.scss | 9 ++++++++- src/index.html | 4 ++-- src/scripts.js | 2 ++ 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/css/style.scss b/src/css/style.scss index a3144be..26379c9 100644 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -344,8 +344,9 @@ h1 { } .hydration-data label { + color: white; display: inline-block; - background-color: #e5e5e5; + background-color: #8b8b8b; padding: 5px 15px; font-family: sans-serif, Arial; font-size: 13px; @@ -353,3 +354,9 @@ h1 { border-radius: 18px; z-index: 1; } + +.hydration-data input[type="radio"]:checked + label { + box-shadow: inset 0px 0px 6px 0px black; + background-color:#00aeff; + border-color: rgb(255, 255, 255); +} diff --git a/src/index.html b/src/index.html index e30a9da..d092937 100644 --- a/src/index.html +++ b/src/index.html @@ -88,13 +88,13 @@

    Progress

    -->

    87oz

    -

    Drank Today

    +

    Today

    - +
    diff --git a/src/scripts.js b/src/scripts.js index bc79a61..7242a07 100644 --- a/src/scripts.js +++ b/src/scripts.js @@ -182,9 +182,11 @@ function updateHydrationChart() { if(hydrationDay.checked === true){ hydrationChartNum.innerHTML = `${dailyHydration}oz` hydrationBar.style.strokeDashoffset = `calc(440 - (440* ${dailyHydration}) / 100)` + hydrationChartText.innerText = 'Today' } else if (hydrationAvg.checked === true) { hydrationChartNum.innerHTML = `${averageHydration}oz` hydrationBar.style.strokeDashoffset = `calc(440 - (440* ${averageHydration}) / 100)` + hydrationChartText.innerText = 'On Average' } } From 5cb964a9256f22b21f7c3829d4113b3bb03321c5 Mon Sep 17 00:00:00 2001 From: Josh Aragon Date: Fri, 26 Feb 2021 19:06:57 -0700 Subject: [PATCH 04/10] Replace hydration container with much cleaner circle chart --- src/css/style.scss | 6 +++--- src/index.html | 38 +++++++++++-------------------------- src/scripts.js | 47 +++++++++++++++++++++++++++++++++------------- 3 files changed, 48 insertions(+), 43 deletions(-) diff --git a/src/css/style.scss b/src/css/style.scss index 26379c9..1bc8cec 100644 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -259,7 +259,6 @@ h1 { align-items:center; flex-direction:column; background: #fff0; - box-shadow: 0 30px 60px rgba(0,0,0,0.2); } @@ -312,7 +311,7 @@ h1 { display:flex; justify-content:center; align-items: center; - color: #999; + color: #00aeff; } .box .percent .number h2{ @@ -324,7 +323,7 @@ h1 { } .box .text{ - color: #fff; + color: #00aeff; font-size: 14px; font-weight: 700; letter-spacing: 1px; @@ -348,6 +347,7 @@ h1 { display: inline-block; background-color: #8b8b8b; padding: 5px 15px; + margin: 0px 5px; font-family: sans-serif, Arial; font-size: 13px; border: 1px solid #00aeff; diff --git a/src/index.html b/src/index.html index e097493..5b90f50 100644 --- a/src/index.html +++ b/src/index.html @@ -18,6 +18,7 @@
    +
    @@ -46,22 +47,23 @@
    - -
    -

    -
    -
    -

    +
    + + + + +
    @@ -80,24 +82,6 @@

    Progress

    -->
    -
    -
    - - - - -
    -

    87oz

    -

    Today

    -
    -
    -
    - - - - -
    -
    diff --git a/src/scripts.js b/src/scripts.js index 4e63426..78c1860 100644 --- a/src/scripts.js +++ b/src/scripts.js @@ -69,33 +69,39 @@ function startApp() { var userNowId = pickUser(); let userNow = getUserById(userNowId, userRepo); let today = makeToday(userRepo, userNowId, hydrationData); + console.log(today) fetchData() - .then(allData => { - let currentUser = new User(allData.userData[Math.floor(Math.random() * allData.userData.length)]); - let userRepo = new UserRepo(allData.userData); - let hydrationRepo = new Hydration(allData.hydrationData, currentUser); - displaySleepData(allData.sleepData, currentUser, userRepo); - displayHydrationData(allData.hydrationData, currentUser, userRepo); - displayActivityData(allData.activityData, currentUser, userRepo); - }) + .then(allData => { + let currentUser = new User(allData.userData[Math.floor(Math.random() * allData.userData.length)]); + let userRepo = new UserRepo(allData.userData); + let hydrationRepo = new Hydration(allData.hydrationData, currentUser); + displaySleepData(allData.sleepData, currentUser, userRepo); + displayHydrationData(allData.hydrationData, currentUser, userRepo); + displayActivityData(allData.activityData, currentUser, userRepo); + }) function displayHydrationData(hydrationData, user, userRepo) { let hydrationObject = new Hydration(hydrationData, user, today, userRepo); let averageHydration = hydrationObject.calculateAverageOunces(); + let dayAmount = hydrationObject.calculateDailyOunces(); window.averageHydration = hydrationObject.calculateAverageOunces(); - hydrationAverage.insertAdjacentHTML('afterBegin', `

    Your average water intake is

    ${averageHydration}

    oz per day.

    `); - hydrationToday.insertAdjacentHTML('afterBegin', `

    You drank

    ${hydrationObject.calculateDailyOunces()}

    oz water today.

    `); //userRepo.getToday() + window.dailyHydration = dayAmount; + // hydrationAverage.insertAdjacentHTML('afterBegin', `

    Your average water intake is

    ${averageHydration}

    oz per day.

    `); + // hydrationToday.insertAdjacentHTML('afterBegin', `

    You drank

    ${hydrationObject.calculateDailyOunces()}

    oz water today.

    `); //userRepo.getToday() const weekHydrationRecord = hydrationObject.hydrationData.filter(drink => drink.userID === hydrationObject.user.id); hydrationThisWeek.insertAdjacentHTML('afterBegin', makeHydrationHTML(hydrationObject.user.id, hydrationObject, hydrationObject.user, hydrationObject.calculateFirstWeekOunces())); hydrationEarlierWeek.insertAdjacentHTML('afterBegin', makeHydrationHTML(hydrationObject.user.id, hydrationObject, hydrationObject.user, hydrationObject.calculateRandomWeekOunces())); + hydrationChartNum.innerHTML = `${dayAmount}oz` + hydrationBar.style.strokeDashoffset = `calc(440 - (440* ${dayAmount}) / 100)` } function makeHydrationHTML(id, hydrationInfo, userStorage, drinks) { return drinks.map(drinkData => `
  • On ${drinkData}oz
    • `).join(''); // needs dates? } + function displaySleepData(sleepData, user, userRepo) { let sleepObject = new Sleep(sleepData, user, today, userRepo); let averageSleep = sleepObject.calculateAverageSleep(); @@ -105,7 +111,7 @@ function startApp() { let allUsersSleepQuality = sleepObject.calculateAllUserSleepQuality(); sleepToday.insertAdjacentHTML("afterBegin", `

    You slept

    ${sleepObject.calculateDailySleep(today)}

    hours today.

    `); sleepQualityToday.insertAdjacentHTML("afterBegin", `

    Your sleep quality was

    ${sleepObject.calculateDailySleepQuality()}

    out of 5.

    `); - avUserSleepQuality.insertAdjacentHTML("afterBegin", `

    The average user's sleep quality is

    ${Math.round(sleepRepo.calculateAllUserSleepQuality() *100)/100}

    out of 5.

    `); + avUserSleepQuality.insertAdjacentHTML("afterBegin", `

    The average user's sleep quality is

    ${Math.round(sleepRepo.calculateAllUserSleepQuality() * 100) / 100}

    out of 5.

    `); console.log(sleepObject.calculateAllUserSleepQuality()) console.log(sleepQuality) @@ -167,7 +173,7 @@ function startApp() { } function makeUsers(array) { - userData.forEach(function(dataItem) { + userData.forEach(function (dataItem) { let user = new User(dataItem); array.push(user); }) @@ -196,7 +202,7 @@ function makeFriendHTML(user, userRepo) { return user.getFriendsNames(userRepo).map(friendName => `
  • ${friendName}
    • `).join(''); } -function makeWinnerID(activityInfo, user, dateString, userStorage){ +function makeWinnerID(activityInfo, user, dateString, userStorage) { return activityInfo.getWinnerId(user, dateString, userStorage) } @@ -278,4 +284,19 @@ function makeStepStreakHTML(id, activityInfo, userStorage, method) { return method.map(streakData => `
  • ${streakData}!
    • `).join(''); } + + +function updateHydrationChart() { + console.log(dailyHydration) + if (hydrationDay.checked === true) { + hydrationChartNum.innerHTML = `${dailyHydration}oz` + hydrationBar.style.strokeDashoffset = `calc(440 - (440* ${dailyHydration}) / 100)` + hydrationChartText.innerText = 'Today' + } else if (hydrationAvg.checked === true) { + hydrationChartNum.innerHTML = `${averageHydration}oz` + hydrationBar.style.strokeDashoffset = `calc(440 - (440* ${averageHydration}) / 100)` + hydrationChartText.innerText = 'On Average' + } +} + startApp(); From 0ce95e5e6b46ac86b0ae7df1b3fb8e789ad92244 Mon Sep 17 00:00:00 2001 From: Josh Aragon Date: Fri, 26 Feb 2021 21:05:45 -0700 Subject: [PATCH 05/10] Remove unused code --- src/scripts.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/scripts.js b/src/scripts.js index e8ca966..8a78ba8 100644 --- a/src/scripts.js +++ b/src/scripts.js @@ -86,13 +86,10 @@ function startApp() { function displayHydrationData(hydrationData, user, userRepo) { let hydrationObject = new Hydration(hydrationData, user, today, userRepo); - let averageHydration = hydrationObject.calculateAverageOunces(); let dayAmount = hydrationObject.calculateDailyOunces(); window.averageHydration = hydrationObject.calculateAverageOunces(); window.dailyHydration = dayAmount; - // hydrationAverage.insertAdjacentHTML('afterBegin', `

    Your average water intake is

    ${averageHydration}

    oz per day.

    `); - // hydrationToday.insertAdjacentHTML('afterBegin', `

    You drank

    ${hydrationObject.calculateDailyOunces()}

    oz water today.

    `); //userRepo.getToday() const weekHydrationRecord = hydrationObject.hydrationData.filter(drink => drink.userID === hydrationObject.user.id); hydrationChartNum.innerHTML = `${dayAmount}oz` hydrationBar.style.strokeDashoffset = `calc(440 - (440* ${dayAmount}) / 100)` From 4cfd248b91ada1424f344788236611040c73ad6a Mon Sep 17 00:00:00 2001 From: Josh Aragon Date: Sat, 27 Feb 2021 14:49:33 -0700 Subject: [PATCH 06/10] Change page layout --- src/css/style.scss | 34 +++++++++++++++++++++++++--------- src/index.html | 9 ++++++--- src/scripts.js | 33 +++------------------------------ 3 files changed, 34 insertions(+), 42 deletions(-) diff --git a/src/css/style.scss b/src/css/style.scss index 1bc8cec..c9c2db1 100644 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -1,4 +1,5 @@ * { + font-family: 'Montserrat', sans-serif !important; margin: 0; } @@ -84,26 +85,29 @@ h1 { border: 1px solid black; margin: 0 0 1em; display: flex; - flex-direction: column; + flex-direction: row; overflow: scroll; } .main-column-hydration { + align-items: center; display: flex; - flex-direction: row; - height: 25% + flex-direction: column; + height: 100% } .main-column-activity { + align-items: center; display: flex; - flex-direction: row; - height: 50% + flex-direction: column; + height: 100% } .main-column-sleep { + align-items: center; display: flex; - flex-direction: row; - height: 35% + flex-direction: column; + height: 100% } .infoContainer-cardContainer-card-horizontal { @@ -132,7 +136,6 @@ h1 { display: flex; flex-direction: row; margin: 1%; - overflow: scroll; } .card-today-hydration { @@ -183,7 +186,7 @@ h1 { display: flex; flex-direction: column; justify-content: flex-start; - width: 50%; + // width: 50%; } .card-history-sleep { @@ -219,6 +222,10 @@ h1 { font-kerning: normal; } +.percent { + padding: 0px 0px 15px 0px; +} + .historicalWeek { text-align: center; font-size: 1em; @@ -360,3 +367,12 @@ h1 { background-color:#00aeff; border-color: rgb(255, 255, 255); } + +.hydration-title{ + font-size: 34px; + color: #3aa9f4; +} + +.hidden { + display: none; +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 931e38d..f2cb23f 100644 --- a/src/index.html +++ b/src/index.html @@ -5,6 +5,8 @@ Activity Tracker + + @@ -47,6 +49,7 @@
    +

    Hydration

    @@ -54,7 +57,7 @@
    -

    87oz

    +

    0oz

    Today

    @@ -72,7 +75,7 @@

    87oz

    -
    +
    -
    +