Working with a partner, complete the code for the fridge activity such that:
JavaScript dynamically generates buttons for each of the letters on the screen.
Clicking any of the buttons leads to the SAME letter being displayed on the screen.
Hitting the “Clear” button erases all of the letters from the fridge.
Note: This is a challenging exercise. You may want one person to type while the other watches over to catch bugs and/or research necessary snippets.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fridge Magnets</title>
</head>
<!-- CSS Styles (These styles are provided to you. Don't touch these!) -->
<style>
body {
background: url(assets/images/fridge.png) no-repeat;
}
.letter {
width: 30px;
height: 30px;
border-style: solid;
padding: 2px;
float: left;
margin: 2px;
}
.letter-button-color {
color: darkcyan;
}
.fridge-color {
color: orange;
}
#display {
margin-top: 78px;
height: 500px;
width: 220px;
margin-left: 60px;
}
#buttons {
padding-top: 60px;
}
#clear {
margin-left: 20px;
font-size: 25px;
color: black;
border-style: solid;
width: 100px;
}
</style>
<body>
<div id="display"></div>
<div id="buttons"></div>
<button id="clear">clear</button>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="./assets/js/script.js"></script>
</body>
</html>
$(document).ready(function() {
// Here we are provided an initial array of letters.
// Use this array to dynamically create buttons on the screen.
var letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "_"];
// MAJOR TASK #1: DYNAMICALLY CREATE BUTTONS
// =================================================================================
// 1. Create a for-loop to iterate through the letters array.
for (var i = 0; i < letters.length; i++) {
// Inside the loop...
// 2. Create a variable named "letterBtn" equal to $("<button>");
var letterBtn = $("<button>");
// 3. Then give each "letterBtn" the following classes: "letter-button" "letter" "letter-button-color".
letterBtn.addClass("letter-button letter letter-button-color");
// 4. Then give each "letterBtn" a data-attribute called "data-letter".
letterBtn.attr("data-letter", letters[i]);
// 5. Then give each "letterBtns" a text equal to "letters[i]".
letterBtn.text(letters[i]);
// 6. Finally, append each "letterBtn" to the "#buttons" div (provided).
$("#buttons").append(letterBtn);
}
// Be sure to test that your code works for this major task, before proceeding to the next one!
// MAJOR TASK #2: ATTACH ON-CLICK EVENTS TO "LETTER" BUTTONS
// =================================================================================
// 7. Create an "on-click" event attached to the ".letter-button" class.
$(".letter-button").on("click", function() {
// Inside the on-click event...
// 8. Create a variable called "fridgeMagnet" and set the variable equal to a new div.
var fridgeMagnet = $("<div>");
// 9. Give each "fridgeMagnet" the following classes: "letter fridge-color".
fridgeMagnet.addClass("letter fridge-color");
// 10. Then chain the following code onto the "fridgeMagnet" variable: .text($(this).attr("data-letter"))
// attr acts as both a setter and a getter for attributes depending on whether we supply one argument or two
// NOTE: There IS a $(data) jQuery method, but it doesn't do what you'd expect. So just use attr.
fridgeMagnet.text($(this).attr("data-letter"));
// 11. Lastly append the fridgeMagnet variable to the "#display" div (provided);
// Again you can see we use that find, and once its found we append the item
$("#display").append(fridgeMagnet);
});
// Be sure to test that your code works for this major task, before proceeding to the next one!
// MAJOR TASK #3: ATTACH ON-CLICK EVENTS TO "CLEAR" BUTTON
// =================================================================================
// 12. Create an "on-click" event attached to the "#clear" button id.
$("#clear").on("click", function() {
// Inside the on-click event...
// 13. Use the jQuery "empty()" method to clear the contents of the "#display" div.
// We use find here and once its found it will empty the element
$("#display").empty();
});
});