Assignment 5: External JavaScript Libraries

Folder structure

Your work for this assignment should live in the folder:

csc336-fall2025/05-external-libraries

The site should be viewable on GitHub Pages. For example:

https://username.github.io/csc336-fall2025/05-external-libraries/

Goal

In this assignment, you will practice incorporating external JavaScript libraries into a webpage using <script> tags (from a CDN). You will make a simple restaurant landing page (e.g., for a pizza place) that uses your own HTML/CSS plus at least one external JavaScript library to make the page more interesting or interactive.

Think small. The point of this assignment is not to build a whole restaurant site, but to practice including and using an external JS library to add some interactivity or visual interest.

Requirements

1. Create a basic restaurant website landing page:
   • A title for your restaurant.
   • At least one image (e.g., food, restaurant, logo).
   • A short paragraph describing your restaurant.
   • Any other content you’d like (hours, location, fun facts, etc.).
2. Add at least 3 CSS rules to style your page.
3. Use at least one external JavaScript library loaded via CDN.
   • You must use it in a way that changes the page or adds some visible/interactive effect.
4. Include your own JavaScript code that interacts with the library (not just static).
5. Be creative! Your use of the library doesn’t have to be big or complicated. A small, fun effect is enough.

Example Libraries

You may use any library that can be included via a <script> tag and works with plain HTML/CSS/JS. Here are some suggestions:

• p5.js — Creative coding and drawing. Could draw a pizza on canvas.
• Tone.js — Sound synthesis. Could play a fun sound when a button is clicked.
• Chart.js — Charts. Could show a chart of “most popular pizzas.”
• Micromodal.js — Simple modals. Could make a pop-up with today’s special.
• Toastify.js — Toast notifications. Could show a little “Welcome!” popup.
• Rough.js — Hand-drawn style graphics. Could decorate the page with hand-sketched pizza slices.

Example Ideas

• A pizza website with a toast notification that says “2-for-1 deal today!” using Toastify.js.
• A coffee shop page with a modal popup showing today’s special.
• A dessert shop where you click a button and a p5.js sketch draws sprinkles across the screen.
• A taco stand page with a Chart.js bar chart showing the most-ordered tacos.

Submission

• Commit your code to the correct folder (05-external-libraries).
• Verify that the page loads and works on GitHub Pages.
• Make sure you included at least:
  • One external library (via CDN)
  • Your own HTML and CSS
  • Some JavaScript that interacts with the library