Merge pull request #193 from Avdhesh-Varshney/timeWatcher

[KWOC] Time Watcher Project Done
shrey141102 · Jan 4, 2024 · ac5eaed · ac5eaed
2 parents 72de734 + 3b6ecbb
commit ac5eaed
Show file tree

Hide file tree

Showing 5 changed files with 333 additions and 1 deletion.
diff --git a/TimeWatcher/README.md b/TimeWatcher/README.md
@@ -0,0 +1,27 @@
+# TIME WATCHER
+
+- This a simple project where i created a time watcher website using only html, css and js, which can shows the time from the entered date to the currect in the milli-seconds precise order.
+
+--- 
+
+## **Tech Stack 🎮**
+
+- HTML
+- CSS
+- JS
+
+<br>
+
+## **Screenshots 📸**
+
+![image](https://github.com/shrey141102/Javascript-projects/assets/114330097/f86f3485-cd24-445c-b1a9-11fa9c0fb58e)
+
+<br>
+
+## **Created By 👦**
+
+[Avdhesh Varshney](https://github.com/Avdhesh-Varshney)
+
+<br>
+
+### **Happy Coding 🎉**
diff --git a/TimeWatcher/index.html b/TimeWatcher/index.html
@@ -0,0 +1,100 @@
+<!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">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
+        crossorigin="anonymous"></script>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+
+    <link rel="shortcut icon"
+        href="https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/2f48bdc6-b011-4bed-8cbb-e0e44c8aea33"
+        type="image/x-icon">
+    <title>Time Watcher</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+    <!-- Input page of Time Watcher Application -->
+    <div class="container box-1">
+        <h1 class="heading">TIME WATCHER</h1>
+
+        <form id="birthDetailsForm">
+            <label for="birthYear">Year of Birth:</label>
+            <input type="number" id="birthYear" required>
+            <span id="errorBirthYear" class="error-message"></span>
+
+            <label for="birthMonth">Month of Birth:</label>
+            <input type="number" id="birthMonth" required>
+            <span id="errorBirthMonth" class="error-message"></span>
+
+            <label for="birthDay">Day of Birth:</label>
+            <input type="number" id="birthDay" required>
+            <span id="errorBirthDay" class="error-message"></span>
+
+            <label for="birthHours">Hours of Birth:</label>
+            <input type="number" id="birthHours" required>
+            <span id="errorBirthHours" class="error-message"></span>
+
+            <label for="birthMinutes">Minutes of Birth:</label>
+            <input type="number" id="birthMinutes" required>
+            <span id="errorBirthMinutes" class="error-message"></span>
+
+            <label for="birthSeconds">Seconds of Birth:</label>
+            <input type="number" id="birthSeconds" required>
+            <span id="errorBirthSeconds" class="error-message"></span>
+
+            <label for="birthMilliSeconds">Milli-Seconds of Birth:</label>
+            <input type="number" id="birthMilliSeconds" required>
+            <span id="errorBirthMilliSeconds" class="error-message"></span>
+        </form>
+
+        <button type="button" onclick="submitBirthDetails()">Submit</button>
+    </div>
+
+    <!-- Main Time Watcher Application Page -->
+    <div class="container box-2" style="display: none;">
+        <h1 id="heading">TIME WATCHER</h1>
+
+        <div class="table">
+            <div class="row times">
+                <div class="col time">
+                    <h1 id="years"></h1>
+                    <h2 class="name">YEARS</h2>
+                </div>
+                <div class="col time">
+                    <h1 id="months"></h1>
+                    <h2 class="name">MONTHS</h2>
+                </div>
+                <div class="col time">
+                    <h1 id="days"></h1>
+                    <h2 class="name">DAYS</h2>
+                </div>
+                <div class="col time">
+                    <h1 id="hours"></h1>
+                    <h2 class="name">HOURS</h2>
+                </div>
+                <div class="col time">
+                    <h1 id="minutes"></h1>
+                    <h2 class="name">MINUTES</h2>
+                </div>
+                <div class="col time">
+                    <h1 id="seconds"></h1>
+                    <h2 class="name">SECONDS</h2>
+                </div>
+                <div class="col time">
+                    <h1 id="milliseconds"></h1>
+                    <h2 class="name">MILLI-SECONDS</h2>
+                </div>
+            </div>
+        </div>
+
+    </div>
+    <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/TimeWatcher/script.js b/TimeWatcher/script.js
@@ -0,0 +1,100 @@
+// Function to clear error messages
+function clearErrorMessages() {
+    const errorElements = document.getElementsByClassName("error-message");
+    for (const errorElement of errorElements) {
+        errorElement.textContent = "";
+    }
+}
+
+// Function to display error messages
+function displayErrorMessage(elementId, message) {
+    const errorElement = document.getElementById(elementId);
+    errorElement.textContent = message;
+    errorElement.style.color = "red";
+}
+
+// Function to validate input fields
+function validateInputs(birthYear, birthMonth, birthDay, birthHours, birthMinutes, birthSeconds, birthMilliSeconds) {
+    let isValid = true;
+    if (birthYear < 1900 || birthYear > new Date().getFullYear()) {
+        displayErrorMessage("errorBirthYear", "Please enter a valid year between 1900 and " + new Date().getFullYear() + ".");
+        isValid = false;
+    } else if (birthMonth < 1 || birthMonth > 12) {
+        displayErrorMessage("errorBirthMonth", "Please enter a valid month between 1 and 12.");
+        isValid = false;
+    } else if (birthDay < 1 || birthDay > 31) {
+        displayErrorMessage("errorBirthDay", "Please enter a valid day between 1 and 31.");
+        isValid = false;
+    } else if (birthHours < 0 || birthHours > 23) {
+        displayErrorMessage("errorBirthHours", "Please enter a valid hour between 0 and 23.");
+        isValid = false;
+    } else if (birthMinutes < 0 || birthMinutes > 59) {
+        displayErrorMessage("errorBirthMinutes", "Please enter a valid minute between 0 and 59.");
+        isValid = false;
+    } else if (birthSeconds < 0 || birthSeconds > 59) {
+        displayErrorMessage("errorBirthSeconds", "Please enter a valid second between 0 and 59.");
+        isValid = false;
+    } else if (birthMilliSeconds < 0 || birthMilliSeconds > 999) {
+        displayErrorMessage("errorBirthMilliSeconds", "Please enter a valid millisecond between 0 and 999.");
+        isValid = false;
+    }
+    return isValid;
+}
+
+// Function to update time regularly in every 100ms
+function updateTime(birthTime) {
+    let currentTime = new Date();
+    let timeDifference = currentTime - birthTime;
+    setInterval(() => {
+        document.getElementById('milliseconds').textContent = parseInt(timeDifference % 1000);
+        timeDifference = parseInt(timeDifference / 1000);
+
+        document.getElementById('seconds').textContent = parseInt(timeDifference % 60);
+        timeDifference = parseInt(timeDifference / 60);
+
+        document.getElementById('minutes').textContent = parseInt(timeDifference % 60);
+        timeDifference = parseInt(timeDifference / 60);
+
+        document.getElementById('hours').textContent = parseInt(timeDifference % 24);
+        timeDifference = parseInt(timeDifference / 24);
+
+        document.getElementById('days').textContent = parseInt(timeDifference % 30.416);
+        timeDifference = parseInt(timeDifference / 30.416);
+
+        document.getElementById('months').textContent = parseInt(timeDifference % 12);
+        document.getElementById('years').textContent = parseInt(timeDifference / 12);
+
+        currentTime = new Date();
+        timeDifference = currentTime - birthTime;
+    }, 100);
+}
+
+// Function to be called when the submit button is clicked
+function submitBirthDetails() {
+    clearErrorMessages();
+
+    let birthYear = parseInt(document.getElementById("birthYear").value);
+    let birthMonth = parseInt(document.getElementById("birthMonth").value);
+    let birthDay = parseInt(document.getElementById("birthDay").value);
+    let birthHours = parseInt(document.getElementById("birthHours").value);
+    let birthMinutes = parseInt(document.getElementById("birthMinutes").value);
+    let birthSeconds = parseInt(document.getElementById("birthSeconds").value);
+    let birthMilliSeconds = parseInt(document.getElementById("birthMilliSeconds").value);
+
+    if(birthYear && birthMonth && birthDay && birthHours && birthMinutes && birthSeconds && birthMilliSeconds) {
+        if (validateInputs(birthYear, birthMonth, birthDay, birthHours, birthMinutes, birthSeconds, birthMilliSeconds)) {
+            let birthTime = new Date(birthYear, birthMonth - 1, birthDay, birthHours, birthMinutes, birthSeconds, birthMilliSeconds);
+            updateTime(birthTime);
+
+            // Hide box-1 and show box-2
+            document.querySelector('.box-1').style.display = 'none';
+            document.querySelector('.box-2').style.display = 'flex';
+        }
+    } else {
+        const errorElements = document.getElementsByClassName("error-message");
+        for (const errorElement of errorElements) {
+            errorElement.style.color = 'salmon';
+            errorElement.textContent = "Fill the empty entries!";
+        }
+    }
+}
diff --git a/TimeWatcher/style.css b/TimeWatcher/style.css
@@ -0,0 +1,100 @@
+@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');
+* {
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    box-sizing: border-box;
+    user-select: none;
+    transition: all 0.8s;
+}
+body {
+    background-color: #000;
+    color: #fff;
+    font-family: 'Fredericka the Great', cursive;
+}
+
+.container {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+#heading {
+    font-size: 1.8rem;
+    text-decoration: underline;
+    letter-spacing: 12px;
+    width: 100%;
+}
+
+form {
+    font-size: 1.2rem;
+    margin: 2rem 0;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 15px;
+}
+
+form .form-group {
+    margin-bottom: 15px;
+}
+
+form .form-group label {
+    display: block;
+    margin-bottom: 10px;
+}
+
+input {
+    margin-bottom: 10px;
+    padding: 5px;
+    font-size: 1rem;
+}
+
+.error-message {
+    font-size: 1.2rem;
+}
+
+button {
+    background-color: #007bff;
+    color: #fff;
+    padding: 10px 20px;
+    font-size: 1.2rem;
+    cursor: pointer;
+    border: none;
+}
+
+.table {
+    color: #fff;
+    width: 100%;
+}
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    justify-content: space-around;
+}
+
+.col {
+    flex: 1 1 48%;
+    margin: 1%;
+}
+
+@media (min-width: 600px) {
+    #heading {
+        font-size: 2.5rem;
+        margin-bottom: 1rem;
+    }
+    .col {
+        flex: 1 1 31%;
+        margin: 1%;
+    }
+}
+
+@media (min-width: 768px) {
+    #heading {
+        font-size: 3rem;
+        margin-bottom: 1.5rem;
+    }
+}
diff --git a/script.js b/script.js
@@ -349,7 +349,12 @@ const projects = [
     link: "Magic-8-ball/index.html", 
     image: "https://www.adweek.com/wp-content/uploads/files/magic-8-hed-2015.jpg" 
   },
-    { title: "Flappy bird clone",
+  { title: "Time Watcher",
+    discription: "This a simple project where i created a time watcher website using only html, css and js, which can shows the time from the entered date to the currect in the milli-seconds precise order.", 
+    link: "TimeWatcher/index.html", 
+    image: "https://github.com/shrey141102/Javascript-projects/assets/114330097/f86f3485-cd24-445c-b1a9-11fa9c0fb58e" 
+  },
+  { title: "Flappy bird clone",
     discription: "This is a simple implementation of the classic Flappy Bird game using HTML, CSS, and JavaScript. The game features a bird that the player controls by pressing the spacebar or the up arrow key to avoid pipes and earn points.", 
     link: "Flappy-bird/index.html", 
     image: "https://imageio.forbes.com/blogs-images/ccuster/files/2014/02/flappybird.jpg?height=400&width=711&fit=bounds"