added button

samiulislam09 · Mar 1, 2022 · 58c6c94 · 58c6c94
1 parent b53f750
commit 58c6c94
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 35 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1,7 +1,6 @@
 .card{
     margin-bottom: 15px;
     transition: all 0.2s ease-in-out;
-    cursor: pointer;
     box-shadow: 0 0 10px;
     border-radius: 10px;
     border: none;
@@ -22,4 +21,8 @@
     width: 45vh;
     margin: 0 auto;
     display: none;
+}
+.show-more{
+    display: none;
+    margin: 20px 0;
 }
diff --git a/images/Firefox Installer.exe b/images/Firefox Installer.exe
diff --git a/index.html b/index.html
@@ -13,17 +13,13 @@
 <body>
     <div class="container">
         <!-- navbar -->
-        <nav class="navbar navbar-expand-lg navbar-light bg-light px-5">
-            <a class="navbar-brand" href="#"><h4>Mobile Hut</h4></a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
-                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                <form class="form-inline my-2 my-lg-0 d-flex ms-auto">
+        <nav class="row navbar navbar-expand-lg navbar-light bg-light px-5">
+            <a class="col-12 col-md-6 navbar-brand text-center" href="#"><h4>Mobile Hut</h4></a>
+            <div class="col-12 col-md-6 ">
+                <div class="my-2 my-lg-0 d-flex ms-auto">
                     <input class="form-control mr-sm-2" id="name-input" type="search" placeholder="Search" aria-label="Search">
                     <button onclick="phoneData()" class="btn btn-outline-success my-2 my-sm-0 mx-2" type="submit">Search</button>
-                </form>
+                </div>
             </div>
         </nav>
         <!-- cards section -->
@@ -40,14 +36,14 @@ <h2 class="text-center my-3">Sorry we don't find anything with your search😒</
         <div class="row text-center loading" id="loading">
             <img src="./images/loading.gif" alt="">
         </div>
+        <div class="row text-center show-more" id="show-more">
+            <div class="col-12"><button class="btn btn-primary" onclick="showRemainingData()">Show more</button></div>
+        </div>
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
         crossorigin="anonymous"></script>
     <script src="./js/script.js"></script>
-
-
-
 </body>
 </html>
diff --git a/js/script.js b/js/script.js
@@ -1,54 +1,59 @@
+document.getElementById('loading').style.display = "none";
+// fetch data
 const phoneData = () => {
     const inputFromuser = document.getElementById('name-input').value;
     const phoneName = inputFromuser.toLowerCase();
-    toggleLoading('block')
     fetch(`https://openapi.programming-hero.com/api/phones?search=${phoneName}`)
         .then(res => res.json())
         .then(data => displayPhone(data))
-    toggleNotFound('none');
+    toggleLoading('block')
+    document.getElementById('not-found').style.display = "none";
 }
-
+// not found handler
 const toggleNotFound = (input) => {
     const notFound = document.getElementById('not-found');
     notFound.style.display = input;
 
 }
-
+// loading handler
 const toggleLoading = (input) => {
     const loading = document.getElementById('loading');
     loading.style.display = input;
 }
-
+// displaying data
 const displayPhone = (data) => {
-    const cards = document.getElementById('cards');
-    cards.textContent = '';
-    toggleNotFound('none')
-
     if (data.status == false) {
-        toggleNotFound('block');
-        toggleLoading('none');
+        cards.textContent = "";
+        document.getElementById('not-found').style.display = 'block';
+        toggleLoading('none')
     } else {
-        for (let item of data.data) {
+        const cards = document.getElementById('cards');
+        cards.textContent = "";
+        const allData = data.data;
+        const firstData = data.data.slice(0, 20);
+        for (let item of firstData) {
             const div = document.createElement('div');
             div.classList.add('col-12');
             div.classList.add('col-md-3');
             div.classList.add('d-flex');
             div.classList.add('justify-content-center');
             div.classList.add('text-center');
             div.innerHTML = `
-                    <div class="card g-2" style="width: 90%;">
-                        <img src="${item.image}" class="card-img-top" alt="${item.brand} mobile image">
-                        <div class="card-body">
-                            <h5 class="card-title">${item.brand}</h5>
-                            <p class="card-text">${item.phone_name}</p>
-                        </div>
+                <div class="card g-2" style="width: 90%;">
+                    <img src="${item.image}" class="card-img-top" alt="${item.brand} mobile image">
+                    <div class="card-body">
+                        <h5 class="card-title">${item.brand}</h5>
+                        <p class="card-text">${item.phone_name}</p>
+                        <button class="btn btn-primary">Specification</button>
                     </div>
-        `
+                </div>
+    `
             cards.appendChild(div)
         }
-        toggleLoading('none')
+
+
+        toggleNotFound('none');
+        toggleLoading('none');
     }
 
-
-
 }