Analog Clock with only HTML, CSS & JS - Interview Question

preview_player
Показать описание
Analog clocks are a common question you can get in interviews. In this video, I show you how to build one with just HTML, CSS & JS, and we learn a couple of tips here.

_____

🌟 About Me:
Dillion Megida, creator of DEEECODE, is a Software Engineer, Developer Advocate and a Content Creator passionate about simplifying topics around Tech via articles and videos.

_____

⚡️ Connect with me:
  1. Deeecode The Web
  2. deeecode
  3. css transform
  4. css style setproperty
Рекомендации по теме
Creating a Basic 0:08:23

Creating a Basic Analog Clock with HTML, CSS, and JavaScript

I had created 0:04:38

I had created analog clock pure using html only in 5 min#digitalclock #learnwithraj #html

Awesome Working Analog 0:13:09

Awesome Working Analog Clock just Using HTML, CSS and JavaScript | Easy Way for Begineers

Modern Digital/Analog clock 0:28:57

Modern Digital/Analog clock using simple html, css and javascript only

how to analog 0:31:09

how to analog clock design and animate using only Html and Css - analog clock using html & css[2...

How to Create 0:28:17

How to Create Analog Clock using HTML CSS and JavaScript

Create a Responsive 0:33:02

Create a Responsive Analog Clock⏱ using Only HTML, CSS & JS ✨⚡|| FULL TUTORIAL | CREATE WEBSITE🔥...

Analog Clock using 0:00:13

Analog Clock using Only Html and css #shorts

Analog Clock HTML 0:09:27

Analog Clock HTML CSS Javascript Dark Mode

Neumorphic Working Analog 0:11:00

Neumorphic Working Analog Clock Using CSS Only | Neumorphism HTML CSS | ProgrammingTT

Awesome Analog Clock 0:10:47

Awesome Analog Clock Using Only HTML, CSS & JavaScript

Build a basic 0:20:48

Build a basic analog clock - HTML CSS and JAVASCRIPT

Build Working Analog 0:14:57

Build Working Analog Clock Using HTML CSS And JavaScript

Working Analog Clock 0:00:11

Working Analog Clock Design using Html CSS & Javascript

Amazing analog clock 0:00:11

Amazing analog clock design using HTML CSS and JavaScript

Analog clock using 0:00:13

Analog clock using HTML CSS and JavaScript #coding #javascript

Analogue Clock UI 0:19:25

Analogue Clock UI using HTML, CSS & JavaScript

😍 Digital and 0:00:08

😍 Digital and analog clock using html #coding #shorts #tutorial

Analog Clock using 0:00:16

Analog Clock using HTML CSS Js

Make analog clock 0:00:06

Make analog clock using HTML, CSS, JAVASCRIPT only

Analog clock with 0:23:10

Analog clock with digital clock html CSS JS only.

Create Analog Clock 0:00:10

Create Analog Clock using HTML CSS and JavaScript

Analog Clock using 0:24:31

Analog Clock using HTML, CSS and JavaScript || Coding is so Easy || Dark Clock #codingissoeasy

Digital Analog Clock 0:00:06

Digital Analog Clock | Html JS | #shorts

Комментарии
Автор

This is amazing. Let’s continue working on interview questions

bellohakeem
Автор

You should have done was to use the DRY method on the covertToDegree function

360/x, since x is changeable, he should have passed it through the function call, thereby using one function

Eg.

Const a = (constantTime, currentTime) =>{
Const degree = 360/constantTime * current Time

Return degree
}

Then call them like

Const hours = a(12, currentHours)
Const minutes = a(12, currentMinutes)
Const seconds = a(12, currentSeconds)

Making the code less redundant.

_aboobae
Автор

360/12 = 30 || 360/60 = 6 ----> is alweys const, u dont need calculate this every 1s
and lite tip : transform-origin: bottom center; <-- second parameter and no more issues with positioning

nicon