Calculator

Developer
Bozhana
Size
4,205 Kb
Views
10,120
  1. Calculator Previews
  2. Calculator HTML Codes
  3. Calculator CSS Codes
  4. Calculator JS Codes

How do I make an calculator?

What is a calculator? How do you make a calculator? This script and codes were developed by Bozhana on 20 November 2022, Sunday.

Calculator Previews
IQ Test

Calculator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>calculator</title> <!DOCTYPE HTML>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <style type="text/css"> .page-content-bg-repeat.html-editor * { margin: 0 !Important; padding: 0 !Important; }
</style>
<div id="calc-wrapper"> <div id="calc-cont" style="margin: 0 auto !Important;"> <div id="calc-inner"> <div class="vert-algn"> <div class="vert-algn-innr" style="margin: auto 30px !Important; padding: 50px 0 !Important"> <form action="#" id="calculator" style=""> <label class="label" for="petrol" style="margin: 0 0 10px 0 !Important;">Цена бензин</label> <input id="petrol" name="pb" style="margin: 0 0 15px 0 !Important; padding: 0 0 0 10px !Important;" type="text" placeholder="0.00" required> <span class="color-ddd"> лв.</span> <label class="label" for="lpg" id="lpg" style="margin: 0 0 10px 0 !Important;">Цена газ:</label> <input id="lpg" name="lpg" placeholder="0.00" style="margin: 0 0 15px 0 !Important; padding: 0 0 0 10px !Important;" type="text" /> <span class="color-ddd"> лв.</span> <label class="label" for="lpg" id="cng" style="margin: 0 0 10px 0 !Important; ">Цена метан:</label> <input name="cng" placeholder="0.00" style="margin: 0 0 15px 0 !Important; padding: 0 0 0 10px !Important;" type="text" /> <span class="color-ddd"> лв.</span> <label class="label" for="lpg" id="km" style="margin: 0 0 10px 0 !Important;">Годишен Пробег</label> <input id="km" name="km" placeholder="0" style="margin: 0 0 15px 0 !Important; padding: 0 0 0 10px !Important;" type="text" required> <span class="color-ddd"> км.</span> <label class="label" for="lpg" id="lt" style="margin: 0 0 10px 0 !Important;">Разход <span style="text-transform: lowercase;"> (л/100 км)</span></label> <input name="lt" placeholder="0" style="margin: 0 0 30px 0 !Important; padding: 0 0 0 10px !Important;" type="text" required> </form> <div id="btn-contnr"> <button class="sr-btn sr-btn-light" onclick="outputresult()">Изчисли</button> </div> </div> </div> <div class="vert-algn"> <div class="vert-algn-innr" style="margin: auto 30px !Important; padding: 50px 0 !Important"><img id="fobos-silver-logo" src="/userfiles/editor/image/fobos-logo-silver.png" /> <table id="result-tbl" style="margin: 10px auto!Important;"> <tbody> <tr> <td colspan="3" style="vertical-align: middle; color: #ddd !Important; padding: 0 10px 0 0; text-transform: uppercase;">Разход</td> </tr> <tr> <td style="vertical-align: middle; color: #ddd !Important; text-align: right; padding: 0 10px 0 0; text-transform: uppercase;">Бензин:</td> <td id="cell1" style="border: 1px solid #44658e !Important; vertical-align: middle; padding: 0 0 0 10px !Important; border-top: none !Important;">&nbsp;</td> <td class="color-ddd" style="vertical-align: middle;">лв.</td> </tr> <tr> <td style="vertical-align: middle; color: #ddd !Important; text-align: right; padding: 0 10px 0 0; text-transform: uppercase;">Газ:</td> <td id="cell2" style="border: 1px solid #44658e !Important; vertical-align: middle;padding: 0 0 0 10px !Important; border-top: none !Important;">&nbsp;</td> <td class="color-ddd" style="vertical-align: middle;">лв.</td> </tr> <tr> <td style="vertical-align: middle; color: #ddd !Important; text-align: right; padding: 0 10px 0 0; text-transform: uppercase;">Метан:</td> <td id="cell3" style="border: 1px solid #44658e !Important; vertical-align: middle; padding: 0 0 0 10px !Important; border-top: none !Important;">&nbsp;</td> <td class="color-ddd" style="vertical-align: middle;">лв.</td> </tr> </tbody> </table> <div id="result-cont" style=""> <p id="result" style="color: #ddd !Important;font-size: 1.4em; line-height: 28px; margin: 10px 0 0 0 !Important;">&nbsp;</p> </div> <button class="sr-btn sr-btn-dark" onclick="resetform()" style="color:#ddd !Important;">Нулирай</button> </div> </div> </div> </div>
</div>
<script type="text/javascript" src="/skins/skeleton/customer/js/calculator.js"></script> <script src="js/index.js"></script>
</body>
</html>

Calculator - Script Codes CSS Codes

/* Calculator styles - Bozhana 02.feb.2016*/	@media only screen and (min-device-width: 320px) and (max-width: 450px) { #result { /*Calculator results*/ line-height: 1; font-size: 16px; }	} @media only screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { #calc-cont .vert-algn { /* Calculator */ height: 100%; width: 49%; min-width: 270px; text-align: center; }	} @media only screen and (max-width: 935px) and (min-width:220px) { /* Calculator */ #fobos-silver-logo{ display: none; } #calc-cont .vert-algn { display: block; width: 100%; height: 415px; } #btn-contnr { width: 100%; }	}
#calc-cont { background: #243e65; width: 63.56%; border-radius: 3px; margin: 0 auto;
}
#calc-inner{ height:100%;
}
#calc-cont .vert-algn { height: 500px; width: 49.78%; min-width: 250px; display: inline-block; vertical-align: top; text-align: center; background: #253e63; background: linear-gradient(to right, #2A4772 0%,#243e65);
}
#calculator .label { display: block; color: #ddd; text-transform: uppercase; font-size: 1.05em; letter-spacing: 0.043em
}
#calculator .color-ddd, #result-tbl .color-ddd { color: #ddd;
}
#calculator{ text-align: left;
}
#calculator input[type="text"] { height: 30px; width: 75%; border-radius: 3px; box-shadow: inset 0px 0px 5px 3px rgba(0, 0, 0, 0.36); border: 1px solid #44658e; border-top: none; background-color: #182437; color: #fbd05d; font-size: 14px ;
}
.sr-btn { margin: 0 auto; height: 35px; background: #ddd; text-transform: uppercase; font-weight: 400; border: none; border-radius: 3px;
}
.sr-btn-light { width: 200px; color: #243e65; font-size: 12px; margin: 0 15%;
}
.sr-btn-dark { margin: 0 37%; width: 120px; color: #ddd; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); font-size: 12px; background: #243d62; border: 1px solid #859ead;
}
#result-cont{ height: 90px; /* min-width: 250px; width: 100%; border-radius: 3px; box-shadow: inset 0px 0px 5px 3px rgba(0, 0, 0, 0.36); border: 1px solid #44658e; border-top: none; background-color: #182437; */
}
#result-tbl{ width: 100%; border-spacing: 1px 10px; border-collapse: separate; font-size: 1.05em; letter-spacing: 0.043em;
} #cell1,
#cell2,
#cell3 { width: 75%; height: 30px; border-radius: 3px; box-shadow: inset 0px 0px 5px 3px rgba(0, 0, 0, 0.36); background-color: #182437; color: #fbd05d; font-size: 14px; text-align: left;
}
/* End of calculator styles*/

Calculator - Script Codes JS Codes

function outputresult() { var a, b, c, d, forma, km, exp, expl, pet, lpg, cng, slpg, scng; forma = document.getElementById("calculator"); a = forma.elements["pb"].value; b = forma.elements["lpg"].value; c = forma.elements["cng"].value; d = 0.178; km = forma.elements["km"].value; exp = forma.elements["lt"].value; expl = exp / 100 * b * km; pet = a * (exp / 100) * km; lpg = expl * 0.1 + expl; cng = (d * c) * ((exp * 3.2) / 100) * km; slpg = pet - lpg; scng = pet - cng; if (a == 0 || km == 0 || exp == 0) { document.getElementById("result").innerHTML = "Цена бензин, Годишен пробег и Разход на бензин са задължителни полета" } else if (cng == 0 && lpg == 0) { document.getElementById("result").innerHTML = "Моля добавете цена на литър за газ или метан" } else if (cng == 0) { document.getElementById("result").innerHTML = "За " + "<span style='color:#fbd05d;font-weight: bold;'>" + km + "</span>" + " км вие спестявате " + "<span style='color:#fbd05d; font-weight: bold;'>" + slpg.toFixed(2) + " лв. </span>" + " от газ "; } else if (lpg == 0) { document.getElementById("result").innerHTML = "За " + "<span style='color:#fbd05d;font-weight: bold;'>" + km + "</span>" + " км вие спестявате " + "<span style='color:#fbd05d; font-weight: bold;'>" + scng.toFixed(2) + " лв. </span>" + " от метан "; } else { document.getElementById("result").innerHTML = "За " + "<span style='color:#fbd05d;font-weight: bold;'>" + km + "</span>" + " км вие спестявате " + "<span style='color:#fbd05d; font-weight: bold;'>" + slpg.toFixed(2) + " лв. </span>" + " от газ и " + "<span style='color:#fbd05d; font-weight: bold;'>" + scng.toFixed(2) + " лв. </span>" + " от метан"; } var x = document.getElementById("cell1"); x.innerHTML = pet.toFixed(2); var y = document.getElementById("cell2"); y.innerHTML = lpg.toFixed(2); var z = document.getElementById("cell3"); z.innerHTML = cng.toFixed(2);
}
function outputresulten() { var a, b, c, d, forma, km, exp, expl, pet, lpg, cng, slpg, scng; forma = document.getElementById("calculator"); a = forma.elements["pb"].value; b = forma.elements["lpg"].value; c = forma.elements["cng"].value; d = 0.178; km = forma.elements["km"].value; exp = forma.elements["lt"].value; expl = exp / 100 * b * km; pet = a * (exp / 100) * km; lpg = expl * 0.1 + expl; cng = (d * c) * ((exp * 3.2) / 100) * km; slpg = pet - lpg; scng = pet - cng; if (a == 0 || km == 0 || exp == 0) { document.getElementById("resulten").innerHTML = "Petrol price, Annual kilometers and Petrol Consumption are required fields." } else if (cng == 0 && lpg == 0) { document.getElementById("resulten").innerHTML = "Please add price per liter for LPG and CNG" } else if (cng == 0) { document.getElementById("resulten").innerHTML = "For " + "<span style='color:#fbd05d;font-weight: bold;'>" + km + "</span>" + " km you save " + "<span style='color:#fbd05d; font-weight: bold;'>" + slpg.toFixed(2) + "€ </span>" + " by driving with LPG "; } else if (lpg == 0) { document.getElementById("resulten").innerHTML = "For " + "<span style='color:#fbd05d;font-weight: bold;'>" + km + "</span>" + " км вие спестявате " + "<span style='color:#fbd05d; font-weight: bold;'>" + scng.toFixed(2) + " лв. </span>" + " от метан "; } else { document.getElementById("resulten").innerHTML = "За " + "<span style='color:#fbd05d;font-weight: bold;'>" + km + "</span>" + " км вие спестявате " + "<span style='color:#fbd05d; font-weight: bold;'>" + slpg.toFixed(2) + " лв. </span>" + " от газ и " + "<span style='color:#fbd05d; font-weight: bold;'>" + scng.toFixed(2) + " лв. </span>" + " от метан"; } var x = document.getElementById("cell1"); x.innerHTML = pet.toFixed(2); var y = document.getElementById("cell2"); y.innerHTML = lpg.toFixed(2); var z = document.getElementById("cell3"); z.innerHTML = cng.toFixed(2);
}
function resetform() { document.getElementById("calculator").reset(); document.getElementById("result").innerHTML = ""; document.getElementById("cell1").innerHTML = ""; document.getElementById("cell2").innerHTML = ""; document.getElementById("cell3").innerHTML = "";
}
function resetformen() { document.getElementById("calculator").reset(); document.getElementById("resulten").innerHTML = ""; document.getElementById("cell1").innerHTML = ""; document.getElementById("cell2").innerHTML = ""; document.getElementById("cell3").innerHTML = "";
}
Calculator - Script Codes
Calculator - Script Codes
Home Page Home
Developer Bozhana
Username mesechina
Uploaded November 20, 2022
Rating 3
Size 4,205 Kb
Views 10,120
Do you need developer help for Calculator?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Bozhana (mesechina) Script Codes
Name
Downloads
Terms and conditions gr
Fobos 6cil
Home page boxes
Calculator gr
Prices
Instructions
Software gr
Service intervals
A Pen by Bozhana
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!