Scribd
Upload
31 views

Post Lab

The document describes developing a simple calculator app using HTML, JavaScript, and CSS. It includes an introduction to JavaScript and Firebase technologies. The objective is to understand how to use the eval() function in JavaScript to evaluate expressions. The code section shows the HTML, JavaScript, and CSS code used to create a basic calculator interface with number buttons, arithmetic operators, and a display to output results. The app evaluates user input with eval() and displays the answer.

Uploaded by

Sachin Rahangdale
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
31 views

Post Lab

The document describes developing a simple calculator app using HTML, JavaScript, and CSS. It includes an introduction to JavaScript and Firebase technologies. The objective is to understand how to use the eval() function in JavaScript to evaluate expressions. The code section shows the HTML, JavaScript, and CSS code used to create a basic calculator interface with number buttons, arithmetic operators, and a display to output results. The app evaluates user input with eval() and displays the answer.

Uploaded by

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

System Lab (PCCCS305P)

S. B. JAIN INSTITUTE OF TECHNOLOGY, MANAGEMENT &


RESEARCH, NAGPUR.

Practical No. 09
(POST-LAB)
Aim: Design & develop Simple Calculator in HTML using eval() in JavaScript and CSS

Name of Student: ______________

Roll No.: ______________

Semester/Year: ______________

Academic Session: 2023-2024

Date of Performance: __________

Date of Submission: __________

Department of Computer Science & Engineering, S.B.J.I.T.M.R, Nagpur


System Lab (PCCCS305P)

Aim: Design & develop a Simple Calculator in HTML using eval() in JavaScript and CSS

OBJECTIVE/EXPECTED LEARNING OUTCOME:

The objectives and expected learning outcome of this practical are:

● Able to analyze the use of eval() function


● To apply basic programming knowledge with JavaScript.
● Able to understand and apply JavaScript Function

HARDWARE AND SOFTWARE REQUIRMENTS:

Hardware Requirement:

Monitor, CPU, Keyboard, mouse, etc.

Software Requirement:

Firebase Database.

THEORY:

JavaScript:

JavaScript is a high-level, versatile programming language that is primarily known for its use in web
development to make web pages interactive. It is an interpreted language, meaning that it is executed by a
web browser without the need for compilation. JavaScript is a key component of web development
alongside HTML and CSS.

• Object-Oriented Programming (OOP):

JavaScript is an object-oriented language, which means it uses objects to organize and structure
code. Objects in JavaScript can encapsulate properties and methods, making it a versatile
language for creating modular and reusable code.

• Variables and Data Types:

JavaScript has several data types, including numbers, strings, booleans, objects, arrays, and more.
Variables are used to store and manipulate data, and they are dynamically typed, meaning that a
variable can hold different types of data at different times.

• Functions:

Functions are blocks of reusable code that perform a specific task. JavaScript functions can be
defined using the function keyword and can take parameters, return values, and be assigned to
variables.

• Control Flow:
Department of Computer Science & Engineering, S.B.J.I.T.M.R, Nagpur
System Lab (PCCCS305P)

JavaScript supports various control flow statements, including if, else, switch, for, while, and do-
while. These statements allow developers to control the execution flow of their code based on
conditions and loops.

• Event Handling:

JavaScript is widely used for handling events in the browser, such as user interactions (clicks,
keypresses, etc.) and changes in the document structure (loading, resizing, etc.). Event handling is
essential for creating interactive and responsive web pages.

Firebase:

Firebase is a NoSQL cloud database which store its data as JSON objects. A NoSQL database provides a
mechanism for storage and retrieval of data that is modeled in means other than the tabular relations used
in relational databases. Also Firebase is a backend platform for building Web, Android and IOS
applications. It offers real time database, different APIs, multiple authentication types and hosting
platform. This is an introductory tutorial, which covers the basics of the Firebase platform and explains
how to deal with its various components and sub-components.

Firebase Features:

• Real-time Database − Firebase supports JSON data and all users connected to it receive live updates
after every change.
• Authentication − We can use anonymous, password or different social authentications.
• Hosting − The applications can be deployed over secured connection to Firebase servers.

Firebase Advantages:

• It is simple and user friendly. No need for complicated configuration.


• The data is real-time, which means that every change will automatically update connected clients.
• Firebase offers simple control dashboard.
• There are a number of useful services to choose.

CODE:

Department of Computer Science & Engineering, S.B.J.I.T.M.R, Nagpur


System Lab (PCCCS305P)

HTML Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calci</title>
<script type = text/javascript></script>
<style></style>
</head>
<body>
<center>
<h1>Simple Calculator</h1>
<table>
<tr><input id = "display"></tr>
<tr><td> <button onclick = fun(0)>0</button></td>
<td> <button onclick = fun("(")>(</button></td>
<td> <button onclick = fun(")")>)</button></td>
<td></td>
<td> <button onclick = C()>C</button></td>
<td> <button onclick = B()>B</button></td>
</tr>
<tr><td> <button onclick = fun(7)>7</button></td>
<td> <button onclick = fun(8)>8</button></td>
<td> <button onclick = fun(9)>9</button></td>
<td></td>
<td> <button onclick = fun("+")>+</button></td>
<td> <button onclick = fun("-")>-</button></td>
</tr>
<tr><td> <button onclick = fun(6)>6</button></td>
<td> <button onclick = fun(5)>5</button></td>
<td> <button onclick = fun(4)>4</button></td>
<td></td>
<td><button onclick = fun("*")>*</button></td>
<td><button onclick = fun("/")>/</button></td>
</tr>
<tr><td> <button onclick = fun(1)>1</button></td>
<td> <button onclick = fun(2)>2</button></td>
Department of Computer Science & Engineering, S.B.J.I.T.M.R, Nagpur
System Lab (PCCCS305P)

<td> <button onclick = fun(3)>3</button></td>


<td></td>
<td> <button onclick = fun(".")>.</button></td>
<td> <button onclick = res()>=</button></td>
</tr>
</table>
</center>
</body>
</html>

Java Script:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calci</title>
<script type = text/javascript>
function fun(a)
{
document.getElementById("display").value+=a;
}
function C()
{
document.getElementById("display").value = "";
}
function B()
{
var y = document.getElementById("display").value;
document.getElementById("display").value = y.slice(0, y.length-1);
}
function res()
{
var a = document.getElementById("display").value;
document.getElementById("display").value=a+"="+eval(a);
}
</script>
Department of Computer Science & Engineering, S.B.J.I.T.M.R, Nagpur
System Lab (PCCCS305P)

OUTPUT:

CONCLUSION:

REFERENCE:

 www.tutorialspoint.com/plsql
 https://www.tutorialandexample.com/firebase-interview-questions/
 https://w3schools.com /

Department of Computer Science & Engineering, S.B.J.I.T.M.R, Nagpur

You might also like