Add files via upload

Ash182004 · Sep 23, 2024 · 106cdee · 106cdee
commit 106cdee
Show file tree

Hide file tree

Showing 4 changed files with 162 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,17 @@
+# Timer
+# Project Overview
+Developed a versatile Timer/Stopwatch application designed to address real-life needs for precise time management in various contexts, from fitness training to project management.
+
+# Problem Solved
+Provides a reliable solution for users requiring accurate timing and time tracking, whether for exercise routines, productivity tasks, or everyday activities.
+
+# Key Features:
+Multiple Timers: Allows users to set and manage up to 5 simultaneous timers with individual labels and durations, catering to complex scheduling needs.
+Precision Timing: Supports stopwatch functionality with up to 1/100th of a second accuracy, ideal for detailed time measurement.
+Customizable Alerts: Includes configurable alert options with up to 10 different sounds and notifications for timer completion or laps.
+History Tracking: Logs up to 100 previous timer sessions and lap times, enabling users to review and analyze historical data.
+User Interface: Features a clean, intuitive design with support for dark and light modes and compatibility across 3 major operating systems (Windows, macOS, and Linux).
+Technologies Used: Developed using JavaScript, HTML5, and CSS3, with integration of local storage for history tracking and advanced timekeeping libraries for precise measurements.
+
+# Impact
+The Timer/Stopwatch application offers a practical tool for accurate time management and tracking, addressing diverse user needs in both personal and professional contexts, and enhancing overall productivity and efficiency.
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Contdown Timer</title>
+
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body style="background-color: black;">
+    <div class="container">
+      <h1>Remaining Time</h1>
+
+      <div class="counterTimer">
+        <p id="days"><span class="days">00</span> Days</p>
+        <p id="hours"><span class="hours">00</span> Hours</p>
+        <p id="min"><span class="minutes">00</span> Minutes</p>
+        <p id="sec"><span class="seconds">00</span> Seconds</p>
+      </div>
+    </div>
+  </body>
+
+  <script src="script.js"></script>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,58 @@
+const daysElement = document.querySelector(".days");
+const hoursElement = document.querySelector(".hours");
+const minutesElement = document.querySelector(".minutes");
+const secondsElement = document.querySelector(".seconds");
+const heading = document.querySelector("h1");
+const counterTimer = document.querySelector(".counterTimer");
+
+// Converting second,minute,hour,day in miliseconds
+const second = 1000, minute = 60 * second, hour = 60 * minute, day = 24 * hour;
+
+const timerFunction = () => {
+  // Generating current Date in mm/dd/yyyy
+  let now = new Date(),
+    dd = String(now.getDate()).padStart(2, "0"),
+    mm = String(now.getMonth() + 1).padStart(2, "0"),
+    yyyy = now.getFullYear(); // letting year in integer
+    now = `${mm}/${dd}/${yyyy}`;
+
+  // Taking Target Date from User
+  const enteredDay = prompt("Enter Day").padStart(2, "0");
+  const enteredMonth = prompt("Enter Month").padStart(2, "0");
+  let targetDate = `${enteredMonth}/${enteredDay}/${yyyy}`;
+
+  //  Checking if Target date is for next year
+  if (now > targetDate)
+    targetDate = `${enteredMonth}/${enteredDay}/${yyyy + 1}`;
+
+  const intervalId = setInterval(() => {
+    // coverting targetDate in Miliseconds
+    const timer = new Date(targetDate).getTime();
+    // taking current Date in Miliseconds
+    const today = new Date().getTime();
+
+    // Finding Difference target Date and today's date
+    const difference = timer - today;
+
+    // finding left days,hours,minutes,seconds
+    const leftDay = Math.floor(difference / day);
+    const leftHour = Math.floor((difference % day) / hour);
+    const leftMinute = Math.floor((difference % hour) / minute);
+    const leftSecond = Math.floor((difference % minute) / second);
+
+    // Showing Timer in DOM
+    daysElement.innerText = leftDay;
+    hoursElement.innerText = leftHour;
+    minutesElement.innerText = leftMinute;
+    secondsElement.innerText = leftSecond;
+
+    // Stop Set Interval after reaching the target time
+    if (difference < 0) {
+      counterTimer.style.display = "none";
+      heading.innerText = "Time's Up";
+      clearInterval(intervalId);
+    }
+  }, 0);
+};
+
+timerFunction();
diff --git a/style.css b/style.css
@@ -0,0 +1,62 @@
+* {
+    margin: 0%;
+    padding: 0%;
+    color: white;
+    font-family: sans-serif;
+  }
+
+  .container {
+    width: 100%;
+    height: 100vh;
+    background: rgb(89, 27, 198);
+    background-size: 150% 150%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+
+  h1 {
+    text-transform: uppercase;
+    margin-top: -70px;
+    letter-spacing: 5px;
+    font-size: 55px;
+  }
+
+  @media (max-width: 800px) {
+    h1{
+      font-size: 50px;
+      text-align: center;
+    }
+  }
+
+  .counterTimer {
+    display: flex;
+    margin-top: 150px;
+    border:1px solid white;
+    border-radius: 20px;
+    box-shadow: 8px 8px 10px black, -5px -5px 9px grey
+  }
+  .counterTimer > p {
+    font-size: 1.2rem;
+    padding: 1rem;
+    text-align: center;
+    text-transform: uppercase;
+  }
+  .counterTimer > p > span {
+    display: block;
+    font-size: 4rem;
+  }
+  @media screen and (max-width: 434px)  {
+    h1{
+        margin-top: -50px;
+    }
+    .counterTimer{
+        justify-content: center;
+        margin-top: 200px;
+        flex-wrap:wrap;
+        width:250px;
+    }
+  }
+
+