Challenge 29/30JS Countdown Clock

archeana · Feb 5, 2024 · c1d629b · c1d629b
1 parent cc99b21
commit c1d629b
Show file tree

Hide file tree

Showing 4 changed files with 238 additions and 0 deletions.
diff --git a/Day_29/index.html b/Day_29/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Countdown Timer</title>
+    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="navigation">
+        <a class="card previous-card" href="https://archeana.github.io/JS30/Day_28/index.html"
+            onclick="goToPreviousProject()">
+            <span>Previous</span>
+        </a>
+        <a class="card home-card" href="https://archeana.github.io/JS30/" onclick="goToHomepage()">
+            <span>Home</span>
+        </a>
+        <a class="card next-card" href="#" onclick="goToNextProject()">
+            <span>Next</span>
+        </a>
+    </div>
+    <br>
+    <div class="timer">
+        <div class="timer__controls">
+            <button data-time="900" class="timer__button">Coffee Break ☕</button>
+            <button data-time="1500" class="timer__button">🍅 technique</button>
+            <button data-time="1800" class="timer__button">Course time</button>
+            <button data-time="2700" class="timer__button">Work</button>
+            <button data-time="3600" class="timer__button">Lunch Break</button>
+            <button data-time="1200" class="timer__button">Exercise</button>
+            <form name="customForm" id="custom">
+                <input type="text" name="minutes" placeholder="Enter Minutes">
+            </form>
+        </div>
+        <div class="display">
+            <h1 class="display__time-left"></h1>
+            <p class="display__end-time"></p>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Day_29/ruben-ramirez-xhKG01FN2uk-unsplash (1).jpg b/Day_29/ruben-ramirez-xhKG01FN2uk-unsplash (1).jpg
diff --git a/Day_29/script.js 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
@@ -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%;
+}