The Unconventional Calculator

A simple, interactive web-based calculator application built with vanilla JavaScript, HTML, and CSS. This project demonstrates fundamental JavaScript concepts including DOM manipulation, event handling, and basic arithmetic operations.

Features

• Basic Arithmetic Operations: Perform addition, subtraction, multiplication, and division
• Real-time Calculation Display: See the current calculation and result update instantly
• Operation Logging: All operations are logged to the browser console for debugging
• Clean UI: Modern, responsive design with a user-friendly interface
• No Dependencies: Built with pure vanilla JavaScript - no frameworks or libraries required

Project Structure

basics-01-starting-project/
├── index.html              # Main HTML file
├── assets/
│   ├── scripts/
│   │   ├── vendor.js       # DOM element references and output functions
│   │   └── app.js          # Calculator logic and event handlers
│   └── styles/
│       └── app.css         # Styling and layout
└── README.md               # Project documentation

How to Use

1. Open the Application

   • Simply open index.html in your web browser
   • No build process or server required

2. Perform Calculations

   • Enter a number in the input field
   • Click one of the operation buttons (+, -, *, /)
   • The result will be displayed below
   • Continue performing operations - each operation uses the current result as the starting point

3. View Operation Logs

   • Open the browser's developer console (F12)
   • All operations are logged with details including:
     • Operation type
     • Previous result
     • Input number
     • New result

Technologies Used

• HTML5: Structure and semantic markup
• CSS3: Styling and responsive design
• Vanilla JavaScript (ES6+): Calculator logic and DOM manipulation
• Google Fonts: Roboto font family

Browser Compatibility

This application works on all modern browsers that support ES6 JavaScript features:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Code Structure

vendor.js

• Contains DOM element references
• Handles output display functions
• Manages the connection between JavaScript logic and HTML elements

app.js

• Implements calculator logic (add, subtract, multiply, divide)
• Handles user input and calculations
• Manages operation logging
• Sets up event listeners for button clicks

Learning Objectives

This project demonstrates:

• DOM manipulation and element selection
• Event handling and listeners
• Arrow functions and ES6+ syntax
• Basic arithmetic operations in JavaScript
• Code organization and separation of concerns

License

This project is part of a JavaScript learning course and is intended for educational purposes.