Calculator from Design Spec

You've been tasked with building a web calculator! Your company's designer has provided the following spec in PNG format.

Tasks

Without diving into the Javascript that will give this calculator real brains, write the HTML / CSS that will display the calculator in the browser.

Create a new repository on GitHub, clone it to your computer, then create an index.html file and a styles.css file that will contain your code. You can reference previous assignments for the format of these files.

Once you are done, modify the settings of your repository on GitHub so that your index.html file will be hosted on GitHub pages. Set the "website" field of your repository to the GitHub pages URL.

Notes

  • Do your best to match the spec, but don't worry too much about getting it pixel perfect
  • In the next assignment, we'll wire up the buttons behind this calculator

Stretch goals

  • Add a 'light mode / dark mode' switch to the page that switches the color theme. Do this with NO Javscript. Only HTML and CSS! (Hint: look into CSS selectors that can tell if a checkbox is checked or not)

Design Spec