Assignment No.
04
Title: JavaScript-Based Interactive Calculator with UI Design and Input Validation
Date of completion:
Objective:
• To learn the web based development environment
• To use client side and server side web technologies
• To design and develop web applications using front end technologies and
backend databases
Problem Statement:
4 Implement an application in Java Script using following:
a) Design UI of application using HTML, CSS etc.
b) Include Java script validation
c) Use of prompt and alert window using Java Script
e.g., Design and implement a simple calculator using Java Script for operations like addition,
multiplication, subtraction, division, square of number etc.
a) Design calculator interface like text field for input and output, buttons for numbers and
operators etc.
b) Validate input values
c) Prompt/alerts for invalid values etc
Theory:
Introduction to JavaScript in Web Applications
JavaScript is a scripting language that allows developers to add interactivity and dynamic
functionality to web pages. It enables:
• Form validation to ensure correct user input.
• Event handling for user actions like button clicks.
• Prompt and alert dialogs to interact with users.
A calculator application is a great example of how JavaScript can be used to build interactive
web applications with UI elements, event listeners, and real-time input validation.
Implementation
1. HTML Code for Calculator (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<div class="display">
<p id="user-input">0</p>
</div>
<div class="buttons">
<button class="btn btn-operator">AC</button>
<button class="btn btn-operator">DEL</button>
<button class="btn btn-operator">%</button>
<button class="btn btn-operator">/</button>
<button class="btn btn-number">7</button>
<button class="btn btn-number">8</button>
<button class="btn btn-number">9</button>
<button class="btn btn-operator">*</button>
<button class="btn btn-number">4</button>
<button class="btn btn-number">5</button>
<button class="btn btn-number">6</button>
<button class="btn btn-operator">-</button>
<button class="btn btn-number">1</button>
<button class="btn btn-number">2</button>
<button class="btn btn-number">3</button>
<button class="btn btn-operator">+</button>
<button class="btn btn-zero">0</button>
<button class="btn btn-number">.</button>
<button class="btn btn-equal">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS for Styling the Calculator (styles.css)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #1e3c72, #2a5298);
}
.calculator {
background: #222;
padding: 25px;
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
width: 370px;
text-align: center;
}
.display {
background: #333;
color: white;
font-size: 2.5rem;
padding: 20px;
text-align: right;
border-radius: 15px;
margin-bottom: 20px;
min-height: 60px;
font-weight: bold;
overflow-x: auto;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.btn {
background: #444;
color: white;
font-size: 1.8rem;
border: none;
padding: 18px;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.btn:hover {
background: #555;
transform: scale(1.05);
}
.btn-operator {
background: #ff9500;
color: white;
font-weight: bold;
}
.btn-operator:hover {
background: #e08900;
}
.btn-equal {
background: #28a745;
font-weight: bold;
color: white;
}
.btn-equal:hover {
background: #218838;
}
.btn-zero {
grid-column: span 2;
font-size: 2rem;
}
3. JavaScript for Functionality (script.js)
const inputValue = document.getElementById("user-input");
document.querySelectorAll(".numbers").forEach((item) => {
item.addEventListener("click", function (e) {
if (inputValue.innerText === "NaN" || inputValue.innerText === "0") {
inputValue.innerText = "";
}
inputValue.innerText += e.target.innerText.trim();
});
});
document.querySelectorAll(".operations").forEach((item) => {
item.addEventListener("click", function (e) {
let lastChar = inputValue.innerText.slice(-1);
let value = e.target.innerHTML;
if (value === "=") {
try {
inputValue.innerText = Function(
`'use strict'; return (${inputValue.innerText})`
)();
} catch {
inputValue.innerText = "Error";
}
} else if (value === "AC") {
inputValue.innerText = "0";
} else if (value === "DEL") {
inputValue.innerText = inputValue.innerText.slice(0, -1) || "0";
} else {
if (!isNaN(lastChar) || lastChar === "") {
inputValue.innerText += value;
} } }); });
Output:
Conclusion
This assignment successfully demonstrates the creation of a functional and visually appealing
calculator using HTML, CSS, and JavaScript. We designed an intuitive UI, implemented core
arithmetic operations, integrated input validation, and enhanced user interaction through dynamic
DOM manipulation. This project showcases JavaScript's ability to build interactive web applications
efficiently.
