In this project, we'll write a draft of the JavaScript code that's planned for this HTML & CSS app.

After considering regular costs, the app will use our code to tell the user whether they should make a purchase or save instead.

<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>]]>