@import url("https://fonts.googleapis.com/css?family=Rubik&display=swap"); :root { --color-black: #112c34; --color-blue-dark: #65849a; --color-mustard-light: #ede6d9; --color-mustard-extra-light: #fcf9ed; --color-mustard-midtone: #9c7830; } #prayer-section { width: 100%; display: block; } .black { color: black; } form { direction: ltr; right: 0; width: 100%; max-width: 340px; padding: 56px 48px; border-radius: 40px; box-shadow: 0px 8px 40px rgba(128, 128, 128, 0.15); display: block; /* flex-direction: column; */ align-items: center; background-color: #fffef9; } form div { margin-bottom: 32px; } form div:last-child { margin-bottom: 0; } .number-input-container { width: 244px; display: grid; grid-template-columns: 48px auto 48px; } label { display: inline-block; margin-bottom: 4px; font-size: 12px; line-height: 24px; letter-spacing: 2px; text-transform: uppercase; color: var(--color-blue-dark); } .number-input { width: 100%; display: flex; flex-direction: row; background-color: var(--color-mustard-extra-light); overflow: hidden; } input[type="number"] { -webkit-appearance: none; -webkit-border-radius: 0px; -moz-appearance: none; appearance: none; position: relative; width: 100%; min-width: 100%; height: 48px; background-color: var(--color-mustard-extra-light); border: 1px solid var(--color-mustard-light); border-left: 1px solid rgba(0, 0, 0, 0); border-right: 1px solid rgba(0, 0, 0, 0); border-radius: none; font-size: 16px; line-height: 24px; text-align: center; transition: all 0.2s ease-out; } input[type="number"]:focus { background-color: white; border: 1px solid var(--color-mustard-midtone); outline: none; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } .text-green { color: green; } .mt { margin-top: 10px; } .mb { margin-bottom: 20px; } .show { display: block; } .hide { display: none; } #prayer-section button { position: relative; height: 100%; margin-top: 32px; padding: 12px 16px; background-color: var(--color-mustard-extra-light); border: 1px solid var(--color-mustard-light); border-radius: none; transition: all 0.1s ease-out; cursor: pointer; -webkit-appearance: none; -webkit-transform: scale(1); transform: scale(1); } #prayer-section button { margin: 0; color: var(--color-black); } #prayer-section button:active, button:focus { outline: none; } #prayer-section button::after { content: ""; position: absolute; opacity: 1; top: 0; left: 0; bottom: 0; right: 0; transition: inherit; background-position: center; background-repeat: no-repeat; } #prayer-section button:disabled { pointer-events: none; } #prayer-section button:disabled::after { opacity: 0.25; } #prayer-section .button-decrement::after { background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 12H7' stroke='%23112C34' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } #prayer-section .button-increment::after { background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7V17' stroke='%23112C34' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 12H7' stroke='%23112C34' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } #prayer-section .button-decrement { border-right: none; } #prayer-section .button-increment { border-left: none; } @media (hover: hover) { input[type="number"]:hover, #prayer-section button:hover { background-color: white; } #prayer-section button:active { background-color: var(--color-mustard-extra-light); transform: translateY(1px); } } @media (hover: none) { #prayer-section button:active { background-color: white; transform: translateY(1px); } } hours and minutes total 32% 32% of total goal hours and minutes this week 32% 32% of weekly goal Reading minutes tally Book Genesis Exodus Leviticus Numbers Deuteronomy Joshua Judges Ruth 1 Samuel 2 Samuel 1 Kings 2 Kings 1 Chronicles 2 Chronicles Ezra Nehemiah Esther Job Psalms Proverbs Ecclesiastes Song of Solomon Isaiah Jeremiah Lamentations Ezekiel Daniel Hosea Joel Amos Obadiah Jonah Micah Nahum Habakkuk Zephaniah Haggai Zechariah Malachi Matthew Mark Luke John Acts Romans 1 Corinthians 2 Corinthians Galatians Ephesians Philippians Colossians 1 Thessalonians 2 Thessalonians 1 Timothy 2 Timothy Titus Philemon Hebrews James 1 Peter 2 Peter 1 John 2 John 3 John Jude Revelation Add time Reading added successfully! Weekly Reading Hours of the day Days of the week Minutes spent in each book window.onload = init; getTimespans() .then((timespans) = { const [hoursMap, daysMap, weeklyMap, booksMap] = timespans; const endIndex = daysMap.size - 1; const hoursChart = document.getElementById("hoursChart"); const daysChart = document.getElementById("daysChart"); const weekChart = document.getElementById("weekChart"); const bookChart = document.getElementById("bookChart"); const weeklyHoursTally = document.getElementById( "tally-display-week-hours" ); const weeklyMinutesTally = document.getElementById( "tally-display-week-minutes" ); const weeklyTotal = [...weeklyMap.values()].reduce( (prev, current) = prev + current, 0 ); weeklyHoursTally.innerText = Math.floor(weeklyTotal / 60); weeklyMinutesTally.innerText = weeklyTotal % 60; const weeklyProgress = weeklyTotal / WEEKLY_GOAL * 100; const weeklyProgressDisplay = document.getElementById('weekly-progress'); const weeklyProgressPercent = document.getElementById('weekly-progress-percent'); weeklyProgressDisplay.setAttribute('value', weeklyProgress); weeklyProgressPercent.innerHTML = `${weeklyProgress.toFixed()}% `; new Chart(weekChart, { type: "line", data: { labels: [...weeklyMap.keys()], datasets: [ { label: "Minutes in the Word", data: [...weeklyMap.values()], borderWidth: 1, }, ], }, options: { scales: { y: { beginAtZero: true, }, }, }, }); new Chart(hoursChart, { type: "bar", data: { labels: [...hoursMap.keys()], datasets: [ { label: "Minutes in the Word", data: [...hoursMap.values()], borderWidth: 1, }, ], }, options: { scales: { y: { beginAtZero: true, }, }, }, }); new Chart(daysChart, { type: "bar", data: { labels: [...daysMap.keys()], datasets: [ { label: "Minutes in Word", data: [...daysMap.values()], borderWidth: 1, }, ], }, options: { scales: { y: { beginAtZero: true, }, }, }, }); new Chart(bookChart, { type: "pie", data: { labels: [...booksMap.keys()], datasets: [ { label: "Time spent in each book", data: [...booksMap.values()], }, ], }, }); }) .catch((error) = console.log(error));