Amazing Working Digital Clock using Html CSS SVG & Javascript

No video

Amazing Working Digital Clock using Html CSS SVG & Javascript | Simple Javascript Project

Рет қаралды 249,218

Күн бұрын

Click For More : www.youtube.co...
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/...
CSS Infinity Course : www.udemy.com/...
Another Course : Build Complete Real World Responsive Websites from Scratch
www.udemy.com/...
------------------
Join Our Channel Membership And Get Source Code of My New Video's Everyday!
Join : / @onlinetutorialsyt
------------------
Source Code : / onlinetutorials
Facebook Page : / onlinetutorialsyt
Instagram : / onlinetutorials_youtube
Twitter : / onlinetutoria16
Website : www.onlinetutor...
Buy Me A Coffee : www.buymeacoff...
------------------
#csseffect #topcsseffects
------------------
give proper credit if you repost this on other social media platform
------------------
Inspired By These
Amazing Working Analog and Digital Clock Design using Html CSS & Javascript
• Amazing Working Analog...
Javascript Clock | CSS Neumorphism Working Analog Clock UI Design
• Javascript Clock | CSS...
Quick CSS Animation Effects | Html CSS Beginners
• Quick CSS Animation Ef...
Glassmorphism Digital Clock UI Design | Html CSS & Vanilla Javascript
• Glassmorphism Digital ...
Make an Analog & Digital Minimalist Clock Using Vanilla Javascript
• Make an Analog & Digit...
------------------
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use

Пікірлер: 168

@camilo.s2237 2 жыл бұрын

literalmente... únicamente he visto dos videos de él, y ya me enamoré de su trabajo! grandes ideas, excelente código, grandiosos resultados, es realmente inspirador encontrar personas que quieren compartir resultados como estos, es realmente grandioso!

@No_Fuse8771 Жыл бұрын

Not a bad tut, I like the use of inline and css stylesheet together. Seems to a good short video for a beginner to get their feet wet.

@rodweleo 2 жыл бұрын

Thank you for the video. It has been educationally helpful and has expanded my imagination and creativity. Keep up the good work👏.

@danilo_teixeira 2 жыл бұрын

Very good work dude!! To add zero, you also can convert to string e use the method padStart().

@edgarzulu5351 2 жыл бұрын

very cool work! For leading zero, you don't need it for the hour in a 12-hour clock but in a 24-hour clock.

@proteus1 2 жыл бұрын

Your the best at this sort of thing.

@codeKeshav 2 жыл бұрын

Nice work sir. I thought you might be doing that moving part using external svg link. Nice clock. Thanks for tutorial.

@Mugenz0 2 жыл бұрын

nicely done, but have few questions: so many "let", just separate your vars with comma. why create so many "new date"? just create single object and get h m s from it. for leading zero there is more elegant way with help of "padStart"

@ararune3734 2 жыл бұрын

Yeah but never use var, always let or const.

@pythonandjs6380 2 жыл бұрын

Ramadan Mubarak 👍👍👍👍

@yehiamekano6934 2 жыл бұрын

How wonderful and genius you are

@vrfEducation Жыл бұрын

You're truly creative. Thanks for all you taught us

@emmanuelaigbovbiosa1361 2 жыл бұрын

This is very creative

@FernandoArbex 2 жыл бұрын

Wow. Very beautiful. Make one with countdown and page redirect.

@Silent_boy23 2 жыл бұрын

thank you, it keeps inspired and continue to work hard to get to that level! (i'm a noob in this field)

@arvidenglund9155 2 жыл бұрын

First

@mdhossen7082 2 жыл бұрын

Amazing Clock

@ulisesmartinez410 2 жыл бұрын

You have good talent, thanks.

@kudy_poikhaty_na_rybalku 2 жыл бұрын

It`s so COOL! Very beautiful!!!

@mushfiqurrahmannasim4588 2 жыл бұрын

Make a flip clock plzzzzzz❤️❤️❤️ You are amazing

@mohamedsayedabdelkhaleq7443 2 жыл бұрын

I have a problem my ( hr_dot, min_dot, sec_dot ) it not moving, what should i do

@svoipahan 2 жыл бұрын

Example: sec_dot.style.transform = 'rotate(' + s * 6 + 'deg)';

@gastoncadima1995 2 жыл бұрын

Cada día traen un nuevo proyecto que nos sorprende más y más , Gran trabajo

@alexandere1418 2 жыл бұрын

Incredible

@_kgz_nur_7304 Жыл бұрын

you are just top

@ClearSkyProductions777 2 жыл бұрын

At the end of the video, it appears the tail of the color circles are rounded but I didn’t see how we did this in the tutorial? With what we did they appear as straight edges instead of rounded. How do we do this? Very easy tutorial to follow. Thank you!

@OnlineTutorialsYT 2 жыл бұрын

stroke-linecap: round;

@juniorbila5406 2 жыл бұрын

add in your css at .dots::before { border-radius: 50%}

@thearchitectofthehounds9815 2 жыл бұрын

The border-radius, you can lower it like 55 or 50px. Or % as the other guys said, eitber one works

@Manisha-no9nj 2 жыл бұрын

Wow!!! So cool!!!!

@NK-hn5nz 2 жыл бұрын

Hey bro can you make a video on cost calculator using javascript?

@komodo3784 2 жыл бұрын

Maybe you should use a monospaced font.

@rknaaru 2 жыл бұрын

very beautiful demonstration 😍

@karthikrajamony6044 2 жыл бұрын

Good work, may I know which color theme you have used for VS Code in this video.

@OnlineTutorialsYT 2 жыл бұрын

Let me check

@karthikrajamony6044 2 жыл бұрын

@@OnlineTutorialsYT thank you

@satyamrajpro 2 жыл бұрын

@@OnlineTutorialsYT Yes Sir, I also wanna know

@satyamrajpro 2 жыл бұрын

Do you also create bots to make Cool Colour pallette XD

@karthikrajamony6044 2 жыл бұрын

@@OnlineTutorialsYT Sir, were you able to find that theme name

@tarcisiosassi9379 2 жыл бұрын

Awesome!!

@CaioFure 2 жыл бұрын

Amazing

@akashpooja1 2 жыл бұрын

When you coding 8h but your last showing time 2h 🥰😂 good work 👌💞

@runcodenow1265 2 жыл бұрын

Awesome👍

@rajagopalbasuvaiyah164 2 жыл бұрын

Bro Your work is really appreciated. But why don't you explain with your voice . because it will help us to reach easier.

@TheLinKueiWarrior Жыл бұрын

He cant speak since birth

@swartex92 2 жыл бұрын

Is it really impossible to write a class from memory? a two-letter class is very, very difficult to write ...

@tarunaagarwal6530 2 жыл бұрын

Nice project!!

@CUBICLECODER 2 жыл бұрын

Wow really amazing code thanks for this osm code 🔥🔥🔥😍😍😍

@nethajimythesewaran402 2 жыл бұрын

Super video OT Thanks

@alexandere1418 2 жыл бұрын

Became ur fan❤️

@vikadanathan1827 2 жыл бұрын

Nice wrk🤞

@theeyeinthesky357 2 жыл бұрын

Please do same for countdown timer without library

@_ariesinto6029 2 жыл бұрын

Thank You 🙏🏻🙏🏻

@shahinovic7828 2 жыл бұрын

Thank you for this video, it added a lot for my info

@sanarind5580 2 жыл бұрын

Great

@kailanirochellla2006 2 жыл бұрын

sir mai aapko 2 year se fallow kar raha hu agar aap india me rahte hai to pls hindi me explain bhi kar diya kariye pls begginer level help !

@thisgnop3177 2 жыл бұрын

Thanks bro. That is amazing

@humaamwebdev6050 2 жыл бұрын

jitne likes mile otne kam hein nice😍🥰

@simhadripraveena6591 2 жыл бұрын

Sir, Can you make a video on zoom in and zoom out CSS effect? please

@animeshbhapkar2712 2 жыл бұрын

Its called hover.

@ararune3734 2 жыл бұрын

@@animeshbhapkar2712 Hover is a bad idea considering it only works if you have a mouse. And most traffic is not from desktops so it just won't work on phones/tablets which are like 70% of the traffic

@mdsifulislam4862 2 жыл бұрын

Thank You

@Sendi_Rian 2 жыл бұрын

Thanks...

@yashghadge5482 2 жыл бұрын

hr_dot.style.transform = 'rotate(${h * 30}deg)'; this line is not working the postion of dot hasn't changed after this line and zero error in program . I am using the same vs code editor.

@kritibakshi_cse_4637 2 жыл бұрын

Same problem arise in my program also

@bel1ev3r82 2 жыл бұрын

Hello! How to calculate deg with 24 hour format? I'm not good at math. :D Very good video anyway.

@OnlineTutorialsYT 2 жыл бұрын

360 / 15 = 24

@satyamrajpro 2 жыл бұрын

He means 15 deg

@danatapodorska-mirska4697 6 ай бұрын

If I will just change 30 to 15 its not changing time ( @@OnlineTutorialsYT

@TechWiBi 2 жыл бұрын

Nice work

@abhishekmagar9843 2 жыл бұрын

Nice brother 👌

@Diyorbek_prodoction 2 жыл бұрын

1st

@memetronicsdam8237 2 жыл бұрын

Hola quiero comprar el paquete que incluya los cursos de Udemy, cual es ese paquete?

@wantanan388 2 жыл бұрын

I try to change size to smaller but how we make a dot that match to rotate a degree

@modzking4471 Жыл бұрын

Following the code, I seem to get errors in vsCode when using the syntax rotate(${m*30}deg) any idea why I’m getting errors

@ARandomGuyOG 2 жыл бұрын

@Online Tutorials In 12 hour Clock, when it reached to 12 pm or 12 am, it always turns to 00 hours, how to change it to 12 hours 00 min

@kauntfy 2 жыл бұрын

are possible make this clock in program for smartphone?

@OnlineTutorialsYT 2 жыл бұрын

yes

@mrcow4244 2 жыл бұрын

Ofc

@satyamrajpro 2 жыл бұрын

@@mrcow4244 But how?

@satyamrajpro 2 жыл бұрын

@@OnlineTutorialsYT But how?

@gabrielnobretapia7795 2 жыл бұрын

can i put this in windows screensaver

@Battleboigamer1 2 жыл бұрын

video starts at 1:31

@abuhenashuvo Жыл бұрын

I tried to implement this code. In index.html file line 82. hr_dot.style.transform = "rotate(${h*30}deg)"; 84. min_dot.style.transform = "roate(${m*6}deg)"; 86. sec_dot.style.transform = "roate(${s*6}deg)"; is not working. How can i fix it?

@sharishah982 2 жыл бұрын

Source code doesn't open plz help brother

@dewangsingh3376 Жыл бұрын

Sir can u plz tell me why you use two circle in svg tag

@asce1796 2 жыл бұрын

nice

@renanphilipe 2 жыл бұрын

This not work hr_dot.style.transform = 'rotate(${h * 30}deg)'; someone knows? ${h * 30} this not work for more exactly I found the errer, was this ` `

@owosimo4908 2 жыл бұрын

how does the page automatically update when you edit something without refreshing page?

@cesarlozano5722 Жыл бұрын

How could I make this project responsive? I'll appreciate your support!

@chessmasterstream8953 Жыл бұрын

Why my clock doesnt work? I checked everything is exactly as in tutorial. Design is all good.

@Beast712 2 жыл бұрын

sir count down is not working may i know why ??? i do the all same as you teach but it always no make sense

@armydillo9792 2 жыл бұрын

Is that second going rush? 😳

@DIAMOND-vs5ql 2 жыл бұрын

Nice

@curiouscoderayush 2 жыл бұрын

3rd

@bangladeshnew4512 2 жыл бұрын

2nd

@orangezombie6372 2 жыл бұрын

Is it possible to make that clock my wallpaper? If so then please tell me how

@hhhwexho9501 Жыл бұрын

学到了

@ParthMakwana28 Жыл бұрын

@Online Tutorials I have been trying a lot but i have unable to move dots. As you written //360/12=30 hr_dot.style.Transform = 'rotate(${h * 30}deg)'; //360/60=6 min_dot.style.transform = 'rotate(${m * 6}deg)'; //360/60=6 sec_dot.style.transform = 'rotate(${s * 6}deg)'; not working. What should i do? need your help.

@duggirambabu7792 Жыл бұрын

The symbols ' and ` are different. So change the folloing symbol ' to `

@ParthMakwana28 Жыл бұрын

@@duggirambabu7792 thanks buddy, will try.

@AlejandroRamirez-fr3jc Жыл бұрын

Me gustaría ver el código o el tutorial de como lo hizo por favor para aprender gracias

@wantanan388 2 жыл бұрын

I have a problem my dot it not move , what should i do

@user-fd9kl9bk4k 2 жыл бұрын

Всё хорошо, только уж музыка - кошмар😖

@kumaryvl905 3 ай бұрын

can you make the world clock

@numericalwallah9174 2 жыл бұрын

Sir you can use h%12

@preetifartyal 5 ай бұрын

My time is not changed it's just 00 from starting please help

@mukuloddyz3673 2 жыл бұрын

🙏🏻 where are you from

@alienmorf 2 жыл бұрын

Просто ахуительно

@swadhinpanda4270 Жыл бұрын

Sir Script file is not working to show current time, what is alter native solution please send me.

@duggirambabu7792 Жыл бұрын

Check once again the following symbols: The symbols ' and ` are different. Write ` this symbol at rotate function.

@pantherminakshimilind2943 2 жыл бұрын

My live server is not working properly...what should I do? Its doesn't start automatically...port:5500 problem....anybody pls help me to find solution to fix this bug....By the way thanks for giving analog clock tutorial.....

@asifhasnat4095 2 жыл бұрын

I have face some problem pls help when command html ( hours.innerHTMl= h;) but browser not show hours. Show just zero .

@Votenix 2 жыл бұрын

I have the same problem

@user-tz9rs7lb4p Жыл бұрын

It took me an hour to figure out what was wrong with me, it was that in the HTML I had a circle marked as an ID that is there 3 times and this crap threw it away.

@BCS_TinkuVerma 2 жыл бұрын

I am facing a problem that the starting point of every circle is 3 . How to solve it.

@BCS_TinkuVerma 2 жыл бұрын

istead of 12.

@EEQUALIZER 2 жыл бұрын

Does somebody have an idea, why the SVG syntax isn't working for me in VS Code/Chrome?

@chessmasterstream8953 Жыл бұрын

Why my clock doesnt work? I checked everything is exactly as in tutorial. Design is all good.

@fatihbasdemir844 2 жыл бұрын

I did it in the same video but the shapes were not complete

@kumaryvl905 3 ай бұрын

can you give us the source code of above project

@soumavosarkar2511 2 жыл бұрын

hr_dot.style.transform = 'rotate(${h*30}deg)'; is not working but if a put a numeric value like 30 it is working . the problem is if i use a variable it isnt responding and the dot is in its inittial place. please help anyone

@haroldzhang5101 2 жыл бұрын

````````````` is this symbol。'' this is wrong