How to Create A Simple Calculator Using HTML || CSS With Animation

              How to Create a Simple Animated Calculator Using HTML || CSS || JavaScript


Process  of Execution :-

like: Notpad ,VS Code , Subline,   More As you like 

1. Click on Right side on File 

2. Click on Save as 

3. Give Name As you wish  otherwise 👉 calculator.html     give This name 

4. After That Minimize That editor 

5. Go to the where you had saved this file 

6. and Double Click on that file .

Copy this code and paste in any editors 

Html  Code:


<! DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>

Calculator using HTML Example

</title>

<link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap" rel="stylesheet">

<!-- CSS property to create interactive

calculator interface -->

<style>

html {

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background-color: #2d3436;

background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);

font-family: 'Cookie', cursive;

}

.title {

margin-bottom: 10px;

padding: 5px 0;

font-size: 40px;

font-weight: bold;

text-align: center;

color: red;

font-family: 'Cookie', cursive;

}

input[type=button] {

width: 60px;

height: 60px;

float: left;

padding: 0;

margin: 5px;

box-sizing: border-box;

background: #ecedef;

border: none;

font-size: 30px;

line-height: 30px;

border-radius: 50%;

font-weight: 700;

color: #5E5858;

cursor: pointer;

}

input[type=text] {

width: 270px;

height: 60px;

float: left;

padding: 0;

box-sizing: border-box;

border: none;

background: none;

color: red;

text-align: right;

font-weight: 700;

font-size: 60px;

line-height: 60px;

margin: 0 25px;

}

.calculator {

background-color: #c0c0c0;

box-shadow: 0px 0px 0px 10px #666;

border: 5px solid black;

border-radius: 10px;

}

#display {

height: 40px;

text-align: right;

background-color: black;

border: 3px solid rgb(255, 255, 255);

font-size: 18px;

left: 2px;

top: 2px;

color: red;

}

.btnTop {

color: rgb(255, 255, 255);

background-color: #6f6f6f;

font-size: 14px;

margin: auto;

width: 50px;

height: 25px;

}

</style>

</head>

<body>

<div class = "title" align="center">

My first calculator projects

</div>

<form name="Calculator" class = "calculator" >

<table border="2" align="center" cellpadding="15" cellspacing="12" bgcolor="#c0c0c0">

<tr>

<td>

<input type="text" name="Input" Size="35" id="display">

<br>

</td>

</tr>

<tr>

<td>

<input type="button" name = "one" style="font-size:30px" value=" 1 " OnClick="Calculator.Input.value += '1'">

<input type="button" name = "two" style = "font-size:30px" value=" 2 " OnCLick="Calculator.Input.value += '2'">

<input type="button" name = "three" style="font-size:30px" value=" 3 " OnClick="Calculator.Input.value += '3'">

<input type="button" name="add" class ="btnTop" style="font-size:30px" value=" + " OnClick="Calculator.Input.value += ' + '">

<br>

<input type="button" name = "four" style="font-size:30px" value=" 4 " OnClick="Calculator.Input.value += '4'">

<input type="button" name = "five" style="font-size:30px" value=" 5 " OnCLick="Calculator.Input.value += '5'">

<input type="button" name = "six" style="font-size:30px" value=" 6 " OnClick="Calculator.Input.value += '6'">

<input type="button" name = "minus" style="font-size:30px" value=" - " OnClick="Calculator.Input.value += ' - '">

<br>

<input type="button" name = "seven" style="font-size:30px" value=" 7 " OnClick="Calculator.Input.value += '7'">

<input type="button" name = "eight" style="font-size:30px" value=" 8 " OnCLick="Calculator.Input.value += '8'">

<input type="button" name = "nine" style="font-size:30px" value=" 9 " OnClick="Calculator.Input.value += '9'">

<input type="button" name = "mul" style="font-size:30px" value=" * "

OnClick="Calculator.Input.value += ' * '">

<br>

<input type="button" name = "clear" style="font-size:30px" value=" c " OnClick="Calculator.Input.value = ''">

<input type="button" name="zero" style="font-size:30px" value=" 0 " OnClick="Calculator.Input.value += '0'">

<input type="button" name="DoIt" style="font-size:30px" value=" = " OnClick="Calculator.Input.value = eval(Calculator.Input.value)">

<input type="button" name="div" style="font-size:30px" value=" / " OnClick="Calculator.Input.value += ' / '">

<br>

</td>



</tr>

</table>

</form>

</body>



</html>

Comments

Post a Comment

Hello Coders If You Have any Doughts Contact Us

Popular posts from this blog

How to create an Animated Login Page Project Using HTML, CSS for your Resume

Image
Amazing  HTML, CSS An  Animated  Login Page How To  Create Project Full Process is Given Below: If you Get any problem  at the time of Developing this Projects You can Comments without any Dealey Lets  Explore. 1. Open Your Code Editor Like:- Vs Code Notepad Sublime... 2. Write This Code With the File Name (index.html) else You Can Give Your Name also. code: <!DOCTYPE html> <html lang="en">     <head>         <title>Login page</title>         <link rel="preconnect" href="https://fonts.gstatic.com">         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet">     <style media="screen"> *, *:before, *:after{     padding: 0;     ma...
Read more

Wipro Hiring Software Developers – Hyderabad

Image
Job Title:** Software Developer – Freshers **Company:** Wipro Limited **Location:** Hyderabad, India **Salary:** ₹5-6 LPA **Job Description:**    Wipro is seeking dynamic and motivated fresh graduates to join our team as Software Developers in Hyderabad. This is an excellent opportunity for those looking to kickstart their careers in the IT industry with a leading global organization. **Key Responsibilities:** - Develop, test, and deploy software applications using Python and SQL. - Collaborate with cross-functional teams to analyze data and implement solutions. - Engage in continuous learning and professional development in data analytics. **Qualifications:** - Bachelor’s degree in Computer Science, Information Technology, or a related field. - Proficiency in Python and SQL. - Basic understanding of data analytics. - Strong problem-solving skills and a passion for technology. **Why Join Us?** - Competitive salary package: ₹5-6 LPA. - Work with a team of industry experts in a ...
Read more

How to link 🖇️ HTML to CSS file full tutorial

Image
Create Your HTML File: Start by creating the HTML file for your blog. You can use a simple text editor like Notepad or a code editor like Visual Studio  Code . html Copy code <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Your Blog Title</title>     <link rel="stylesheet" href="styles.css"> </head> <body>     <!-- Your blog content goes here --> </body> </html> Create Your CSS File: Save the following code in a file named styles.css in the same directory as your HTML file. css Copy code /* styles.css */ body {     font-family: Arial, sans-serif;     background-color: #f4f4f4;     /* Add more styling as needed */ } /* Add more CSS rules for styling your blog */ Adjust the styles according to your preferences. Li...
Read more