30 days of Javascript – Part 1 of 6

30 Days of Javascript


This is part 1 of 6 of my Javascript 30 by Wes Bos. It’s a free course and it accomplishes two things: 1) It pushes you to code every day and 2) it gives you bite-size challenges of Javascript to practice. The best way to really learn to code is to do it over and over again every day even if you make mistakes.

I wanted to challenge myself to write more vanilla Javascript and more ES2015. This was a perfect way to put those skills to practice in more real-web scenarios, not just Hello World and console.log().

I will document my thoughts on each day and post some of my code to show how I came up with some of the solutions where Wes left it up to us to solve. So let’s begin!


Day 1 – JavaScript Drum Kit

Um, so I didn’t know transitionend was a thing! So useful! It targets when CSS properties end and allows a callback function to trigger after that property has finished (great for animations or anything with timing). Here we added and removed the playing class not using jQuery:

this.classList.remove();
this.classList.add();
this.classList.toggle();

I am really starting to enjoy thinking in vanilla javascript and not feel bound to jQuery’s heavy DOM manipulation. Plus not being married to that library feels liberating. This is helping improve how I think in a hierarchy structure which is useful for things like React.js.
Big thumbs up on breaking everything up into smaller functions and event listeners, attaching the initial listener to the window object.
Also loved the fun aspect of this project. I was able to demonstrate this to my kids. They made the connection between pressing different keys and seeing how they animate on the screen and play different sounds. This gives them some insight into the cause/effect relationship in web development.

See the Pen JavaScript Drum Kit by Stephanie Denny (@stephanie_denny) on CodePen.0


Day 2 – JS + CSS Clock

I loved playing with date and time in javascript. If I were to code this on my own, my brain would probably think of much longer ways to code this, but I liked how he broke it down so simply by dividing the current time by 360 degrees and assigning that value to the CSS transform: rotate(90deg) property for the hour, minute and second hands.

Then he had us fix a glitch on our own where the transition causes the clock to wind backward for a split second and start over. I threw in an if statement that checked to see when the second hand hit 450 degrees (360 + 90) because we started out at 90 degrees. This was tricky. I’m used to jQuery, so I had to figure out how to capture the value of the transform:rotate(450deg); in vanilla Javascript. So I dug around and found window.getComputedStyle(secondHand, null); where null is a pseudoelement.

The next tricky part was I added the getPropertyValue method to look for ‘transform’. I had to console.log(secondStyle) to see what printed out and found it was printing matrix values instead of actual degrees. Wow. It pays to console.log(); people! So I copied the matrix value when the second hand hit 59 seconds and used that in my if statement. Then when that was true, I set the secondHand style transition to 0. Otherwise, I had to remove the transition property after it was placed from the style tag, or the cool ticking animation would go away for good. This was my solution. I’m sure there is a cleaner way to do it, but I was happy to at least get this working.

let secondStyle = window.getComputedStyle(secondHand, null).getPropertyValue('transform');
if (secondStyle == 'matrix(0.207912, 0.978148, -0.978148, 0.207912, 0, 0)') {
    secondHand.style.transition = "all 0s";
    minuteHand.style.transition = "all 0s";
    hourHand.style.transition = "all 0s";
} else {
    secondHand.style.removeProperty('transition');
    minuteHand.style.removeProperty('transition');
    hourHand.style.removeProperty('transition');
};

See the Pen JS + CSS Clock by Stephanie Denny (@stephanie_denny) on CodePen.0


Day 3 – CSS Variables

Holy cow, this was a fun one! I loved how simple this was. Wes broke this down in such a practical way. It was great to see how you can change the value of the sliders and watch it immediately apply to the image element. This is what CSS generators are made of. The next challenge would be to add a textbox that displays the generated values, and wala! you have a style generator on your hands. The possibilities are endless.

So we start out with some default styles, but wait a minute, variables in CSS! No, not SASS. Plain old CSS. WHAT? I. Love. This. So after I toned down my excitement, we then apply the variables to the :root and then apply those to the selector like so:

 :root{
      --base: #ffc600;
      --spacing: 10px;
      --blur: 10px;
    }
img{
      padding: var(--spacing);
      background:var(--base);
      filter:blur(var(--blur));
    }

Then in javascript, we loop over all the inputs with two event listeners: change and mousemove and capture the value of the name attribute plus the suffix of px using a custom data-sizing="px" attribute.

Also, interesting to know that document.querySelectorAll('.someElement'); returns a Node List and not an array as you would assume. But you can still do a forEach on the Node List which is totally useful. The more you know!

Check it out, play around with the controls. Also, do an inspect element and see the data attributes dynamically applied to the element. You can also add the attributes to other elements on the DOM to override anything in :root.

See the Pen CSS Variables by Stephanie Denny (@stephanie_denny) on CodePen.0


Day 4 – Array Cardio

console.table = HELLO! Where have you been all my life?
I. Loved. This. Exercise. This was different from the previous lesson because it was entirely in the console, no HTML or CSS manipulation. Just some good old fashioned fundamentals at full-speed. We covered the full gamut working in Arrays, including sort, map, filter, reduce, etc.
Then we took our functions and shortened them to arrow functions and condensed our if statements to ternary ? : style

PHEW! No joke on the cardio aspect. Wes grinds through these pretty quickly and suggests we repeat this one as often as needed to really get the concepts down. Yes, Wes, I will gladly heed that advice!


Day 5 – Flex Panels Image Gallery

There wasn’t a lot of javascript going on here, and that’s ok. We get to play with flexbox here and use the transitionend to wait for the flex column to finish growing before we bring in the top and bottom letters using transform: translateY(-100%);.

As I said before, I love the interplay between CSS and Javascript. CSS really shines and handles the animation/transitions really well. Javascript handles the event listening and user manipulation as it should. CSS purists rejoice! I am not a fan of using Javascript to do CSS’s work. I think we should do as much as possible in CSS before reaching into our Javascript toolbox. I believe in leaner, lighter pages and using this approach accomplishes that goal. I’m sure many would disagree, but the front-end developer in me has very strong opinions on this matter.

See the Pen Flex Panel Image Gallery by Stephanie Denny (@stephanie_denny) on CodePen.0

More code:

Check out Part 2 of the Javascript 30 challenge. Or head over to Wes Bos’ course and give it a try for yourself.

Advertisements

One thought on “30 days of Javascript – Part 1 of 6”

Leave a Reply

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