ZEAL EDUCATION SOCIETY’S
ZEAL COLLEGE OF ENGINEERING AND RESEARCH
NARHE │PUNE -41 │ INDIA
Record No.: ZCOER-ACAD/R/ Revision: 00 Date:01/04/2021
LAB Manual
Class\Sem: TE – A, B, C Sem – II Course: Web Technology Lab
Faculty: Prof. Shyamsundar Magar A.Y: - 2024-25
EXPERIMENT NO.04
DESIGN AND IMPLEMENTATION OF A SIMPLE
CALCULATOR USING JAVASCRIPT
Assessment Rubric Marks Assessment Rubric Marks
Attendance (1M) Creativity & Design Aesthetics (1M)
Code Implementation / Execution (1M) Use of Relevant Technologies (1M)
Problem Understanding (1M) Write-Up Code Comments &
Documentation (1M)
Output Accuracy & Functionality (1M) Use of Proper Syntax & Best Practices (1M)
Logic & Algorithm Design (1M) Timely Completion & Submission (1M)
Total
_ _ _ /10
(10M)
Remark
Dated Sign & Name of Subject Teacher
EXPERIMENT NO.03
PART (A)
(PART A: TO BE REFERRED BY STUDENTS)
A.1 AIM:
Design and Implementation of A Simple Calculator Using Javascript
A.2 PROBLEM STATEMENT:
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.
A.2 PREREQUISITE\REQUIREMENTS:
● Web Browser (like Chrome, Firefox, Edge, Safari) Required to run the HTML, CSS, and JavaScript.
● Text Editor (like VS Code, Sublime Text, Notepad++) Used to write/edit the code.
● Operating System: Any OS (Windows, macOS, Linux).
A.3 LAB OUTCOME:
Students will be able to,
1. Design a static webpage using HTML.
2. Apply JavaScript to HTML pages for taking inputs from users and
validation of inputs and perform basic operations.
A.4 THEORY:
Introduction
JavaScript is one of the most widely used scripting languages in web development. It adds interactivity and
dynamic behavior to web pages, enhancing the user experience. One of the most fundamental and
practical applications of JavaScript is the development of a simple calculator. Though basic, this project
combines key aspects of web development, including HTML for structure, CSS for styling, and JavaScript
for functionality and validation.
The implementation of a calculator not only demonstrates the use of arithmetic operations but also
highlights input validation, use of dialog boxes (prompt and alert), and event handling. This document
explores the theoretical background of designing and implementing a simple web-based calculator using
JavaScript and associated technologies.
User Interface Design
A calculator must have a user-friendly and intuitive interface. The design begins with defining the
structure of the calculator using HTML (HyperText Markup Language). Essential components of the user
interface include:
● Input fields for accepting numerical values from the user.
● Buttons for each arithmetic operation (addition, subtraction, multiplication, division, and square).
● A display section to show the result of calculations.
● Clear or reset functionality to allow users to re-enter values.
The layout must be clean, with proper spacing, alignment, and labeling. Labels such as "Enter First
Number" or "Select Operation" help users understand what is expected. A consistent color scheme and
readable fonts enhance usability.
CSS (Cascading Style Sheets) is used to style the calculator. This includes defining the width and height of
buttons and inputs, setting background and text colors, managing padding and margin, and adding hover
effects to improve interactivity. Overall, CSS enhances the visual presentation and user-friendliness of the
application.
Functionality Using JavaScript
JavaScript is the core technology used for making the calculator functional. It allows users to perform
calculations, receive feedback, and interact with the interface in real-time.
The main functionalities include:
1. Capturing User Input:
JavaScript captures values entered by the user through form elements or prompt dialogs. Inputs
are typically strings and must be converted into numbers for calculations.
2. Performing Calculations:
JavaScript handles basic arithmetic operations such as addition, subtraction, multiplication, and
division. The logic is triggered when users click specific buttons associated with each operation.
3. Displaying Output:
The results of the operations are displayed dynamically on the web page. This is achieved by
modifying the text content of certain HTML elements using JavaScript.
4. Handling Events:
Every interaction, such as clicking a button, is treated as an event. JavaScript listens for these
events and responds accordingly by executing the desired functions.
Input Validation
Validation is a critical aspect of this application. Users may unintentionally or incorrectly enter non-
numeric data, which could cause errors in the calculations. JavaScript provides several methods to validate
inputs and ensure they are suitable for processing.
Common validation checks include:
● Ensuring that inputs are not empty.
● Verifying that values entered are numeric.
● Preventing operations like division by zero, which can cause mathematical errors.
If the inputs are invalid, the program does not proceed with the calculation. Instead, it informs the user
through an alert or on-screen message. This prevents unexpected behavior and improves the robustness
of the application.
Prompt and Alert Dialog Boxes
To enhance user interaction, JavaScript supports built-in dialog boxes such as prompt and alert:
● Prompt: This function is used to collect input directly from the user via a popup dialog. It is useful
for quick input without requiring form fields.
● Alert: This function displays a message box to the user. It is typically used to show errors, warnings,
or confirmations.
Using prompts for input and alerts for validation feedback makes the calculator more interactive. For
example, if the user tries to divide by zero, an alert can immediately notify them of the invalid operation.
Working of the Calculator
The working of the calculator follows a systematic flow:
1. The user is prompted to enter two numbers (or one number in the case of squaring).
2. JavaScript validates the input to ensure it is numeric and non-empty.
3. The user selects an arithmetic operation by clicking a button.
4. JavaScript performs the operation and calculates the result.
5. The result is displayed on the screen in a designated area.
6. If an invalid operation is attempted (e.g., division by zero), the user is alerted and asked to re-enter
valid input.
This sequence ensures a logical and user-friendly experience while enforcing correctness through
validation.
Benefits of This Implementation
1. Learning Opportunity:
Designing a calculator is an excellent exercise for beginners to understand the fundamentals of
JavaScript, including variables, functions, conditionals, and event handling.
2. User Interaction:
The use of prompts and alerts demonstrates how JavaScript interacts with the user in real time.
3. Reusability:
The modular structure of functions allows for easy modification and extension, such as adding new
operations like square root or percentage.
4. Practical Utility:
While basic, the calculator is fully functional and can be used as a utility in other web applications.
Limitations and Scope for Improvement
While the calculator serves its basic purpose, there are limitations:
● User Experience: Prompt dialogs are simple but not visually appealing. Modern web applications
prefer custom modals for a better look and feel.
● No History Tracking: The calculator does not store previous results or calculations, which may be
useful for users.
● Limited Functionality: It only supports basic operations. Advanced features like exponentiation,
roots, trigonometric functions, or memory operations are not included.
Improvements can include:
● Adding a scientific calculator mode.
● Using keyboard inputs for a smoother experience.
● Making the interface responsive for mobile users.
● Storing calculation history.
● Animating button presses for visual feedback.
A.5 PROCEDURE:
Step 1: Create a new HTML file
1. Open your code editor.
2. Create a new file and save it as calculator.html.
3. Add basic HTML5 structure:
o <!DOCTYPE html>
o <html>, <head>, <body> sections
Step 2: Design the Calculator Interface (HTML)
1. Inside the <body>, create a div container to hold the calculator layout.
2. Add input fields for numbers (optional if using prompt).
3. Create buttons for operations: Add, Subtract, Multiply, Divide, Square, and Clear.
4. Add a heading or <div> to display the result.
Step 3: Style the Calculator (CSS)
1. Inside the <head>, use the <style> tag to define styles.
2. Style the calculator container (div) with padding, border, background color, and alignment.
3. Style input fields and buttons (size, margin, color).
4. Use hover effects for buttons to improve user experience.
Step 4: Add JavaScript Code for Functionality
1. Use <script> tag at the end of the HTML file (before </body>).
2. Define functions for:
o Addition
o Subtraction
o Multiplication
o Division
o Square
o Clear/reset
3. For each function:
o Use prompt() to take inputs dynamically.
o Validate inputs using isNaN() and check for empty fields.
o Use alert() to notify user of invalid or missing inputs.
o Perform calculation if inputs are valid.
o Display the result using innerText or innerHTML.
Step 5: Link Buttons to JavaScript Functions
1. Add onclick attribute to each button.
2. Assign the corresponding function name to each button (e.g., onclick="add()").
3. When the user clicks a button, it triggers the function and performs the operation.
Step 6: Validate the Application
1. Open the HTML file in a web browser.
2. Test each operation:
o Enter valid inputs using prompt windows.
o Observe the result displayed on the page.
3. Try invalid inputs (letters, empty values, division by zero) and confirm that appropriate alerts are
shown.
Step 7: Save and Document
1. Save your final code.
2. Take screenshots of output with valid and invalid inputs.
3. Document observations and results.
Expected Result:
● A functional calculator interface appears in the browser.
● Prompt windows collect user input.
● Input validation works and alerts for wrong inputs.
● Correct results are displayed for arithmetic operations.
● Square and clear functions work as expected.
PART (B)
(PART B : TO BE COMPLETED BY STUDENTS)
(Students must submit the soft copy as per following segments within two hours of the practical. The
soft copy must be uploaded on the Blackboard or emailed to the concerned lab in charge faculties at the
end of the practical in case the there is no Black board access available)
Roll No. 101 Batch: C1
Name: Shyamsundar. P. Magar Date of Submission 15/01/2025
Class: TE Date of Experiment: 08/01/2025
B.1 DOCUMENT CREATED BY THE STUDENT:
Code and Output
B.4 POST LAB EXPERIMENT (SELF-LEARNING ACTIVITY)
(To be answered by the student based on the practical performed and learning/observations)
ACTIVITY 1:CREATE YOUR OWN DIGITAL DICE ROLLER!
1) Objective:
To introduce students to fundamental JavaScript concepts by creating an interactive project that uses
functions, random numbers, conditionals, and DOM manipulation.
2) Activity:
Digital Dice Roller Game
Students will create a simple web-based dice roller where clicking a button generates a random dice face
(⚀ to ⚅). If the dice rolls a six, a special congratulatory message will appear.
3) Instructions:
1. Design the Web Page:
Begin by creating a basic HTML structure that includes a heading, a display area for the dice, and a
button labeled “Roll the Dice”.
2. Add Styling (CSS):
Use CSS to center the content and enlarge the dice face for visibility. Style the button for better
appearance.
3. Write JavaScript Logic:
○ Generate a random number between 1 and 6 when the button is clicked.
○ Display the corresponding dice face using emojis or images.
○ Show a pop-up message if the number 6 is rolled.
4. Test and Debug:
Run the page in a browser, click the button multiple times, and ensure the dice changes each time.
Verify the alert appears on rolling a six.
5. Optional Enhancements:
○ Display the last 5 rolls.
○ Roll two dice and show the total.
○ Add sound effects or animations.
4) Skills Practiced:
● Understanding and applying functions
● Using random number generation
● Implementing conditional statements (if)
● Performing basic DOM manipulation
● Connecting HTML, CSS, and JavaScript for a functional mini-project
● Improving problem-solving and debugging skills
B.2 OBSERVATIONS AND LEARNING:
(Students are expected to understand the selected topic. Write your observations after learning)
B.3 CONCLUSIONS:
B5. VIVA QUESTIONS
1) What is the purpose of using JavaScript in this experiment?
2) What are prompt and alert in JavaScript?
3) How is input validation done in JavaScript?
4) What happens if the user tries to divide a number by zero?
5) Why is parseInt() or parseFloat() used in this program?
6) What are the advantages of using event handlers in JavaScript?
7) How can you display output on a web page using JavaScript?
8) What is the difference between == and === in JavaScript?
9) What are the basic arithmetic operations handled by your calculator?
10) Can this calculator be extended to include scientific operations? How?
