// * * * * * PRAISE * * * * *
// FUNCTIONALITY:
// - converts numbers
// - responsive
// CODE FORMATTING:
// - easy to read and follow 
// NAMING CONVENTIONS:
// -  self-explanatory
// CONSISTENCY: 
// - declaring constants globally
// SIMPLICITY:
// - short and sweet - easy to follow

// * * * * * SUGGESTIONS * * * * *
// FUNCTIONALITY:
// - what if the number starts with zeros? - use parseInt()
// - what if the input number is more than 3 digits? How do you
//   make the input window expand?
// - what if the user inputs letters or symbols?
// CODE FORMATTING:
// - semantic html to clearly define the content
// CSS:
// - wrap in a container

/*
1 meter = 3.281 feet
1 liter = 0.264 gallon
1 kilogram = 2.204 pound
*/

// Global variables

const userInput = document.getElementById("unit-input")
const btn = document.getElementById("btn")
const length = document.getElementById("length")
const volume = document.getElementById("volume")
const mass = document.getElementById("mass")

const meterToFeet =  3.281
const literToGallon =  0.264
const kiloToPound =  2.204

// main app function
btn.addEventListener('click', () => {
    let baseValue = userInput.value
    
    length.textContent = `${baseValue} meters = ${(baseValue * meterToFeet).toFixed(3)} feet | ${baseValue} feet = ${(baseValue / meterToFeet).toFixed(3)} meters`
    
    volume.textContent = `${baseValue} liters = ${(baseValue * literToGallon).toFixed(3)} gallons | ${baseValue} gallons = ${(baseValue / literToGallon).toFixed(3)} liters`
    
    mass.textContent = `${baseValue} kilos = ${(baseValue * kiloToPound).toFixed(3)} pounds | ${baseValue} pounds = ${(baseValue / kiloToPound).toFixed(3)} kilos`
})