D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
alexdingis
Full window
Github gist
FizzBuzz
Built with
blockbuilder.org
<!DOCTYPE html> <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