Home

Score JavaScript if - else if

-- NO SCORE AVAILABLE --


const scoreInput = document.getElementById('score');
const result = document.getElementById('result');

scoreInput.addEventListener('blur', function (e) {
    // ternary operator
    const score = scoreInput.value === '' ? null : scoreInput.value;
    let scoreMsg = null;
    let scoreClass = 'border-gray';

    // if - else if
    if (score === null) {
        scoreMsg = '-- NO SCORE AVAILABLE --';
    } else if (score >= 10) {
        scoreMsg = `<b>${score}/20</b>: you passed the JavaScript course. Congratulations!`;
        scoreClass = 'border-green';
    } else if (score >= 8) {
        scoreMsg = `<b>${score}/20</b>: you failed the JavaScript course, but you may tolerate it!`;
        scoreClass = 'border-blue';
    } else {
        scoreMsg = `<b>${score}/20</b>: unfortunately, you failed the JavaScript course. Better luck next time!`;
        scoreClass = 'border-red';
    }

    // show result
    result.innerHTML = `<p>${scoreMsg}</p>`;
    result.className = '';
    result.classList.add(scoreClass);
});

// dispatch (trigger) blur event
scoreInput.dispatchEvent(new Event('blur'));