jacwynn.com

App Developer

Building a Clock – Day 2 Javascript Challenge

Welcome to Day 2.  This project is involves creating a functioning clock that displays the time.  The code we are given is just the make up of the clock with the seconds, minutes and hours hand.  It’s our job to animate the hands so it works as a real clock.  Some of things to be familiar with in this project is the Date object Javascript provides us with (this is so the clock knows the real time), and how to transform elements with CSS.  So lets go over what these do before getting into the project.

 

Javascript’s Date object gives us a lot of options that allows us to do different things regarding dates and time.  The MDN website says that this object represents a single moment in time.  A cool fact about this is the Date object is based on a time value that is the number of milliseconds since January 1, 1970.  Regarding this Clock project, we are going to need the seconds, minutes, and hours for the current time in order for the clock to work.  The method to get the current time is .now().  This is used on the Date object.  In order to get the seconds, minutes, and hours we will call the getSeconds(), getMinutes(), and getHours() function.

 

 

Now that we are familiar with the Date object, we have to animate the hands so that it works like a real clock.  In order to do this we are going to use the CSS property transform.  And on transform we need to rotate the hand.  Since the transform-origin default property is set to 50%, that makes it rotate in the middle instead at the end like how we want it.  So all we have to do is set transform-origin to 100% to achieve what we want.

 

One last thing we can’t forget to talk about is the setInterval method.  This repeats a given function at every given time-interval.  For this project, we have to set the time to 1 sec.  This will run the code (rotating the hand) every second.  This will give us the ticking functionality and make our clock functional.

 

To conclude, we learned about Javascript’s Date object and setInterval method.  And we learned how to rotate elements using the transform CSS property.  Make sure to stick around and what’s next for Day 3.

 

Here is the source code for this project and link to see the finished project.

Source Code

Finished Project

Building a Drum Kit – Day 1 Javascript Challenge

It’s the first day doing this Javascript Challenge I learned the other day.  I’m excited to be able to sharpen my skills and improve as a programmer.  Hopefully these challenges can help other people with their programming journey as well.  I will try to be as clear as possible, but this is new to me so bear with me!  So let’s begin.

 

The first challenge is creating interactive functionality for a Drum Kit.  Basically I need to play a sound whenever a corresponding key is pressed and add a yellow highlight around the box.  In order to do this, I’m going to have to understand the addEventListener() and querySelectorAll() function, data attributes and audio tags for HTML5, and how to loop through the list the querySelectorAll function returns.  Reading this post will give you an idea on what those things are.

 

What is addEventListener() function?

The addEventListener() function attaches an event handler to a specified element.

Syntax: element.addEventListener(‘event’, function(), useCapture(optional))

Basically you add this function to an element whenever you want to listen for some kind of event.  An event could be keypress, click, or mouseover.  Click here to see the rest of events.  A situation you would use this is when you have to add multiple events to an element.  With onclick it is not possible to add multiple events so it is best to use addEventListener whenever you need more than one event on a element.  Be careful though, addEventListener isn’t compatiable with IE browsers.  Instead use the attachEvent method for IE browser using versions below 9.

 

 

What are Data Attributes and Audio Tag?

Next we have Data Attributes for HTML5.  These are pretty cool.  Data attributes store additional/custom information about an element.  They can be useful whenever using CSS and even Javascript.  The way to use Data Attributes is the same way you use different attributes in HTML.  It is just like the href attribute for anchor tags, src attribute for image tags, and the class attribute for any kind of HTML element.  An example of what a Data Attribute looks like is basically “data-” then whatever data you want to hold next to that.  For instance data-key=”65″ (key : 65).  And if you think about it, it is basically just a normal key/value pair that is stored on that particular element.

 

In this project, you’ll see there are different sounds that relate to a particular instrument.  The sounds are using an audio (<audio></audio>) tag.  An audio tag specifies a standard way to embed audio in a web page.  Just like the image tag, the audio tag accepts a file path from the sound file using its src attribute (just like image tag).  It accepts three different formats which is mp3, ogg, and wav.  The different properties this tag has allows you to play/pause audio and also set volume and duration.

 

Using querySelectorAll() and Looping Thru NodeList

In Javascript, there are many different ways to select any given element within the DOM.  One way is to use a function called querySelector.  This returns the first element within the document that matches the specified selector.  An example of this would look like this:

var jac = document.querySelector(“.jac”);

What is in quotes would be considered a CSS class jac.  Now we have the querySelectorAll function which returns a list of the elements within the document that match the specified group of selectors.  The object returned is a NodeList.  Something to keep in mind when using querySelectorAll is, since it returns a NodeList, you can’t loop through with a forEach it like you would any other array.  In order to loop through this NodeList using pure Javascript you have to use the .call() function.  So your loop would look like this:

keys.forEach.call(keys, function(el) {

     el.addEventListener(‘transitionend’, removeTransition);

})

keys is the array, el (being passed into function) is each individual key, and on each key, a event listener is being added to it.  This is how you would you to loop a NodeList.

 

Conclusion

That pretty much sums up the Day 1 project.  I definitely learned a lot and enjoyed trying to explain it so that it would really stick in my mind.  Hopefully this helps somebody out there.  Day 2 project seems to be about making a clock so that should be interesting.  I’ll see you in the Day 2 blog post.

 

Oh yea, here is the link if you wanted to checkout the Drum Kit project.

Day 1: Drum Kit

#Javascript30 Challenge

Recently, I have been trying to find ways to become better at programming. Being in this field you have to always keep your skills sharp and add to your skill set on top of that.  To me, that’s what makes programming fun.  There is an endless amount of things you can learn in the programming world.

 

My goal for the year was to become a stronger Javascript developer.  So far, with my interest in React Native, I can say I’m better than I was last year, but I don’t want to settle, I want to get as good as I can at this stuff.  I ran across the #Javascript30 challenge that seems pretty cool.  Basically you build 30 project in 30 days using pure Javascript.  This is interesting to me because I been reading that it is important to get a good grasp on plain Javascript before hoping on all these new frameworks/libraries.  Having the knowledge of plain Javascript can help you understand what going on underneath the hood and it helps with debugging issues on those new frameworks.

 

Anyway, my goal is to have a blog post for each project/day so hopefully someone else can learn from this experience.  Keep a look out for Day 1: Drum Kit