🍱 Scripts refactor

README.md

@@ -59,7 +59,7 @@ You can use different Add-ons/Extensions for it
 
 ## 🎨 Customization
 
-Almost all customization can be managed in the `config.js` file:
+All customization can be managed in the `config.js` file:
 
 ### 👋 General: Name, Image Background and Greetings
 

assets/js/buttons.js

@@ -1,6 +1,6 @@
-// ┌─┐┌─┐┬─┐┌┬┐┌─┐
+// ┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐
-// │  ├─┤├┬┘ ││└─┐
+// ├┴┐│ │ │  │ │ ││││└─┐
-// └─┘┴ ┴┴└──┴┘└─┘
+// └─┘└─┘ ┴  ┴ └─┘┘└┘└─┘
 // Function to print Button Cards.
 
 const generateFirstButtonsContainer = () => {
@@ -19,7 +19,7 @@ const generateFirstButtonsContainer = () => {
 
     buttons_1.insertAdjacentHTML(position, item);
   }
-}
+};
 
 const generateSecondButtonsContainer = () => {
   for (const button of CONFIG.secondButtonsContainer) {
@@ -37,7 +37,7 @@ const generateSecondButtonsContainer = () => {
 
     buttons_2.insertAdjacentHTML(position, item);
   }
-}
+};
 
 const generateButtons = () => {
   switch (CONFIG.bentoLayout) {

assets/js/greeting.js

@@ -1,21 +1,17 @@
 // ┌─┐┬─┐┌─┐┌─┐┌┬┐┬┌┐┌┌─┐┌─┐
 // │ ┬├┬┘├┤ ├┤  │ │││││ ┬└─┐
 // └─┘┴└─└─┘└─┘ ┴ ┴┘└┘└─┘└─┘
+// Function to set Greetings
 
-// Get the hour
 const today = new Date();
 const hour = today.getHours();
-
-// Here you can change your name
 const name = CONFIG.name;
 
-// Here you can change your greetings
 const gree1 = `${CONFIG.greetingNight}\xa0`;
 const gree2 = `${CONFIG.greetingMorning}\xa0`;
 const gree3 = `${CONFIG.greetingAfternoon}\xa0`;
 const gree4 = `${CONFIG.greetingEvening}\xa0`;
 
-// Define the hours of the greetings
 if (hour >= 23 || hour < 5) {
   document.getElementById('greetings').innerText = gree1 + name;
 } else if (hour >= 6 && hour < 12) {

assets/js/layout.js

@@ -24,24 +24,22 @@ const generateLayout = () => {
     case 'bento':
       linksBlockLeft.insertAdjacentHTML(position, firstButtonsContainer);
       linksBlockRight.insertAdjacentHTML(position, firstListsContainer);
-      linksBlock.classList.remove("reduceGap");
+      linksBlock.classList.remove('reduceGap');
-      linksBlock.classList.remove("removeGap");
+      linksBlock.classList.remove('removeGap');
       break;
     case 'lists':
       linksBlockLeft.insertAdjacentHTML(position, firstListsContainer);
       linksBlockRight.insertAdjacentHTML(position, secondListsContainer);
-      linksBlock.classList.add("reduceGap");
+      linksBlock.classList.add('reduceGap');
       break;
     case 'buttons':
       linksBlockLeft.insertAdjacentHTML(position, firstButtonsContainer);
       linksBlockRight.insertAdjacentHTML(position, secondButtonsContainer);
-      linksBlock.classList.add("removeGap");
+      linksBlock.classList.add('removeGap');
       break;
     default:
       break;
   }
-
-  console.log('Layout Generated');
 };
 
 generateLayout();

assets/js/lists.js

@@ -4,7 +4,6 @@
 // Functions for printing both lists
 
 const generateFirstListsContainer = () => {
-  console.log('Running firstlistscontainer');
   for (const list of CONFIG.firstlistsContainer) {
     let item = `
         <div class="card list list__${list.id}" id="list_${list.id}">
@@ -37,7 +36,6 @@ const generateFirstListsContainer = () => {
 };
 
 const generateSecondListsContainer = () => {
-  console.log('Running second');
   for (const list of CONFIG.secondListsContainer) {
     let item = `
         <div class="card list list__${list.id}" id="list_${list.id}">

assets/js/theme.js

@@ -1,13 +1,12 @@
 //  ┌┬┐┬ ┬┌─┐┌┬┐┌─┐
 //  │ ├─┤├┤ │││├┤
 //  ┴ ┴ ┴└─┘┴ ┴└─┘
+// Set theme based on Configurations and Preferences
 
-// Store the theme
 let darkTheme = localStorage.getItem('darkTheme');
 const themeToggle = document.querySelector('#themeButton');
 const bodyBackground = document.getElementById('#body');
 
-// Apply Dark theme
 const enableDark = () => {
   document.body.classList.add('darktheme');
   localStorage.setItem('darkTheme', 'enabled');
@@ -15,7 +14,6 @@ const enableDark = () => {
   lucide.createIcons();
 };
 
-// Remove Dark theme
 const disableDark = () => {
   document.body.classList.remove('darktheme');
   localStorage.setItem('darkTheme', null);
@@ -23,18 +21,14 @@ const disableDark = () => {
   lucide.createIcons();
 };
 
-//Toggle theme
 if (darkTheme === 'enabled') {
-  // Temporarily disable transitions when changing theme on startup
   document.body.classList.add('notransition');
   enableDark();
-  document.body.offsetHeight; // Trigger reflow to flush CSS changes
   document.body.classList.remove('notransition');
 } else {
   disableDark();
 }
 
-// Toggle Theme Listener
 themeToggle.addEventListener('click', () => {
   darkTheme = localStorage.getItem('darkTheme');
   if (darkTheme !== 'enabled') {
@@ -59,8 +53,11 @@ if (CONFIG.changeThemeByOS && CONFIG.autoChangeTheme) {
   }
 }
 
-// Theme Autochanger
+if (
-if (CONFIG.changeThemeByHour && CONFIG.autoChangeTheme && !CONFIG.changeThemeByOS) {
+  CONFIG.changeThemeByHour &&
+  CONFIG.autoChangeTheme &&
+  !CONFIG.changeThemeByOS
+) {
   const date = new Date();
   const hours =
     date.getHours() < 10

assets/js/time.js

@@ -1,9 +1,9 @@
 // ┌┬┐┬┌┬┐┌─┐
 //  │ ││││├┤
 //  ┴ ┴┴ ┴└─┘
+// Set time and Date
 
 window.onload = displayClock();
-// Clock function
 function displayClock() {
   const monthNames = [
     'Jan',
@@ -20,7 +20,6 @@ function displayClock() {
     'Dec',
   ];
 
-  // Get clock elements
   var d = new Date();
   var mm = monthNames[d.getMonth()];
   var dd = d.getDate();
@@ -28,14 +27,12 @@ function displayClock() {
   var hh = d.getHours();
   var ampm = '';
 
-  // Hour format
   if (CONFIG.twelveHourFormat) {
     ampm = hh >= 12 ? ' pm' : ' am';
     hh = hh % 12;
     hh = hh ? hh : 12;
   }
 
-  // Display clock elements
   document.getElementById('hour').innerText = hh;
   document.getElementById('separator').innerHTML = ' : ';
   document.getElementById('minutes').innerText = min + ampm;

assets/js/weather.js

@@ -1,12 +1,12 @@
 // ┬ ┬┌─┐┌─┐┌┬┐┬ ┬┌─┐┬─┐
 // │││├┤ ├─┤ │ ├─┤├┤ ├┬┘
 // └┴┘└─┘┴ ┴ ┴ ┴ ┴└─┘┴└─
+// Functions to setup Weather windget.
 
 const iconElement = document.querySelector('.weatherIcon');
 const tempElement = document.querySelector('.weatherValue p');
 const descElement = document.querySelector('.weatherDescription p');
 
-// App data
 const weather = {};
 weather.temperature = {
   unit: 'celsius',
@@ -15,10 +15,7 @@ weather.temperature = {
 var tempUnit = CONFIG.weatherUnit;
 
 const KELVIN = 273.15;
-// Use your own key for the Weather, Get it here: https://openweathermap.org/
 const key = `${CONFIG.weatherKey}`;
-
-// Set Position function
 setPosition();
 
 function setPosition(position) {
@@ -43,7 +40,6 @@ function setPosition(position) {
   );
 }
 
-// Get the Weather data
 function getWeather(latitude, longitude) {
   let api = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&lang=${CONFIG.language}&appid=${key}`;
   fetch(api)
@@ -63,7 +59,6 @@ function getWeather(latitude, longitude) {
     });
 }
 
-// Display Weather info
 function displayWeather() {
   iconElement.innerHTML = `<img src="assets/icons/${CONFIG.weatherIcons}/${weather.iconId}.png"/>`;
   tempElement.innerHTML = `${weather.temperature.value.toFixed(