diff --git a/Day_29/index.html b/Day_29/index.html new file mode 100644 index 0000000..a199d65 --- /dev/null +++ b/Day_29/index.html @@ -0,0 +1,46 @@ + + + + + + Countdown Timer + + + + + +
+ + Previous + + + Home + + + Next + +
+
+
+
+ + + + + + +
+ +
+
+
+

+

+
+
+ + + + + \ No newline at end of file diff --git a/Day_29/ruben-ramirez-xhKG01FN2uk-unsplash (1).jpg b/Day_29/ruben-ramirez-xhKG01FN2uk-unsplash (1).jpg new file mode 100644 index 0000000..ace1cef Binary files /dev/null and b/Day_29/ruben-ramirez-xhKG01FN2uk-unsplash (1).jpg differ diff --git a/Day_29/script.js b/Day_29/script.js new file mode 100644 index 0000000..3cf0a31 --- /dev/null +++ b/Day_29/script.js @@ -0,0 +1,56 @@ +let countdown; +const timerDisplay = document.querySelector('.display__time-left'); +const endTime = document.querySelector('.display__end-time'); +const buttons = document.querySelectorAll('[data-time]'); + +function timer(seconds) { + // clear any existing timers + clearInterval(countdown); + + const now = Date.now(); + const then = now + seconds * 1000; + displayTimeLeft(seconds); + displayEndTime(then); + + countdown = setInterval(() => { + const secondsLeft = Math.round((then - Date.now()) / 1000); + // check if we should stop it! + if (secondsLeft < 0) { + clearInterval(countdown); + return; + } + // display it + displayTimeLeft(secondsLeft); + }, 1000); +} + +function displayTimeLeft(seconds) { + const minutes = Math.floor(seconds / 60); + const remainderSeconds = seconds % 60; + const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`; + document.title = display; + timerDisplay.textContent = display; +} + +function displayEndTime(timestamp) { + const end = new Date(timestamp); + const hour = end.getHours(); + const adjustedHour = hour > 12 ? hour - 12 : hour; + const minutes = end.getMinutes(); + endTime.textContent = `Be Back At ${adjustedHour}:${minutes < 10 ? '0' : ''}${minutes}`; +} + +function startTimer() { + const seconds = parseInt(this.dataset.time); + timer(seconds); +} + +buttons.forEach(button => button.addEventListener('click', startTimer)); +document.customForm.addEventListener('submit', function (e) { + e.preventDefault(); + const mins = this.minutes.value; + console.log(mins); + timer(mins * 60); + this.reset(); +}); + diff --git a/Day_29/style.css b/Day_29/style.css new file mode 100644 index 0000000..fc00d08 --- /dev/null +++ b/Day_29/style.css @@ -0,0 +1,136 @@ +html { + box-sizing: border-box; + font-size: 16px; + /* opacity: 0.7; */ + background: url(/Day_29/ruben-ramirez-xhKG01FN2uk-unsplash\ \(1\).jpg) no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + z-index: -1; /* Place the pseudo-element behind other content */ + opacity: 0.9; /* Adjust the opacity as needed */ +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +body { + margin: 0; + text-align: center; + font-family:Georgia, 'Times New Roman', Times, serif; + position: relative; /* Ensure the ::before pseudo-element is positioned relative to the body */ + +} + +.navigation { + position: fixed; + top: 20px; + left: 50%; + transform: translateX(-50%); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; +} + +.card-back { + left: auto; +} + +.card { + width: 100px; + height: 50px; + margin: 5px; + font-size: 20px; + background-color: #A2748B; + color: #ffffff; + border: none; + border-radius: 5px; + cursor: pointer; + overflow: hidden; + transition: 1s ease; + text-align: center; + align-items: center; + justify-content: space-between; + line-height: 16px; + display: flex; + justify-content: center; + position: relative; +} + +.display__time-left { + font-weight: 100; + font-size: 20rem; + margin: 0; + color: white; + text-shadow: 4px 4px 0 rgba(23, 12, 81, 0.05); +} + +.timer { + display: flex; + min-height: 100vh; + flex-direction: column; + margin-top: 5%; +} + +.timer__controls { + display: flex; +} + +.timer__controls>* { + flex: 1; +} + +.timer__controls form { + flex: 1; + display: flex; + margin: 2%; +} + +.timer__controls input { + flex: 1; + border: 0; + padding: 2rem; +} + +.timer__button { + background: none; + border: 0; + border-radius: 15px; + cursor: pointer; + color: Black; + font-size: 2rem; + text-transform: uppercase; + background: rgba(239, 134, 239, 0.9); + border-bottom: 3px solid rgba(221, 232, 150); + border-right: 1px solid rgba(221, 232, 150); + padding: 1rem; + font-family:Georgia, 'Times New Roman', Times, serif; + margin: 2%; + justify-content: space-between; +} + +.timer__button:hover, +.timer__button:focus { + background: rgba(245, 165, 228); + outline: 0; +} + +.display { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.display__end-time { + font-size: 5rem; + color: black; + font-weight: bolder; + background-color: wheat; + padding: 1%; +} \ No newline at end of file