Are you ready to embark on an exciting journey into the world of web development? Building a simple calculator app in HTML CSS, and JavaScript is an excellent starting point.
In this comprehensive guide, we will walk you through the process step by step, from setting up your project to adding functionality and styling. By the end of this tutorial, you’ll have a fully functional calculator app that you can proudly showcase.
Prerequisites – Simple Calculator App in HTML CSS
To successfully build the simple calculator app in HTML CSS, you’ll need the following:
- HTML: This will be the structure of your app.
- CSS: For styling and making your calculator visually appealing.
- JavaScript: To add functionality and perform calculations.
- A code editor: Choose a code editor of your preference. Some popular options include Visual Studio Code, Sublime Text, or Atom.
Video Tutorial
HTML: Building the Structure
In this section, we’ll create the HTML structure for our calculator app. The HTML file serves as the backbone of our application.
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<div class="keypad">
<button class="operator" onclick="appendValue('/')">/</button>
<button class="operator" onclick="appendValue('*')">x</button>
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button class="operator" onclick="appendValue('-')">-</button>
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button class="operator" onclick="appendValue('+')">+</button>
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button id="clear-btn" onclick="clearDisplay()">C</button>
<button onclick="appendValue('0')">0</button>
<button id="calculate-btn" onclick="calculate()">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS: Adding Style
simple calculator app in HTML CSS
Next, let’s style our calculator to make it visually appealing. Create a style.css file and add the following CSS code:
.calculator {
width: 250px;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
#display {
width: 100%;
height: 30px;
margin-bottom: 10px;
padding: 5px;
}
.keypad {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
button {
width: 100%;
height: 30px;
font-size: 14px;
}
button.operator {
background-color: #ff9933;
color: #fff;
font-weight: bold;
}
JavaScript: Adding Functionality
Now comes the exciting part – adding functionality to our calculator using JavaScript. Create a script.js file and add the following JavaScript code:
// Function to append the clicked button value to the display
function appendValue(value) {
// Your code here
}
// Function to clear the display
function clearDisplay() {
// Your code here
}
// Function to evaluate and display the result
function calculate() {
// Your code here
}
Conclusion
Congratulations! You’ve just learned how to create a simple calculator app in HTML CSS, and JavaScript. This project is a fantastic way to kick-start your web development journey. Keep practicing, and exploring advanced features, and soon you’ll be building more complex web applications.
Top comments (0)