Scribd
Upload
24 views

Al Rouman (Web Lab Report 2)

web -lab -report

Uploaded by

Abrar Roman
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
24 views

Al Rouman (Web Lab Report 2)

web -lab -report

Uploaded by

Abrar Roman
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/ 7

Green University of Bangladesh

Department of Computer Science and Engineering (CSE)


Faculty of Sciences and Engineering
Semester: (Fall, Year:2024), B.Sc. in CSE (Day)

Lab Report NO #02


Course Title: Web Programming Lab
Course Code: CSE 302 Section: 223_D2

Lab Experiment Name: Create a calculator Using HTML,CSS and Javascript.


Student Details

Name ID

1. Md. Al-Rouman 223002036

Submission Date : Nov- 11-2024


Course Teacher’s Name : Mr. Mozdaher Abdul Quader

Lab Report Status


Marks: ………………………………… Signature:.....................
Comments:.............................................. Date:..............................

1. TITLE OF THE LAB REPORT EXPERIMENT


Create a calculator Using HTML,CSS and Javascript.
3. PROCEDURE DESIGN

1. Open HTML file in a browser.


2. Use standard HTML structure (<!DOCTYPE html>, <html>, <head>,
<body>).
3. Add input field for display and buttons for numbers, operators, "equals," and
"clear."
4. Link JavaScript for button functions (append numbers, calculate, clear).
5. Style with CSS for layout and button appearance.
6. Test and adjust functionality as needed.
7. Save and refresh browser to preview.

4. IMPLEMENTATION

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('/')">÷</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('*')">×</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="appendToDisplay('+')">+</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS:

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}

.calculator {
width: 200px;
background-color: #cfcfcf;
padding: 10px;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

#display {
width: 100%;
height: 40px;
text-align: right;
font-size: 24px;
margin-bottom: 10px;
padding: 5px;
border: none;
background-color: #e0e0e0;
border-radius: 4px;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}

button {
height: 40px;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:active {
background-color: #b0b0b0;
}

button:nth-child(1) {
background-color: #ff6666;
}

button:nth-child(5n) {
background-color: #66cc66;
}

JavaScript:

function appendToDisplay(value) {
document.getElementById("display").value += value;
}

function clearDisplay() {
document.getElementById("display").value = "";
}

function calculate() {
try {
document.getElementById("display").value = eval(document.getElementById("display").value);
} catch (error) {
document.getElementById("display").value = "Error";
}
}
Output:
6. ANALYSIS AND DISCUSSION

The calculator project combines HTML for structure, CSS for styling, and JavaScript for
functionality, creating a simple yet effective web calculator. HTML forms the interface with
input fields and buttons, CSS enhances visual design, and JavaScript manages operations
like addition, subtraction, multiplication, and division. Each button triggers JavaScript
functions, enabling real-time updates on the display, and CSS provides a clean, user-friendly
layout. While functional, the project could benefit from improvements such as custom
parsing to replace eval() for security, better error handling, advanced features (like
percentages and square roots), and responsive design for mobile.
7. SUMMARY:

The calculator project uses HTML, CSS, and JavaScript to create a basic, functional web calculator.
HTML defines the structure with input fields and buttons, CSS enhances the design, and JavaScript
controls the calculations. While the calculator works well, improvements like custom parsing for
security, advanced features, responsive design, and better error handling could make it more
versatile and user-friendly. This project effectively demonstrates essential web development skills
and provides a strong foundation for further enhancements.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy