Learning Objectives

With this assignment you will demonstrate:

• The ability to create a static web application
• Knowledge of a fair amount of HTML and CSS
• Knowledge of basic event handling in browser-based JavaScript
• The ability to develop and host an app on Replit or Code Sandbox

Readings and Videos

Please:

• Browse the HTML and CSS HTML Dog tutorials. (3 for HTML and 3 for CSS.) You can breeze through them quickly if they cover aspects of these technologies you already know. The goal here is for you to familiarize yourself with all the common uses of HTML and CSS, not to spend too much time. If you find something that interests you, by all means spend as much time as you need.
• Since HTMLDog does not have tutorials on grid and flex, find an online tutorial for these, or study the guides on css-tricks.
• Briefly skim the Tutorials on the MDN JavaScript page. Bounce around and take in the material you need; you do not have to complete all the tutorials for this assignment. Think of the MDN JavaScript documentation as something to be read through during the entire course, not just for this assignment.
• Review the course notes for the introduction to web apps, HTML, CSS, JavaScript. Follow any links in the notes that interest you.

Instructions

Submit in BrightSpace the link to your Replit or Code Sandbox-hosted repo.

The Project

You will be creating a web app for computing compound interest. The core of the page will have a form with input fields for principal, interest rate, number of times compounded per year, and the total number of years. As these values change, you will update fields showing the amount of money you earned, and the total amount.

In addition to the app working correctly, the following are required (as one goal of this assignment is to get you to actually use a large amount of HTML and CSS):

• A background image or gradient
• A non-standard font (show that you can import a font from Google Fonts or similar)
• A grid layout for the main content of the site, so that it has a header and footer
• A flex layout to make the form look gorgeous
• Responsiveness: the site must look good on mobile and web (narrow or wide screen)
• A nice “title’ (perhaps an h1 element)
• A fun image or two
• A variety of input elements, don’t just use text! (Try a progress element, perhaps?)
• At least one each of a margin, padding, and border
• At least one transition
• At least one transform
• At least one text shadow
• A footer with a link to the Replit or Code Sandbox repo where the source code is
• Site balance and aesthetics! Use colors and contrast properly! Line things up! Optionally, get a designer friend of yours to critique your work

Build your site on either Replit or Code Sandbox. Test it well.

There are other requirements:

• Your repo must have a good name: named after the project, not something generic like “hw1”.
• You must have a detailed README.md file, that not only explains the project (as a real README should), but also with a link to where the app is deployed.
• Your code (all files) must be flawlessly formatted, and that means that you not only indent and space 100% consistently, but that you are also perfectly consistent with blank-line spacing where necessary. (Prettier will help with most things.)
• HTML and accessibility validation

If you feel ambitious, you can generate a graph showing the growth of your investment. Feel free to use the D3.js Graph Gallery or Chart.js .