Last active
October 21, 2017 02:49
-
-
Save jonsamp/07a43bb8a558179ef4a7ad061f482069 to your computer and use it in GitHub Desktop.
JavaScript Tips Tab: Solution
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // List of JavaScript tips | |
| var tipsList = [ | |
| "Don't forget the <span class='code'>var</span> keyword when assigning a variable's value for the first time.", | |
| "<span class='code'>undefined</span>, <span class='code'>null</span>, <span class='code'>0</span>, <span class='code'>false</span>, <span class='code'>NaN</span>, and <span class='code'>''</span> (empty string) are all falsy.", | |
| "Declare a function with<br/> <span class='code-block'>function <em>myFunctionName</em>() { <br> ...<br> }</span>", | |
| "<span class='code'>if</span>/<span class='code'>else</span> statements look like <br/> <span class='code-block'>if (<em>condition</em>) { <br/> ...<br/>} else { <br/> ...<br/>}", | |
| "You can return the result of a function into a variable with <span class='code'>return</span>:<br><span class='code-block'>function timesFive(inputNumber) {<br> return inputNumber * 5; <br>}<br>console.log(timesFive(6));<br>// Output: 30</span> ", | |
| "The <span class='code'>&&</span> operator means both things must be true: <br/> <span class='code-block'> true && true = true<br>true && false = false<br>false && false = false</span>", | |
| "The <span class='code'>||</span> operator means either can be true: <br/> <span class='code-block'> true || true = true<br>true || false = true<br>false || false = false</span>", | |
| "A <span class='code'>for</span> has three condtions: a start condition, a stop condition, and an iterator: <br> <span class='code-block'>for (var i = 0; i < myArray.length; i++) { <br> ...<br>}</span>", | |
| "To interpolate a variable into a string, use the <span class='code'>+</span> operator, like this: <br> <span class='code-block'>var myName = 'Jon';<br/> 'Hello, my name is ' + myName;</span>", | |
| "To generate a random number, use JavaScript's built in function <span class='code'>Math.random()</span>.", | |
| "Arrays hold lists of data. You can access any of the list items by using bracket notation, like this: <br> <span class='code-block'>var myArray = ['pears', 'asparagus', 'bananas'];<br>myArray[1]; // asparagus</span>" | |
| ]; | |
| // Tip Limit counter | |
| var tipLimit = 3; | |
| // Generate a number | |
| function generateNumber() { | |
| return Math.floor(Math.random() * tipsList.length); | |
| } | |
| // Generate a tip: | |
| // 1. Get random number from generateNumber() | |
| // 2. Use the random number to get the tip from the array | |
| // 3. Show the tip | |
| function generateTip() { | |
| var tip = tipsList[generateNumber()]; | |
| var tipElement = document.querySelector('.js-tip'); | |
| var tipLimitCount = document.querySelector('.tip-limit-count'); | |
| tipElement.innerHTML = tip; | |
| tipLimitCount.innerHTML = tipLimit; | |
| } | |
| // Tip button click | |
| // 1. Select the tip button | |
| // 2. Add a click event listener | |
| // 3. When the button is clicked: | |
| // 3a. Subtract 1 from the tipLimit | |
| // 3b. If the tipLimit is still above or equal to 0, generate a new tip | |
| // 3c. If not, change the button text and look | |
| function onTipButtonClick() { | |
| var tipButton = document.querySelector('.tip-button'); | |
| tipButton.addEventListener('click', function() { | |
| tipLimit = tipLimit - 1; | |
| if (tipLimit >= 0) { | |
| generateTip(); | |
| if (tipLimit === 0) { | |
| tipButton.innerHTML = 'See you in another tab!'; | |
| tipButton.classList.add('disabled'); | |
| } | |
| } | |
| }); | |
| } | |
| onTipButtonClick(); | |
| // Get the first tip | |
| generateTip(); |
var tipElement = document.querrySelector('.js-tip');
var tipLimitCount = document.querrySelector('.tip-limit-count');
@hasanfares you have a typo in "querySelector". It's "query" not "querry".
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
what is wrong with this code why is it not working:
`// List of JavaScript tips
var tipsList = [
"Don't forget the var keyword when assigning a variable's value for the first time.",
];
// Tip Limit counter
var tipLimit = 3;
// Generate a number
function generateNumber() {
return Math.floor(Math.random() * tipsList.length);
}
// Generate a tip:
// 1. Get random number from generateNumber()
// 2. Use the random number to get the tip from the array
// 3. Show the tip
function generateTip() {
var tip = tipsList[generateNumber()];
var tipElement = document.querrySelector('.js-tip');
var tipLimitCount = document.querrySelector('.tip-limit-count');
}
// Tip button click
// 1. Select the tip button
// 2. Add a click event listener
// 3. When the button is clicked:
// 3a. Subtract 1 from the tipLimit
// 3b. If the tipLimit is still above or equal to 0, generate a new tip
// 3c. If not, change the button text and look
function onTipButtonClick() {
var tipButton = document.querySelector('.tip-button');
tipButton.addEventListener('click', function() {
tipLimit = tipLimit - 1;
if (tipLimit >= 0) {
generateTip();
});
}
onTipButtonClick();
// Get the first tip
generateTip();
`