loading...

Day 12: #100DaysofCode and Day 1 of #Javascript30

sincerelybrittany profile image Brittany ・3 min read

#100DaysofCode (65 Part Series)

1) Day 1 of #100DaysofCode - Understanding Iterators 2) Day 2: #100DaysofCode - I updated to Catalina and All HELL Broke Loose 3 ... 63 3) Day 3: #100DaysofCode - Oh No, SQL 4) Day 4: #100DaysofCode - More Iterators 5) Day 5 - #100DaysofCode - Setting up a Sinatra App 6) Day 6 : #100DaysofCode - Setting up a Sinatra App : Part 2 - Config.ru 7) Day 7: #100DaysofCode - Setting up a Sinatra App - Part 3 8) Day 8: #100DaysofCode - Setting up Sinatra Database - Part 4 9) Day 9: #100DaysofCode - ActiveRecord and a Database 10) Day 10: #100DaysofCode - ActiveRecord and a Database 11) Day 11 : #100DaysofCode - RESTful Routes 12) Day 12: #100DaysofCode and Day 1 of #Javascript30 13) Day 13 - #100DaysofCode - #Javascript30 - Day 2 - CSS + JS Clock 14) Day 14: #100DaysofCode - Finalized my Sinatra Project -Security 15) #Day 15: #100DaysofCode - View my Sinatra Project 16) Day 16 - #100DaysofCode - Understanding MVC 17) Day 17 : #100DaysofCode - Knowing your Ruby Version & what Errno::EADDRINUSE means is important! 18) Day 18 of #100daysofCode - 3 challenges 19) Day 19 of #100daysofCode - Hashes 101 20) Day 20: #100DaysofCode - Practice makes perfect 21) Day 21 : #100DaysofCode - Cascading Style Sheets 101 22) Day 22 - #100daysofCode - CSS 101 Part 2 23) Day 23 - #100DaysofCode - Updated My Portfolio 24) Day 24 - #100DaysofCode - Practicing CSS Grid and Emmet Shortcuts on VSCode 25) Day 25 - #100DaysofCode - Intro to Rails 26) Day 26 - #100DaysofCode - Accessing Rails Commands 27) Day 27 : #100DaysofCode - Still reviewing the basic rails concepts . . . 28) Day 28 : #100DaysofCode - Adding Dev.to blogs to personal page 29) Day 29 : #100DaysofCode - Very Simple Rails App CRUD Practice 30) Day 30 : #100DaysofCode - Very basic rails continued 31) Day 31 - #100DaysofCode - Rails Routes 101 32) Day 32 : #100DaysofCode - Resources for learning to code 33) Day 33 - #100DaysofCode - Setting up my app on Heroku 34) Day 34 - #100DaysofCode - New/edit action versus create/update action 35) Day 35 : #100DaysofCode - A Code Challenge Completed 36) Day 36 - #100DaysofCode - Rails form_for versus form_tag 37) Day 37 : #100DaysofCode - 30 seconds of code 38) Day 38 - #100DaysofCode - Built my first basic rails application 39) Day 39 : #100DaysofCode - I updated my github profile page 40) Day 40 : #100DaysofCode - I need project ideas 41) Day 41 : #100DaysofCode - Collaboration 42) Day 42 : #100DaysofCode - The Planning of a Project 43) Day 43 : #100DaysofCode - The Amazing Faker Gem 44) Day 44 : #100DaysofCode - Code or Youtube? 45) Day 45 : #100DaysofCode - Basic Nested Forms 46) Day 46 : #100DaysofCode - Still reviewing form_for 47) Day 47 : #100DaysofCode - How do you code? 48) Day 48 : #100DaysofCode - Code Along 49) Day 49 : #100DaysofCode - Still Coding Along 50) Day 50 : #100DaysofCode - Keep Coding Along 51) Day 51 : #100DaysofCode - Code Along 52) Day 52 : #100DaysofCode - No Wifi, No Problem 53) Day 53: #100DaysofCode - Created user log in and log out functionality 54) Day 54 : #100DaysofCode -Review on setting up log in & sign up 55) Day 55 : #100DaysofCode - In Need of Advice on Reading Poorly Written Documentation 56) Day 56 : #100DaysofCode - A Tweet - Devise - Users 57) Day 57 : 100DaysofCode - Remembering to Git Commit Often 58) Day 58 : #100DaysofCode - Beginning to Learn Python 59) Day 59 : #100DaysofCode - Focused on My Rails Project 60) Day 60 : #100DaysofCode - CSS in Rails 61) Day 61 : #100DaysofCode - Omniauth? 62) Day 62 : #100DaysofCode - Sign in using a Third Party, Rails 63) Day 63 : #100DaysofCode - Refactoring 64) Day 64 : #100DaysofCode - Still Playing Around With OmniAuth 65) Day 65 : #100DaysofCode - Second Rails Project - I Want to Try Self-Referencing Tables

Song of the Day

Today I wanted to code something different and fun and I came across #Javascript30 .

Day 1 of #Javascript30 consist of building a Drum Kit using vanilla Javascript. The lesson was very informative and it helped to refresh my memory on some Javascript after working in Ruby for a while. In addition, I wanted to see if I could find any similarities between Ruby and Javascript. My final javascript code after the lesson looked like this:

<script>
  window.addEventListener('keydown', function(e){
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); 
    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
    if (!audio) return;
      audio.currentTime = 0; 
      audio.play();
      key.classList.add('playing'); 
  })

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

    }

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

</script>

I will go over each line and review the parts that I had an "aha" moment with.

window.addEventListener('keydown', function(e){
}

Adds an event listener to the window. I needed a reminder on the keydown addEventListener method and discovered that the event takes two arguments. The first one keydown provides a code indicating which key is pressed. We have to remember that computers only talk in numbers. So, for every key on your keyboard there is a number associated with it. A website was provided during the tutorial that I found very helpful to view -- keycode.info

The second argument that the keydown takes is the event function as seen below.

eventTarget.addEventListener("keydown", event => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // do something
});

The next two lines:

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); 
    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);

First we create two variables one with the name audio and one with the name key and use the queryselector to select the audio tag and key class where it has a data-key.

The following line of code: if (!audio) return; is straight forward, if there is no audio it will stop running.

However, audio.play(); will call the .play the audio on the audio element, but you should note that when .play() is ran, it will play that audio once and not play it again, so we must create a way so that the start time is restarted/rewinded by running audio.currentTime = 0; which tells the function every time that the audio is clicked it, the currentTime should be zero before running audio.play() again.

The next line adds a class to the div, but doesn't remove it:

key.classList.add('playing'); 

In order to remove it we must first search the document to find all elements with the class key, like so const keys = document.querySelectorAll('.key');

Then we must iterate over those keys and for each key we should find the 'transitioned' and run the removeTransition function.

    const keys = document.querySelectorAll('.key');

    keys.forEach(key => key.addEventListener('transitioned', removeTransition));

The removeTransition function checks all of the transitions to see if the property name is 'tranform' and skips it if it is not. If the property name is tranform, then it removes the class name 'playing' from the element.

    function removeTransition(e){
     if(e.propertyName !== 'transform') r
     this.classList.remove('playing');

    }

I noticed many similarities between Javascript and Ruby in this lesson. I noticed that functions in Javascript are simply methods in Ruby and that the this is the same as self in Ruby.

#100DaysofCode (65 Part Series)

1) Day 1 of #100DaysofCode - Understanding Iterators 2) Day 2: #100DaysofCode - I updated to Catalina and All HELL Broke Loose 3 ... 63 3) Day 3: #100DaysofCode - Oh No, SQL 4) Day 4: #100DaysofCode - More Iterators 5) Day 5 - #100DaysofCode - Setting up a Sinatra App 6) Day 6 : #100DaysofCode - Setting up a Sinatra App : Part 2 - Config.ru 7) Day 7: #100DaysofCode - Setting up a Sinatra App - Part 3 8) Day 8: #100DaysofCode - Setting up Sinatra Database - Part 4 9) Day 9: #100DaysofCode - ActiveRecord and a Database 10) Day 10: #100DaysofCode - ActiveRecord and a Database 11) Day 11 : #100DaysofCode - RESTful Routes 12) Day 12: #100DaysofCode and Day 1 of #Javascript30 13) Day 13 - #100DaysofCode - #Javascript30 - Day 2 - CSS + JS Clock 14) Day 14: #100DaysofCode - Finalized my Sinatra Project -Security 15) #Day 15: #100DaysofCode - View my Sinatra Project 16) Day 16 - #100DaysofCode - Understanding MVC 17) Day 17 : #100DaysofCode - Knowing your Ruby Version & what Errno::EADDRINUSE means is important! 18) Day 18 of #100daysofCode - 3 challenges 19) Day 19 of #100daysofCode - Hashes 101 20) Day 20: #100DaysofCode - Practice makes perfect 21) Day 21 : #100DaysofCode - Cascading Style Sheets 101 22) Day 22 - #100daysofCode - CSS 101 Part 2 23) Day 23 - #100DaysofCode - Updated My Portfolio 24) Day 24 - #100DaysofCode - Practicing CSS Grid and Emmet Shortcuts on VSCode 25) Day 25 - #100DaysofCode - Intro to Rails 26) Day 26 - #100DaysofCode - Accessing Rails Commands 27) Day 27 : #100DaysofCode - Still reviewing the basic rails concepts . . . 28) Day 28 : #100DaysofCode - Adding Dev.to blogs to personal page 29) Day 29 : #100DaysofCode - Very Simple Rails App CRUD Practice 30) Day 30 : #100DaysofCode - Very basic rails continued 31) Day 31 - #100DaysofCode - Rails Routes 101 32) Day 32 : #100DaysofCode - Resources for learning to code 33) Day 33 - #100DaysofCode - Setting up my app on Heroku 34) Day 34 - #100DaysofCode - New/edit action versus create/update action 35) Day 35 : #100DaysofCode - A Code Challenge Completed 36) Day 36 - #100DaysofCode - Rails form_for versus form_tag 37) Day 37 : #100DaysofCode - 30 seconds of code 38) Day 38 - #100DaysofCode - Built my first basic rails application 39) Day 39 : #100DaysofCode - I updated my github profile page 40) Day 40 : #100DaysofCode - I need project ideas 41) Day 41 : #100DaysofCode - Collaboration 42) Day 42 : #100DaysofCode - The Planning of a Project 43) Day 43 : #100DaysofCode - The Amazing Faker Gem 44) Day 44 : #100DaysofCode - Code or Youtube? 45) Day 45 : #100DaysofCode - Basic Nested Forms 46) Day 46 : #100DaysofCode - Still reviewing form_for 47) Day 47 : #100DaysofCode - How do you code? 48) Day 48 : #100DaysofCode - Code Along 49) Day 49 : #100DaysofCode - Still Coding Along 50) Day 50 : #100DaysofCode - Keep Coding Along 51) Day 51 : #100DaysofCode - Code Along 52) Day 52 : #100DaysofCode - No Wifi, No Problem 53) Day 53: #100DaysofCode - Created user log in and log out functionality 54) Day 54 : #100DaysofCode -Review on setting up log in & sign up 55) Day 55 : #100DaysofCode - In Need of Advice on Reading Poorly Written Documentation 56) Day 56 : #100DaysofCode - A Tweet - Devise - Users 57) Day 57 : 100DaysofCode - Remembering to Git Commit Often 58) Day 58 : #100DaysofCode - Beginning to Learn Python 59) Day 59 : #100DaysofCode - Focused on My Rails Project 60) Day 60 : #100DaysofCode - CSS in Rails 61) Day 61 : #100DaysofCode - Omniauth? 62) Day 62 : #100DaysofCode - Sign in using a Third Party, Rails 63) Day 63 : #100DaysofCode - Refactoring 64) Day 64 : #100DaysofCode - Still Playing Around With OmniAuth 65) Day 65 : #100DaysofCode - Second Rails Project - I Want to Try Self-Referencing Tables

Posted on by:

sincerelybrittany profile

Brittany

@sincerelybrittany

Web Developer | Software Engineer 👩🏾‍💻 | Determined | Music & Dance | #100DaysofCode | #WomenWhoCode

Discussion

markdown guide