Javascript Clock | CSS Neumorphism Working Analog Clock UI Design

Jitendra Kumar
3 min readSep 16, 2021

Hello Everybody.in this post we are going to build javascript Clock CSS Neumorphism Working Analog Clock UI Design.

first create one folder inside your compute drive.we can give any name for folder.i given javascript clock.

right click on folder and click on open with VsCode.

so our project is opened in VsCode editor.

Next we create one file inside our project index.html

so that first click on plus icon and give file name as index.html

using !+tab button we can get default html code structure in our html file.

Next we link our css file using link tag in index.html file.

Next we write three div in index.htm that is used to hours minute and second.

Next we will write css code for body and clock class.

Next write click on index.html file and click on open with live server.

our index.html file will open in browser whatever we have by default.

Now we will use hover on our clock

Next we set position for hour minute and seconds

Now we will build hour minute and sec porting using css.

Next go to browser and check our hour minute and second has designed.

Next we write javascript code inside html file using <script> tag.

inside that we are getting using Date() class hour minute and second.

Now our clock has completed.

Note:you can download source code from below repostiory.

https://github.com/jitu001995/MyAll-JSProject.git

--

--