🎨 Javascript functions

app.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
 
 /* V A R I A B L E S */
 
@@ -49,7 +49,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
   transition: 0.2s ease-in-out;
 }
 
@@ -94,6 +94,7 @@ body {
   box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
   border-radius: 5px;
 }
+
 .card:hover {
   transform: translateY(-0.2rem);
   box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35);
@@ -116,12 +117,14 @@ body {
   align-items: center;
   justify-content: center;
 }
+
 .weatherBlock__date {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 30px;
 }
+
 .weatherBlock__weather {
   display: flex;
   align-items: center;

assets/js/cards.js

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

assets/js/lists.js

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

assets/js/weather.js

@@ -13,7 +13,7 @@ var tempUnit = CONFIG.weatherUnit;
 
 const KELVIN = 273.15;
 // Use your own key for the Weather, Get it here: https://openweathermap.org/
-const key = '15fe26a8e22e4783054e3273824c5xdxd';
+const key = `${CONFIG.weatherKey}`;
 
 // Set Position function
 setPosition();

config.js

@@ -17,6 +17,7 @@ const CONFIG = {
   
   openInNewTab: true,
 
+  weatherKey: '12345678910111213141516',
   weatherIcons: 'OneDark',
   weatherUnit: 'C',
 
@@ -32,26 +33,37 @@ const CONFIG = {
 
   cards: [
     {
+      id: '1',
       name: 'Github',
       icon: 'github',
       link: 'https://github.com/',
     },
     {
+      id: '2',
       name: 'Mail',
       icon: 'mail',
       link: 'https://mail.protonmail.com/',
     },
     {
+      id: '3',
+      name: 'Todoist',
+      icon: 'trello',
+      link: 'https://calendar.google.com/calendar/r',
+    },
+    {
+      id: '4',
       name: 'Calendar',
       icon: 'calendar',
       link: 'https://calendar.google.com/calendar/r',
     },
     {
+      id: '5',
       name: 'Reddit',
       icon: 'bookmark',
       link: 'https://reddit.com',
     },
     {
+      id: '6',
       name: 'Odysee',
       icon: 'youtube',
       link: 'https://odysee.com/',
@@ -86,19 +98,19 @@ const CONFIG = {
     ],
     secondList: [
       {
-        name: 'Github',
+        name: 'Linkedin',
         link: 'https://github.com/',
       },
       {
-        name: 'Mail',
+        name: 'Facebook',
         link: 'https://mail.protonmail.com/',
       },
       {
-        name: 'Calendar',
+        name: 'Instagram',
         link: 'https://calendar.google.com/calendar/r',
       },
       {
-        name: 'Reddit',
+        name: 'Telegram',
         link: 'https://reddit.com',
       },
     ],

index.html

@@ -12,6 +12,12 @@
     <script src="https://unpkg.com/feather-icons"></script>
   </head>
 
+  <!-- 
+      ╔╗ ╔═╗╔╗╔╔╦╗╔═╗
+      ╠╩╗║╣ ║║║ ║ ║ ║
+      ╚═╝╚═╝╝╚╝ ╩ ╚═╝
+      -->
+
   <body class="">
     <button id="themeButton">
       <i id="themeButton__icon" data-feather="moon"></i>
@@ -48,101 +54,23 @@
         </div>
       </div>
 
-      <!-- Buttons Links  -->
+      <!-- 
+        ┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐
+        ├┴┐│ │ │  │ │ ││││└─┐
+        └─┘└─┘ ┴  ┴ └─┘┘└┘└─┘ 
+        -->
 
-      <div class="buttonLink">
+      <div class="buttonLink" id="buttonsContainer"></div>
-        <a
-          href="https://github.com/"
-          target="blank"
-          class="buttonLink__link card buttonLink__link-1"
-        >
-          <i class="buttonLink__icon" data-feather="github"></i>
-        </a>
-        <a
-          target="blank"
-          href="https://outlook.live.com/mail/inbox"
-          class="buttonLink__link card buttonLink__link-2"
-        >
-          <i class="buttonLink__icon" data-feather="mail"></i>
-        </a>
-        <a
-          target="blank"
-          href="https://calendar.google.com/calendar/r"
-          class="buttonLink__link card buttonLink__link-3"
-        >
-          <i class="buttonLink__icon" data-feather="calendar"></i>
-        </a>
-        <a
-          target="blank"
-          href="https://flipboard.com/"
-          class="buttonLink__link card buttonLink__link-4"
-        >
-          <i class="buttonLink__icon" data-feather="bookmark"></i>
-        </a>
-        <a
-          href="https://columns.app"
-          target="blank"
-          class="buttonLink__link card buttonLink__link-5"
-        >
-          <i class="buttonLink__icon" data-feather="trello"></i>
-        </a>
-        <a
-          target="blank"
-          href="https://www.youtube.com/"
-          class="buttonLink__link card buttonLink__link-6"
-        >
-          <i class="buttonLink__icon" data-feather="youtube"></i>
-        </a>
-      </div>
 
-      <!-- Lists  -->
+      <!-- 
+        ┬  ┬┌─┐┌┬┐┌─┐
+        │  │└─┐ │ └─┐
+        ┴─┘┴└─┘ ┴ └─┘
+        -->
 
-      <div class="card list list__1">
+      <div class="card list list__1" id="list_1"></div>
-        <i class="list__head" data-feather="music"></i>
-        <a
-          target="blank"
-          href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-          class="list__link"
-          >Inspirational</a
-        >
-        <a
-          target="blank"
-          href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-          class="list__link"
-          >Classic</a
-        >
-        <a
-          target="blank"
-          href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-          class="list__link"
-          >Oldies</a
-        >
-        <a
-          target="blank"
-          href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-          class="list__link"
-          >Rock</a
-        >
-      </div>
 
-      <div class="card list list__2">
+      <div class="card list list__2" id="list_2"></div>
-        <i class="list__head" data-feather="coffee"></i>
-        <a href="https://www.linkedin.com" target="blank" class="list__link"
-          >LinkedIn</a
-        >
-        <a href="https://dribbble.com/" target="blank" class="list__link"
-          >Dribble</a
-        >
-        <a href="https://www.udemy.com/" target="blank" class="list__link"
-          >Udemy</a
-        >
-        <a
-          href="https://www.figma.com/files/recent"
-          target="blank"
-          class="list__link"
-          >Figma</a
-        >
-      </div>
     </div>
 
     <!-- Config  -->
@@ -151,15 +79,16 @@
     <!-- Scripts  -->
     <script src="assets/js/time.js"></script>
     <script src="assets/js/theme.js"></script>
-    <script src="assets/js/cards.js"></script>
-    <script src="assets/js/lists.js"></script>
     <script src="assets/js/greeting.js"></script>
     <script src="assets/js/weather.js"></script>
+
+    <script src="assets/js/cards.js"></script>
+    <script src="assets/js/lists.js"></script>
     <script>
       feather.replace();
     </script>
   </body>
 
-  <!-- Coded and designed by Miguel R. Ávila: -->
+  <!-- Developed and designed by Miguel R. Ávila: -->
   <!-- https://github.com/migueravila -->
 </html>