a beautiful wall clock

src/meta/play-meta.js

@@ -10,6 +10,7 @@ import {
   RandomMemeGenerator,
   ReactTodoApp,
   ExpandingCards,
+  AnalogClock,
   //import play here
 } from "plays";
 
@@ -174,5 +175,20 @@ export const plays = [
     cover: "",
     blog: "",
     video: "",
+  },
+  {
+    id: "pl-analog-clock",
+    name: "Analog-Clock",
+    description: "A beautiful wall clock",
+    component: () => {
+      return <AnalogClock />;
+    },
+    path: "/plays/analog-clock",
+    level: "Beginner",
+    tags: "useState, useEffect, Date, setInterval",
+    github: "Deepak8717",
+    cover: "",
+    blog: "",
+    video: "",
   }, //replace new play item here
 ];

src/plays/analog-clock/AnalogClock.css

@@ -0,0 +1,85 @@
+.clock-play-heading {
+  text-align: center;
+}
+.clock {
+  max-width: 375px;
+  height: 375px;
+  border: 10px solid #e6e6e6;
+  margin: 0 auto;
+  border-radius: 50%;
+  position: relative;
+  background-color: #3d3d3d;
+  box-shadow: inset 0px 6px 0px 2px #646262, -4px 4px 1px 0px #959393,
+    0px 0px 1px 2px #959393, -4px 4px 7px 1px #434343;
+}
+.clock::after {
+  content: "";
+  width: 15px;
+  height: 15px;
+  background: #fff;
+  position: absolute;
+  top: 49%;
+  left: 49%;
+  border-radius: 50%;
+  box-shadow: 0px 0px 0px 4px #a3a1a1, 0px 0px 0px 5px #9d9d9d;
+}
+.hour-hand {
+  width: 10px;
+  height: 100px;
+  background: #e8e5ef;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  border-radius: 0px 0px 10px 10px;
+  transform-origin: top;
+}
+.minute-hand {
+  width: 5px;
+  height: 134px;
+  background: #ffffff;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  border-radius: 0px 0px 10px 10px;
+  transform-origin: top;
+}
+.second-hand {
+  width: 2px;
+  height: 155px;
+  background: yellow;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  border-radius: 0px 0px 10px 10px;
+  transform-origin: top;
+  transform: rotate(180deg);
+}
+.brand {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background-color: #fff;
+  font-size: 21px;
+  z-index: -1;
+  padding: 0 5px;
+  border-radius: 5px;
+  font-weight: bold;
+  letter-spacing: 7px;
+  font-style: italic;
+}
+
+@media only screen and (max-width: 420px) {
+  .clock {
+    width: 310px;
+    height: 310px;
+  }
+  .hour-hand {
+    height: 100px;
+  }
+  .minute-hand {
+    height: 118px;
+  }
+  .second-hand {
+    height: 135px;
+  }
+}

src/plays/analog-clock/AnalogClock.jsx

@@ -0,0 +1,64 @@
+import { getPlayById } from "meta/play-meta-util";
+import "./AnalogClock.css";
+
+import PlayHeader from "common/playlists/PlayHeader";
+import { useState } from "react";
+import { useEffect } from "react";
+
+function AnalogClock(props) {
+  // Do not remove the below lines.
+  // The following code is to fetch the current play from the URL
+  const { id } = props;
+  const play = getPlayById(id);
+
+  // Your Code Start below.
+  const [date, setDate] = useState(new Date());
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDate(new Date());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+  const hour = date.getHours() * 30 + 180; // 360/12 = 30 each hour it rotates 30deg +180 (initial design at 0 deg was upside down so to fix it i rotate 180deg..// see the design at 0deg for more clarification)
+  const minute = date.getMinutes() * 6 + 180; // 360/60 = 6 each minutes it rotate 6deg + 180(same as above to ...see at 0 deg)
+  const second = date.getSeconds() * 6 + 180; //// 360/60 = 6 each minutes it rotate 6deg + 180(look at 0 deg for more clarification)
+
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={play} />
+        <div className="play-details-body">
+          {/* Your Code Starts Here */}
+          <h1 className="clock-play-heading">Analog Clock</h1>
+          <div className="analong-clock-container">
+            <div className="clock">
+              <div
+                className="hour-hand"
+                style={{
+                  transform: "rotate(" + hour + "deg)",
+                }}
+              ></div>
+              <div
+                className="minute-hand"
+                style={{
+                  transform: "rotate(" + minute + "deg)",
+                }}
+              ></div>
+              <div
+                className="second-hand"
+                style={{
+                  transform: "rotate(" + second + "deg)",
+                }}
+              ></div>
+              <div className="brand"></div>
+            </div>
+          </div>
+          {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default AnalogClock;

src/plays/analog-clock/Readme.md

@@ -0,0 +1,12 @@
+# analog-clock
+
+A Beautiful wall clock
+
+## What will you learn
+
+- How to use `useStae` hook
+- How to use `useEffect` hook
+- How to work with `Date` objects and manupulate them.
+- How to `rotate` the clock hands as per the time.
+
+The file `AnalogClock.jsx` has all the code for implementation. please free to have a look and implement it.

src/plays/index.js

@@ -11,4 +11,5 @@ export { default as SocialCard } from 'plays/social-card/SocialCard';
 export { default as RandomMemeGenerator } from 'plays/random-meme-generator/RandomMemeGenerator';
 export { default as ReactTodoApp } from 'plays/react-todo-app/ReactTodoApp';
 export { default as ExpandingCards } from 'plays/expanding-cards/ExpandingCards';
+export { default as AnalogClock } from 'plays/analog-clock/AnalogClock';
 //add export here