console.clear();
// probably need input / form √
// the two dimentions
// 	width and height (nouns)
// note the unit of ft or something
// multiply (calculate)(verb) those width and height to get the full area
// how much paint covers a square foot or something...
// a way to present that information (create message for user output)

// if user inputs new information... (the 'input' event can track that)
// clear message 
// until they hit submit : and then rebuild the message

function area(width, height) {
	return width * height;
}

function message(w, h, a) {
	return `With a width of ${w} feet and height of ${h} feet, the total area would be ${a} square feet.`;
}

// this way the function stands on its own. It can be tested alone and composed in more places
function handleAreaCalculation() {
	var theWidth = document.querySelector('#w').value;
	var theHeight = document.querySelector('#h').value;
	var areaTotal = area(theWidth, theHeight);
	var outputArea = document.querySelector('output');
	outputArea.textContent = message(theWidth, theHeight, areaTotal);
}

var form = document.querySelector('#myForm');

form.addEventListener('submit', function(mySubmit) {
	mySubmit.preventDefault();

	handleAreaCalculation();
});

// run as a default / so user see how the form works (in this case)
handleAreaCalculation();


function clearMessage() {
	var outputArea = document.querySelector('output');
	outputArea.textContent = "";
}

form.addEventListener('input', function() {
	clearMessage(); // so the message isn't out of date when the user is choosing numbers
});