We build a CSS + JS Clock in Vanilla JS — #JavaScript30 2/30

Показать описание

Рекомендации по теме

Комментарии

Idk about everyone else but i put this into the function to stop the hands from spinning back

if(seconds==0){
= '0s';
= '0s';
= '0s';
} else {
= '0.05s';
= '0.05s';
= '0.05s';

robonyan_yt

Wes, your videos are awesome! Your friendly and informative tone is super engaging and I love how you take time to show us cool and relevant ways to use our tools, like dev tools. Keep up the awesome work, making screencasts is a big investment of time. Definitely a fan, so are a bunch of people, zero downvotes :) you rock man!

mbigras

So, there's a lot of possible solutions to the jumping clock thing. Here's mine:

1. in the script, OUTSIDE of the setDate() function, create a new Date() object. This creates a static snapshot of a single Date object.
2. create a new variable with let: let seconds = time.getSeconds(); This creates a single, static value for seconds.
3. in the script, INSIDE of the setDate() function, put the following line at the top: seconds +=1; Every time the setDate() function is run, the seconds variable will add 1.
4. Enjoy your smooth running clock :)

Prob needs similar things to be done to minute and hour hand. but you get the idea.

Let me know if I'm bogus....

love_tacos

Source Code -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css Clock</title>
<style>

html{
background-color: white;
background-size: cover;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size: 10px;

}

body{
font-size: 2rem;
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;

}
.clock{
width: 30rem;
height: 30rem;
border: 2px solid white;
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 2rem;
box-shadow:
0 0 0px 4px rgba(0, 0, 0, 1),
inset 0 0 0 3px #efefef,
inset 0 0 10px black,
0 0 10px rgba(0, 0, 0, 2);
}

.clock-face{
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px);

}

.hand{
width: 50%;
height: 6px;
background: black;
position:absolute;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.5s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);

}

</style>

</head>
<body>

<div class="clock">

<div class="clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>

</body>

<script>

const secondhand =
const minuteHand =
const hourHand =

function setDate(){
const now = new Date()
const second = now.getSeconds()
const minute = now.getMinutes()
const hour = now.getHours()

const secondDegress = ((second/60)*360)+90
const mindegere = ((minute/60)*360)+90
// const hourdegree =
const hourdegree = ((hour/12)*360)+90
secondhand.style.transform =
minuteHand.style.transform = `rotate(${mindegere}deg)`
hourHand.style.transform = `rotate(${hourdegree}deg)`
// console.log(second);
// console.log(minute);
console.log(hour);

}
setInterval(setDate, 1000);

</script>

</html>

fariaius

Remove the transition 0.05sec from css and we do not get that tickling thing. So, no need to add any extra if statements and timeout function.

rakshitgarg

Hi Wes. Thanks for this series. Really appreciate your work. Greetings!

LeFede

This is really great. Thank you for taking the time in making this.

michaelnugent

I am a bit late to the party but, I applied transform: rotate(90deg); to the clock-face instead of the hands, and was able to skip the +90deg part.

vrokkronos

You are great wesboss. This really helps me.

pulok

You can improve his hour -hand by using
const hours = now.getHours();
const hourDegrees = 0.5 * (hours * 60 + mins) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;

gianluca

I know this might sound like the most foolish thing in the world, but I actually never knew what's the use of chrome developer tools up until now, everyone talks about it here and there and I'm like, what do you guys do with it? Yeah, thanks Wes Bos xDD

omartarek

very clever, I could never think something like this

Lashistoriasdelilith

Some folks asked about having the clock with Second, Minute and Hour hands each at different lengths
I got this working in CSS using CSS variables and CSS calc() - excerpt below and then explanation further below.

:root {
--hand-length: 50%; /*CSS variable we will use for base length and calculations */
}

.hand {
width:var(--hand-length); /* this is the length of each hand */
}

.hour-hand{
/* make the hour hand half the length of the base hand length and then adjust for left position */
width:calc(var(--hand-length) * .5); /* we can use css calc() to do basic calculation using variable */
left:25%;
}

.min-hand{
/* make the minute hand 3/4 the length of the base hand length and adjust for left position */
width:calc(var(--hand-length) * .75);
left:12.5%;
}

NOTES:
1) Once the hand div(s) are rotated 90 degrees from horizontal to vertical, the width and height are essentially swapped. So the base hand length is the "width"
2) Since the whole thing is done in percentages, all hand lengths are proportional to base hand length. We have the default "length" which we use for the (Seconds) hand: 50% of the clock's diameter (the radius). The minute and seconds hands will essentially need to be a percentage of the radius.
3) The "left" of each hand div is actually zero percent (left:0%), even if you rotate it via the css. So if the line pivots off the right endpoint of the line, then if you make the line shorter you will need to adjust the left position so that the hand still falls in place with the center point of the clock (so that all hands have same place for pivoting center point.)
4) Example:
The Second hand is width of the radius by Wes' default (50% of the width of the circle/clock).
If the Hour hand is half the length of the Seconds hand, the hour hand is 50% of the radius.
However, if we leave the Hour Hand at the same x position, the pivot point of the hour hand will not be in line with the pivot point of the Seconds hand.
We then have to move over "left" position of the Hour hand so the clock has both of these hands pivoting at the same point.
If diameter is 100 across, Seconds hand would be 50 width and Seconds x position is 0. Hours hand 25 width and we need to move the left position over 25 so that the hands line up. Similar case is true with Minutes.
The pivot point is on the right endpoint of the line, so they all have to line up so that the clock hands pivot at same point - the center point of the clock.

erikhendin

great tutorial. love the series. you forgot the .getMinutes for the hours hand though!!

drumforhim

bos you're a great teacher... wish you we're fully youtube based.

collins

Really nice tutorial here, but could you please could you add onto the "finished" solution how to remove the strange back tick at 0s, I cannot get it to work!

YouYubeUser

Man, thank you very much for this tutorial.

wxIyz

you missed the hours to set for hourHand, instead used minutes, BTW great content

aashiq.ahmed.m

I want to decrease the length of the Hours hand compared to seconds and minutes hand ? how do we do it. I tried with this

.hour-hand {
width: 31%;
height: 6px;
background: yellow;
position: absolute;
top: 65%;
left :12%;
transform:rotate(45deg);
transform-origin:100%;

}
It worked when the clock was not using the js code. but once it started using the degree code, the hour hand was misplaced

saifumar

every time i hear that rock intro i just neeeed tooo heaaar the whooole thiiing

aurumon

We build a CSS + JS Clock in Vanilla JS — #JavaScript30 2/30

Day 023 - 🤯 Css order button v2 design #coding #programming #cssanimation #webdevelopment #css #html...

Creating Animated Borders for Your Cards with HTML and CSS

I challenge a CSS Magician to a CSS Battle!

How To Build A Landing Page With HTML And CSS | HTML & CSS Landing Page

Why I only use vanilla HTML, CSS, and JS on YouTube

Learn CSS Flexbox in 20 Minutes (Course)

Learning JavaScript for the First Time After HTML and CSS

Learn GRID-AREA to Build Amazing BENTO GRIDS | CSS Tutorial

Liquid Glass with refractions in CSS

How To Create Registration Form Using HTML CSS & JavaScript

How to create your first website💻 #coding #website #webdev #code #shorts #html

Learn CSS Flexbox Flex-wrap in 24 Seconds

How to center a div.

5 CSS Tips & Tricks for better Responsive Web Design

Maybe the easiest way to share HTML, CSS, and JS?

Transform your web pages with our seamless background animation generator! #css #cssanimation #code

Personal Portfolio website design using pure HTML, CSS & JAVASCRIPT | Responsive portfolio websi...

😎🖋️ Create Cool Text Animation with HTML & CSS

The easiest improvement you can make to your CSS

Learn How to Create a Responsive Grid with CSS in 24 Seconds

🌟Creating a Glowing Button with HTML and CSS: A Step-by-Step Tutorial

Fastest way to learn Web Development #webdevelopment #html #css #javascript

HOW TO MAKE 3D LOOKING BOX/CARD USING CSS #html #css #javascript #webdesign

'Unleashing the Power of Web Development in 30 Seconds! 💻🌐 Exploring HTML, CSS and JS.