Laboratory Exercise 10 – Motivational Shirt

Your task is to create a web app for a start-up that prints motivational quotes in shirts. The web app
should be able to display the shirt design and allow the user to interactively change it with the user
controls.

The HTML document is already done for you. Open app.js and add the code for the following:

1. Target your canvas and store it in a variable named canvas.

2. Target the 2d context and store it in a variable named ctx.
3. Attach an event listener to the previewButton and assign the previewDesign function to it.
4. Next, define the previewDesign function. Check first, what shape the user selected then call the
correct function for that.

5. The drawSquare() and drawCircle() functions are not defined yet. Start with the drawSquaer()
function. We want to randomize the size and position of the square so, we need to generate
random values for the fillRect() function’s arguments.
6. Test your app. Select squares then click Preview. Twenty randomly sized and placed squares
should appear in your canvas.

7. There is a slight problem with this though. If we click the Preview button repeatedly, the
previously drawn squares will remain in the canvas and new squares will just be added to it.
8. Fix this by creating a new function that would fill the whole canvas with the background color
that the user selected.

9. Call this function inside the previewDesign() function before calling drawSquare() or
drawCircle().

10. Test your app again. This time, choose a background color and shape. Now, even if you
repeatedly click the Preview button, the number of squares will not exceed twenty.
11. Now, write the drawCircle() function ON YOUR OWN.
12. The only missing element in the shirt design is the motivational quote. User should be able to
choose this quote. The choices should be fetched from
https://quotes.programmingwizards.online/. Retrieve the quotes from this url and add it as
options to the select element.

13. Next, we need to create a function that would draw the chosen quote in the canvas.
14. The only thing left to do is call this function inside your previewDesign() function.

15. Test your app.