Скачать или смотреть Build a Scientific Calculator from Scratch | HTML, CSS, JavaScript & Bootstrap Tutorial

Instructions and Code: https://www.dropbox.com/scl/fi/suh1z6...

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

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-dev...