[ core/revamp-proposition ] revamp: first iteration/proposition

zero-to-mastery · Oct 24, 2023 · 2524f3c · 2524f3c
1 parent 0317cce
commit 2524f3c
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 152 deletions.
diff --git a/include.js b/include.js
@@ -1733,7 +1733,7 @@ const cards = [
     githubLink: 'https://github.com/Sayed-Husain'
   },
   {
-    artName: 'TargetLoadingBothColors',
+    artName: 'Target Loading Both Colors',
     pageLink: './Art/ParzivalAFK/TargetLoadingBothColors.html',
     imageLink: './Art/ParzivalAFK/TargetLoadingBothColors.gif',
     author: 'ParzivalAFK',
@@ -2259,7 +2259,7 @@ const cards = [
     githubLink: 'https://github.com/manishjha-04'
   },
   {
-    artName: 'rotatingrectangle in cube',
+    artName: 'rotating rectangle in cube',
     pageLink: './Art/PentesterPriyanshu/rotatingrectangle.html',
     imageLink: './Art/PentesterPriyanshu/rotatingrectangle.gif',
     author: 'Priyanshu Prajapati',
@@ -2356,7 +2356,7 @@ const getCardContents = (cardList) => {
     `<li class="card">` +
       `<a href='${c.pageLink}'>` +
       `<img class="art-image" src='${c.imageLink}' alt='${c.artName}' />` +
-      `</a>` +
+      `</a><hr>` + 
       `<div class="flex-content">` +
       `<a href='${c.pageLink}'><h3 class="art-title">${c.artName}</h3></a>` +
       `<p class='author'><a href="${c.githubLink}" target="_blank"><i class="fab fa-github"></i> ${c.author}</a> </p>` +
@@ -2399,11 +2399,11 @@ function searchCard(event){
   const value = event.target.value.toLowerCase();
   let filteredCards;
   if( !!value ){
-    filteredCards = cards.filter(({ artName, githubLink }) => {
+    filteredCards = cards.filter(({ artName, githubLink, author }) => {
       const _artName = artName.toLowerCase();
       const _githubLink = githubLink.toLowerCase();
-      // return _artName.includes( value ) || _githubLink.includes( value );
-      return [_artName, _githubLink].some(detail => detail.includes(value))
+      const _author = author.toLowerCase()
+      return [_artName, _githubLink, _author].some(detail => detail.includes(value))
     });
     contents = getCardContents( filteredCards );
   } else {

diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link
       rel="stylesheet"
       href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
@@ -19,16 +20,18 @@
   </head>
 
   <body>
-    <div class="header" id="head">
+    <div id="header">
       <h1>Animation Nation</h1>
       <h2>A ZTM Challenge for Hacktoberfest</h2>
       <input id="search-bar" placeholder=" 🔍 Search art or author"></input>
     </div>
 
-    <ul class="flex" id="cards">
-      <!-- Content is generated dynamically  -->
-      <!-- Add your card in include.js following the instructions -->
-    </ul>
+    <!-- <main> -->
+      <ul class="flex" id="cards">
+        <!-- Content is generated dynamically  -->
+        <!-- Add your card in include.js following the instructions -->
+      </ul>
+    <!-- </main> -->
 
     <div class="go-to-top">
       <span>&uarr;</span>