JavaScript: Little Codes

Select Theme: B/W

Code:

<div class="js-resultbox">
    <label for="theme">Select theme: </label>
    <select id="theme">
        <option value="light">Light</option>
        <option value="dark">Dark</option>                
    </select>
</div>

Script 2: Without defining document.querySelector const separately

<script>
    // Function for changing theme
    function changeTheme (textColor, backColor) {
        document.querySelector("html").style.color = textColor;
        document.querySelector("html").style.backgroundColor = backColor;
    }

    // Capture user input
    theme.addEventListener("change", () => (document.querySelector("#theme").value === "dark") ? changeTheme("white", "black") : changeTheme("black", "white"));
</script>

Script 1: As lectured

<script>
    // Define user input
    const userTheme = document.querySelector("#theme");

    // Define affected area
    const displayScope = document.querySelector("html");

    // Function for changing theme
    function changeTheme (textColor, backColor) {
        displayScope.style.color = textColor;
        displayScope.style.backgroundColor = backColor;
    }

    // Capture user input
    theme.addEventListener("change", () => (userTheme.value === "dark") ? changeTheme("white", "black") : changeTheme("black", "white"));
</script>
Home