Career
The routine of the work week and the pressure of our job responsibilities can often get the best of us. However, whether it's putting more effort into your job, or finding one that makes you truly happy, its time to commit to your career.
35K
Members
139K
Successful Reports
Support me!
It is never too late to be what you might have been.
- George Eliot
Who's stickKing?
Community Journal: Career
-
huffproof Feb 17, 2020, 12:18 PM"late start today. missed my bus. Difficulty getting uber to work. Finally arrived by 6:10. Will do by best. "View my Commitment -
-
joshmrallen Feb 17, 2020, 11:03 AM"This one's for Sunday 2/16: Next Section: Advanced JavaScript and DOM Manipulation Quick not about my Dicee game -- github is case-sensitive with the websites you publish, so if your repository has capital letters, the url must have capital letters too. Also just put the images into the same div's as the player labels so that even when the screen (aka viewport) is small (aka, phone), the labels will be obvious. I had thought I would need another row in order for them to appear on top of the dice, but actually the html structure will do that. So you have to keep in mind that html structure is still important even when using bootstrap. Challenge -- cooler websites -- we'll be building a website called Drum Kit 1. add event listeners to buttons and keystrokes 2. end up with this awesome website to impress friends with 1. buttons correspond to sounds of a drum set 2. download the files, unzip 1. skeleton code🙂 2. opened the index.html, css, and index.js 1. link js file with html: <script src="index.js"></script>. put it at bottom of body. 2. test it with an alert: should be a habit when starting, just to make sure everything is linked up properly -- e.g., I caught my '=' mistake and fixed it right away. 1. woops, didn't have an equal sign for src in script haha simple mistakes are always the biggest mistakes 2. found a nice example of line breaks in alert boxes using '\n' -- I used the 'w' button with onclick (attribute of button): 1. <button onclick="myFunction()" class="w drum">w</button> 2. i made myFuntion() in index.js and put alert("Hello\nHow are you?"); 3. Without the function and onclick with the button, the alert will load automatically as the page is loading and won't finish loading until you click 'ok.' 3. Nothing happens in the buttons yet: need to add event listeners 1. In index.js 1. function handleClick() { 1. alert("I got clicked!"); 2. } 2. Need to select "button" element, then add event listener, with "click" event (1st parameter of addEventListener) and function you've defined (2nd parameter) 1. document.querySelector("button").addEventListener("click", handleClick); 1. we don't need the parentheses when using the function name in the addEventListener parameter? 1. Angela addresses this: add the parentheses and this is what happens: the event will be called immediately on loading the page because using a function name with the parentheses is a straight up function call. 2. Using the function name without the parentheses is passing the function as an input which waits until the event happens to call the function 3. instead of using the function name, coders will use an "anonymous function" 1. this is basically defining the function within the parameter of addEventListener: document.querySelector("button").addEventListener("click", function() { alert("I got clicked"); }); 2. this will only add the event listener to the first button element -- and totally works. so cool 1. Now add the event listener for all the buttons, not just the first 'w' button. 1. there's a quick way and there's a long way to do this, she says 2. I tried it with the div's class, ".set" but that just turns the entire div's area into a clickable area. that's not what we want to do, we want to -- we want to make each button into a clickable button, not the button as well as the space between the buttons. 3. ohhh, drum is a separate class name too -- but still only works for the first drum. hmmmmm 4. Ok, I forgot about querySelectorAll 1. this works, but only as an array -- stack overflow helped me with this. 2. I used a for loop: 3. for(var i=0; i<7; i++) { 1. document.querySelectorAll("button")[i].addEventListener("click",handleClick); 4. } 5. And Angela shows this way -- hurray! but she mentions that this is dangerous because this specifies all the button elements. Better to specify the selector to be the buttons' common class: ".drum" 1. But for this you need an extra step for the for loop: 2. for(var i=0; i<document.querySelectorAll(".drum").length; i++) 3. this is good because if we need to add more drums, we always could the and the code would still work with it. 4. For better readability, use a variable name for the length: var numberOfDrumButtons = document.querySelectorAll(".drum").length; "View my Commitment -
Jiyon_John Feb 17, 2020, 10:19 AM"I did the 2nd UCAT practice exam and scored in the 85th percentile. by the grace of God, I am getting closer to my goal."View my Commitment
