Css Microproject of Diploma Csmss

lOMoARcPSD|18674829
Css Microproject of diploma csmss
Co-Operation Farm Machinery (Chhatrapati Shahu Ji Maharaj University)
Studocu is not sponsored or endorsed by any college or university

Downloaded by 94-Kiran Dhumal (kirandhumal663@gmail.com)
lOMoARcPSD|18674829
CSS(22519)
A PROJECT REPORT ON
“CALCULATOR USING JAVASCRIPT CSS”

SUBMITTED BY
1] ANAND THITE [1911520093]

2] VINAYAK MADILWAR [1911520066]
3] SAVITA SHAHARAO [1911520090]
UNDER THE GUIDANCE OF

Mrs. S. A. SAMRAT
DEPARTMENT OF COMPUTER ENGINEERING
CSMSS COLLEGE OF POLYTECHNIC, AURANGABAD
MAHARASTRA STATE, INDIA
2021-2022
Page | 1
lOMoARcPSD|18674829
CSS(22519)
Submission of Micro Project Entitled
“Calculator Using Javascript CSS”
Submitted to
CSMSS COLLEGE OF POLYTECHNIC, AURANGABAD.
BY
Research Students
1] ANAND THITE [1911520093]

Under the Supervision of

Miss. S.A.SAMRAT
Project Director
Dept. of Computer
CSMSS COLLEGE OF POLYTECHNIC, AURANGABAD,
Aurangabad. 431001(M.S.)
Page | 2
lOMoARcPSD|18674829
CSS(22519)
CSMSS COLLEGE OF POLYTECHNIC
AURANGABAD
CERTIFICATE
This is to certify that ANAND THITE , VINAYAK MADILWAR ,and
SAVITA SHAHARAO of Third semester of Diploma in Computer Engineering of
Institute CSMSS College of Polytechnic (code:1152) have completed the Micro

Project satisfactorily in subject CLIENT SIDE SCRIPTING (22519) for the
academic year 2021-2022 as prescribed in the curriculum.
Place: ………. Enrollment no.: 1911520093 Exam seat no.:………….
Enrollment no.: 1911520066 Exam seat no.:………….
Date: ………….. Enrollment no.: 1911520090 Exam seat no.:………….
PROJECT DIRECTOR HEAD OF THE DEPARTMENT
PRINCIPAL
Page | 3
lOMoARcPSD|18674829
CSS(22519)
Acknowledgement
We would like to express our thanks to the people who have helped us most
throughout our project. We would like to express our sincere thanks to the
principal of CSMSS College of Polytechnic Prof. Dongre. G.B. for being always
with us as a motivator. We are thankful to the H.O.D. of Computer Department
Mr. S.U. Kakde sir for his kind support. We are grateful to our Project Director
Ms. S.A.SAMRAT for nonstop support and continuous motivation for the project.
Her help made us possible to complete our project with all accurate information. A
special thanks of our goes to our friends who helped us in completing the project,
where they all exchanged their own interesting ideas. We wish to thanks our
parents for their personal support or attention who inspired us to go our own way.
Finally we would like to thank God who made all things possible for us till the
end.
STUDENT NAME ENROLL NO. SIGN

1] ANAND THITE [1911520093]
Page | 4
lOMoARcPSD|18674829
CSS(22519)
Index
Sr. PARTICULAR PAGE NO.
1. Abstract 6
2. Introduction 7-17
3. Conclusion 18
4. References 19
Page | 5
lOMoARcPSD|18674829
CSS(22519)
Abstract
 In this project we have studied different types of operators in
calculator using javascript.
 We have listed and have given information on the important
functions of the javascript commands.
 We have understood importance of functions in javascript in client
side scripting.
 Functions helps us to execute different-different types of
javascript commands.
 We have also learned introduction of javascript in client side
scripting..
Page | 6
lOMoARcPSD|18674829
CSS(22519)
Introduction.
Introduction and features of Css Calculator

The CSS calc() property expression lets us perform simple calculations in our
stylesheets.
Basics
Here is a rule set demonstrating the use of CSS calc():
.container { height: calc(100% - 50px); width: calc(100% - 40px); }
As you can see in the example above, the CSS calc() property expression
allows us to dynamically calculate the result between the subtraction of two
CSS length values right in our stylesheet without using JavaScript, and even
if length values don’t share the same unit.
We can only perform arithmetic calculations with CSS calc():
Addition (+)
Subtraction (-)
Multiplication (*)
Division (/)
CSS calc() works on many types of numerical CSS values:
Page | 7
lOMoARcPSD|18674829
CSS(22519)
Length
Time
Angle
Frequency
Unitless integers and numbers
CSS calc() can’t operate on CSS color values, and other types of CSS values.
Use Case
The value of CSS calc() can quickly be seen when we’re performing
mathematical calculations on numerical values with differing CSS units. It
becomes even more useful when the values are a mixture of relative and fixed
units.
First, let’s talk about an instance where we shouldn’t use the calc() property
expression.
Counterexample
/* Do not do this! */ div { width: calc(600px / 2); }
In the style rule above, we’re performing a calculation that we can easily do
ourselves. So that our CSS is more readable, and to avoid unnecessary
browser calculations that could slow down our web pages, it’s better if we
pull out a real calculator and do the math ourselves:
div{ width: 300px; }
Where to Use CSS calc()

Page | 8
lOMoARcPSD|18674829
CSS(22519)
CSS calc() becomes a great asset when one of the units is a relative unit while
the other is a fixed unit. This ability to negotiate between different CSS units
is especially wonderful in responsive web designs.
Here’s an example of a centered container that will always have 20px

margins on its left and right, regardless of the screen size:
.container { margin: 0 auto; width: calc(100% - 40px); }
A demo of CSS calc()
In this use case of CSS calc(), we are able to account for a vertical scrollbar
and ensure readability comfort of our content regardless of what device is
being used. And this method of centering a fluid container only requires
minimal CSS and HTML. Other responsive design techniques for achieving
the same result require more code, and might entail things such as negative
margins, media queries, and extraneous nesting of HTML container elements.
Specs Status
The specifications for CSS calc() is described in W3C CSS Values and Units
Module 3. At the time of writing, this module is in W3C Candidate
Recommendation (CR) status, meaning it is two levels away from being
finalized.
Keep in mind that, right now, CSS calc() is one of the three CSS features
singled out in the module’s specifications as being in danger of being
dropped. This is what the CR says:
The following features are at-risk and may be dropped during the CR period:
‘calc()’, ‘toggle()’, ‘attr()’.
Page | 9
lOMoARcPSD|18674829
CSS(22519)
Browser Support
Currently, CSS calc() is supported in about 82% of the browsers being used
on the Web, according to data from caniuse.com. Internet Explorer 9 has
partial support of CSS calc(), and subsequent versions of the browser have
full feature support.
Simple Calculator with if..else if...else

// program for a simple calculator
// take the operator input

const operator = prompt('Enter operator ( either +, -, * or / ): ');
// take the operand input

const number1 = parseFloat(prompt('Enter first number: '));
const number2 = parseFloat(prompt('Enter second number: '));
let result;
// using if...else if... else

if (operator == '+') {
result = number1 + number2;
}
else if (operator == '-') {
result = number1 - number2;
}
else if (operator == '*') {
result = number1 * number2;
}
else {
result = number1 / number2;
}
// display the result

console.log(`${number1} ${operator} ${number2} = ${result}`);
Output
Enter operator ( either +, -, * or / ): *

Enter first number: 3.4
Enter second number: 5.6
3.4 * 5.6 = 19.04
Page | 10
lOMoARcPSD|18674829
CSS(22519)
In the above example, the user is prompted to enter an operator

(either +, -, * or /) and two numbers.
The parseFloat() converts the numeric string value to a floating-
point value.
The if...else if...if statement is used to check the condition
that the user has entered for the operator. The corresponding
operation is performed and the output is displayed.
Simple Calculator with switch

// program for a simple calculator
let result;
// take the operator input

const operator = prompt('Enter operator ( either +, -, * or / ): ');
// take the operand input

const number1 = parseFloat(prompt('Enter first number: '));
const number2 = parseFloat(prompt('Enter second number: '));
switch(operator) {
case '+':
result = number1 + number2;
console.log(`${number1} + ${number2} = ${result}`);
break;
case '-':
result = number1 - number2;
console.log(`${number1} - ${number2} = ${result}`);
break;
case '*':
result = number1 * number2;
console.log(`${number1} * ${number2} = ${result}`);
break;
case '/':
Page | 11
lOMoARcPSD|18674829
CSS(22519)
result = number1 / number2;

console.log(`${number1} / ${number2} = ${result}`);
break;
default:
console.log('Invalid operator');
break;
}
Output
Enter operator: +
Enter first number: 4
Enter second number: 5
4 + 5 = 9
In above program, the user is asked to enter either +, -, * or /, and two

numbers. Then, the switch statement executes cases based on the
user input.
Page | 12
lOMoARcPSD|18674829
CSS(22519)
Conclusion
We have learnt about “javascript commands to create a simple

Calculator”, In this our present micro project we have learn “To
create Simple Calculator in CSs”, We used different functions for
executing this commands on computer system. Now we can easily
execute this all commands. In this work our present Micro Project
our subject teacher helps us a lot.
Page | 13
lOMoARcPSD|18674829
CSS(22519)
References
1. https://www.programiz.com/javascript/examples/simple-calculator
2. https://www.javatpoint.com/javascript-calculator
3. https://dev.to/javascriptacademy/create-a-simple-calculator-using-html-css-and-javascript-4o7k
And our Subject teacher also helps us for completion of our “Micro-
Project”
Page | 14

Css Microproject of Diploma Csmss

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css Microproject of Diploma Csmss

Uploaded by

Copyright:

Available Formats

lOMoARcPSD|18674829

Css Microproject of diploma csmss

Co-Operation Farm Machinery (Chhatrapati Shahu Ji Maharaj University)

Studocu is not sponsored or endorsed by any college or university

“CALCULATOR USING JAVASCRIPT CSS”

1] ANAND THITE [1911520093]

UNDER THE GUIDANCE OF

DEPARTMENT OF COMPUTER ENGINEERING

CSMSS COLLEGE OF POLYTECHNIC, AURANGABAD

MAHARASTRA STATE, INDIA

Submission of Micro Project Entitled

“Calculator Using Javascript CSS”

1] ANAND THITE [1911520093]

Under the Supervision of

CSMSS COLLEGE OF POLYTECHNIC

Institute CSMSS College of Polytechnic (code:1152) have completed the Micro

Place: ………. Enrollment no.: 1911520093 Exam seat no.:………….

Enrollment no.: 1911520066 Exam seat no.:………….

Date: ………….. Enrollment no.: 1911520090 Exam seat no.:………….

PROJECT DIRECTOR HEAD OF THE DEPARTMENT

STUDENT NAME ENROLL NO. SIGN

2] VINAYAK MADILWAR [1911520066]

3] SAVITA SHAHARAO [1911520090]

Introduction and features of Css Calculator

Here is a rule set demonstrating the use of CSS calc():

.container { height: calc(100% - 50px); width: calc(100% - 40px); }

We can only perform arithmetic calculations with CSS calc():

CSS calc() works on many types of numerical CSS values:

Unitless integers and numbers

/* Do not do this! */ div { width: calc(600px / 2); }

div{ width: 300px; }

Where to Use CSS calc()

Here’s an example of a centered container that will always have 20px

.container { margin: 0 auto; width: calc(100% - 40px); }

A demo of CSS calc()

Simple Calculator with if..else if...else

// take the operator input

// take the operand input

// using if...else if... else

// display the result

Enter operator ( either +, -, * or / ): *

In the above example, the user is prompted to enter an operator

Simple Calculator with switch

// take the operator input

// take the operand input

result = number1 / number2;

In above program, the user is asked to enter either +, -, * or /, and two

We have learnt about “javascript commands to create a simple

You might also like