Skip to main content

How to make calculator using Html and Css


Only Calculator Code in this page :-

Html Code:- 
<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Calculator 3rd Project</title>
<link rel="stylesheet" href="calc.css">

</head>
<body align="center" bgcolor="greyblue">
<div  class="container">
<fieldset id ="container">
<form  name="calculator">
    <input id="display" type="text" name="display" readonly>
    <br>
   
    <input class ="button digits" type="button" value="7" onclick="calculator.display.value +='7' ">
    <input class ="button digits" type="button" value="8" onclick="calculator.display.value +='8' ">
    <input class ="button digits" type="button" value="9" onclick="calculator.display.value +='9' ">
    <input class ="button mathButtons" type="button" value="+" onclick="calculator.display.value +='+' ">
   
    <br>
    <input class ="button digits" type="button" value="4" onclick="calculator.display.value +='4' ">
    <input class ="button digits" type="button" value="5" onclick="calculator.display.value +='5' ">
    <input class ="button digits" type="button" value="6" onclick="calculator.display.value +='6' ">
    <input class ="button mathButtons" type="button" value="-" onclick="calculator.display.value +='-' ">
    
    <br>
    <input class ="button digits" type="button" value="1" onclick="calculator.display.value +='1' ">
    <input class ="button digits" type="button" value="2" onclick="calculator.display.value +='2' ">
    <input class ="button digits" type="button" value="3" onclick="calculator.display.value +='3' ">
    <input class ="button mathButtons" type="button" value="*" onclick="calculator.display.value +='*' ">
    
    <br>
    <input id = "clearButton" class ="button" type="button" value="C" onclick="calculator.display.value  =' ' ">
    <input class ="button digits" type="button" value="0" onclick="calculator.display.value +='0' ">
    <input class ="button mathButtons" type="button" value="=" onclick="calculator.display.value = eval(calculator.display.value) ">
    <input class ="button mathButtons" type="button" value= "/"  onclick="calculator.display.value +='/' ">

</form>
</fieldset>
</div>
</body>
</html>


Css Code:- 
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

#container {
    width: 200px;
    padding: 8px 8px 20px 8px;
    margin: 20px auto;
    background-color: #ABABAB;
    border-radius: 4px;
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
    border-bottom: 2px solid #C1C1C1;
    border-left: 2px solid #C1C1C1;
    box-shadow: -3px 3px 7px rgba(0, 0, 0, .6), inset -100px 0px 100px rgba(255, 255, 255, .5);
}

#display {
    display: block;
    margin: 15px auto;
    height: 44px;
    width: 174px;
    padding: 0 10px;
    border-radius: 4px;
    border-top: 2px solid #C1C1C1;
    border-right: 2px solid #C1C1C1;
    border-bottom: 2px solid #FFF;
    border-left: 2px solid #FFF;
    background-color: #FFF;
    box-shadow: inset 0px 0px 10px #030303, inset 0px -20px 1px rgba(150, 150, 150, .2);
    font-size: 28px;
    color: #666;
    text-align: right;
    font-weight: 400;
}

.button {
    display: inline-block;
    margin: 2px;
    width: 42px;
    height: 42px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
}

.mathButtons {
    margin: 2px 2px 6px 2px;
    color: #FFF;
    text-shadow: -1px -1px 0px #44006F;
    background-color: #434343;
    border-top: 2px solid #C1C1C1;
    border-right: 2px solid #C1C1C1;
    border-bottom: 2px solid #181818;
    border-left: 2px solid #181818;
    box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #2E2E2E;
}

.digits {
    color: #181818;
    text-shadow: 1px 1px 0px #FFF;
    background-color: #EBEBEB;
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
    border-bottom: 2px solid #C1C1C1;
    border-left: 2px solid #C1C1C1;
    border-radius: 4px;
    box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #DCDCDC;
}

.digits:hover,
.mathButtons:hover,
#clearButton:hover {
    background-color: #FFBA75;
    box-shadow: 0px 0px 2px #FFBA75, inset 0px -20px 1px #FF8000;
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
    border-bottom: 2px solid #AE5700;
    border-left: 2px solid #AE5700;
}

#clearButton {
    color: #FFF;
    text-shadow: -1px -1px 0px #44006F;
    background-color: #D20000;
    border-top: 2px solid #FF8484;
    border-right: 2px solid #FF8484;
    border-bottom: 2px solid #800000;
    border-left: 2px solid #800000;
    box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #B00000;
}


I hope your Calculator had completed.

Comments

Post a Comment

Popular posts from this blog

Assignment of ITA/ Information Technology and Application BCA- Technology369kk

Q1. What is  computer Explain basic computer architecture and Difference components.  2. Discuss the use of memory in computer system, Explain memory hierarchy  in details. 3. What is software? Explain difference types of software with explain. 4. Write short notes on the given:- (I) Internet. (II) LAN (Local area network ) (III) Search engine (IV) Web browser  Q 1.What is computer Explain basic computer architecture, Difference components of computer.   Computer :- Computer is defined as an electronic device that takes input data and instructions from the user and after processing them, it generates useful and desired output quickly.   A computer is designed to execute applications and provides a variety of solutions through integrated hardware and software components.                            It is fast and automatic device. It works with the help of programs and represents the d...
2 comments
Read more

C++ and Java Practical All Questions Answers - BCA -Technology369kk

C++ and Java  In this post see most important questions for practical questions given by college all questions with answers . Guys I want to say that this is only for suggested post for your practical please request to you change same alphabets, words or anything  methods name and variables name because if you write all words same then this is copy paste for another peoples.  Used Topics:  Keywords, Variables, Condition Statements, Function , Array, Structure, Pointer.                           In OOPs, Class and Objects, Constructor, Poly morph, Encapsulation, Access Specifiers,                               Inheritance etc.  So, Without Time Lose Come to the Points, let's go start Now:        *************************************************************************  C++ 12 ...
Post a Comment
Read more

Assignment of PMO (Principal of Management and Organization) - Technology369kk

 ** Assignment Of PMO ** Agenda: -  4 Questions discuss in this post. Question 1. Write a d etails note on selection why it Called. negative process.  Question 2. Write a details note on 'span of control. Question 3. Planning is an essential process, do you agree ? Discuss  Question 4. Write a note on management function. Q 1. Write a d etails note on selection why it called negative process.  Ans :-  Selection is the process of choosing the most suitable candidates out of the several candidates available.          Selection is a negative process because there may be more rejected then those selected in most of the candidates that is called selection is a negative process. → Selection process has the following steps:-  [ A .] Screening of applicants - Based on the screening of applicants only those candidates. It Called further process of selection. Who are found eligible for the job Standards of the the organization. [ B .] S...
3 comments
Read more