// This external js file is used in Unit 4 as the reference script
// code in this file has been copied or slightly modified
// code taken and modified from https://codepen.io/WebDevSimplified/pen/pmMOEy
// author is Web Dev Simplified

const appreciation = document.getElementById('appreciation'); //Here we have user inputs being assigned to variables
const closingCosts = document.getElementById('closingCost');
const marketValue = document.getElementById('marketValue');
const cashFlow = document.getElementById('cashflow');
const tax = document.getElementById('tax');
const insurance = document.getElementById('insurance');
const repairsUtilities = document.getElementById('repairsUtilities');
const form = document.getElementById('form'); //this in particular is used as an object to use Event Listener function


form.addEventListener('submit' , e => { //this is a special function that passes different variables and functions within
    //alert(marketValue.value);
    
    let messages = []; // the author used a list so it makes notifying each error easier to display

    if(marketValue.value === '' || marketValue.value == null) { // here are the conditions depending on user inputs
        alert("this worked 1")
        messages.push('Market Value needs to be filled')

    }

    if(closingCosts.value === '' || closingCosts.value == null) {
        alert("this worked 2")
        messages.push('Closing Costs are missing')

    }

    if(marketValue.value === '' || marketValue.value == null) {
        alert("this worked 3")
        messages.push('Appreciation is missing') // different comments are appeneded to 'messages'

    }



    if(messages.length > 0) { //lastly if there are any messages the the following statement will occur
        alert(messages.join(' , ')) // an alert is sent to notify the user of missing boxes
        e.preventDefault() // and the submit event is dismissed. 
        
    }
    

});


/* 
Improvements to Code: 
    - Personally, I would add different conditions other than blank.
    - Also an alert box is sometimes blocked by the brower so it would be best
      to use .innerText function to display the error within the form. 

    - pros: it is a simple solution and very neat
    - I like the idea of using an array and appending/pushing the messages to the array
*/