Javascript 30 Notes for Day 1, 2.

I'm actually on Day 6, but I like to have a good buffer to go over notes and make sure everything is uploaded to GitHub properly when completed.

This is Wes Bos' JavaScript 30, sent to me by a good friend, and I'm going to be doing this every day for a month.

Then, probably doing them again.

Day 1, we made a soundboard; GitHub files. Day 2, It's a clock...but no files.

data attributes (data-___) data key to data key  audio (find audio and play it, find div so it can animate itself)

line 61 - we’re listening for an event.

the code won’t have any reaction on the screen, but in the console it will.

audio.current time =0; rewinds it back to the beginning so you can wail on the buttons like a madman

audio.play(); plays the noises

in css, see transition:all, which scales up the border color. You can put a timeout in both the html and css, but they may go out of sync.

I changed my colors to hexidecimal code #afcd38

in the remove transition function (

if(e.propertyName !== 'transform') return;

this.classList.remove('playing'); 

)

When you go to Elements, to the keys div class, and press a corresponding letter, you can very quickly see the classes change.

If you press and hold the corresponding buttons, you can get the animation stuck in permanent ‘on’ mode.

Day 2; There's no code files because I still haven't gotten my clock to move, and I'm not sure why.

 * a rotate on each hand depending on the time

• transform-origin

Have to adjust the axis via the origin (100% among the x-axis to put us on the very right hand side (or, the middle of a clock)

• transform: rotate

rotate the entire thing by default 90 to start at 12:00, and the second hand transform with rotate gets a snappy tick.

But since default is left to right instead of top to bottom, it needs to be offset.

• transition

 to 0.05 seconds

There’s a weird little backwards transition when the minute hand hits 12 all the hands kind of freak out for a second as the degrees go backward.

We can temporarily take off the transition with some if statements.

• transition-timing-function

 (you can make it go backwards, or make a cool little bounce. Let’s make the bounce.)

Establish your secondhand with a const and document.queryselector.

SetDate function

run it every second with setInterval (setdate, 1000);

const statements of now, seconds, and secondsDegree

0 seconds = 0 degrees

60 seconds  = 360 degrees.

(Though I suppose it should be 60 seconds is also 360 degrees)

Pull it into the function and tell it to transform via rotation.

---

EMPLOYERS: This is me sharing notes and putting new skills into practice.