Amazing Working Analog and Digital Clock Design using Html CSS & Javascript

Подписаться 941 тыс.

Просмотров 373 тыс.

50% 1

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
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

Опубликовано:

18 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 251

@dunai2012 2 года назад

As a CSS beginner, this was the second time I followed your step by step process. I've amazingly enjoyed the whole hours of doing so although there were lots of stuff I don't yet fully understand. But I believe the 'learning by doing' concept is what I love to follow. Imagine as a junior developer just hired by a new employer you can't fully understand all works done by others in a short time. You have to force yourself to be familiar the existing code as soon as possible for you to get your job done while there are many things totally new or alien to you. You just have to swallow what others have done in order to be able to do your job.

@sunflair-wa 2 года назад

Same here! Last year I started following this and I am so much better, only after a year. I still am amazed by what he comes up with, but I can follow the tutorials much faster now :) Keep going!

@worldoflove627 Год назад

@@sunflair-wa I am also a beginner, but after seeing this coding, I was disappointed with myself and I think it is very difficult and impossible to reach such a level.

@pratronald Год назад

Can u share source code??

@mechanosys Год назад

I am 54, from Bharuch, Gujarat and 30 years in Industry (non-IT) a mechanical engineer and background in Plant Maintenance/Projects, having interest in coding ! I have learned from your videos about CSS, HTML, JS. Also, I am leaning from other contributors like you ! Great work and great contribution to the society!

@whatami885 Год назад

for the people having problems with the clock hand moving in the part hr.style.transform = `rotatez(${hh+(mm/12)}deg)`; it was this -> ` not this -> ' hope this works

@BrilliantMbumwae Год назад

Hmm, I'm kinda stack on this line. If I type "hr" followed by period ".", then style does not pop in intel license - where did I go wrong?

@ramsai7133 Год назад

Thank you ❤️

@VinterWebTech Год назад

(instead of $ sign we can concatenate using +) if this line doesn't work: hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`; You can use this: hr.style.transform = 'rotateZ('+(hh+(mm/12))+'deg)';

@goldenhourvmgg 8 месяцев назад

u saved me thanks

@GuneshKumara-pr3nj Месяц назад

Thanks a lot brother, i'am suffering around 1 hour to find this error 🎉❤❤❤

@scept3r.studios 2 года назад

OMG you did my request LMAOOO (anyway, love ur work as always :D)

@OnlineTutorialsYT 2 года назад

Thanks for the idea!

@sharathkumar.m7924 2 года назад

@@OnlineTutorialsYT 0

@1islam1 Год назад

@@OnlineTutorialsYT ⚠️ God has said in the Quran: 🔵 { O mankind, worship your Lord, who created you and those before you, that you may become righteous - ( 2:21 ) 🔴 [He] who made for you the earth a bed [spread out] and the sky a ceiling and sent down from the sky, rain and brought forth thereby fruits as provision for you. So do not attribute to Allah equals while you know [that there is nothing similar to Him]. ( 2:22 ) 🔵 And if you are in doubt about what We have sent down upon Our Servant [Muhammad], then produce a surah the like thereof and call upon your witnesses other than Allah, if you should be truthful. ( 2:23 ) 🔴 But if you do not - and you will never be able to - then fear the Fire, whose fuel is men and stones, prepared for the disbelievers.( 2:24 ) 🔵 And give good tidings to those who believe and do righteous deeds that they will have gardens [in Paradise] beneath which rivers flow. Whenever they are provided with a provision of fruit therefrom, they will say, "This is what we were provided with before." And it is given to them in likeness. And they will have therein purified spouses, and they will abide therein eternally. ( 2:25 ) ⚠️ Quran

@madhusudanrao1865 2 года назад

You made it awesome yet simple to understand.

@pubgshorts8094 2 года назад

you are the best css creative master in india.

@maibhirakeshtikait315 Год назад

He is a kathmulla और कठमुल्ला सिर्फ पेंक्चर बनाते हैं

@MrWebDesignerAnas 2 года назад

wow you are on next level bro!!!

@cseonlineclassesmalayalam 2 года назад

Wow! An artist by passion, programming as a profession⭐⭐👍👍

@sihemtoutsimplement6616 2 года назад

Super ! Best Teacher, thank you ❤️

@رافعمحمد-م4ك 2 года назад

i love u mr Hero ; you are mazing man>>>> go head

2 года назад

I realy love the box-shadow part, it looks like you are painting your art

@Bipinrai007 2 года назад

Superb boss... The best 👍

@Riteshkumar-ih7fj Год назад

Omg...i am a civil Engineer bt i want to be a development engineer ...i learn from RU-vid...bt never seen this content before...nice UI...it is just awesome bro 🤝✌️

@kavinduperera9217 2 года назад

woow it is nice ans amazing now i try make it...

@ishtiaquddin.official 2 года назад

Excellent bro

@david_ka 2 года назад

Greetings from Russia

@puranjitdasgupta1821 2 года назад

Love and respect for your hardwork. Hatsoff

@gadingainun9040 2 года назад

Why when I equate h, m, s in getHours, getMinutes, and getSeconds and AM and PM, the web doesn't change, stuck at 00:00:00 AM? Do you have a solution? Not following the needle

@robinlouis7098 2 года назад

same here

@mrgymnast 2 года назад

Same here

@Sreejoniartncraftzhunt 2 года назад

same here

@AbhijitPatiBEC Год назад

Had the same problem, check if you have used the correct variable names..

@charusharma7717 Год назад

Samee problem

@insigniya116 2 года назад

Legend is here with his amazing work 😁👍

@nethajimythesewaran402 2 года назад

Hey really you super at coding in terms of design and development of creative works thanks OT

@AliKhan-zs4zm 2 года назад

Nice clock 😇👍🏻

@RACHIDZE 2 года назад

Great Great and great

@gshabeer516 2 года назад

Nice work bro ☺️☺️☺️☺️ but it could be more great if it includes audio so we can get your experience also 😉😉😉🤠🤠🤠

@xugefu 2 года назад

Thanks!

@umemiz 2 года назад

와 진짜 항상 대단한거 같음. 오늘은 이거 따라쳐야지...

@arvindchauhanable 2 года назад

Superb.

@hasifulislam8789 2 года назад

super ! Best

@jasneslonce 2 года назад

Awesome, but, sir, U should use native JS "padStart()" function instead of ternary operator for filling string with zeros.

@officialfaisal5194 2 года назад

ever best CSS video💖💖

@coleader3408 2 года назад

You are one of the best js designer I have ever seen..

@wisdomugochukwu2249 2 года назад

Guy, you are good!

@alexalannunes 2 года назад

Best Channel 🥳🥳🥳🥳

@hassaanali9683 Год назад

awesome clock

@КонстантинСигуев 2 года назад

Super!

@agnieszkasoko6120 2 года назад

You don't talk, but i understand all. Only beacouse of you, i learned a little bit more JS and CSS.

@luckycoder2088 2 года назад

kashaff Api u are my fav

@bhagyasri7784 2 года назад

Please do video for alarams setting in this to and calenders date slides choosen as request and some

@fakeworld2767 7 месяцев назад

Thank You Sir, today first time with your video, I able to create my first mini project.

@mdshehabhossainthuhid611 2 года назад

Awesome

@SkMedia2709 2 года назад

you are doing so good bt plz explain code while coding it is very usefull for everyone when they try it thank you

@anotherbaby9703 2 года назад

Mashaa Allah

@Short_Line901 2 года назад

Amazing sir .... Sir please i request u. U make a playlist of CSS 3 course .. in briefly ... Please 🙏 sir

@julieng.2007 2 года назад

Good job

@UmeshKumar-ec8ck 2 года назад

Can u please provide the the codes

@chainenaimslama1870 Год назад

really you are awesome i'm engineer and i tell you the truth:you are very good engineer

@Machiuka 2 года назад

Best tutorial on css that I see. Congratulation for this video.

@mihirsrivastava9509 2 года назад

Nice design 🔥

@gururajmoger8649 2 года назад

Bro.. use vs code and live server plugin

@tradinglibrarystation Год назад

You are unbelievable, 🙈🙉🙊 what are you doing man

@education3058 2 года назад

Super creative Idea

@akonzoforyan5604 Год назад

This is how the code is written. it's perfect

@artwithakhi4195 2 года назад

Can you please tell me which screen recorder you are using?

@artwithakhi4195 2 года назад

Please reply

@CsCodeway 2 года назад

@@artwithakhi4195 obs studio

@_rohit_s 2 года назад

I've one problem ? I made a table but using div grid and all have fixed column size templates grid .table-header is sticky , table-row have borders .on small screen resolution scrollbar coming in x-axis but when I scroll the border not coming ... Why this is happening do you know

@bhagyasri7784 2 года назад

Iam requesting please make image to set as 3d dimentionalview as visual in one side cube ....

@TheTravelingEntertainer 2 года назад

I never seen anyone making a video like you Perfect teaching awesome hope you make more videos 📹

@saifalikhanize 2 года назад

Awesome work. SetInterval has the timer missing, which should be 1000, otherwise the code inside setInterval will run every ms, making it a bit unoptimised. :)

@corvus278 2 года назад

If you set the interval to 1000ms, it will update the seconds not exactly accurately (because the interval will not count from the beginning of the second)

@mbobouahubert1988 2 года назад

best of

@andreiribac6284 2 года назад

Fantastic!

@shivbagupta7888 Год назад

Salute 🫡 sir you are amazing 👏👏

@Maciejukaszewicz 2 года назад

Brilliant!

2 года назад

So cool!

@MijanurRahman-jo1st 2 года назад

You are genius man.

@Fitoxdxd1 2 года назад

Eres muy pro, en ningun canal he visto tanta magia

@punsmith 2 года назад

A very creative use of custom properties!

@jitujahagirdar613 2 года назад

Awesome bro specially in css dynamic variable that I was don’t know

@KA-4013 Год назад

Your are awesome 😎👍👍

@vrfEducation Год назад

Very amazing. 👍👍👍

@reactjs9201 2 года назад

Love from pakistan

@razshike2988 2 года назад

Brilliant ❤️❤️❤️

@gulnozanizomova1410 2 года назад

I clicked 1st like

@avinashkumarsingh8492 2 года назад

awesome work ❤

@SyedMuzammilMahasanShahi Год назад

Amazing work. Thanks for the share

@NacerCoder 2 года назад

Great work Man i want to make a lot of likes thank you very much. Please Can you tell us where did you learn to code like this please please ... I love your works

@nathan._.ventura 2 года назад

Amazing work! I'm going to study all of your videos!

@alessandroformica6824 2 года назад

Another legend hit

@12mhrafi Год назад

you are just awesome

@maheswarim3834 2 года назад

Very wonderful project. I did this but my clock is not rotating but the time is shown correct. What is the mistake that I have done ? And tell what app that you are using for coding?

@amrit7172 2 года назад

This one is legendary. 🙏🙏🙏🙏🙏

@conrexedits 2 года назад

Thanks for the video and can anyone tell me which song it is cuz it's too relaxing Damn...

@leavemealone5683 2 года назад

Which vs code theme do u use? I love it too much

@mdhossen7082 2 года назад

Wow it's awesome, your video is always helpful

@qrcode1347 5 месяцев назад

does this synchronize to your clock in your computer??

@johnconnor9787 2 года назад

CSS is for changing font color and div width. What are you doing man, are you crazy?

@omakase1890 2 года назад

@masoudmt9403 2 года назад

dude you're amazing ! lookin' forward to your next videos ... thank you

@carlosl-f2433 2 года назад

I have followed along and can't seem to get the second hand to move like yours... come to think of it my digital clock doesn't work either....Oh well, I'll keep looking to see the fix..hopefully, ill see it. Ok, I fixed it all and it works...phew!

@wongsolo5001 2 года назад

can you help with my problem? my problem is writing rotateZ(${hh+(mm/12})deg);(not working in minutes 13:16 - 13:48 ) the hour hand has not changed at all, the color code is the same.

@ThugLifeModafocah 2 года назад

Amazing... really impressive. You have top notch skills...

@malikazamraee3860 2 года назад

Nice work

@AryaTech06 2 года назад

Thank ❣️

@antony714 2 года назад

Simple & Great.....

@Nomi-official23 Год назад

This is Amazing 😮😮

@mushfiqurrahmannasim4588 2 года назад

Your are not just amazing you are super duper amazing ❤️❤️❤️

@semen083 2 года назад

Is any time to make nice datetimepicker?

@bidyasagarmohapatra4014 2 года назад

great design sir 🙏🏻, thanks a lot 😊

@mayurahir9340 2 года назад

Bhi is ko ager muje chota kar ke website ke kise pat me laga na ho to kase kare koye idea dedo 😊😊

@joselopes6698 Год назад

Amazing...

@shankhariswaminathan7477 2 года назад

One doubt: After importing the URL of Google fonts API, why do we still need to define the font family of all the elements (in line 5)? I understand that the API link already contains details about the Poppins font and applies it to our style.css, so it seems redundant to again declare what's been given in line 5. Could you please explain this?

@shanepereira1157 Год назад

The import statement only imports the font API but does not apply the same to all the elements. So we would need to apply the font to each element, or to the entire page as demonstrated in the video between lines 2 and 8.