From 161378134cde83fbe65c177b9b1b694d56218eaa Mon Sep 17 00:00:00 2001 From: coder-mohan Date: Sun, 2 Oct 2022 15:10:13 +0530 Subject: [PATCH] countdown timer added --- Count-Down-timer/index.html | 38 ++++++++ Count-Down-timer/script.js | 65 +++++++++++++ Count-Down-timer/style.css | 176 ++++++++++++++++++++++++++++++++++++ 3 files changed, 279 insertions(+) create mode 100644 Count-Down-timer/index.html create mode 100644 Count-Down-timer/script.js create mode 100644 Count-Down-timer/style.css diff --git a/Count-Down-timer/index.html b/Count-Down-timer/index.html new file mode 100644 index 00000000..d23ea4e0 --- /dev/null +++ b/Count-Down-timer/index.html @@ -0,0 +1,38 @@ + + + + + + + + + CountDown Timer + + +

CountDown Timer Start Your CountDown

+ + + + + + + +

+ + + + + \ No newline at end of file diff --git a/Count-Down-timer/script.js b/Count-Down-timer/script.js new file mode 100644 index 00000000..5890a7b0 --- /dev/null +++ b/Count-Down-timer/script.js @@ -0,0 +1,65 @@ +//clock countdown + +const timerDisplay = document.querySelector(".display__time-left"); //select the 'h1' tag where we would populate time remaining +const endTime = document.querySelector(".display__end-time"); //select 'p' tag +const buttons = document.querySelectorAll("[data-time]"); //fetch everythinf from document which contains [data-time] i.e fetch buttons + +let countdown; + +function timer(seconds) { + clearInterval(countdown); //clear any existing timers // incase if we click different buttons at same time //existing timers should be cancelled + + const now = Date.now(); //Date.now() gets us current time in miliseconds + const then = now + seconds * 1000; //its the time which is scheduled // i.e current time + seconds = scheduled time //(i.e 1:10 + 1min = 1:11 time) //( * 1000 to get everything in milisecs) + displayTimeLeft(seconds); //call 'how much time is left' func //pass the seconds to it + displayEndTime(then); //call 'end' func //pass the scheduled time to it //to display end time + + //set a interval for every 1 sec (so time get updated every 1 sec) + countdown = setInterval(() => { + const secondsLeft = Math.round((then - Date.now()) / 1000); //get no. of secs left //(divide by 1000 to get seconds in milisecs) + //check if we should stop it (if secs < 0 i.e time is over , stop interval) + if (secondsLeft < 0) { + clearInterval(countdown); + return; + } + displayTimeLeft(secondsLeft); //display time left after every 1 sec + }, 1000); +} + +//function to show how much secs are remaining +function displayTimeLeft(seconds) { + const minutes = Math.floor(seconds / 60); //get mins (i.e if 350 secs => then 5 mins and) + const remainderSeconds = seconds % 60; //get remaining Seconds + const display = `${minutes}:${ + remainderSeconds < 10 ? "0" : "" + }${remainderSeconds}`; //if remainderSecs less 10 then append a zero else '' (nothing) //i.e 3:07, 4:01... + timerDisplay.textContent = display; //populate in DOM and doc's title + document.title = display; +} + +//func to show scheduled time +function displayEndTime(timestamp) { + const end = new Date(timestamp); //pass time i.e timestamp in milisecs (in timer func) //convert those milisecs into a proper date + const hour = end.getHours(); //extract hours from the date + const adjustedHour = hour > 12 ? hour - 12 : hour; //to set time in Indian Format //if hour greater than 12 then minus by 12 else only hour + const minutes = end.getMinutes(); //extract mins from the date + endTime.textContent = `Be Back At ${adjustedHour}:${ + minutes < 10 ? "0" : "" + }${minutes}`; //populate in DOM +} + +//call func on button click +function startTimer() { + const seconds = parseInt(this.dataset.time); //get the buttons data time i.e 20 secs, 5 min ,15 min.....etc + timer(seconds); //call the func on button Click and pass the button's data as seconds in the func +} + +buttons.forEach(button => button.addEventListener("click", startTimer)); //for every button click, call startTimer + +//new syntax //get the whole form by form's name (i.e document.customForm) +document.customForm.addEventListener("submit", function (e) { + e.preventDefault(); + const mins = this.minutes.value; //on submit of form , extract the the input's value from input's name i.e(minutes) + timer(mins * 60); //convert those mins into milisecs and pass it to timer func + this.reset(); //reset form +}); diff --git a/Count-Down-timer/style.css b/Count-Down-timer/style.css new file mode 100644 index 00000000..72150426 --- /dev/null +++ b/Count-Down-timer/style.css @@ -0,0 +1,176 @@ +@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&display=swap"); + +/* === BASE HEADING === */ + +h1 { + position: relative; + padding: 0; + margin: 0; + font-family: "Raleway", sans-serif; + font-weight: 300; + font-size: 40px; + color: #080808; + -webkit-transition: all 0.4s ease 0s; + -o-transition: all 0.4s ease 0s; + transition: all 0.4s ease 0s; +} + +h1 span { + display: block; + font-size: 0.5em; + line-height: 1.3; +} +h1 em { + font-style: normal; + font-weight: 600; +} + +.nine h1 { + text-align: center; + font-size: 50px; + text-transform: uppercase; + color: rgb(17, 248, 221); + letter-spacing: 1px; + font-family: "Playfair Display", serif; + font-weight: 400; +} +.nine h1 span { + margin-top: 5px; + font-size: 15px; + color: rgb(178, 168, 168); + word-spacing: 1px; + font-weight: normal; + letter-spacing: 2px; + text-transform: uppercase; + font-family: "Raleway", sans-serif; + font-weight: 500; + + display: grid; + grid-template-columns: 1fr max-content 1fr; + grid-template-rows: 27px 0; + grid-gap: 20px; + align-items: center; +} + +.nine h1 span:after, +.nine h1 span:before { + content: " "; + display: block; + border-bottom: 1px solid #ccc; + border-top: 1px solid #ccc; + height: 5px; + background-color: #f8f8f8; +} + +html { + box-sizing: border-box; + font-size: 10px; + background: #8e24aa; + background: linear-gradient(45deg, #232d34 0%, #2b3034 50%, #10284c 100%); +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +body { + margin: 0; + text-align: center; + font-family: "Inconsolata", monospace; +} + +.display__time-left { + font-weight: 100; + font-size: 20rem; + margin: 0; + color: white; + text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.05); +} + +.timer { + display: flex; + min-height: 100vh; + flex-direction: column; +} + +.timer__controls { + display: flex; +} + +.timer__controls > * { + flex: 1; +} + +.timer__controls form { + flex: 1; + display: flex; +} + +.timer__controls input { + flex: 1; + border: 10; + padding: 2rem; + margin-top: 50px; +} + +.timer__button { + margin-top: 50px; + background: none; + border: 10; + cursor: pointer; + color: white; + font-size: 2rem; + border-radius: 20px; + text-transform: uppercase; + background: rgba(27, 232, 255, 0.1); + border-bottom: 3px solid rgba(0, 0, 0, 0.2); + border-right: 1px solid rgba(0, 0, 0, 0.2); + padding: 1rem; + font-family: "Inconsolata", monospace; +} + +.timer__button:hover, +.timer__button:focus { + background: rgba(0, 0, 0, 0.2); + outline: 0; +} + +.display { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.display__end-time { + font-size: 4rem; + color: white; +} +section, +footer { + font-size: 20px; + background: #1a1e25; + color: #868c96; + margin-bottom: 50px; +} + +footer p { + padding: 40px 0; + text-align: center; +} + +footer img { + width: 44px; +} + +@media only screen and (max-width: 600px) { + .timer__controls { + flex-wrap: wrap; + } + .display__time-left { + font-size: 13rem; + } +}