Build a Scientific Calculator from Scratch | HTML, CSS, JavaScript & Bootstrap Tutorial

Instructions and Code: https://www.dropbox.com/scl/fi/suh1z61vg5weybueda52r/Let-s-Build-a-Scientific-Calculator.paper?dl=0&rlkey=7hxp4451oqg5dcw911lnaqmsi

In this tutorial, we will replicate the user interface and functionality of Google's Scientific Calculator: https://www.google.com/search?q=calculator

TOPICS COVERED
00:00:00 - Introduction & Problem Statement
00:03:38 - 1. Development Setup on GitHub
00:12:59 - 2. UI with HTML, CSS & Bootstrap
00:20:55 - 3. Functionality with JavaScript
00:55:18 - 4. Cloud Deployment to Vercel
01:00:30 - Bonus - Scientific Functions
01:14:26 - Bonus - Build Quickly with ChatGPT
01:31:16 - Summary & Conclusion

Here's are the steps we'll follow:

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

This tutorial is part of our 9-month full stack developer bootcamp: https://www.jovian.com/full-stack-developer-bootcamp