332 views
# Artful Coding WT2022 Session 5 - 31. Oct. 2022, 17:00-18:30 Slides: https://tantemalkah.at/artful-coding/2022wt/slides/session5.html ## 17:00 , 15min : Warm-up with FizzBuzz We will play a plain old analog version of FizzBuzz. ## 17:15 , 30min : jQuery intro ## 17:45 , 15min : Assignment #1 - The FizzBuzz Page Write a function that takes a number as an argument. The function then should either return the number itself, or one of the following strings, depending on the input number: * 'fizz' if the number is divisible by 3 * 'buzz' if the number is divisible by 5 * 'fizzbuzz!' if the number is divisible by 3 and 5 Now create another function that starts a loop from 1 to 100 and prints the results of the fizzbuzz function for all numbers (from 1 to 100) to the console. Note: There is no timer or delay involved, we just want to get the full results of the fizz buzz algorithm in the console. Create an HTML page that contains: * 3 invisible images of your choice (representing fizz, buzz and fizzbuzz) * a visible number 0 in the center of the page (style it to be not too small compared to the images) * the following buttons (with labels and styles of your choice) - a count button - a start button - a stop button - a reset button * somewhere at the bottom of the page a smaller debug button or link Add the following functionality to the page: * when the count button is pressed: - the number displayed should be increased by 1 - if a fizz, buzz or fizzbuzz is produced with this number display the according image for a short amount of time (e.g. 1 second fade in and out, or any other animation you want to apply) * when the start button is pressed: - start an interval that increases the counter by 1 every second, and checks for the fizz buzz condition (similar to what happens when the debug button is pressed) * when the stop button is pressed: - stop the counter interval that was started by clicking on the start button * when the reset button is pressed: - reset the number displayed to 0 * when the debug button or link is pressed: - call the function that prints out the fizz buzz numbers from 1 to 100 to the console To submit your exercise, go to our shared base cloud folder into the "Assignment 1 - The FizzBuzz Page" folder. There you find an "Exercises" folder. Inside of it create a folder with your student ID and name, where you can put your solution (there is a placeholder folder there as an example reference). Put your solution there until 30. Nov. 2022, 23:42. ## 18:00 , Discussion and experimentation time --- This page is part of the course website at https://tantemalkah.at/artful-coding All contents, where not otherwise noted, are licensed by [Andrea Ida Malkah Klaura](https://tantemalkah.at/) under a [CC-BY-SA 4.0 license](http://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1).