app.js file<\/code> is where we’ll write our application code.<\/li>\n<\/ul>\n\n\n\nIf you\u2019re a CodeWizardsHQ student, download the x_hour_of_code_2022<\/code> project for the completed code. The starter files are in the javascript-projects\/disappearing-snowman\/starter-files<\/code> directory.<\/p>\n\n\n\nNote:<\/strong> The index.html<\/code> file (which executes the JavaScript) expects the filename app.js<\/code> so you must use the same file name if you’re using your own text editor! You’ll edit the app.js file but you’ll always run the index.html<\/code> file.<\/p>\n\n\n\n<\/div>\n\n\n\n
This tutorial is for beginner JavaScript programmers ages 8+. It assumes you understand basic HTML\/CSS and JavaScript. Let’s get started!<\/h3>\n\n\n\n<\/div>\n\n\n\n
Step 1: Fade keyboard keys on click<\/h2>\n\n\n\n
When someone uses our app, they’ll try to guess the hidden word one letter at a time by clicking the keyboard on the page with their mouse. In this step, we’ll fade out each letter they click and ensure that no more logic runs on a faded-out letter. <\/p>\n\n\n\n
\n- In the
styles.css<\/code> file there’s a CSS class to make a keyboard key look faded out called selected<\/code>.<\/strong> We’ll attach this class to whatever keyboard key the user clicks using JavaScript. You don’t have to type anything in the CSS file, this is just provided as a reference so you know why<\/em> attaching this class to an HTML element makes it look faded out. <\/li>\n<\/ul>\n\n\n\n\/* Added by JavaScript *\/\n\n.hidden {\n display: none;\n}\n\n.selected {\n opacity: 0.3;\n}<\/code><\/pre>\n\n\n\nNavigate back to your app.js<\/code> file to add the selected class to any key the user clicks.<\/p>\n\n\n\n\n- First, create a variable called
keyboardContainer<\/code><\/strong><\/li>\n\n\n\n- Use the
document.querySelector() <\/code>function to reference the element with the ID of keyboard-container<\/code> <\/strong>and store it in the keyboardContainer <\/code>variable<\/li>\n\n\n\n- Then, we need to run code whenever an element in the
keyboardContainer<\/code> is clicked.<\/strong> We can use the addEventListener()<\/code> function to ensure a function called handleKeyboardClick()<\/code> (which we’ll define in just a minute) will run whenever a user clicks inside the keyboardContainer<\/code>. The click<\/code> event is triggered by clicking your mouse anywhere inside the keyboardContainer<\/code> HTML element.<\/li>\n<\/ul>\n\n\n\nvar words = [\"APPLE\", \"PANCAKES\", \"COMPUTER\", \"PARIS\", \"MICROPHONE\", \"PASTRY\"];\nvar randomWord = getRandomWord(words);\n\nvar keyboardContainer = document.querySelector(\"#keyboard-container\");\nkeyboardContainer.addEventListener(\"click\", handleKeyboardClick);<\/mark><\/code><\/pre>\n\n\n\n\n- Create the function
handleKeyboardClick()<\/code> and define a single parameter called <\/strong>event<\/strong> <\/code>that will be passed to this function whenever the keyboardContainer <\/code>is clicked.<\/li>\n\n\n\n- Whenever our
keyboardContainer <\/code>is clicked, we’ll run the handleKeyboardClick()<\/code> function.<\/strong> <\/li>\n<\/ul>\n\n\n\nkeyboardContainer.addEventListener(\"click\", handleKeyboardClick);\n\ngenerateHiddenWord(randomWord);\n\nfunction handleKeyboardClick(event) {\n\n}<\/mark><\/code><\/pre>\n\n\n\n\n- Create a variable called
clickedElement<\/code>. <\/strong>We can get information about the element that was clicked by using the target<\/code> property. We’ll store the element that was clicked in the variable.<\/li>\n\n\n\n- Anytime a user clicks inside the
keyboardContainer <\/code>element our click event listener will fire. <\/strong>But, we only want to continue if they click on a letter. Check if the clickedElement <\/code>does not (!<\/code>) contain the letter <\/code>class or if (||<\/code>) contains the selected<\/code> class (which we’ll add next).<\/strong> If either of those conditions is true, we’ll use the return<\/code> keyword to immediately exit the function. <\/li>\n\n\n\n- Finally, we’ll add the
selected <\/code>class to our <\/strong>clickedElement<\/strong> <\/code>to ensure the CSS styles are applied to make it fade out a bit. <\/li>\n<\/ul>\n\n\n\nfunction handleKeyboardClick(event) {\n\n var clickedElement = event.target;\n\n if (!clickedElement.classList.contains(\"letter\") || clickedElement.classList.contains(\"selected\")) return;\n\n clickedElement.classList.add(\"selected\");\n<\/mark>\n}<\/code><\/pre>\n\n\n\n Hint:<\/i><\/strong> Test this out by clicking a few of the keys on the HTML page. They should fade out as you click them!<\/i><\/p>\n\n\n\n
![\"Disappearing](\"https:\/\/lh5.googleusercontent.com\/okTutxglPKN5d2N4woehf9U6m7Rnlu2ffECj9UwOc2QRywzvniRixqPj1eQCdOb6ECnKKmk09xe3ktd9PBlnbFDHRhm2AYw5FVRB0_R_rQLHfmoEiRNFg86-Wt-9jkiKrnf4H9HgDcFet21DPMjpjfXqwICcl4YKg4hYrijZ4mp0e6eXhGd4jZLHrZPQpA\")
![\"Javascript](\"https:\/\/lh5.googleusercontent.com\/yCSueY6J9oQ0H-2OUvA8lJL_bW5qPLKTb2fvlcXs4L6o-2aGBPAHogvge_IdCuq4Ei5J3gDKGo6SFM6qYqjW3ArFkxtKUvBB2xenteQ5CAv9xA0UXPzSEJUl8NBS61nhRwY0wmv7Peg_rC7B3HAhky3IYLQp4xi573l3hAirWEcvFm5dZJcDZZJUU0TXkA\")
<\/figure>\n\n\n\n![\"Javascript](\"https:\/\/lh4.googleusercontent.com\/yUknPnvuzE2E0q9za1U_irnp96_OIe5I4dz0I_tLNPRYtJ-pZwvKS-3x4fo8pGg7HkKNd_o-8nn8-VZxEiR7WrLpe6BFkqK9_99wzJRMc1pGjbXblnN_0LAe82P4DSUVRrIxi9C8ujt05o2o2WnMSuxzZipfUYYZOeqv9-xkwzB2TbPhfNue3HohcGRG7w\")
<\/figure>\n\n\n\n![\"snowman](\"https:\/\/www.codewizardshq.com\/wp-content\/uploads\/2022\/11\/snowman-html-css-1024x587.jpg\")
<\/a><\/figure><\/div>\n\n\n