AVASCRIPT/HTML/CSS MODIFY THE ORIGINAL CODE TO PRODUCE DESIRED PROBLEM RESULTS - MOST WORK WILL BE IN JS ORIGINAL CODE IS PROVDED BELOW *-----------------------------------------------------------------------------* ORIGINAL CODE *-----------------------------------------------------------------------------* HTML: Make Change<
JAVASCRIPT/HTML/CSS
MODIFY THE ORIGINAL CODE TO PRODUCE DESIRED PROBLEM RESULTS - MOST WORK WILL
BE IN JS ORIGINAL CODE IS PROVDED BELOW
*-----------------------------------------------------------------------------*
ORIGINAL CODE
*-----------------------------------------------------------------------------*
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Make Change</title>
<link rel="stylesheet" href="make_change.css">
</head>
<body>
<main>
<h1>Change Calculator</h1>
<label>Enter amount of change due (0-99):</label>
<div>
<input type="text" id="cents" />
<input type="button" value="Calculate" name="calculate" id="calculate" />
</div>
<div>
<label>Quarters:</label>
<input type="text" id="quarters" disabled>
</div>
<div>
<label>Dimes:</label>
<input type="text" id="dimes" disabled>
</div>
<div>
<label>Nickels:</label>
<input type="text" id="nickels" disabled>
</div>
<div>
<label>Pennies:</label>
<input type="text" id="pennies" disabled>
</div>
</main>
<script src="make_change.js"></script>
</body>
</html>
*-----------------------------------------------------------------------------*
JAVASCRIPT:
const $ = selector => document.querySelector(selector);
*-----------------------------------------------------------------------------*
CSS:
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: auto;
width: 600px;
border: 3px solid blue;
}
h1 {
color: blue;
margin-top: 0;
}
main {
padding: 1em 2em;
}
div {
margin-bottom: 0.5em;
}
label {
float: left;
width: 16em;
text-align: right;
}
input {
margin-left: 1em;
}
#calculate {
margin-bottom: 1em;
}
*-----------------------------------------------------------------------------*
..
Step by step
Solved in 2 steps with 1 images
