Assignment 1 – Hello World
Set up and hosted a "Hello World" web page on my domain. Demonstrated connecting a domain to a host and publishing a page online.
Assignment 2 – Website Creation
Created this full site with a sidebar navigation menu, external CSS, descriptive metadata, and accessibility compliance. This site will continue to be updated with future assignments.
Assignment 3 – Input Form
Built a fully validated HTML5 input form with JavaScript. Includes
name, address, phone, email, birthdate, message, and a simple captcha.
Users review their data on a confirmation page before sending it via
mailto:.
Assignment 4 – JavaScript Calculator & Plot (RC Low-Pass Filter)
Interactive calculator that computes and plots the magnitude response
of a first-order RC low-pass filter:
|H(f)| = 1 / sqrt(1 + (2π f R C)^2).
The plot shows |H| in dB vs. frequency and marks the cutoff frequency
fc = 1/(2πRC). Users can set R (Ω), C (μF),
frequency range, point count, and choose linear/log scales.
- Plotting library: Plotly.js
- Open Assignment 4 (Plotly version)
Assignment 5 – Canvas Spirograph
HTML5 Canvas program that draws a Spirograph using the parametric
equations:
x = (R + r)·cos(t) − (r + O)·cos(((R + r)/r)·t),
y = (R + r)·sin(t) − (r + O)·sin(((R + r)/r)·t).
One-button start, with seeded/validated inputs (R, r, O), optional
randomize/clear, and smooth animation.
Assignment 6 – JSON Crypto Viewer
External JSON dataset of the top 10 cryptocurrencies is loaded and displayed as a sortable table, with a side-by-side Plotly chart comparing market cap, price (log), or dominance.
- Data:
crypto.json(external file) - Open Assignment 6
Assignment 7 – Drag & Drop Cards
Native HTML5 drag-and-drop demo. Deal a hand from a shuffled deck,
then drag cards into the Discard drop zone. The
drop event moves the card, updates counters, and logs a clear
DROP EVENT message.
- Tech: HTML5 Drag & Drop (no libraries)
- Open Assignment 7
Assignment 9 – Canvas Animation (Exploding Ball)
JavaScript animation using the HTML5 Canvas API. A ball moves diagonally and bounces off the edges of the canvas. When clicked, it explodes into colorful fragments that scatter and fade away before a new ball respawns with a random color and direction. Demonstrates physics simulation, animation loops, and interactive event handling.
-
Tech: Canvas API + JavaScript
(
requestAnimationFrame) - Watch Assignment 9
Assignment 10 – Lighthouse & Mobile Audit
Evaluated the website for Performance, Accessibility, Best Practices, and SEO using Google Lighthouse and the PageSpeed Insights mobile test. Implemented a responsive design with a collapsible navigation menu for mobile users.
- Tool: Google Lighthouse / PageSpeed Insights
- Test Mode: Mobile (Navigation)
- View Lighthouse Report
Assignment 11 – Dynamic Advisor Tool
A fully interactive academic advising tool built with JSON, dynamic HTML creation, and drag-and-drop logic. Students can mark courses as taken, see which classes become available, and drag/drop them into their plan. The system supports OR prerequisites and automatically disables alternate choices when one is selected.
- Tech: JSON, dynamic DOM creation, drag/drop API, OR prerequisite logic
- Features: Locked courses if prereqs not met, remove courses, auto-recalculation
- Open Assignment 11
Assignment 12 – CMS Review
Researched five content management systems and stored their details in an external JSON file.
This page dynamically generates a comparison table from cms.json.
- Tech: JSON + Dynamic HTML Generation
- Open Assignment 12