Calculator create by Saurabh Sahu

<!DOCTYPE html>

<html lang=”en”>

<head>
<title>Page Title</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<link rel=”stylesheet”
href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<style>
body {
font-family: Arial;
margin: 0;
}

/* Header */
.Saurabh{
padding: 60px;
text-align: center;
background: blue;
color: yellow;
font-size: 30px;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
@media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}

/* Page Content */
.content {padding:20px;}

footer {

text-align: center;
padding: 3px;
background-color: #FFEC30;
color: white;
}

.fa {

padding: 20px;

font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}

.fa:hover {
opacity: 0.7;
}

.fa-facebook {
background: #3B5998;
color: white;
}

.fa-twitter {
background: #55ACEE;
color: white;
}

.fa-google {
background: #dd4b39;
color: white;
}

.fa-linkedin {
background: #007bb5;
color: white;
}

.fa-youtube {
background: #bb0000;
color: white;
}
form {
border: 3px solid #f1f1f1;
font-family: Arial;
}
.container {
padding: 20px;
background-color: #f1f1f1;
}
input[type=text], input[type=submit] {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type=checkbox] {
margin-top: 16px;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
border: none;
}
input[type=submit]:hover {
opacity: 0.8;
}

</style>
<style>
.calculator {
color: black;
background-color: #242424;

width: 300px;
margin: 0 auto;
}
input[type=”text”] {
width: 100%;
font-size: 20px;
padding: 10px;
color: white;
}
table {
width: 100%;
}
td {
text-align: center;
padding: 10px;
}
.btn {
width: 60px;
height: 60px;
font-size: 20px;
cursor: pointer;
color: white;
}
</style>
</head>
<body>
<div class=”topnav”>
<a class=”active” href=”#home”>Home</a>
<a href=”#about”>About</a>
<a href=”#contact”>Contact</a>
<div class=”search-container”>
<form action=”/action_page.php”>
<input type=”text” placeholder=”Search..” name=”search”>
<button type=”submit”><i class=”fa fa-search”></i></button>
</form>
</div>
</div>
<div style=”padding-left:16px”>
<h1>CALCULATOR</h1>

</div>

<body>
<div class=”calculator”>
<input type=”text” id=”display” disabled>
<table>
<tr>
<td class=”btn” onclick=”clearDisplay()”>C</td>
<td class=”btn” onclick=”appendToDisplay(‘7’)”>7</td>
<td class=”btn” onclick=”appendToDisplay(‘8’)”>8</td>
<td class=”btn” onclick=”appendToDisplay(‘9’)”>9</td>
<td class=”btn” onclick=”appendToDisplay(‘+’)”>+</td>
</tr>
<tr>
<td class=”btn” onclick=”appendToDisplay(‘4’)”>4</td>
<td class=”btn” onclick=”appendToDisplay(‘5’)”>5</td>
<td class=”btn” onclick=”appendToDisplay(‘6’)”>6</td>
<td class=”btn” onclick=”appendToDisplay(‘-‘)”>-</td>
</tr>
<tr>
<td class=”btn” onclick=”appendToDisplay(‘1’)”>1</td>
<td class=”btn” onclick=”appendToDisplay(‘2’)”>2</td>
<td class=”btn” onclick=”appendToDisplay(‘3’)”>3</td>
<td class=”btn” onclick=”appendToDisplay(‘*’)”>*</td>
</tr>
<tr>
<td class=”btn” onclick=”appendToDisplay(‘0’)”>0</td>
<td class=”btn” onclick=”appendToDisplay(‘.’)”>.</td>
<td class=”btn” onclick=”calculateResult()”>=</td>
<td class=”btn” onclick=”appendToDisplay(‘/’)”>/</td>
</tr>
</table>
</div>

<script>
function appendToDisplay(value) {
document.getElementById(“display”).value += value;
}

function clearDisplay() {
document.getElementById(“display”).value = ”;
}

function calculateResult() {
try {
document.getElementById(“display”).value = eval(document.getElementById(“display”).value);
} catch (error) {
document.getElementById(“display”).value = ‘Error’;
}
}
</script
<div class=”Saurabh”>
<h1>Saurabh Sahu</h1>
<p>this calculator is made by Saurabh Sahu . <br>
please appreciate his work and share this website to your friends and family.<br>
currently this website is in developing stage </p>
</div>

<form action=”/action_page.php”>
<div class=”container”>
<h2>Subscribe to our Newsletter</h2>
<p>Subscribe to our Newsletter to get latest information about tech and technology</p>
</div>
<div class=”container” style=”background-color:white”>
<input type=”text” placeholder=”Name” name=”name” required>
<input type=”text” placeholder=”Email address” name=”mail” required>
<label>
<input type=”checkbox” checked=”checked” name=”subscribe”> Daily Newsletter
</label>
</div>
<div class=”container”>
<input type=”submit” value=”Subscribe”>
</div>
</form>
<div>
<h2>Style Social Media Buttons</h2>

<!– Add font awesome icons –>
<a href=”#” class=”fa fa-facebook”></a>
<a href=”#” class=”fa fa-twitter”></a>
<a href=”#” class=”fa fa-google”></a>
<a href=”#” class=”fa fa-linkedin”></a>
<a href=”#” class=”fa fa-youtube”></a>
</div>
<footer>

<p>Author: saurabh<br>

<a href=”mailto:hege@example.com”>about</a> <a href=”mailto:hege@example.com”>desclaimer</a>
<a href=”ss.com”>privacy policy</a>
</p>
<p> ©2023 Saurabh
</p>
<p>all right reserved</p>

</footer>
</body>
</html>