JavaScript: Little Codes

Select Theme: Color

Code:

<div class="js-resultbox">
    <label for="theme">Select theme: </label>
    <select id="theme">
        <option value="default">Default</option>
        <option value="baby">Baby</option>   
        <option value="unicorn">Unicorn</option>
        <option value="fox">Fox</option>   
        <option value="light">Light</option>
        <option value="dark">Dark</option>                
    </select>
</div>

Script 2: Handler function written separately

<script>
    // Function for capturing user's preference
    function captureTheme () {
        switch (document.querySelector("#theme").value) {
            case "baby":
                changeTheme ("cadetblue", "mistyrose");
                break;
            case "unicorn":
                changeTheme ("purple", "lightyellow");
                break;
            case "fox":
                changeTheme ("white", "orange");
                break;
            case "light":
                changeTheme ("black", "whitesmoke");
                break;
            case "dark":
                changeTheme ("white", "black");
                break;
            case "default":
                changeTheme(null, null);
                break;
        }
    }        

    // 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", captureTheme);
</script>

SCRIPT 1: Handler function written inside addEvenListener statement

<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", () => {
        switch (document.querySelector("#theme").value) {
            case "baby":
                changeTheme ("cadetblue", "mistyrose");
                break;
            case "unicorn":
                changeTheme ("purple", "lightyellow");
                break;
            case "fox":
                changeTheme ("white", "orange");
                break;
            case "light":
                changeTheme ("black", "whitesmoke");
                break;
            case "dark":
                changeTheme ("white", "black");
                break;
            case "default":
                changeTheme(null, null);
                break;
        }
    });
<script>
Home