✨ Lists and Button layout generators

app.css

@@ -217,12 +217,21 @@ body {
 .linksBlockLeft {
   grid-row: 1 / span 2;
   grid-column: 1 / span 2;
+}
+
+.linksBlockRight {
+  grid-row: 1 / span 2;
+  grid-column: 3 / span 2;
+}
+
+.buttonsContainer {
+  width: 100%;
+  height: 100%;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(2, 1fr);
   grid-gap: 30px;
   padding: 20px;
-
 }
 
 .button {
@@ -269,15 +278,14 @@ body {
   stroke: var(--sfg);
 }
 
-.linksBlockRight {
+.listsContainer {
-  grid-row: 1 / span 2;
+  width: 100%;
-  grid-column: 3 / span 2;
+  height: 100%;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
   grid-gap: 30px;
   padding: 0.3rem;
-
 }
 
 .list {

assets/js/buttons.js

@@ -3,13 +3,8 @@
 // └─┘┴ ┴┴└──┴┘└─┘
 // Function to print Button Cards.
 
-const generateButtons = () => {
+const generateFirstButtonsContainer = () => {
-  console.log("Yeah, Buttons are working");
+  for (const button of CONFIG.firstButtonsContainer) {
-}
-
-const printLinksBlockLeft = () => {
-  
-  for (const button of CONFIG.buttons) {
     let item = `
         <a
           href="${button.link}"
@@ -22,9 +17,40 @@ const printLinksBlockLeft = () => {
 
     const position = 'beforeend';
 
-    linksBlockLeft.insertAdjacentHTML(position, item);
+    buttons_1.insertAdjacentHTML(position, item);
+  }
+}
+
+const generateSecondButtonsContainer = () => {
+  for (const button of CONFIG.secondButtonsContainer) {
+    let item = `
+        <a
+          href="${button.link}"
+          target="${CONFIG.openInNewTab ? '_blank' : ''}"
+          class="card button button__${button.id}"
+        >
+          <i class="buttonIcon" icon-name="${button.icon}"></i>
+        </a>
+    `;
+
+    const position = 'beforeend';
+
+    buttons_2.insertAdjacentHTML(position, item);
+  }
+}
+
+const generateButtons = () => {
+  switch (CONFIG.bentoLayout) {
+    case 'bento':
+      generateFirstButtonsContainer();
+      break;
+    case 'buttons':
+      generateFirstButtonsContainer();
+      generateSecondButtonsContainer();
+      break;
+    default:
+      break;
   }
 };
 
 generateButtons();
-printLinksBlockLeft();

assets/js/layout.js

@@ -4,46 +4,34 @@
 // Generate Layout.
 
 const generateLayout = () => {
-  let bentoLayout = `
+  let firstButtonsContainer = `
-        <div class="linksBlockLeft" id="linksBlockLeft">
     <div class="buttonsContainer" id="buttons_1"></div>
-        </div>
-
-        <div class="linksBlockRight" id="linksBlockRight">
-           
-        </div>
   `;
-  let listLayout = `
+  let secondButtonsContainer = `
-        <div class="linksBlockLeft" id="linksBlockLeft">
-            <div class="card list list__1" id="list_1"></div>
-            <div class="card list list__2" id="list_2"></div>
-        </div>
-
-        <div class="linksBlockRight" id="linksBlockRight">
-            <div class="card list list__3" id="list_3"></div>
-            <div class="card list list__4" id="list_4"></div>
-        </div>
-    `;
-  let buttonsLayout = `
-        <div class="linksBlockLeft" id="linksBlockLeft">
-            <div class="buttonsContainer" id="buttons_1"></div>
-        </div>
-
-        <div class="linksBlockRight" id="linksBlockRight">
     <div class="buttonsContainer" id="buttons_2"></div>
-        </div>
+  `;
+  let firstListsContainer = `
+    <div class="listsContainer" id="lists_1"></div>
+  `;
+
+  let secondListsContainer = `
+    <div class="listsContainer" id="lists_2"></div>
   `;
 
   const position = 'beforeend';
+
   switch (CONFIG.bentoLayout) {
     case 'bento':
-      linksBlock.insertAdjacentHTML(position, bentoLayout);
+      linksBlockLeft.insertAdjacentHTML(position, firstButtonsContainer);
+      linksBlockRight.insertAdjacentHTML(position, firstListsContainer);
       break;
     case 'lists':
-      linksBlock.insertAdjacentHTML(position, listLayout);
+      linksBlockLeft.insertAdjacentHTML(position, firstListsContainer);
+      linksBlockRight.insertAdjacentHTML(position, secondListsContainer);
       break;
     case 'buttons':
-      linksBlock.insertAdjacentHTML(position, buttonsLayout);
+      linksBlockLeft.insertAdjacentHTML(position, firstButtonsContainer);
+      linksBlockRight.insertAdjacentHTML(position, secondButtonsContainer);
       break;
     default:
       break;

assets/js/lists.js

@@ -3,46 +3,84 @@
 // ┴─┘┴└─┘ ┴ └─┘
 // Functions for printing both lists
 
-const generateLists = () => {
+const generateFirstListsContainer = () => {
-  console.log("Yeah, I'm working");
+  console.log('Running firstlistscontainer');
-}
+  for (const list of CONFIG.firstlistsContainer) {
-
-const printFirstList = () => {
-  let icon = `<i class="listIcon" icon-name="${CONFIG.firstListIcon}"></i>`;
-  const position = 'beforeend';
-  list_1.insertAdjacentHTML(position, icon);
-  for (const link of CONFIG.lists.firstList) {
     let item = `
+        <div class="card list list__${list.id}" id="list_${list.id}">
+        <i class="listIcon" icon-name="${list.icon}"></i>
         <a
         target="${CONFIG.openInNewTab ? '_blank' : ''}"
-        href="${link.link}"
+        href="${list.links[0].link}"
         class="listItem"
-        >${link.name}</a
+        >${list.links[0].name}</a>
-        >
+        <a
+        target="${CONFIG.openInNewTab ? '_blank' : ''}"
+        href="${list.links[1].link}"
+        class="listItem"
+        >${list.links[1].name}</a>
+        <a
+        target="${CONFIG.openInNewTab ? '_blank' : ''}"
+        href="${list.links[2].link}"
+        class="listItem"
+        >${list.links[2].name}</a>
+        <a
+        target="${CONFIG.openInNewTab ? '_blank' : ''}"
+        href="${list.links[3].link}"
+        class="listItem"
+        >${list.links[3].name}</a>
+        </div>
       `;
     const position = 'beforeend';
-    list_1.insertAdjacentHTML(position, item);
+    lists_1.insertAdjacentHTML(position, item);
   }
 };
 
-const printSecondList = () => {
+const generateSecondListsContainer = () => {
-  let icon = `<i class="listIcon" icon-name="${CONFIG.secondListIcon}"></i>`;
+  console.log('Running second');
-  const position = 'beforeend';
+  for (const list of CONFIG.secondListsContainer) {
-  list_2.insertAdjacentHTML(position, icon);
-  for (const link of CONFIG.lists.secondList) {
     let item = `
+        <div class="card list list__${list.id}" id="list_${list.id}">
+        <i class="listIcon" icon-name="${list.icon}"></i>
         <a
         target="${CONFIG.openInNewTab ? '_blank' : ''}"
-          href="${link.link}"
+        href="${list.links[0].link}"
         class="listItem"
-          >${link.name}</a
+        >${list.links[0].name}</a>
-          >
+        <a
+        target="${CONFIG.openInNewTab ? '_blank' : ''}"
+        href="${list.links[1].link}"
+        class="listItem"
+        >${list.links[1].name}</a>
+        <a
+        target="${CONFIG.openInNewTab ? '_blank' : ''}"
+        href="${list.links[2].link}"
+        class="listItem"
+        >${list.links[2].name}</a>
+        <a
+        target="${CONFIG.openInNewTab ? '_blank' : ''}"
+        href="${list.links[3].link}"
+        class="listItem"
+        >${list.links[3].name}</a>
+        </div>
       `;
     const position = 'beforeend';
-    list_2.insertAdjacentHTML(position, item);
+    lists_2.insertAdjacentHTML(position, item);
+  }
+};
+
+const generateLists = () => {
+  switch (CONFIG.bentoLayout) {
+    case 'bento':
+      generateFirstListsContainer();
+      break;
+    case 'lists':
+      generateFirstListsContainer();
+      generateSecondListsContainer();
+      break;
+    default:
+      break;
   }
 };
 
 generateLists();
-printFirstList();
-printSecondList();

config.js

@@ -17,7 +17,7 @@ const CONFIG = {
   twelveHourFormat: false,
 
   // Layout
-  bentoLayout: 'bento', // 'bento', 'cards', 'lists'
+  bentoLayout: 'buttons', // 'bento', 'lists', 'buttons'
 
   // Greetings
   greetingMorning: 'Good morning!',
@@ -50,7 +50,7 @@ const CONFIG = {
   // ├┴┐│ │ │  │ │ ││││└─┐
   // └─┘└─┘ ┴  ┴ └─┘┘└┘└─┘
 
-  buttons: [
+  firstButtonsContainer: [
     {
       id: '1',
       name: 'Github',
@@ -87,56 +87,57 @@ const CONFIG = {
       icon: 'youtube',
       link: 'https://odysee.com/',
     },
-    {
+  ],
-      id: '7',
-      name: 'Odysee',
-      icon: 'youtube',
-      link: 'https://odysee.com/',
-    },
-    {
-      id: '8',
-      name: 'Odysee',
-      icon: 'youtube',
-      link: 'https://odysee.com/',
-    },
-    {
-      id: '9',
-      name: 'Odysee',
-      icon: 'youtube',
-      link: 'https://odysee.com/',
-    },
-    {
-      id: '10',
-      name: 'Odysee',
-      icon: 'youtube',
-      link: 'https://odysee.com/',
-    },
-    {
-      id: '11',
-      name: 'Odysee',
-      icon: 'youtube',
-      link: 'https://odysee.com/',
-    },
-    {
-      id: '12',
-      name: 'Odysee',
-      icon: 'youtube',
-      link: 'https://odysee.com/',
-    },
 
+  secondButtonsContainer: [
+    {
+      id: '1',
+      name: 'Odysee',
+      icon: 'youtube',
+      link: 'https://odysee.com/',
+    },
+    {
+      id: '2',
+      name: 'Odysee',
+      icon: 'youtube',
+      link: 'https://odysee.com/',
+    },
+    {
+      id: '3',
+      name: 'Odysee',
+      icon: 'youtube',
+      link: 'https://odysee.com/',
+    },
+    {
+      id: '4',
+      name: 'Odysee',
+      icon: 'youtube',
+      link: 'https://odysee.com/',
+    },
+    {
+      id: '5',
+      name: 'Odysee',
+      icon: 'youtube',
+      link: 'https://odysee.com/',
+    },
+    {
+      id: '6',
+      name: 'Odysee',
+      icon: 'youtube',
+      link: 'https://odysee.com/',
+    },
   ],
 
   // ┬  ┬┌─┐┌┬┐┌─┐
   // │  │└─┐ │ └─┐
   // ┴─┘┴└─┘ ┴ └─┘
 
-  //Icons
-  firstListIcon: 'music',
-  secondListIcon: 'coffee',
-
   // Links
-  lists: {
+  firstlistsContainer: [
-    firstList: [
+    {
+      icon: 'music',
+      id: '1',
+      links: [
         {
           name: 'Inspirational',
           link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
@@ -154,23 +155,76 @@ const CONFIG = {
           link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
         },
       ],
-    secondList: [
-      {
-        name: 'Linkedin',
-        link: 'https://linkedin.com/',
     },
     {
-        name: 'Figma',
+      icon: 'coffee',
-        link: 'https://figma.com/',
+      id: '2',
+      links: [
+        {
+          name: 'Inspirational',
+          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
         },
         {
-        name: 'Dribbble',
+          name: 'Classic',
-        link: 'https://dribbble.com',
+          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
         },
         {
-        name: 'Telegram',
+          name: 'Oldies',
-        link: 'https://webk.telegram.org',
+          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+        },
+        {
+          name: 'Rock',
+          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
         },
       ],
     },
+  ],
+
+  // Links
+  secondListsContainer: [
+    {
+      icon: 'binary',
+      id: '1',
+      links: [
+        {
+          name: 'Inspirational',
+          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+        },
+        {
+          name: 'Classic',
+          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+        },
+        {
+          name: 'Oldies',
+          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+        },
+        {
+          name: 'Rock',
+          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+        },
+      ],
+    },
+    {
+      icon: 'github',
+      id: '2',
+      links: [
+        {
+          name: 'Inspirational',
+          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+        },
+        {
+          name: 'Classic',
+          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+        },
+        {
+          name: 'Oldies',
+          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+        },
+        {
+          name: 'Rock',
+          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+        },
+      ],
+    },
+  ],
 };

index.html

@@ -55,17 +55,10 @@
       </div>
 
       <div class="linksBlock" id="linksBlock">
+        <div class="linksBlockLeft" id="linksBlockLeft"></div>
 
+        <div class="linksBlockRight" id="linksBlockRight"></div>
       </div>
-
-      <!-- <div class="linksBlockLeft" id="linksBlockLeft">
-        <div class="buttonsContainer"></div>
-      </div>
-
-      <div class="linksBlockRight" id="linksBlockRight">
-        <div class="card list list__1" id="list_1"></div>
-        <div class="card list list__2" id="list_2"></div>
-      </div> -->
     </div>
 
     <!-- Config  -->
@@ -78,8 +71,8 @@
     <script src="assets/js/greeting.js"></script>
     <script src="assets/js/weather.js"></script>
 
-    <!-- <script src="assets/js/buttons.js"></script>
+    <script src="assets/js/buttons.js"></script>
-    <script src="assets/js/lists.js"></script> -->
+    <script src="assets/js/lists.js"></script>
 
     <!-- Icons -->
     <script>