JavaScript: Little Codes

Select Theme: Within scope

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 2

<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":
                changeTheme ("cadetblue", "mistyrose");
                break;
            case "unicorn":
                changeTheme ("purple", "lightyellow");
                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(captureScope()).style.color = textColor;
        document.querySelector(captureScope()).style.backgroundColor = backColor;
    }

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

Script 1

<script>
    let userScope = "html";
                
    function captureScope () {
        switch (document.querySelector("#scope").value) {
            case "page":
                userScope = "html";
                break;
            case "box":
                userScope = ".js-resultbox";
                break;
        }
    }

    function captureTheme () {
        switch (document.querySelector("#theme").value) {
            case "baby":
                changeTheme ("cadetblue", "mistyrose");
                break;
            case "unicorn":
                changeTheme ("purple", "lightyellow");
                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(userScope).style.color = textColor;
        document.querySelector(userScope).style.backgroundColor = backColor;
    }

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