Amazing Working Analog and Digital Clock Design using Html CSS & Javascript
Vložit
- čas přidán 28. 08. 2024
- 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
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.
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!
@@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.
Can u share source code??
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!
OMG you did my request LMAOOO (anyway, love ur work as always :D)
Thanks for the idea!
@@OnlineTutorialsYT 0
@@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
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
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?
Thank you ❤️
(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)';
u saved me thanks
Thanks a lot brother, i'am suffering around 1 hour to find this error 🎉❤❤❤
You made it awesome yet simple to understand.
wow you are on next level bro!!!
Wow! An artist by passion, programming as a profession⭐⭐👍👍
you are the best css creative master in india.
He is a kathmulla और कठमुल्ला सिर्फ पेंक्चर बनाते हैं
i love u mr Hero ; you are mazing man>>>> go head
Super ! Best Teacher, thank you ❤️
I realy love the box-shadow part, it looks like you are painting your art
Nice work bro ☺️☺️☺️☺️ but it could be more great if it includes audio so we can get your experience also 😉😉😉🤠🤠🤠
Legend is here with his amazing work 😁👍
와 진짜 항상 대단한거 같음. 오늘은 이거 따라쳐야지...
Omg...i am a civil Engineer bt i want to be a development engineer ...i learn from CZcams...bt never seen this content before...nice UI...it is just awesome bro 🤝✌️
Superb boss... The best 👍
woow it is nice ans amazing now i try make it...
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
same here
Same here
same here
Had the same problem, check if you have used the correct variable names..
Samee problem
You don't talk, but i understand all. Only beacouse of you, i learned a little bit more JS and CSS.
Thank You Sir, today first time with your video, I able to create my first mini project.
Love and respect for your hardwork. Hatsoff
You are one of the best js designer I have ever seen..
Hey really you super at coding in terms of design and development of creative works thanks OT
you are doing so good bt plz explain code while coding it is very usefull for everyone when they try it thank you
really you are awesome i'm engineer and i tell you the truth:you are very good engineer
Guy, you are good!
Awesome, but, sir, U should use native JS "padStart()" function instead of ternary operator for filling string with zeros.
This is how the code is written. it's perfect
Nice clock 😇👍🏻
ever best CSS video💖💖
Excellent bro
Thanks!
Amazing sir .... Sir please i request u. U make a playlist of CSS 3 course .. in briefly ... Please 🙏 sir
I never seen anyone making a video like you Perfect teaching awesome hope you make more videos 📹
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
Best tutorial on css that I see. Congratulation for this video.
kashaff Api u are my fav
Best Channel 🥳🥳🥳🥳
I clicked 1st like
Can u please provide the the codes
You are unbelievable, 🙈🙉🙊 what are you doing man
Great Great and great
Superb.
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. :)
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)
awesome clock
You are genius man.
super ! Best
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
Amazing work! I'm going to study all of your videos!
Nice design 🔥
Mashaa Allah
Another legend hit
Greetings from Russia
Wow it's awesome, your video is always helpful
Eres muy pro, en ningun canal he visto tanta magia
Super!
dude you're amazing ! lookin' forward to your next videos ... thank you
Bro.. use vs code and live server plugin
Please do video for alarams setting in this to and calenders date slides choosen as request and some
Super creative Idea
Amazing... really impressive. You have top notch skills...
This one is legendary. 🙏🙏🙏🙏🙏
Iam requesting please make image to set as 3d dimentionalview as visual in one side cube ....
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?
Awesome bro specially in css dynamic variable that I was don’t know
Salute 🫡 sir you are amazing 👏👏
It's amazing!🔥
I recently started learning web development and I'm excited about this channel.
Your are not just amazing you are super duper amazing ❤️❤️❤️
Awesome
Can you please tell me which screen recorder you are using?
Please reply
@@artwithakhi4195 obs studio
Brilliant!
Love from pakistan
So cool!
Good job
Very amazing. 👍👍👍
A very creative use of custom properties!
Brilliant ❤️❤️❤️
Fantastic!
Your are awesome 😎👍👍
CSS is for changing font color and div width. What are you doing man, are you crazy?
Zz
you are just awesome
Amazing work. Thanks for the share
great design sir 🙏🏻, thanks a lot 😊
awesome work ❤
Thanks for the video and can anyone tell me which song it is cuz it's too relaxing Damn...
Bhi is ko ager muje chota kar ke website ke kise pat me laga na ho to kase kare koye idea dedo 😊😊
Amazing
Reconozco que quede muy impresionado por ver esto. Lo único que puedo hacer es felicitarte y que sigas a delante.
Al fin vi algo de nivel profesional 💪
Why does the asterisk can't read in vs
Sir, I have learned web design. I want to learn more. What I will do next will be good for my future. Please tell me Sir In between the MEAN stack and MERN stack
This is Amazing 😮😮
if the movements of the needles were fluid it would be impressive
It's simple add a transition: 0.1s easy-in;
in the pointer class
5:15 I have problem my middle point is gone on left of the clock WHT do now??
Edit: Plz tell
the code is not working or not showing the same output around 12:00min
i was literally dancing the whole video because of the music
Which vs code theme do u use? I love it too much
Simple & Great.....
Super cool effect, thanks.
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!
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.
I think the one who made the css can't do all these codes specially the ( time ) script collection 😆😆😆😆