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  
    numberOfCharacters: '',         // number of characters in text. Either from user entered text or user entered number
    schoolLevel: '',        // Value of school level selected from dropdown
    category: ''            // Value of 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 numberOfCharacters on inputObj
function handleTextAreaChange() {
    let value = document.getElementById("manual-text-entry").value;
    inputObj.text = value;
    value = removeSpecialCharacters(value);
    let characters = value.length;
    setCharacterLength(characters);
    document.getElementById("calculatedTextCharacters").setAttribute('value', characters);
}

// function removeSpecialCharacters: removes punctuation marks and other special characters
// but allows numbers and alphabets along with language specific characters German: äöüÄÖÜß and French: ùûüÿàâæéèêëïîôœÙÛÜŸÀÂÆÉÈÊËÏÎÔŒ
function removeSpecialCharacters(str) {
    return str.replace(/(?!\w|\ä|\ö|\ü|\Ä|\Ö|\Ü|\ß|\ù|\û|\ü|\ÿ|\à|\â|\æ|\é|\è|\ê|\ë|\ï|\î|\ô|\œ|\Ù|\Û|\Ÿ|\À|\Â|\Æ|\É|\È|\Ê|\Ë|\Ï|\Î|\Ô|\Œ)./g, '')  // regex to remove special characters 
        .replace(/^(\s*)([\W\w]*)(\b\s*$)/g, '$2');   // regex to trim the string to remove any whitespace at the beginning or the end
}


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

// function setCharacterLength: sets number of characters to property numberOfCharacters on inputObj
function setCharacterLength(characters) {
    inputObj.numberOfCharacters = 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.textLenumberOfCharactersngth === '' || inputObj.numberOfCharacters === 0)) {

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

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

    if (inputObj.category === '' || inputObj.category === 0) {
        invalidFields++;
        document.getElementById('category-validation').style.display = 'block';
    } else {
        document.getElementById('category-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 schoolLevelChangeEvent: listens for change in school level dropdown
// and sets selected value to property schoolLevel on inputObj
function schoolLevelChangeEvent(event) {
    inputObj.schoolLevel = parseInt(event.target.value);
}

// function categoryChangeEvent: listens for change in category dropdown
// and sets selected value to property category on inputObj
function categoryChangeEvent(event) {
    inputObj.category = 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.numberOfCharacters has number of characters (number data type)
        // inputObj.schoolLevel has level of school (number data type)
        // inputObj.category has category of reader (number data type)


        // example calculation
        x = (inputObj.numberOfCharacters * inputObj.schoolLevel * inputObj.category);



        // 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";
    }
}