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 one is hard to read... maybe not great UX
	return `
		${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('input', function() {
	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
// });

function handleOrder() {
	console.log('Send order message to buy appropriate paint gallons');
}

form.addEventListener('submit', function(event) {
	event.preventDefault();
	handleOrder();
	// clear info?
});