css fixes

Author: fullstackNRJ

each day build day!/Day 29/index.html

@@ -16,6 +16,8 @@
         <input type="search" name="search box" class="search__input" placeholder="Search an Article">
         <button class="btn cta" onclick="getTheArticle()" value=""> search </button>
     </div>
+
+    <div class="searchResults"></div>
     <script src="main.js"></script>
 </body>
 </html>

each day build day!/Day 29/main.js

@@ -13,16 +13,40 @@ function getTheArticle(){
     isLoding = true;
     fetch(searchArticleUrl)
     .then(res=>res.json())
-    .then(data=>console.log(data))
+    .then(data=>{
+        console.log(data)
+        const articles = data.query.search;
+        displayArticles(articles);
+    })
     .then(err=>console.log(err))
     isLoding = false;
 //reset the search bar
 }
 
 function displayArticles(articles){
 
+    // Store a reference to `.searchResults`
+  const searchResults = document.querySelector('.searchResults');
+  // Remove all child elements
+  searchResults.innerHTML = '';
+
+  // Loop over results array
+  articles.forEach(article => {
+   const url = encodeURI(`https://en.wikipedia.org/wiki/${article.title}`);
+
+   searchResults.insertAdjacentHTML('beforeend',
+      `<div class="resultItem">
+        <h3 class="resultItem-title">
+          <a href="${url}" target="_blank" rel="noopener">${article.title}</a>
+        </h3>
+        <span class="resultItem-snippet">${article.snippet}</span><br>
+        <a href="${url}" class="resultItem-link" target="_blank" rel="noopener">${url}</a>
+      </div>`
+    );
+  });
 }
 
+
 function displayLoadingSpinner(){
 
    if(isLoding)console.log('display spinner')

each day build day!/Day 29/style.css

@@ -12,7 +12,7 @@ html{
 
 
 .search{
-    margin: 10% auto;
+    margin: 1rem auto;
     height: 20rem;
     width: 20rem;
     display:flex;
@@ -22,6 +22,23 @@ html{
     background-color: rgb(122, 121, 118);
 }
 
+.searchResults{
+  margin: 5rem 40rem ;
+  width: 55rem;
+  text-align: left;
+  font-size: 1.2rem;
+}
+
+.resultItem {
+    opacity: 0;
+    margin-bottom: 20px;
+    animation: show 0.5s forwards ease-in-out;
+    color: white;
+    border-radius: 2px;
+    padding: 10px;
+    width: 100%;
+  }
+
 a{
     height: 2rem;
     background-color: aliceblue;
@@ -34,4 +51,16 @@ a{
 
 .search__input{
     background-color: aliceblue;
-}
+}
+
+@keyframes show {
+    0% {
+      opacity: 0;
+      transform: translateY(100px);
+    }
+  
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }