Merge pull request abhishek213-alb#11 from iamakhileshmishra/main

Custom Time Input From User Added For the Countdown
Abhishek3223 · Oct 3, 2022 · 9685ccb · 9685ccb
2 parents bf369ec + b75b531
commit 9685ccb
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -9,12 +9,18 @@
  </head>
 
  <body>
+
  <div class="heading-title">
  <div class="outline"></div>
  <div class="circle"></div>
- <h1>NEET 2022</h1>
+ <h1>CountDown Setter</h1>
+ </div>
+ <div class="take-date">
+ <form>
+ <label class="Countdown-date" for="countdown">Choose Date : </label>
+ <input class="Countdown-date" id="date-c" type="date">
+ </form>
  </div>
-
  <div id="countdown">
  <div id="tiles"></div>
  <div class="labels">

diff --git a/script.js b/script.js
@@ -1,32 +1,51 @@
-var target_date = new Date("2022-03-25"); 
-var days, hours, minutes, seconds; 
-
-var countdown = document.getElementById("tiles"); 
+var input_date = document.getElementById("date-c");
+var target_date = new Date("0000-00-00");
+var newCountdown = input_date.addEventListener("change", function () {
+ var input = this.value;
+ target_date = new Date(input);
+ var curr = new Date().getTime();
+ if (target_date < curr) {
+ alert("Date is from past and i am unble to to time travel.");
+ console.log("This is Chutiyapa");
+ target_date = curr;
+ }
+});
+var days, hours, minutes, seconds;
+
+var countdown = document.getElementById("tiles");
 
 getCountdown();
 
-setInterval(function () { getCountdown(); }, 1000);
+setInterval(function () {
+ getCountdown();
+}, 1000);
 
 function getCountdown() {
-
- var current_date = new Date().getTime();
- var seconds_left = (target_date - current_date) / 1000;
-
- days = pad(parseInt(seconds_left / 86400));
- seconds_left = seconds_left % 86400;
-
- hours = pad(parseInt(seconds_left / 3600));
- seconds_left = seconds_left % 3600;
-
- minutes = pad(parseInt(seconds_left / 60));
- seconds = pad(parseInt(seconds_left % 60));
-
- // format countdown string + set tag value
- countdown.innerHTML = "<span>" + days + "</span><span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>";
+ var current_date = new Date().getTime();
+ var seconds_left = (target_date - current_date) / 1000;
+
+ days = pad(parseInt(seconds_left / 86400));
+ seconds_left = seconds_left % 86400;
+
+ hours = pad(parseInt(seconds_left / 3600));
+ seconds_left = seconds_left % 3600;
+
+ minutes = pad(parseInt(seconds_left / 60));
+ seconds = pad(parseInt(seconds_left % 60));
+
+ // format countdown string + set tag value
+ countdown.innerHTML =
+ "<span>" +
+ days +
+ "</span><span>" +
+ hours +
+ "</span><span>" +
+ minutes +
+ "</span><span>" +
+ seconds +
+ "</span>";
 }
 
 function pad(n) {
-  return (n < 10 ? '0' : '') + n;
+ return (n < 10 ? "0" : "") + n;
 }
-
-
diff --git a/style.css b/style.css
@@ -13,6 +13,18 @@ h1 {
  color: #f47321;
  text-shadow: 2px 2px #ff0000;
 }
+.take-date{
+ text-align: center;
+ color: #f47321;
+ /* text-shadow: 2px 2px #ff0000; */
+ /* font-size: 20px; */
+}
+.Countdown-date{
+ font-size: 20px;
+}
+.submit-btn{
+ margin-top: 15px;
+}
 .heading-title{
  text-align: center;
 }