Create a Clock made of clocks Using Css, Js with Source Code and live demo - Clockception Using HTML5, Css, Js

Home > HTML > Create Your Own Application Like Google Lens - Google 2.0

So this project is based on the Google Lens,

In this project, I will use the only "span tag & Js" to create our Huge Clock .

I am sharing this projects source code for free.

So, to support me you can Subscribe to my YouTube channel.
Link is avaible any where in the page.

It is important to know before start working on this project.

If your bring this project online, then should give us a credit at footer, because it takes alot time make all these kinds of projects now if you ask that I want to bring it online but I will not give any credits to the developers & the provider then it is very wrong man.But still if you want to bring it online but you don't want to give us an credit.Then mail us at somrajf12@gmail.com

HTML

First, Create an HTML file with the name of index.html and paste the code given below, in your HTML file. Remember, you’ve to create a file with .html extension.

Note*: Click on the HTML Code then press ctrl + A to select the whole HTML Code, then ctrl + C to copy.

<!DOCTYPE html>
<html lang="en" >
<head>
 <meta charset="UTF-8">
 <title>A clock made of clocks</title>
 <link rel='stylesheet' href='https://rsms.me/inter/inter.css'><link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="container">
 <div class="watch-container">
 <div class="watch-circle-container" id="watch-circle-0">
 </div>
 <div class="watch-circle-container" id="watch-circle-1">
 </div>
 <div class="watch-circle-container" id="watch-circle-2">
 </div>
 <div class="watch-circle-container" id="watch-circle-3">
 </div>
 </div>

 <script src="./script.js"></script>

</body>
</html>

Css

Second, Create a Css file with the name of style.css and paste the code given below, in your Css file. Remember, you’ve to create a file with .css extension.

Note*: Click on the Css Code then press ctrl + A to select the whole Css Code, then ctrl + C to copy.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --circle-x: 4;
  --circle-y: 6;
  --circle-size: calc((100vw / calc(var(--circle-x) * 2)) - .5rem);
}
@media (min-width: 480px) {
  :root {
    --circle-size: 50px;
  }
}

body {
  background: #F9FAFB;
  font-family: Inter, sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.container header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 2rem 1rem 0;
}
.container h1 {
  font-size: clamp(1.5rem, 4vw, 4rem);
  font-weight: 700;
  color: #1F2937;
}

.watch-container {
  display: grid;
  grid-template-columns: repeat(2, calc(var(--circle-x) * var(--circle-size)));
  grid-template-rows: repeat(2, calc(var(--circle-y) * var(--circle-size)));
  margin-top: 2rem;
}

.watch-circle-container {
  display: grid;
  grid-template-columns: repeat(var(--circle-x), var(--circle-size));
  grid-template-rows: repeat(var(--circle-y), var(--circle-size));
}

span {
  font-size: var(--circle-size);
  width: 1em;
  height: 1em;
  border-radius: 50%;
  display: block;
  position: relative;
  box-shadow: inset 1px -1px 2px 1px rgba(0, 0, 0, 0.17);
  overflow: hidden;
}
span:before, span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: calc(var(--circle-size) / 2);
  width: 3px;
  background: #1F2937;
  transition: 5s;
  transform-origin: bottom;
}
span::before {
  transform: rotate(var(--angle-1));
}
span::after {
  transform: rotate(var(--angle-2));
}

.inspiration-text {
  margin-top: 3rem;
  margin-left: 1rem;
}

.social {
  display: flex;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
  background: #1DA1F2;
  border-radius: 2rem;
  color: white;
  text-decoration: none;
}
.social:hover {
  background: #0d76b7;
}
.social:visited {
  color: white;
}
.social + .social {
  margin-left: 1rem;
}
@media (min-width: 480px) {
  .social + .social {
    margin-left: 2rem;
  }
}
.social-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
  flex-shrink: 0;
}

JavaScript

Third, Create an Script file with the name of script.js and paste the code given below, in your JavaScript file. Remember, you’ve to create a file with .js extension.

Note*: Click on the Js Code then press ctrl + A to select the whole Js Code, then ctrl + C to copy.

const digits = {
  0: [
    [90, 180],
    [90, 270],
    [90, 270],
    [180, 270],

[0, 180],
    [90, 180],
    [180, 270],
    [0, 180],

[0, 180],
    [0, 180],
    [0, 180],
    [0, 180],

[0, 180],
    [0, 90],
    [0, 270],
    [0, 180],

[0, 90],
    [90, 270],
    [90, 270],
    [0, 270]
  ],
  1: [
    [90, 180],
    [90, 270],
    [180, 270],
    [225, 225],
    [0, 90],
    [180, 270],
    [180, 0],
    [225, 225],
    [225, 225],
    [180, 0],
    [180, 0],
    [225, 225],
    [225, 225],
    [180, 0],
    [180, 0],
    [225, 225],
    [90, 180],
    [270, 0],
    [0, 90],
    [180, 270],
    [90, 0],
    [90, 270],
    [270, 90],
    [0, 270]
  ],
  2: [
    [180, 90],
    [90, 270],
    [90, 270],
    [270, 180],
    [0, 90],
    [90, 270],
    [270, 180],
    [180, 0],
    [180, 90],
    [270, 90],
    [0, 270],
    [180, 0],
    [0, 180],
    [180, 90],
    [270, 90],
    [270, 0],
    [180, 0],
    [0, 90],
    [270, 90],
    [180, 270],
    [0, 90],
    [270, 90],
    [270, 90],
    [270, 0]
  ],
  3: [
    [180, 90],
    [90, 270],
    [90, 270],
    [270, 180],
    [0, 90],
    [90, 270],
    [270, 180],
    [180, 0],
    [180, 90],
    [270, 90],
    [0, 270],
    [180, 0],
    [90, 0],
    [270, 90],
    [180, 270],
    [180, 0],
    [90, 180],
    [270, 90],
    [0, 270],
    [180, 0],
    [0, 90],
    [270, 90],
    [270, 90],
    [270, 0]
  ],
  4: [
    [180, 90],
    [180, 270],
    [225, 225],
    [225, 225],
    [0, 180],
    [180, 0],
    [225, 225],
    [225, 225],
    [0, 180],
    [180, 0],
    [180, 90],
    [180, 270],
    [0, 180],
    [0, 90],
    [0, 270],
    [180, 0],
    [0, 90],
    [270, 90],
    [180, 270],
    [180, 0],
    [225, 225],
    [225, 225],
    [0, 90],
    [270, 0]
  ],
  5: [
    [180, 90],
    [90, 270],
    [90, 270],
    [270, 180],
    [180, 0],
    [180, 90],
    [90, 270],
    [270, 0],
    [0, 180],
    [0, 90],
    [90, 270],
    [270, 180],
    [0, 90],
    [90, 270],
    [270, 180],
    [180, 0],
    [180, 90],
    [270, 90],
    [0, 270],
    [180, 0],
    [0, 90],
    [270, 90],
    [270, 90],
    [270, 0]
  ],
  6: [
    [180, 90],
    [90, 270],
    [90, 270],
    [270, 180],
    [0, 180],
    [90, 180],
    [270, 90],
    [0, 270],
    [180, 0],
    [0, 90],
    [270, 90],
    [180, 270],
    [180, 0],
    [90, 180],
    [270, 180],
    [0, 180],
    [0, 180],
    [0, 90],
    [270, 0],
    [180, 0],
    [0, 90],
    [270, 90],
    [270, 90],
    [270, 0]
  ],
  7: [
    [180, 90],
    [270, 90],
    [270, 90],
    [270, 180],
    [90, 0],
    [270, 90],
    [270, 225],
    [225, 0],
    [225, 225],
    [45, 180],
    [45, 180],
    [225, 225],
    [225, 225],
    [0, 180],
    [0, 180],
    [225, 225],
    [225, 225],
    [0, 180],
    [0, 180],
    [225, 225],
    [225, 225],
    [0, 90],
    [0, 270],
    [225, 225]
  ],
  8: [
    [180, 90],
    [90, 270],
    [90, 270],
    [270, 180],
    [180, 0],
    [90, 180],
    [270, 180],
    [180, 0],
    [180, 0],
    [90, 0],
    [0, 270],
    [180, 0],
    [0, 180],
    [180, 90],
    [180, 270],
    [0, 180],
    [180, 0],
    [90, 0],
    [270, 0],
    [180, 0],
    [0, 90],
    [90, 270],
    [270, 90],
    [270, 0]
  ],
  9: [
    [180, 90],
    [90, 270],
    [90, 270],
    [270, 180],
    [0, 180],
    [90, 180],
    [270, 180],
    [180, 0],
    [180, 0],
    [0, 90],
    [0, 270],
    [180, 0],
    [0, 90],
    [90, 270],
    [180, 270],
    [0, 180],
    [90, 180],
    [90, 270],
    [0, 270],
    [180, 0],
    [0, 90],
    [270, 90],
    [270, 90],
    [270, 0]
  ]
};

One-Tap to Get the File

Note*: After Clicking the Download button wait for sometime.
If the source file dosen't start to download, then allow this site to download files in your system.

Frequently Asked Questions

Q 1: Can I use this Source Code without giving credits ?

Ans: Yes, you can use but if your bring this projects, then should give us a credit at footer, because it takes alot time make all thess kinds of projects now if you ask that I want to bring it online but I will not give any credits to the developers & the provider then it is very wrong.

Q 2: Actually I want to bring this project online but I don't want to give credits ?

Ans: Ok, we have problem but also you cannot claim that it is made by you.
It is not all about flex you should increase you knowledge.

Q 3: If I am bringing this project online and not giving credits & claiming it is developed by me then ?

Ans: Ok, 1-3 times you will be warned and your that site will be suspended.
Still if you continue, then it can become to a legal things.