AFJGitHubDev24 · AFJGitHubDev24 · May 21, 2025 · May 21, 2025 · May 21, 2025 · May 21, 2025
diff --git a/ClockJS/digitalclock.js b/ClockJS/digitalclock.js
@@ -0,0 +1,18 @@
+// DIGITAL CLOCK PROGRAM 
+
+function updateClock() {
+
+    const now = new Date();
+    let hours = now.getHours();
+    const meridiem = hours >= 12 ? "PM" : "AM";
+    hours = hours % 12 || 12;
+    hours = hours.toString().padStart(2, 0);
+    const minutes = now.getMinutes().toString().padStart(2, 0);
+    const seconds = now.getSeconds().toString().padStart(2, 0);
+    const timeString = `${hours}:${minutes}:${seconds} ${meridiem}`;
+    document.getElementById("clock").textContent = timeString;
+
+}
+
+updateClock();
+setInterval(updateClock, 1000);
diff --git a/ClockJS/index.html b/ClockJS/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/png" href="/images/code.png">
+    <title>AFJ Coder</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <div id="clock-container">
+        <div id="clock">00:00:00</div>
+    </div>
+
+    <script src="digitalclock.js"></script>
+</body>
+</html>
diff --git a/ClockJS/style.css b/ClockJS/style.css
@@ -0,0 +1,27 @@
+body {
+    background-image: url(images/neon.jpg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-attachment: fixed;
+    margin: 0;
+}
+
+#clock-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+#clock {
+    font-family: monospace;
+    font-size: 6.5rem;
+    font-weight: bold;
+    text-align: center;
+    color: aliceblue;
+    backdrop-filter: blur(50px);
+    background-color: hsla(0, 0%, 50%, 0.1);
+    width: 100%;
+    text-shadow: 3px 3px 5px hsl(0, 0%, 0%);
+}
diff --git a/Now O'Clock/App.jsx b/Now O'Clock/App.jsx
@@ -0,0 +1,13 @@
+import DigitalClock from "./DigitalClock";
+
+function App() {
+
+  return (
+    <>
+      <DigitalClock />
+    </>
+  );
+
+}
+
+export default App
diff --git a/Now O'Clock/DigitalClock.jsx b/Now O'Clock/DigitalClock.jsx
@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from "react";
+
+function DigitalClock() {
+
+    const [time, setTime] = useState(new Date());
+
+    useEffect(() => {
+        document.title = `🕒Now O'Clock`;
+    });
+
+
+    useEffect(() => {
+        const intervalId = setInterval(() => {
+            setTime(new Date());
+        }, 1000);
+
+        return () => {
+            clearInterval(intervalId);
+        }
+    }, []);
+
+    function formatTime() {
+        let hours = time.getHours();
+        const minutes = time.getMinutes();
+        const seconds = time.getSeconds();
+        const meridiem = hours >= 12 ? "PM" : "AM";
+
+        hours = hours % 12 || 12;
+
+        return `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)} ${meridiem}`
+    }
+
+    function padZero(number) {
+        return (number < 10 ? "0" : "") + number;
+    }
+
+    return (
+        <div className="clock-container">
+            <h1 className="title">🕒NOW O'CLOCK🕒</h1>
+            <div className="clock">
+                <span>{formatTime()}</span>
+            </div>
+        </div>
+    );
+
+}
+
+export default DigitalClock;
diff --git a/Now O'Clock/NowO'Clock.mp4 b/Now O'Clock/NowO'Clock.mp4
diff --git a/Now O'Clock/NowO'Clock.png b/Now O'Clock/NowO'Clock.png
diff --git a/Now O'Clock/index.css b/Now O'Clock/index.css
@@ -0,0 +1,33 @@
+body {
+    background-image: url(assets/neonback.jpg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-attachment: fixed;
+    margin: 0;
+
+    /*OPTIONAL*/
+    display: flex;
+    justify-content: center;
+    min-height: 100vh;
+    align-items: center;
+}
+
+.title {
+    color: aquamarine;
+    text-align: center;
+}
+
+.clock-container {
+    backdrop-filter: blur(5px);
+    padding: 10px 0;
+}
+
+.clock {
+    color: silver;
+    font-size: 6rem;
+    font-weight: bold;
+    font-family: monospace;
+    text-align: center;
+    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.75);
+}
diff --git a/Now O'Clock/index.html b/Now O'Clock/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/Now O'Clock/main.jsx b/Now O'Clock/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/Now O'Clock/neonback.jpg b/Now O'Clock/neonback.jpg
diff --git a/timer/Stopwatch.py → Stopwatches/stopwatchPython/stopwatch.py b/timer/Stopwatch.py → Stopwatches/stopwatchPython/stopwatch.py
diff --git a/Stopwatches/stopwatchReact/App.jsx b/Stopwatches/stopwatchReact/App.jsx
@@ -0,0 +1,14 @@
+import StopWatch from "./StopWatch";
+
+function App() {
+
+  return (
+    <>
+      <StopWatch />
+      <StopWatch />
+    </>
+  );
+
+}
+
+export default App
diff --git a/Stopwatches/stopwatchReact/Stopwatch.jsx b/Stopwatches/stopwatchReact/Stopwatch.jsx
@@ -0,0 +1,71 @@
+import React, { useState, useEffect, useRef } from "react";
+
+function StopWatch() {
+
+    const [isRunning, setIsRunning] = useState(false);
+    const [elapsedTime, setElapsedTime] = useState(0);
+    const intervalIdRef = useRef(null);
+    const startTimeRef = useRef(0);
+
+    useEffect(() => {
+        document.title = `⏱️Stopwatch Counter`;
+    });
+
+    useEffect(() => {
+
+        if (isRunning) {
+            intervalIdRef.current = setInterval(() => {
+                setElapsedTime(Date.now() - startTimeRef.current);
+            }, 10);
+        }
+
+        return () => {
+            clearInterval(intervalIdRef.current);
+        }
+
+    }, [isRunning]);
+
+    function start() {
+        setIsRunning(true);
+        startTimeRef.current = Date.now() - elapsedTime;
+    }
+
+    function stop() {
+        setIsRunning(false);
+    }
+
+    function reset() {
+        setElapsedTime(0);
+        setIsRunning(false);
+    }
+
+    function formatTime() {
+        let hours = Math.floor(elapsedTime / (1000 * 60 * 60));
+        let minutes = Math.floor(elapsedTime / (1000 * 60) % 60);
+        let seconds = Math.floor(elapsedTime / (1000) % 60);
+        let milliseconds = Math.floor((elapsedTime % 1000) / 10);
+
+        hours = String(hours).padStart(2, "0");
+        minutes = String(minutes).padStart(2, "0");
+        seconds = String(seconds).padStart(2, "0");
+        milliseconds = String(milliseconds).padStart(2, "0");
+
+
+        return `${hours}:${minutes}:${seconds}.${milliseconds}`;
+    }
+
+    return (
+        <div className="stopwatch">
+            <h2 className="title">⏱️STOPWATCH⏱️</h2>
+            <div className="display">{formatTime()}</div>
+            <div className="controls">
+                <button onClick={start} className="start-button">Start</button>
+                <button onClick={reset} className="reset-button">Reset</button>
+                <button onClick={stop} className="stop-button">Stop</button>
+            </div>
+        </div>
+    );
+
+}
+
+export default StopWatch;
diff --git a/Stopwatches/stopwatchReact/Stopwatch.mp4 b/Stopwatches/stopwatchReact/Stopwatch.mp4
@@ -0,0 +1 @@
+
diff --git a/Stopwatches/stopwatchReact/index.css b/Stopwatches/stopwatchReact/index.css
@@ -0,0 +1,68 @@
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: beige;
+}
+
+.title {
+    font-size: 2rem;
+    color: hsl(180, 72%, 33%);
+    font-weight: bold;
+}
+
+.stopwatch {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border: 5px solid;
+    border-radius: 50px;
+    background-color: floralwhite;
+    padding: 30px;
+}
+
+.display {
+    font-size: 5rem;
+    font-family: monospace;
+    font-weight: bold;
+    color: hsl(0, 0%, 30%);
+    text-shadow: 2px 2px 2px hsla(0, 0%, 0%, 0.75);
+    margin-bottom: 25px;
+}
+
+.controls button {
+    font-size: 1.5rem;
+    font-weight: bold;
+    padding: 10px 20px;
+    margin: 5px;
+    min-width: 125px;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    color: white;
+    transition: background-color 0.5s ease;
+}
+
+.start-button {
+    background-color: hsl(120, 54%, 49%);
+}
+
+.start-button:hover {
+    background-color: hsl(120, 54%, 44%);
+}
+
+.stop-button {
+    background-color: hsl(0, 75%, 50%);
+}
+
+.stop-button:hover {
+    background-color: hsl(0, 75%, 45%);
+}
+
+.reset-button {
+    background-color: hsl(196, 86%, 53%);
+}
+
+.reset-button:hover {
+    background-color: hsl(196, 86%, 48%);
+}
diff --git a/Stopwatches/stopwatchReact/index.html b/Stopwatches/stopwatchReact/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/Stopwatches/stopwatchReact/main.jsx b/Stopwatches/stopwatchReact/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/Stopwatches/stopwatchjs/index.html b/Stopwatches/stopwatchjs/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/png" href="/images/code.png">
+    <title>AFJ Coder</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1 id="myH1">⏱️Stopwatch⏱️</h1>
+
+    <div id="container">
+        <div id="display">
+            00:00:00:00
+        </div>
+
+        <div id="controls">
+            <button id="stopBtn" onclick="stop()">Stop</button>
+            <button id="resetBtn" onclick="reset()">Reset</button>
+            <button id="startBtn" onclick="start()">Start</button>
+        </div>
+    </div>
+
+    <script src="stopwatch.js"></script>
+</body>
+</html>