Scribd
Upload
12 views5 pages

Assignment No 04

The document outlines the assignment to create a JavaScript-based interactive calculator with a focus on UI design and input validation. It includes objectives, a problem statement, and implementation details involving HTML, CSS, and JavaScript code. The project aims to demonstrate the use of web technologies to develop a functional and visually appealing application that validates user input and performs basic arithmetic operations.

Uploaded by

Pranav Sherekar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views5 pages

Assignment No 04

The document outlines the assignment to create a JavaScript-based interactive calculator with a focus on UI design and input validation. It includes objectives, a problem statement, and implementation details involving HTML, CSS, and JavaScript code. The project aims to demonstrate the use of web technologies to develop a functional and visually appealing application that validates user input and performs basic arithmetic operations.

Uploaded by

Pranav Sherekar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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.

You might also like