This blog might be short. It’s Daylights Savings Time tomorrow. So, I’ll be losing an hour. It wouldn’t usually matter except that I work on the weekends. Then, no work on weekdays.

This setup has allowed me to devote a lot of time learning how to code. But, it’s also the reason why I have to keep this short. I need to catch some zzz’s.

For day 3, I was scared that I wouldn’t have time to finish the project. This is my second day of JavaScript30.com and I wanted to make sure I finish it. Because I worked til 4, I only have the night to code. Plus, I had to cook. Also, we are watching my nephew tonight. Oh boy!!!

I fired all engines as soon as I had the time to start coding. I watched the video first. It was a 10 minutes long. I wanted to make sure that I was on the right track before I jumped into coding.

Then, off I go. Again, like yesterday, instead of using the starter kit, I coded from scratch.

Yesterday, my biggest headache was aligning and centering. That wasn’t such a problem today. I guess that was the incremental knowledge I got from doing the Drum Kit project.

I had doubts about learning from this course because, I felt like I cheated yesterday by doing a partial walk through. However, some of my chingu.io cohort mates assured me that going through JS30 is worth it. There are valuable lessons to be learned. I realized today that they are right.

It took me about 1 hour to finish the HTML and CSS part. Then, another 2 hours for the JS part. The JS part was also a bit easier today than yesterday.

Here’s some of the things I learned.

Date – the date instance gives you a representation of a single moment in time. It’s value is in milliseconds. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

The Date instance includes several methods. The 3 I used are

  • getSeconds()
  • getMinutes()
  • getHours()

These 3 allowed me to grab the values or hours, minutes, and seconds which I used to manipulate the hands of the clock that I created with divs. I mainly used the transform: rotate property to rotate the hands of the clock.

Alright that’s all folks. Talk to you tomorrow.

Before you go, check out my project here.

Code at Github
Live App at jonmaldia.com

twentyseventeen
Day[3] - CSS Variables with JavaScript to Change Properties

Leave a Comment

Your email address will not be published. Required fields are marked *