We'll add fixed values for the budget and expenses. Later, we'll learn how to connect the JavaScript to the user interface.

We'll use variables to calculate the remaining budget and compare strings to check if saving should be prioritized.

<html>
<head>
<style>
.submissionfield {
width: 90px;
height: 17px;
border: 1px solid #999999;
padding: 5px;
border-radius: 25px;
outline: none;
}

.submissionfield:focus {
box-shadow: 0 0 0 2px #f90; /* or whatever colour you'd prefer */
}

.descField {
width: 150px;
height: 17px;
border: 1px solid #999999;
padding: 5px;
border-radius: 25px;
outline: none;
}

.descField:focus {
box-shadow: 0 0 0 2px #f90; /* or whatever colour you'd prefer */
}

button {
width: 200px;
height: 30px;
font-size : 20px;
border-radius: 10px;
margin:0 auto;
display:block;
background-color: #4964f2;
color: white;
font-family: "Courier New", Courier, monospace;
outline: none;
}

button:focus {
box-shadow: 0 0 0 2px #f90; /* or whatever colour you'd prefer */
}

.inputElements {
background-color: #F2D0A7;
border: 1px solid #999999;
margin-bottom: 10px;
padding-left: 17px;
padding-bottom: 15px;
border-radius: 25px;
width: 290px;

}

#inputBottom {
background-color:#fed1c2;
}

#inputTop {
background-color:#d5dbff;
}

div {
margin: 10px auto;
}

p {
text-align: center;
}

#appName {
text-align: center;
}

body {
background-color: #f3f4f8;
color: #1e2f97;
font-family: "Courier New", Courier, monospace;
}

</style>
</head>
<body id="main">
<h2 id="appName">How broke am I?</h2>
<div class="inputElements" id="inputTop">
<h3>Budget</h3>
<input type="text" class="submissionfield">
<h3>Monthly Costs</h3>
<input type="text" placeholder="rent" class="submissionfield">
<input type="text" placeholder="utilities" class="submissionfield">
<h3>Savings Priority</h3>
<input type="radio" name="prio" value="high"> High
<input type="radio" name="prio" value="medium"> Medium
<input type="radio" name="prio" value="low"> Low
</div>
<div class="inputElements" id="inputBottom">
<h3>New Purchase</h3>
<input type="text" placeholder="description" class="descField">
<input type="text" placeholder="price" class="submissionfield">
</div><br>
<div>
<button onclick="showMessage()">Compute</button>
</div>
<script>
function showMessage() {
var body = document.getElementById("main");
var message = document.createElement("p");
message.innerHTML = "Can't know without some JavaScript code";
body.appendChild(message);
}
</script>
</body>
</html>]]>