Learn practical skills, build real-world projects, and advance your career

Build a Scientific Calculator

In this assignment, you will replicate the user interface and functionality of Google's Scientific Calculator. Here's how it looks:

alt

Notes:

  • Try to replicate the basic UI & functionality of the calculator
  • You need not implement the "History" button on the top left
  • You can also skip showing the previous expression above the result
  • You needn't implement the 123/fx button (just show all buttons on one screen)

Follow these steps to build the UI step-by-step:

Step 1 - Prepare for Development & Deployment

  • Create a public GitHub repository to host & share your code
  • Use GitHub Codespaces to edit the code and add an index.html file
  • Add the Bootstrap CSS framework, custom fonts, and base styles
  • Deploy the web page to the cloud by creating a Vercel project

Step 2 - Build the User Interface with HTML & CSS

  • Add the content for each section one by one using HTML
  • Use the browser "Inspect" tab to identify and add CSS styles
  • Start with mobile and progressively enhance for tablet & desktop
  • Try to replicate the design as closely & precisely as possible

Step 3 - Add Functionality using JavaScript

  • Add a script.js file an include it within the index.html file
  • Create variables and functions to track current & previous expressions
  • Create functions to implement each the logic for each button
  • Add on click handlers to buttons and update DOM nodes

Step 4 - Deploy to the Cloud and Make a Submission

  • Test the page carefully at different screen sizes & iterate if required
  • Ensure that the HTML, CSS & JavaScript code is well organized with proper comments
  • Stage, commit, and push your changes to the GitHub repository
  • Verify that your site is deployed to Vercel and submit the link below

NOTE: Implementing the "History" button at the top right of the calculator is NOT required for this assignment. Any animations and transitions are also optional. However, feel free to take it up as an optional extension.

print('Hello World')