Merge pull request #48 from jeff-damahar/main

Analog Clock
shrey141102 · Oct 4, 2023 · ca7ecff · ca7ecff
2 parents 14b980e + 251f407
commit ca7ecff
Show file tree

Hide file tree

Showing 5 changed files with 223 additions and 0 deletions.
diff --git a/Analog Clock/README.md b/Analog Clock/README.md
@@ -0,0 +1,29 @@
+# Music Player
+
+A simple Analig Clock with dark and light mode.
+
+## Instruction
+
+1. **CLOCK**: It shows the current time in a beautifull analog clock interface.
+
+2. **Dark Mode**: By pressing the button on the bottom you can switch between light and dark mode.
+
+## Technologies Used
+
+This project was built using HTML, CSS, and JavaScript.
+
+## Installation
+
+You don't need to install anything to use this BMI. Just open the HTML file in your web browser, and you're good to go!
+
+## Getting Started
+
+1. Download index.html, style.css and script.js.
+2. Open the "index.html" file in your web browser.
+3. Start watching time.
+
+## Contributions
+
+- 1. [[jeff-damahar](https://github.com/jeff-damahar)]
+If you'd like to contribute to this todo project or suggest improvements, please feel free to open an issue or create a pull request on the GitHub repository.
+
diff --git a/Analog Clock/index.html b/Analog Clock/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./styles.css">
+</head>
+
+<body>
+    <div class="page-header"> </div>
+    <div class="clock">
+        <div class="hour"></div>
+        <div class="min"></div>
+        <div class="sec"></div>
+    </div>
+    <div class="switch-cont">
+        <button class="switch-btn"> Light </button>
+    </div>
+    <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/Analog Clock/script.js b/Analog Clock/script.js
@@ -0,0 +1,40 @@
+
+const deg = 6;
+const hour = document.querySelector(".hour");
+const min = document.querySelector(".min");
+const sec = document.querySelector(".sec");
+
+const setClock = () => {
+    let day = new Date();
+    let hh = day.getHours() * 30;
+    let mm = day.getMinutes() * deg;
+    let ss = day.getSeconds() * deg;
+
+    hour.style.transform = `rotateZ(${hh + mm / 12}deg)`;
+    min.style.transform = `rotateZ(${mm}deg)`;
+    sec.style.transform = `rotateZ(${ss}deg)`;
+};
+
+setClock();
+setInterval(setClock, 1000);
+
+const switchTheme = (evt) => {
+    const switchBtn = evt.target;
+    if (switchBtn.textContent.toLowerCase() === "light") {
+        switchBtn.textContent = "dark";
+        document.documentElement.setAttribute("data-theme", "dark");
+    } else {
+        switchBtn.textContent = "light";
+        document.documentElement.setAttribute("data-theme", "light");
+    }
+};
+
+const switchModeBtn = document.querySelector(".switch-btn");
+switchModeBtn.addEventListener("click", switchTheme, false);
+
+let currentTheme = "dark";
+
+if (currentTheme) {
+    document.documentElement.setAttribute("data-theme", currentTheme);
+    switchModeBtn.textContent = currentTheme;
+}
diff --git a/Analog Clock/styles.css b/Analog Clock/styles.css
@@ -0,0 +1,124 @@
+:root {
+	--main-bg-color: #fff;
+	--main-text-color: #888888;
+}
+
+[data-theme="dark"] {
+	--main-bg-color: #1e1f26;
+	--main-text-color: #ccc;
+}
+
+* {
+	box-sizing: border-box;
+
+}
+
+body {
+	margin: 0;
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: center;
+	font-size: 16px;
+	background-color: var(--main-bg-color);
+	position: relative;
+	transition: all ease 0.2s;
+}
+.page-header {
+	font-size: 2rem;
+	color: var(--main-text-color);
+	padding: 2rem 0;
+	font-family: monospace;
+	text-transform: uppercase;
+	letter-spacing: 4px;
+	transition: all ease 0.2s;
+}
+
+.clock {
+	min-height: 18em;
+	min-width: 18em;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: var(--main-bg-color);
+	background-image: url("https://imvpn22.github.io/analog-clock/clock.png");
+	background-position: center center;
+	background-size: cover;
+	border-radius: 50%;
+	border: 4px solid var(--main-bg-color);
+	box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
+		inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3),
+		inset 0 15px 15px rgba(0, 0, 0, 0.3);
+	transition: all ease 0.2s;
+}
+.clock:before {
+	content: "";
+	height: 0.75rem;
+	width: 0.75rem;
+	background-color: var(--main-text-color);
+	border: 2px solid var(--main-bg-color);
+	position: absolute;
+	border-radius: 50%;
+	z-index: 1000;
+	transition: all ease 0.2s;
+}
+.hour,
+.min,
+.sec {
+	position: absolute;
+	display: flex;
+	justify-content: center;
+	border-radius: 50%;
+}
+.hour {
+	height: 10em;
+	width: 10em;
+}
+.hour:before {
+	content: "";
+	position: absolute;
+	height: 50%;
+	width: 6px;
+	background-color: var(--main-text-color);
+	border-radius: 6px;
+}
+.min {
+	height: 12em;
+	width: 12em;
+}
+.min:before {
+	content: "";
+	height: 50%;
+	width: 4px;
+	background-color: var(--main-text-color);
+	border-radius: 4px;
+}
+.sec {
+	height: 13em;
+	width: 13em;
+}
+.sec:before {
+	content: "";
+	height: 60%;
+	width: 2px;
+	background-color: #f00;
+	border-radius: 2px;
+}
+
+.switch-cont {
+	margin: 2em auto;
+	bottom: 0;
+}
+.switch-cont .switch-btn {
+	font-family: monospace;
+	text-transform: uppercase;
+	outline: none;
+	padding: 0.5rem 1rem;
+	background-color: var(--main-bg-color);
+	color: var(--main-text-color);
+	border: 1px solid var(--main-text-color);
+	border-radius: 0.25rem;
+	cursor: pointer;
+	transition: all ease 0.3s;
+}
diff --git a/script.js b/script.js
@@ -77,6 +77,12 @@ const projects = [
         link: "./Music Player/index.html",
         image: "https://beebom.com/wp-content/uploads/2016/08/10-Best-iPhone-Music-Player-Apps-You-Should-Try-in-2019.jpg?w=750&quality=75"
     },
+    {
+        title: "Analog Clock",
+        discription: "A simple Analig Clock with dark and light mode.",
+        link: "./Analog Clock/index.html",
+        image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjIRzrebpgt4uF79ewd_AjUjjJ8vqp9PwW6Q&usqp=CAU"
+    },
     {
         title: "URL Shortener",
         discription: "URL Shortener made using HTML, CSS, and JavaScript.",