Client Side Scripting Language (22519) Scientific-Calculator

Annexure-I

Micro-Project Proposal

“Scientific-Calculator ”

1.0 Aim of the Micro-Project:

To design scientific-calculator website.

2.0 Intended Course Outcomes:

a) Create interactive web pages using program flow control structure.
b) Implement arrays and functions in JavaScript.
c) Create event based we forms using Java Script.

3.0 Proposed methodology:

I. Study the concept of CSS programming.
II. Study various syntax and functions of JavaScript.
III. Study to create small programs using JavaScript.
IV. Study to create forms and developing a JavaScript function in it.
V. Study to calling the functions and menus on navigation bar.
VI. Make program for given criteria.
VII. Prepare the final report.

Department of Computer Technology 2024-2025 1

 Client-Side Scripting Language (22519) Scientific-Calculator

4.0 Action Plan:

Sr. No. Planned Planned Name of

Details of Activity Start Finish Responsible Team
Date Date members
Identify the requirements of the 04/10/2024 08/10/2024 Dhruvil Rupareliya
1
project.
2 Design the structure of the 08/10/2024 14/10/2024 Dhruvil Rupareliya
project.
Develop the program using in 14/10/2024 18/10/2024
3 Dhruvil Rupareliya
JavaScript.
Debug code and eliminate errors 18/10/2024 25/10/2024 Dhruvil Rupareliya
4
occurred.
5 Test the project. 25/10/2024 01/11/2024 Dhruvil Rupareliya

6 Prepare the final report. 01/11/2024 04/11/2024 Dhruvil Rupareliya

5.0 Resources Required:

Sr. No. Resources required Specifications

1 Computer system 12th Gen Intel Core i5-1235U

2 Operating System Windows 11, 64 Bit Operating System

3 Software Visual Studio Code

6.0 Team Members:

Sr No.
Roll No. Name

1 53 Dhruvil Rupareliya

Department of Computer Technology 2024-2025 2

 Client-Side Scripting Language (22519) Scientific-Calculator

Annexure-II

Micro-Project Proposal

“ Scientific-Calculator ”

1.0 Rationale:

Much of the Internet is based on the client-server model. In this model, user devices
communicate via a network with centrally located servers to get the data they need, instead of
communicating with each other. End user devices such as laptops, smartphones, and desktop
computers are considered to be 'clients' of the servers, as if they were customers obtaining
services from a company. Client devices send requests to the servers for webpages or
applications, and the servers serve up responses.

The client-server model is used because servers are typically more powerful and more reliable
than user devices. They also are constantly maintained and kept in controlled environments to
make sure they're always on and available; although individual servers may go down, there are
usually other servers backing them up. Meanwhile, users can turn their devices on and off, or lose
or break their devices, and it should not impact Internet service for other users.

2.0 Aim of the Micro-Project:

To design calculator website.

3.0 Course Outcomes Addressed:

a) Create interactive web pages using program flow control structure.
b) Implement arrays and functions in JavaScript.
c) Create event based we forms using JavaScript.

Department of Computer Technology 2024-2025 3

 Client-Side Scripting Language (22519) Scientific-Calculator

4.0 Literature Review:

1. Function:

Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript
is similar to a procedure—a set of statements that performs a task or calculates a value, but
for a procedure to qualify as a function, it should take some input and return an output where
there is some obvious relationship between the input and the output. To use a function, you
must define it somewhere in the scope from which you wish to call it.

A function definition (also called a function declaration, or function statement) consists of

the function keyword, followed by:

• The name of the function.

• A list of parameters to the function, enclosed in parentheses and separated by commas.
• The JavaScript statements that define the function, enclosed in curly braces, { /* … */ }.

Syntax:

function function_name (parameter)

{
Statements ;
}

For example, the following code defines a simple function named square:

function square(number)
{
return number * number; }

The function square takes one parameter, called number. The function consists of one
statement that says to return the parameter of the function (that is, number) multiplied by
itself. The return statement specifies the value returned by the function, which is number *
number.
Department of Computer Technology 2024-2025 4
 Client-Side Scripting Language (22519) Scientific-Calculator

Parameters are essentially passed to functions by value — so if the code within the body of a
function assigns a completely new value to a parameter that was passed to the function, the
change is not reflected globally or in the code which called that function.

5.0 Actual Methodology Followed:

To design web pages for displaying Automobile website.

I. Study the concept of CSS programming.

II. Study various syntax and functions of JavaScript.
III. Study to create small programs using JavaScript.
IV. Study to calling the functions and menus on navigation bar.
V. Make program for given criteria.
VI. Prepare the final report.

6.0 Source Code:

<html>

<head >

<title >Calculator</title>

<style>

.buttons{

background-color: greenyellow;

padding: 10px;

border: 20px solid rgb(2, 0, 0);

margin: 350px;

width: 177px;

.button1{

width: 21px;

Department of Computer Technology 2024-2025 5

 Client-Side Scripting Language (22519) Scientific-Calculator

padding: 1px 1px;

.button2{

width: 21px;

padding: 1px 10px;

</style>

</head>

<script type="text/javascript" >

function myclick(a){

myform.display.value+=a;

function equalto(){

myform.display.value=eval(myform.display.value);

function AC(){

myform.display.value="";

function del(){

var prevalue=myfrom.display.value;

myform.display.value=prevalue.substr(0,prevalue.length-1);

function fnsin(){

myform.display.value=Math.sin(myform.display.value);

function fncos(){

myform.display.value=Math.cos(myform.display.value);

Department of Computer Technology 2024-2025 6

 Client-Side Scripting Language (22519) Scientific-Calculator

function fntan(){

myform.display.value=Math.tan(myform.display.value);

function square(){

myform.display.value=Math.pow(myform.display.value,2)

function root(){

myform.display.value=Math.pow(myform.display.value,1/2)

function add(){

myform.display.value=Math.add(myform.display.value);

function sub(){

myform.display.value=Math.substr(myform.display.value);

function div(){

myform.display.value=Math.div(myform.display.value);

function mul(){

myform.display.value=Math.mul(myform.display.value);

</script>

<body>

<div class="buttons">

<form name="myform">

<input type="text" name="display"><br>

<input type="button" name="btnsin" value="sin" onclick="fnsin()">

Department of Computer Technology 2024-2025 7

 Client-Side Scripting Language (22519) Scientific-Calculator

<input type="button" name="btncos" value="cos" onclick="fncos()">

<input type="button" name="btntan" value="tan" onclick="fntan()">

<input type="button" name="btnsqr" value="^2" onclick="square()"><br>

<input type="button" name="btn9" value="9" onclick="myclick('9')">

<input type="button" name="btn8" value="8" onclick="myclick('8')">

<input type="button" name="btn7" value="7" onclick="myclick('7')">

<input type="button" name="btnsub" value="-" onclick="myclick('-')">

<input type="button" name="btnsqrt" value="RT"onclick="root()"><br>

<input type="button" name="btn6" value="6" onclick="myclick('6')">

<input type="button" name="btn5" value="5" onclick="myclick('5')">

<input type="button" name="btn4" value="4" onclick="myclick('4')">

<input class="button button1" type="button" name="btnadd" value="+" onclick="myclick('+')">

<input type="button" name="btnb1" value="(" onclick="myclick('(')">

<input type="button" name="btnb2" value=")" onclick="myclick(')')"><br>

<input type="button" name="btn3" value="3" onclick="myclick('3')">

<input type="button" name="btn2" value="2" onclick="myclick('2')">

<input type="button" name="btn1" value="1" onclick="myclick('1')">

<input type="button" name="btnmul" value="*" onclick="myclick('*')">

<input type="button" name="btndev" value="/" onclick="myclick('/')"><br>

<input type="button" name="btn0" value="0" onclick="myclick('0')">

<input class="button button2" type="button" name="btnpoint" value="." onclick="myclick('.')">

<input type="button" name="btnequal" value="=" onclick="equalto()">

<input type="button" name="btndel" value="Del" onclick="del()">

<input type="button" name="btnac" value="AC" onclick="AC()">

</div>

</form>

</body>

</html>

Department of Computer Technology 2024-2025 8

 Client-Side Scripting Language (22519) Scientific-Calculator

VII.0 Output :

Department of Computer Technology 2024-2025 9

 Client-Side Scripting Language (22519) Scientific-Calculator

8.0 Actual Resources Required:

Sr. No. Resources required Specifications

1 Computer system 12th Gen Intel Core i5-1235U

2 Operating System Windows 1, 64 Bit Operating System

3 Software Visual Studio Code

8.0 Skills Developed:

During the course of this micro-project, we learnt to create a form and define a frameset which
divides the web page into multiple pages:

a) We learnt various syntaxes of CSS language.

b) We learnt to create function and called it.

9.0 Applications of this Micro-project:

This micro-project finds its application in:

a) For creation of frame tag i.e <frameset>,<frame> in the body of HTML page.

b) For defining functions in <script> tag and calling it.

c) For accessing different web pages use button and frameset.

10.0 Area of future Improvement:

Being familiar with HTML and CSS is necessary to become a web developer. Worldwide,
HTML is the most widely used markup language. To style websites, you must also use CSS.
You can use CSS, for instance, to incorporate various fonts, colors, and layouts when designing
a website.

Department of Computer Technology 2024-2025 10

 Client-Side Scripting Language (22519) Scientific-Calculator

The <frameset> tag in HTML is used to define the frameset. The <frameset> element contains
one or more frame elements. It is used to specify the number of rows and columns in frameset
with their pixel of spaces. Each element can hold a separate document.

Forms are the basics of HTML. We use HTML form element in order to create the JavaScript
form.
Thus, these components are useful it all website.

10.0 Conclusion:

We learnt to create scientific calculator.

11.0 References :

 W3schools.com
 www.java.com
 www.geekforgeek.com

Department of Computer Technology 2024-2025 11