JSFiddle - React, Tailwind, and code Playground
by Shirly Manor
HTML
<head>
<title>ROI Calculator</title>
<script src="script.js"></script>
<script>
function sumInputs() {
var sum = 0;
var resultDiv = document.getElementById('results');
var arr = document.getElementById('arr').value;
var assrr = document.getElementById('assrr').value;
var unadj = document.getElementById('unadj');
var montsavelow = document.getElementById('montsavelow');
var montsavemed = document.getElementById('montsavemed');
var montsavehigh = document.getElementById('montsavehigh');
montsavelow.value = Math.round(((arr*(assrr*7))/12), 0)
sum = arr * assrr/100
montsavemed.value = Math.round(((arr*(assrr*11))/12), 0)
montsavehigh.value = Math.round(((arr*(assrr*15))/12), 0)
unadj.value = Math.round((arr * assrr/100)/12)
// alert(Math.round((arr * assrr/100)/12))
//resultDiv.textContent = unadj.value;
const inputElements = document.querySelectorAll('.arr input');
inputElements.forEach((input) => {
sum += Number(input.value);
});
}
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Compact Form</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 400px;
margin: 0 auto;
}
.arr {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.arr p {
flex: 1;
margin: 0;
}
.arr input[type="number"] {
width: 150px;
text-align: right;
}
.arr img {
width: 20px;
margin-right: 5px;
}
#calculate {
width: 100%;
background-color: #007BFF;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}
#calculate:hover {
background-color:...