Built with blockbuilder.org
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FizzBuzz Challenge</title>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<style type="text/css">
h1 {
text-align: center;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>FizzBuzz Challenge</h1>
<h2>Questions and Answers</h2>
<h4>Describe the three components of the HTML document</h4>
<p>Your</p>
<p>answer</p>
<p>here</p>
<br>
<h4>Change the color of the text in all '<p>' tags. Describe how you did it. Color must be clear and discernable from the white background.</h4>
<p>Your answer here</p>
<br>
<h4>What is the purpose of jQuery? Why is the link to the CDN insterted into the head of the HTML document?</h4>
<p>Your answer here</p>
<br>
<h4>What is a variable in JavaScript? What can you do with a variable?</h4>
<p>Your answer here</p>
<br>
<h4>If you had to make the final number for FizzBuzz dynamic and easily changed, in this case it was 100, how could you accomplish that?</h4>
<p>Your answer here</p>
<br>
<h4>Describe the function '.append()' and how it works with body. What element is it selecting and how does it know to select that element? Describe how to input a variable with a string (text) to create an HTML tag with dynamic data. What would happen if the variable value was appended without the two '<div>' tags?</h4>
<p>Your answer here</p>
<br>
<h4>What is Sublime 3?</h4>
<p>Your answer here</p>
<br>
<h4>Extra credit: Use the <a href="https://www.sessions.edu/color-calculator/">Color Calculator</a>, choose a color on the wheel, and then select a three color option. Change Fizz, Buzz, and FizzBuzz text to another color. Colors must be distinct from the changed '<p>' tags. Text must be easily read on a black background.</h4>
<br>
<h3>FizzBuzz Output Section</h3>
<div id ='fizzbuzz-section'></div>
<script type="text/javascript">
var value;
function fizzBuzz(){
//code goes below this line
for (var i = 1; i < 101; i++) {
if (i % 3 == 0 && i % 5 == 0) {
value = 'FizzBuzz'
}
else if (i % 3 == 0) {
value = 'Fizz'
}
else if (i % 5 == 0) {
value = 'Buzz'
}
else {
value = i
}
$('#fizzbuzz-section').append('<div>' + value + '</div>')
}
}
$(document).ready(function(){
fizzBuzz();
})
</script>
</body>
</html>
https://code.jquery.com/jquery-3.2.1.js