JavaScript Calculator

I wanted to start small and just 'Get my foot in the door' with javascript. And to not over complicate the learning process, and this JavaScript application is just that, the basics to learning a new language.

Project Context

After being tought java in my MSC Computer Science degree. And self-teaching myself HTML, CSS & SCSS. I wanted to learn the basics of JavaScript, the Syntax, Variables, Operator and Functions. I wanted to:

1. Understand the logic process of recieving an input in HTML, then manipulating the input with javascript and presenting an output through HTML.
2. Store information into variables.
3. HTML DOM manipulation and present the result back to the user.
4. Using 'if & else' statments.
5. Creating a Dark Mode version of the application.

My Objective

Focused on building an application using JavaScript, regardless of real-world application or functionality. After watching many javascript tutorials such as 'Understanding JavaScript in 10 minutes' etc.

I really wanted to understand the JavaScript language, I didn't want to build a 'realistic' application. Because of the pressure of attempting to over-complicate the learning process.

Cover Screenshot

1. All images are in 4K resolution, click to enlarge for better viewing.

Lessons Learned

I learned a lot building this application. But mainly from the use of connecting the back-end calculation class and displaying the results of process to the user.

1. Creating a DarkMode theme in CSS and toggling the theme on/off.
2. Utilizing an if statement to verify if the darkMode theme if active or not. And if the theme is active manipulate the HTML DOM by changing the darkMode theme icon to another icon.
3. Utilizing an event listener when a button as been clicked and then executing a operation afterwards.
4. Having a global variable to execute functions. (Example: calculator.updateDisplay()).

Personal Improvements

Although the calculator application executes on it original objective. I would like to further understand javascript language by building a more realistic real-world application or functionality.

Deployment

Deployed with GitHub pages here: https://todd-owen-mpeli.github.io/JavaScript-Calculator/