Creating a simple calculator is a great way to practice your web development skills using HTML, CSS, and JavaScript. In this tutorial, we will walk through the steps to build a basic calculator that can perform addition, subtraction, multiplication, and division. By the end, you'll have a functioning calculator and a better understanding of how these technologies work together. ## Setting Up the Project First, create a new folder on your computer for this project. Inside this folder, create three files: - `index.html` - `styles.css` - `script.js` ### Folder Structure ``` calculator/ │ ├── index.html ├── styles.css └── script.js ``` ## HTML Structure Open `index.html` and start by creating a basic HTML structure. We’ll include a simple layout for our calculator. ```html ``` <html lang="en">
<head> ``` Simple Calculator ``` </head>
<body> ```
``` </body>
</html> --- ### Explanation: - We created a `div` with a class of `calculator` to contain our calculator. - An input field (`display`) shows the current input and result. - We added buttons for numbers 0-9, basic arithmetic operations, a clear button (C), and an equals button (=). ## Styling with CSS Next, open `styles.css` to style our calculator. Below is a simple style guide to make the calculator look neat and functional. ```css body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; font-family: Arial, sans-serif; } .calculator { background-color: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 20px; width: 300px; } #display { width: 100%; height: 40px; font-size: 24px; text-align: right; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 10px; padding: 5px; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } button { padding: 15px; font-size: 18px; border: none; border-radius: 5px; background-color: #007BFF; color: white; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #0056b3; } ``` ### Explanation: - We set the body to center the calculator vertically and horizontally. - The `.calculator` class styles the main calculator area. - The display field is styled for visibility and ease of use. - Buttons are styled with a grid layout for easy arrangement and hover effects for interactivity. ## JavaScript Functionality Now, let’s add the functionality to our calculator. Open `script.js` and add the following code: ```javascript function appendToDisplay(value) { const display = document.getElementById("display"); display.value += value; } function clearDisplay() { const display = document.getElementById("display"); display.value = ''; } function calculate() { const display = document.getElementById("display"); try { display.value = eval(display.value); } catch (error) { display.value = 'Error'; } } ``` ### Explanation: - **appendToDisplay(value):** This function appends the clicked button’s value to the display. - **clearDisplay():** This function clears the display when the 'C' button is clicked. - **calculate():** This function evaluates the expression in the display using `eval()`. It also handles errors by displaying "Error" if the expression is invalid. ### Important Note: Using `eval()` can pose security risks if you're dealing with untrusted input. For a real application, consider using a safer expression parsing library. ## Conclusion Congratulations! You’ve built a simple calculator using HTML, CSS, and JavaScript. This project reinforces key concepts in web development, such as structuring an HTML document, styling with CSS, and manipulating the DOM with JavaScript. ### Next Steps - Try expanding this project by adding more features, such as advanced operations (like square root or power). - Implement input validation to prevent errors. - Explore using external libraries for more complex calculations. Feel free to customize your calculator and make it your own. Happy coding!