Create Calculator Website using HTML CSS and JAVASCRIPT Separate File.
To create a calculator website using HTML, CSS, and JavaScript in separate files, you can follow these steps:
- Create an HTML file. Name it “calculator.html”. Create the calculator’s layout in this file using HTML elements like divs and buttons.
PHP:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”calculator.css”>
</head>
<body>
<div class=”calculator”>
<div class=”display”>0</div>
<button class=”digit”>1</button>
<button class=”digit”>2</button>
<!– Add more buttons for digits 0-9 –>
<button class=”operator”>+</button>
<!– Add more buttons for operators +, -, *, / –>
<button class=”equal”>=</button>
</div>
<script src=”calculator.js”></script>
</body>
</html>
-
Create a CSS file, and name it “calculator.css”. In this file, style the calculator layout created in the HTML file.
CSS:
.calculator {
width: 400px;
height: 500px;
margin: 0 auto;
background-color: #f2f2f2;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px #999;
}
.display {
width: 100%;
height: 50px;
background-colour: white;
border-radius: 10px;
font-size: 36px;
text-align: right;
padding-right: 20px;
box-shadow: 0 0 10px #999;
}
button {
width: 70px;
height: 70px;
font-size: 24px;
margin-bottom: 20px;
border-radius: 35px;
background-colour: white;
border: none;
box-shadow: 0 0 10px #999;
}
-
Create a JavaScript file, and name it “calculator.js”. In this file, write the logic for the calculator to perform operations like addition, subtraction, multiplication, and division.
const buttons = document.querySelectorAll(“button”);
const display = document.querySelector(“.display”);
buttons.forEach(button => {
button.addEventListener(“click”, () => {
// Add logic for each button. Click here
});
});
This basic setup for a calculator website uses HTML, CSS, and JavaScript in separate files. You can now extend this basic setup to add more features and make it more interactive.
RUN:
1 thought on “Calculator Using HTML, CSS and Javascript Website-ChatGPT”