Àgbà Akin Profile picture
Tech, Politics, CEO @swiftspeedapp

Dec 9, 2021, 10 tweets

I've invested a lot of my time to make WALL CLOCK for yall using HTML, CSS, and JS. It took approximately 72Hrs.

Invest in me too by showering this tweet with likes. And OH yes, you can draw anything with code. Now how did I make this? I'll show workings, retweet, and let's go.

Hi, I make things like this often; if you want to learn how to code or need tech-related resources, kindly follow me.

Now, The Workings

I started by creating an HTML document; see the below Image.

If you took my HTML Classes which is still available in my pinned tweet, reading the HTML Code cannot be so difficult.

The Meta is for responsiveness and compatibility; I created a CSS titled "styles.css," and then I created several divs and gave them different classes

Now I designed the Wall clock body using neomorphism CSS. I called HTML and body tag in my CSS and then applied the styling.

Now let us draw another box with the clock marginal lines

Now let us put the hand by calling hand min, hand hour, hand seconds

You can see the hands is now there but is not working; that is where Javascript comes in 😂🤣

Congratulations you have just made a wall clock using HTML, CSS, and Javascript. Now let us test if this clock is working

Please retweet and share if you like this.

You can copy full source code here, edit replicate, manipulate, redesign or utter this original one and quote the main tweet with it for me to see, neat screenshot only please 😀

👩‍💻 full code👇🏽

akinolaakeem.com/html-and-neumo…

Share this Scrolly Tale with your friends.

A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.

Keep scrolling