🎨 Improve class names

app.css

@@ -79,7 +79,7 @@ body {
   background-color: #00000000;
 }
 
-#themeButton__icon {
+#themeIcon {
   width: 25px;
   height: 25px;
 }
@@ -123,14 +123,14 @@ body {
   justify-content: center;
 }
 
-.weatherBlock__date {
+.date {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 30px;
 }
 
-.weatherBlock__weather {
+.weather {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -166,25 +166,25 @@ body {
   color: var(--fg);
 }
 
-.weather-icon img {
+.weatherIcon img {
   width: 70px;
   height: 70px;
 }
 
-.temperature-value p {
+.weatherValue p {
   font-size: var(--fss);
   font-weight: bolder;
   margin-left: 15px;
   color: var(--fg);
 }
 
-.temperature-description p {
+.weatherDescription p {
   font-size: var(--fss);
   margin-left: 15px;
   color: var(--fg);
 }
 
-.buttonLink {
+.buttons {
   grid-row: 3 / span 2;
   grid-column: 1 / span 2;
   display: grid;
@@ -194,47 +194,47 @@ body {
   padding: 20px;
 }
 
-.buttonLink__link {
+.buttons__link {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
 }
 
-.buttonLink__icon {
+.buttons__link-icon {
   width: 3vh;
   height: 3vh;
   color: var(--fg);
 }
 
-.buttonLink__link-1 {
+.buttons__link-1 {
   grid-row: 1;
   grid-column: 1;
 }
-.buttonLink__link-2 {
+.buttons__link-2 {
   grid-row: 1;
   grid-column: 2;
 }
-.buttonLink__link-3 {
+.buttons__link-3 {
   grid-row: 2;
   grid-column: 1;
 }
-.buttonLink__link-4 {
+.buttons__link-4 {
   grid-row: 2;
   grid-column: 2;
 }
-.buttonLink__link-5 {
+.buttons__link-5 {
   grid-row: 1;
   grid-column: 3;
 }
-.buttonLink__link-6 {
+.buttons__link-6 {
   grid-row: 2;
   grid-column: 3;
 }
-.buttonLink__link:hover {
+.buttons__link:hover {
   background-color: var(--accent);
 }
-.buttonLink__link:hover svg {
+.buttons__link:hover svg {
   stroke: var(--sfg);
 }
 
@@ -273,7 +273,6 @@ body {
 .list__link:hover {
   background-color: var(--accent);
   color: var(--sfg);
-  
 }
 
 /* M E D I A - Q U E R I E S */

assets/js/cards.js

@@ -1,4 +1,4 @@
-console.log("Connected cards");
+console.log('Connected cards');
 
 const printCards = () => {
   for (const card of CONFIG.cards) {
@@ -7,18 +7,18 @@ const printCards = () => {
     let item = `
         <a
           href="${card.link}"
-          target="${CONFIG.openInNewTab ? "_blank" : ""}"
-          class="buttonLink__link card buttonLink__link-${
+          target="${CONFIG.openInNewTab ? '_blank' : ''}"
+          class="card buttons__link buttons__link-${
             card.id
           }"
         >
-          <i class="buttonLink__icon" data-feather="${
+          <i class="buttons__link-icon" data-feather="${
             card.icon
           }"></i>
         </a>
     `;
 
-    const position = "beforeend";
+    const position = 'beforeend';
 
     buttonsContainer.insertAdjacentHTML(position, item);
   }

assets/js/greeting.js

@@ -13,11 +13,15 @@ const gree4 = `${CONFIG.greetingEvening}\xa0`;
 
 // Define the hours of the greetings
 if (hour >= 23 && hour < 5) {
-  document.getElementById('greetings').innerText = gree1 + name;
+  document.getElementById('greetings').innerText =
+    gree1 + name;
 } else if (hour >= 6 && hour < 12) {
-  document.getElementById('greetings').innerText = gree2 + name;
+  document.getElementById('greetings').innerText =
+    gree2 + name;
 } else if (hour >= 12 && hour < 17) {
-  document.getElementById('greetings').innerText = gree3 + name;
+  document.getElementById('greetings').innerText =
+    gree3 + name;
 } else {
-  document.getElementById('greetings').innerText = gree4 + name;
+  document.getElementById('greetings').innerText =
+    gree4 + name;
 }

assets/js/lists.js

@@ -1,37 +1,37 @@
-console.log("Connected lists");
+console.log('Connected lists');
 
 const printFirstList = () => {
   let icon = `<i class="list__head" data-feather="${CONFIG.firstListIcon}"></i>`;
-  const position = "beforeend";
+  const position = 'beforeend';
   list_1.insertAdjacentHTML(position, icon);
   for (const link of CONFIG.lists.firstList) {
     let item = `
         <a
-        target="${CONFIG.openInNewTab ? "_blank" : ""}"
+        target="${CONFIG.openInNewTab ? '_blank' : ''}"
         href="${link.link}"
         class="list__link"
         >${link.name}</a
         >
     `;
-    const position = "beforeend";
+    const position = 'beforeend';
     list_1.insertAdjacentHTML(position, item);
   }
 };
 
 const printSecondList = () => {
   let icon = `<i class="list__head" data-feather="${CONFIG.secondListIcon}"></i>`;
-  const position = "beforeend";
+  const position = 'beforeend';
   list_2.insertAdjacentHTML(position, icon);
   for (const link of CONFIG.lists.secondList) {
     let item = `
           <a
-          target="${CONFIG.openInNewTab ? "_blank" : ""}"
+          target="${CONFIG.openInNewTab ? '_blank' : ''}"
           href="${link.link}"
           class="list__link"
           >${link.name}</a
           >
       `;
-    const position = "beforeend";
+    const position = 'beforeend';
     list_2.insertAdjacentHTML(position, item);
   }
 };

assets/js/theme.js

@@ -35,6 +35,6 @@ themeToggle.addEventListener('click', () => {
   }
 });
 
-if(CONFIG.imageBackground) {
+if (CONFIG.imageBackground) {
   document.body.classList.add('withImageBackground');
-} 
+}

assets/js/weather.js

@@ -1,6 +1,10 @@
 const iconElement = document.querySelector('.weather-icon');
-const tempElement = document.querySelector('.temperature-value p');
-const descElement = document.querySelector('.temperature-description p');
+const tempElement = document.querySelector(
+  '.temperature-value p'
+);
+const descElement = document.querySelector(
+  '.temperature-description p'
+);
 
 // App data
 const weather = {};
@@ -19,8 +23,10 @@ const key = `${CONFIG.weatherKey}`;
 setPosition();
 
 function setPosition(position) {
-
-  getWeather(CONFIG.weatherLatitude, CONFIG.weatherLongitude);
+  getWeather(
+    CONFIG.weatherLatitude,
+    CONFIG.weatherLongitude
+  );
 }
 
 // Get the Weather data

index.html

@@ -20,7 +20,7 @@
 
   <body class="">
     <button id="themeButton">
-      <i id="themeButton__icon" data-feather="moon"></i>
+      <i id="themeIcon" data-feather="moon"></i>
     </button>
     <div class="container">
       <!-- Clock and Greetings  -->
@@ -37,18 +37,18 @@
       <!-- Date and Weather  -->
 
       <div class="weatherBlock">
-        <div class="weatherBlock__date">
+        <div class="date">
           <div id="month" class=""></div>
           <div id="day" class=""></div>
         </div>
-        <div class="weatherBlock__weather">
-          <div class="weather-icon">
+        <div class="weather">
+          <div class="weatherIcon">
             <img src="assets/icons/OneDark/unknown.png" />
           </div>
-          <div class="temperature-value">
+          <div class="weatherValue">
             <p class="">- °<span class="g">c</span></p>
           </div>
-          <div class="temperature-description">
+          <div class="weatherDescription">
             <p class=""></p>
           </div>
         </div>
@@ -60,7 +60,7 @@
         └─┘└─┘ ┴  ┴ └─┘┘└┘└─┘ 
         -->
 
-      <div class="buttonLink" id="buttonsContainer"></div>
+      <div class="buttons" id="buttonsContainer"></div>
 
       <!-- 
         ┬  ┬┌─┐┌┬┐┌─┐