From 50c6d6b0c7ee955731f8022b7f91d5efdeb484cd Mon Sep 17 00:00:00 2001 From: Mahendrata Harpi Date: Sat, 23 May 2020 03:31:16 +0700 Subject: [PATCH] refactoring: change to ternary operator --- assets/js/main.js | 77 +++++++++++++++++++++++------------------------ 1 file changed, 37 insertions(+), 40 deletions(-) diff --git a/assets/js/main.js b/assets/js/main.js index bc912c9..7bf1a1e 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,47 +1,44 @@ (() => { // Theme switch - const root = document.body; - const themeSwitch = document.getElementById("mood"); - const themeData = root.getAttribute("data-theme"); + const body = document.body; + const lamp = document.getElementById("mode"); + const data = body.getAttribute("data-theme"); - if (themeSwitch) { - initTheme(localStorage.getItem("theme")); - themeSwitch.addEventListener("click", () => - toggleTheme(localStorage.getItem("theme")) - ); - - function toggleTheme(state) { - if (state === "dark") { - localStorage.setItem("theme", "light"); - root.removeAttribute("data-theme"); - } else if (state === "light") { - localStorage.setItem("theme", "dark"); - document.body.setAttribute("data-theme", "dark"); - } else { - initTheme(state); - } - } - - function initTheme(state) { - if (state === "dark") { - document.body.setAttribute("data-theme", "dark"); - } else if (state === "light") { - root.removeAttribute("data-theme"); - } else { - localStorage.setItem("theme", themeData); - } - } - } - - // Blur content when the menu is open - const checkbox = document.getElementById("menu-trigger"); - const wrapper = document.getElementById("wrapper"); - - checkbox.addEventListener("change", function() { - if (this.checked) { - wrapper.classList.add("trigger-wrapper"); + const initTheme = (state) => { + if (state === "dark") { + body.setAttribute("data-theme", "dark"); + } else if (state === "light") { + body.removeAttribute("data-theme"); } else { - wrapper.classList.remove("trigger-wrapper"); + localStorage.setItem("theme", data); } + }; + + const toggleTheme = (state) => { + if (state === "dark") { + localStorage.setItem("theme", "light"); + body.removeAttribute("data-theme"); + } else if (state === "light") { + localStorage.setItem("theme", "dark"); + body.setAttribute("data-theme", "dark"); + } else { + initTheme(state); + } + }; + + initTheme(localStorage.getItem("theme")); + + lamp.addEventListener("click", () => + toggleTheme(localStorage.getItem("theme")) + ); + + // Blur the content when the menu is open + const cbox = document.getElementById("menu-trigger"); + + cbox.addEventListener("change", function () { + const area = document.querySelector(".wrapper"); + this.checked + ? area.classList.add("blurry") + : area.classList.remove("blurry"); }); })();