JavaScript 30

I took the JavaScript 30 Day Challenge by @wesbos.
I encourage you to grab the course at https://JavaScript30.com.
Wes writes some of the best tutorials whether you’re just learning or looking for a refresh.

Since I deviated a bit from the course material, I decided to post my solutions as alternatives.
Each of my solutions have been added in my github with file name index-ARIOS.html.
I welcome PRs or suggestions. Sharing is caring, afterall.
Enjoy and follow me on Twitter! @stpColabr8nLstn

Day One - JavaScript Drum Kit

View codepen (sans sound)

The only major deviation here is that I opted to use keyup rather than listening for the end of transform.

Original Solution:

  function removeTransition(e) {
    if (e.propertyName !== 'transform') return;
    e.target.classList.remove('playing');
  }

  const keys = Array.from(document.querySelectorAll('.key'));
  keys.forEach(key => key.addEventListener('transitionend', removeTransition));

My Solution:

  function endSound (e) {
    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
    if(!key) return;
    key.classList.remove('playing');
  }

  window.addEventListener('keyup', endSound);

Day Two - JS + CSS Clock

View codepen

For today I played with a couple of ideas because some of the lines appear redundant, save for the time unit specified. In the end I couldn’t really come up with a solid way to minimize the code much further. Any way I see it, you gotta have three different lines for each one.

However, I did add a function to calculate the degrees based on the time unit. Memory-wise it’s less efficient but I think it looks cleaner and I LOVE clean code. In my experience it’s best to use a function in this case, mostly to minimize human error. I recognize this is a small scale project and it’d be easy to spot the error but in general I find it’s good practice, so why bend the rules, ya know?

Original Solution:

  const secondsDegrees = ((seconds / 60) * 360) + 90;
  const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
  const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;

My Solution:

  function calcDegree (unit, totalUnits) {
    return ((unit / totalUnits) * 360) + 90
  }

  // Then call function in setClock
  const secDeg = calcDegree(sec, 60)
  const minDeg = calcDegree(min, 60)
  const hrDeg = calcDegree(hour, 12)

Speaking of OCDs… you might also notice that I separated my files. I’m all about the separation of powers. Same goes for code functions. So you’ll see I have added a script.js file for the glorious JavaScript and style.css for the lovely style.

Day Three - CSS Variables

View codepen

I have never used CSS variables. Sad but true. So today was a fun one! I didn’t get too wacky about finding an alternate solution but I did “enhance” the page a bit. I added a new image of my gorgeous dog (because who wouldn’t want to see him?), changed the base to purple (it matches my terminal) and added some toggles for border-radius and width.

Original Solution:

  :root {
    --base: #ffc600;
    --spacing: 10px;
    --blur: 10px;
  }

  img {
    padding: var(--spacing);
    background: var(--base);
    filter: blur(var(--blur));
  }

My Solution:

  :root {
    --base: #800fff;
    --spacing: 10px;
    --blur: 10px;
    --width: 100px;
    --border: 5px;
  }

  img {
    padding: var(--spacing);
    background: var(--base);
    filter: blur(var(--blur));
    width: var(--width);
    border-radius: var(--border);
  }

As mentioned yesterday I’ve started dividing my files up so you’ll notice that today, as well.

Day Four - Array Cardio Day 1

This is a great way to flex your JavaScript muscles!

I use these methods pretty regularly and really enjoyed the format of today’s tutorial. Today I opted to approach the #7 slightly differently:

Original Solution:

    const alpha = people.sort((lastOne, nextOne) => {
      const [aLast, aFirst] = lastOne.split(', ');
      const [bLast, bFirst] = nextOne.split(', ');
      return aLast > bLast ? 1 : -1;
    });
    console.log(alpha);

My Solution:

    const alphaPple = people.sort((a, b) => {
      const aLast = a.split(', ')[0];
      const bLast = b.split(', ')[0];
      return aLast < bLast ? 1 : -1;
    })
    console.log(alphaPple);

Since we’re not using the first name I didn’t even bother pulling it out of the split array. You could even abstract it further and just do:

    const alphaPple = people.sort((a, b) => {
      return a.split(', ')[0] > b.split(', ')[0] ? 1 : -1;
    })
    console.log(alphaPple);

But this is just unreadable and would make me shake an angry fist.

Day Five - Flex Panel Gallery

This was a great intro to utilizing flex. JavaScript was super minimal today so I didn’t see room for any major additions. As a bonus I just signed up for the What the Flexbox?! class because I want to know more of the flex things!