JavaScript: Little Codes

Select Theme: by Return Values

Code:

<div>
    <label for="scope">Select scope: </label>
    <select id="scope">
        <option value="page">Whole page</option>
        <option value="box">This box</option>
    </select>
</div>

<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="light">Light</option>
        <option value="dark">Dark</option>                
    </select>
</div>

<script>
    // Function for capturing user's preference
    captureScope = () => (document.querySelector("#scope").value === "page") ? "html": ".js-resultbox";

    function captureTheme () {
        switch (document.querySelector("#theme").value) {
            case "baby":
                return "mistyrose";
                break;
            case "unicorn":
                return "lightyellow";
                break;
            case "light":
                return "whitesmoke";
                break;
            case "dark":
                return "black";
                break;
            case "default":
                return null;
                break;
        }
    }                  

    // Function for changing theme
    function changeTheme () {
        document.querySelector(captureScope()).style.backgroundColor =  captureTheme ();
    }

    // Capture user input
    theme.addEventListener("change", changeTheme);
    scope.addEventListener("change", captureScope);
</script>
Home