A unique and interesting calculator project using JavaScript, HTML, and CSS could be a calculator with a retro or futuristic design. Let's create a futuristic calculator with a sleek and minimalistic interface.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="calculator">
<input type="text" id="result" disabled>
<div class="buttons">
<button class="gray" onclick="clearResult()">C</button>
<button class="gray" onclick="appendValue(7)">7</button>
<button class="gray" onclick="appendValue(8)">8</button>
<button class="gray" onclick="appendValue(9)">9</button>
<button class="orange" onclick="appendOperator('/')">/</button>
<button class="gray" onclick="appendValue(4)">4</button>
<button class="gray" onclick="appendValue(5)">5</button>
<button class="gray" onclick="appendValue(6)">6</button>
<button class="orange" onclick="appendOperator('*')">*</button>
<button class="gray" onclick="appendValue(1)">1</button>
<button class="gray" onclick="appendValue(2)">2</button>
<button class="gray" onclick="appendValue(3)">3</button>
<button class="orange" onclick="appendOperator('-')">-</button>
<button class="gray" onclick="appendValue(0)">0</button>
<button class="gray" onclick="appendOperator('.')">.</button>
<button class="blue" onclick="calculate()">=</button>
<button class="orange" onclick="appendOperator('+')">+</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
body {
font-family: 'Arial', sans-serif;
background-color: ##6fb5bd;
}
.calculator {
max-width: 250px;
margin: 100px auto;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
}
#result {
width: 91%;
padding: 10px;
font-size: 20px;
margin-bottom: 10px;
text-align: right;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
border: none;
background-color: #e6e6e6;
padding: 10px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.gray {
background-color: #e6e6e6;
}
.orange {
background-color: #ff9f00;
color: #fff;
}
.blue {
background-color: #007bff;
color: #fff;
}
button:hover {
background-color: #d4d4d4;
}
Javascript
let result = document.getElementById("result");
function appendValue(value) {
result.value += value;
}
function appendOperator(operator) {
result.value += operator;
}
function clearResult() {
result.value = "";
}
function calculate() {
try {
result.value = eval(result.value);
} catch (error) {
result.value = "Error";
}
}
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
The head> section contains metadata and external resources for the document. In this case:
The title> element sets the title of the webpage, which will be displayed in the browser's title bar or tab.
<body>
<div class="calculator">
<input type="text" id="result" disabled>
<div class="buttons">
<button class="gray" onclick="clearResult()">C</button>
<button class="gray" onclick="appendValue(7)">7</button>
<button class="gray" onclick="appendValue(8)">8</button>
<button class="gray" onclick="appendValue(9)">9</button>
<button class="orange" onclick="appendOperator('/')">/</button>
<button class="gray" onclick="appendValue(4)">4</button>
<button class="gray" onclick="appendValue(5)">5</button>
<button class="gray" onclick="appendValue(6)">6</button>
<button class="orange" onclick="appendOperator('*')">*</button>
<button class="gray" onclick="appendValue(1)">1</button>
<button class="gray" onclick="appendValue(2)">2</button>
<button class="gray" onclick="appendValue(3)">3</button>
<button class="orange" onclick="appendOperator('-')">-</button>
<button class="gray" onclick="appendValue(0)">0</button>
<button class="gray" onclick="appendOperator('.')">.</button>
<button class="blue" onclick="calculate()">=</button>
<button class="orange" onclick="appendOperator('+')">+</button>
</div>
</div>
<script src="script.js"></script>
</body>
The <div class="calculator"> element defines a container for the calculator.
The <input> element is a text input field that has the type set to "text" and id set to "result".
The disabled attribute prevents user input.
The <div class="buttons"> element is a container for the calculator buttons.
Inside the <div class="buttons">, there are a series of <button> elements representing the calculator buttons. They have various classes assigned to them, such as "gray", "orange", and "blue". The onclick attribute specifies JavaScript functions to execute when the buttons are clicked.
body {
font-family: 'Arial', sans-serif;
background-color: #6fb5bd;
}
The font-family property sets the font family to 'Arial' or a generic sans-serif font if Arial is not available.
The background-color property sets the background color of the body to #6fb5bd, a light gray color.
.calculator {
max-width: 250px;
margin: 100px auto;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
}
The max-width property sets the maximum width of the calculator container to 250px.
The margin property sets 100px top and bottom margins and auto for left and right margins, centering the calculator horizontally.
The background-color property sets the background color of the calculator container to #fff, white.
The border-radius property adds rounded corners to the calculator container with a radius of 8px.
The box-shadow property adds a subtle shadow effect to the calculator container.
The padding property adds 20px of space inside the calculator container.
The text-align property centers the text content of the calculator container.
#result {
width: 91%;
padding: 10px;
font-size: 20px;
margin-bottom: 10px;
text-align: right;
}
The width property sets the width of the result input field to 100% of its parent container.
The padding property adds 10px of space inside the result input field.
The font-size property sets the font size of the result input field to 20px.
The margin-bottom property adds 10px of bottom margin to create spacing below the result input field.
The text-align property aligns the text content of the result input field to the right.
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
The .buttons class selector targets the <div> element with the class "buttons".
The display property sets the display value of the buttons container to grid, allowing the use of grid-based layout properties.
The grid-template-columns property defines the columns of the grid layout. In this case, it creates four equal-width columns using repeat(4, 1fr). The gap property adds a 10px gap between the grid cells (buttons).
button {
border: none;
background-color: #e6e6e6;
padding: 10px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
The border property removes the border around the buttons.
The background-color property sets the background color of the buttons to #e6e6e6, a light gray color.
The padding property adds 10px of space inside the buttons.
The font-size property sets the font size of the buttons to 16px.
The border-radius property adds rounded corners to the buttons with a radius of 4px.
The cursor property changes the mouse cursor to a pointer when hovering over the buttons.
The transition property adds a smooth transition effect to the background color of the buttons, with a duration of 0.3s and an ease timing function.
.gray {
background-color: #e6e6e6;
}
The background-color property sets the background color of elements with the "gray" class to #e6e6e6, a light gray color.
.orange {
background-color: #ff9f00;
color: #fff;
}
The background-color property sets the background color of elements with the "orange" class to #ff9f00, an orange color.
The color property sets the text color of elements with the "orange" class to #fff, white.
.blue {
background-color: #007bff;
color: #fff;
}
The background-color property sets the background color of elements with the "blue" class to #007bff, a blue color.
The color property sets the text color of elements with the "blue" class to #fff, white.
button:hover {
background-color: #d4d4d4;
}
The background-color property changes the background color of the buttons to #d4d4d4, a slightly darker gray, when they are being hovered over.
let result = document.getElementById("result");
function appendValue(value) {
result.value += value;
}
When called, this function appends the value to the value property of the result element. This is used to add numerical values or decimal points to the calculator input.
function appendOperator(operator) {
result.value += operator;
}
When called, this function appends the operator to the value property of the result element. This is used to add operators (+, -, *, /) to the calculator input.
function clearResult() {
result.value = "";
}
This is a function named clearResult.When called, this function sets the value property of the result element to an empty string, effectively clearing the calculator input.
function calculate() {
try {
result.value = eval(result.value);
} catch (error) {
result.value = "Error";
}
}
The eval function evaluates a JavaScript expression passed as a string and returns the result.
If the evaluation is successful, the result is assigned to the value property of the result element, updating the calculator input with the calculated result.
If an error occurs during evaluation (e.g., division by zero), the catch block is executed, and the value property of the result element is set to "Error".
These JavaScript functions are responsible for handling the calculator's functionality, including appending values and operators, clearing the input, and calculating the result.
I hope this explanation clarifies the code for you......