Documentation
Step 1:- Open txt file from the folder for code
Step 2:- Copy all code
Step 3:- Open your website dashboard or blog
Step 4:- Add HTML element
Step 5:- Paste all code in your html element
Step 6:- Save file
Done you are successfully Pasted code in your website.
<html>
<head>
<title>Colorful Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
text-align: center;
}
.calculator {
max-width: 300px;
margin: 0 auto;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.calculator input {
width: 100%;
margin-bottom: 10px;
padding: 10px;
font-size: 18px;
border: 1px solid #ccc;
border-radius: 5px;
}
.calculator .row {
display: flex;
justify-content: space-between;
}
.calculator .row .button {
flex-basis: 23%;
margin-bottom: 10px;
}
.calculator .row .button.clear {
flex-basis: 48%;
}
.calculator .row .button.equal {
background-color: #ff9800;
color: #fff;
}
.calculator .row .button.operator {
background-color: #4caf50;
color: #fff;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="result" disabled>
<div class="row">
<input type="button" class="button" value="7" onclick="appendToResult('7')">
<input type="button" class="button" value="8" onclick="appendToResult('8')">
<input type="button" class="button" value="9" onclick="appendToResult('9')">
<input type="button" class="button operator" value="/" onclick="appendToResult('/')">
</div>
<div class="row">
<input type="button" class="button" value="4" onclick="appendToResult('4')">
<input type="button" class="button" value="5" onclick="appendToResult('5')">
<input type="button" class="button" value="6" onclick="appendToResult('6')">
<input type="button" class="button operator" value="*" onclick="appendToResult('*')">
</div>
<div class="row">
<input type="button" class="button" value="1" onclick="appendToResult('1')">
<input type="button" class="button" value="2" onclick="appendToResult('2')">
<input type="button" class="button" value="3" onclick="appendToResult('3')">
<input type="button" class="button operator" value="-" onclick="appendToResult('-')">
</div>
<div class="row">
<input type="button" class="button" value="0" onclick="appendToResult('0')">
<input type="button" class="button" value="." onclick="appendToResult('.')">
<input type="button" class="button equal" value="=" onclick="calculate()">
<input type="button" class="button operator" value="+" onclick="appendToResult('+')">
</div>
<div class="row">
<input type="button" class="button clear" value="C" onclick="clearResult()">
</div>
</div>
<script>
function appendToResult(value) {
document.getElementById("result").value += value;
}
function clearResult() {
document.getElementById("result").value = "";
}
function calculate() {
let result = document.getElementById("result").value;
let calculatedResult = eval(result);
document.getElementById("result").value = calculatedResult;
}
</script>
</body>
</html>
