Skip to main content

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.

Comments

Popular posts from this blog

What Do You Need? [AKA; List of Offered Services] (2020)

I am a remote consultant. I enjoy having the flexibility to take on temporary projects from time to time! I start at part-time, temp work for now. If we like each other, we can renegotiate. If anything sounds weird, out there, or unusual - Feel free to e-mail me. Doesn't have to be tech-related. I just have to find it interesting and flexible.


What I do for you:
Simplified writing about tech. [Example Job Description, 2, 3] You want to pay me to write more of *waves hand* this blog? I am game.
Technical Analyst [Example Job Description]
UX Auditing [See Here]eCommerce merchandising [See Here]Entry-Level Web Support [Example Job Description]
Email Marketing Specialist [Example Job Description]  ProofreadingText-based support [Example Description]. 
The following is what I was trained in. Roles will be considered if I feel it's the best fir for you. Still part-time, contract, and/or temporary
Azure
Cisco routing and switching technician

Volunteering:
Find me on Jumpstart and CareerVill…

Azure Networking Options - Core Cloud Services

I have done a lot of AWS things on here. Time to give Azure some attention. After all, since employers don't think Cisco or COMPTIA certifications are important, maybe Microsoft ones are?

First, let's really think about why these are the two biggest cloud services providers in the world:

They've been doing internet things for a long time.Amazon launched in 1995, a virtual bookstore.
Microsoft, well, you know. 

They've lived, breathed, and frankly, created, infrastructure that we use today, that they're selling to us today. Of course the Store of Everything and the Company of Everything would encourage us to put everything in their hands.

Also: Azure has a lot less silly names for modules. Important. I appreciate straightforwardness.


I said 'a lot less', not '100% sensible names'

Microsoft has a clear set of Azure Fundamentals that anyone can interact with. Let's talk about networking basics, basically to say, again, "Hi, employers, I have an …

Search and Infiltrate: How to Deeply Investigate a Company's People [6/4/2020]

Latest Update - 6/4/2020


This is a bit of an impromptu post after reading this article.

I had a small thread about this on Twitter, a blog post is a lot better to get the information out in a clear way.

Have you ever used Recruitin.net, came across a group of people who match Your Dream Company, Dream Location, and do your Dream Job on LinkedIn...and they're not active?

What was the POINT, am I right?  A place for professionals to network, but they're not active ...because they have a job to do! You want to be like that!

Unfortunately, in this day and age, unless you have a 'relationship' with someone, they're not going to help you.

Hm. 

(Note: 'relationship' is different than relationship).

I'm not here to talk bad about recruiters - They have a difficult job, I know I couldn't do it! - And even they want a relationship before they place you somewhere, competency be damned.

What do you do instead?

This:

(Note; I'm using my own URL for this and …