Making a clock - outline

Here are some things that will help us make a clock.

CSS Transforms

CSS transforms give us tons of ways to radically alter the appearance of elements. We can scale, rotate in 2d and 3d, move up, down, left, right, stretch, and more.

Transform:

translate, rotate, scale

Transform-origin

Determines what is treated as the "center" when transforming. Here are some examples of values for transform-origin:

1#myDiv {
2  transform-origin: center; /*default*/
3  transform-origin: top left;
4  transform-origin: center left;
5  transform-origin: 0% 10%;
6}

Javascript for the clock

setInterval, setTimeout

See the end of the last lecture

document.querySelector:

This lets us grab elements in the DOM using CSS selectors.

1let myElement = document.querySelector("#grid"));

element.style

After getting a dom element, we can change its CSS style with javascript!!

1myElement.style.color = "red";

Date()

Returns a string representing the current date. Try entering Date() in the console!

1console.log(Date());
2// Output: "Mon May 09 2022 06:42:31 GMT-0400 (Eastern Daylight Time)"

String.split()

Calling myString.split(",") returns an array where the string has been split up at every comma for example. You can use anything you want as the "splitter".

1let colors = "red,green,blue";
2console.log(colors.split(","));
3//["red","green","blue"]

parseInt

If you have a string that you want to convert to a number, put it inside parseInt(). For instance, this won't work reliably:

1let numberString = "5";
2console.log(numberString*10)

Instead do this:

1let numberString = parseInt("5");
2  console.log(numberString*10)