index.js

// Object which stores all the user selected/entered values
let inputObj = {
    textChoice: 'manual',   // choice of text entry initially set as manual. Can have values manual, calculated
    text: '',               // User entered text in case of manual  
    textLength: '',         // number of characters in text. Either from user entered text or user entered number
    readerLevel: '',        // Value of reader level selected from dropdown
    readerCategory: ''      // Value of reader category selected from dropdown
};


// function handleTextRadioClick: responsible for showing or hiding text input / text length input based on selected option
function handleTextRadioClick() {
    let textChoice = document.querySelector('input[name="text-input-option"]:checked').value;
    inputObj.textChoice = textChoice;
    toggleElement('character-calculation-wrapper');
    toggleElement('manual-character-input');
}


// function toggleElement: hides/shows the html element based on current visibility. 
// accepts value of id attribute of element as parameter
function toggleElement(id) {
    let element = document.getElementById(id);
    if (element.style.display === "none") {
        element.style.display = "block";
    } else {
        element.style.display = "none";
    }
}


// function handleTextAreaChange: captures the changes as user enters the text and gets the length
// and sets number of characters to property textLength on inputObj
function handleTextAreaChange() {
    let value = document.getElementById("manual-text-entry").value;
    value = value.trim();
    inputObj.text = value;
    let characters = value.split(' ').join('').length;
    setCharacterLength(characters);
    document.getElementById("calculatedTextCharacters").setAttribute('value', characters)
}


// function handleCharacterInputChange: captures changes in number of characters input field
// and sets number of characters to property textLength on inputObj
function handleCharacterInputChange() {
    let value = document.getElementById("inputTextCharacters").value;
    setCharacterLength(value);
}

// function setCharacterLength: sets number of characters to property textLength on inputObj
function setCharacterLength(characters) {
    inputObj.textLength = parseInt(characters);
}


// function isFormValid: checks for mandatory input fields and validates te form 
// returns true if all values are filled else returns false
// also shows error messages for respective inputs fields
function isFormValid() {
    let invalidFields = 0;
    if (inputObj.textChoice === 'manual' && inputObj.text === '') {
        invalidFields++;
        document.getElementById('textarea-validation').style.display = 'block';
    } else {
        document.getElementById('textarea-validation').style.display = 'none';
    }

    if (inputObj.textChoice === 'calculated' && (inputObj.textLength === '' || inputObj.textLength === 0)) {
        invalidFields++;
        document.getElementById('textCharacters-validation').style.display = 'block';
    } else {
        document.getElementById('textCharacters-validation').style.display = 'none';
    }

    if (inputObj.readerLevel === '') {
        invalidFields++;
        document.getElementById('readerLevel-validation').style.display = 'block';
    } else {
        document.getElementById('readerLevel-validation').style.display = 'none';
    }

    if (inputObj.readerCategory === '') {
        invalidFields++;
        document.getElementById('readerCategory-validation').style.display = 'block';
    } else {
        document.getElementById('readerCategory-validation').style.display = 'none';
    }

    return invalidFields < 1
}


// function showFeedbackForm: displays feedback form when calculation is done
function showFeedbackForm() {
    let element = document.getElementById('feedback-form');
    element.style.display = "block";
}


// function readerLevelChangeEvent: listens for change in reader level dropdown
// and sets selected value to property readerLevel on inputObj
function readerLevelChangeEvent(event) {
    inputObj.readerLevel = parseInt(event.target.value);
}

// function readerCategoryChangeEvent: listens for change in reader category dropdown
// and sets selected value to property readerCategory on inputObj
function readerCategoryChangeEvent(event) {
    inputObj.readerCategory = parseInt(event.target.value);
}


// function calculateReadingTime: This function is responsible for calculating reading time
// reading time can be calculated if all inputs are valid
function calculateReadingTime() {

    if (isFormValid()) {

        //variable x which holds final reading time in minutes
        let x = 0;

        console.log(inputObj);

        // TODO: logic or algorithm for calculating reading time goes here
            // inputObj.textLength has number of characters (number data type)
            // inputObj.readerLevel has level of reader (number data type)
            // inputObj.readerCategory has category of reader (number data type)

            
        // example calculation
        x = (inputObj.textLength * inputObj.readerLevel * inputObj.readerCategory);


    
        // set value to html element
        var s= document.getElementById('reading-time-element');
        s.innerHTML = x;
        // display html element which shows time
        let element = document.getElementById('calculate-time-element');
        element.style.display = "block";
    }
}