JLP2000 · JLP2000 · Nov 16, 2022 · Nov 16, 2022 · Nov 16, 2022 · Nov 17, 2022
diff --git a/README.md b/README.md
@@ -0,0 +1,17 @@
+# Josh and Adams Fake Google
+
+## Installation and Usage
+
+### Installation
+- Clone or Download this repo
+- navigate to this folder
+
+### Usage
+- In the server folder, run npm start to launch server
+- Open the homepage.html with live server
+- Enter one of the following into the search bar and you will be redirected to a search page with the results: useless, youtube, whatsapp, friv, amazon, w3schools, riot, linkedin, github, slack, trains
+- Or click the Show All button to display all the search results in our database
+- Note: if you input a search that is not in our database, the search page will be empty
+
+***
+
diff --git a/client/allSearches.html b/client/allSearches.html
@@ -4,83 +4,100 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="stylesearch.css">
+    <link rel="icon" type="image/x-icon" href="./images/googlesearchicon.png">
+    <link rel="stylesheet" href="./styles/stylesearch.css">
     <script src="js/showAll.js" defer></script>
     <title>Google All Searches</title>
 </head>
 <body>
     <nav class="nav">
         <div class="left">
             <div class="sideImg">
-                <a href="homepage.html"><img src="googleImage.jpg" alt=""></a>
+                <a href="homepage.html"><img src="./images/googleImage.jpg" alt=""></a>
             </div>
             <div class="searchContainer">
-                <img src="searchicon.png" alt="">
-                <input type="text" class="searchbar">
+                <img src="./images/searchicon.png" alt="">
+                <input type="text" class="searchbar" id="searchInput">
+                <button id="searchButton">Search</button>
             </div>
         </div>
         <div class="right">
             <div class="navDots">
-                <img src="settings.png" alt="">
+                <img src="./images/settings.png" alt="">
             </div>
             <div class="navDots">
-                <img src="9dots.PNG" alt="">
+                <img src="./images/9dots.PNG" alt="">
             </div>
             <div class= "profile">
-            <img src="teal_circle.png" alt="">
+            <img src="./images/teal_circle.png" alt="">
             </div>
         </div>
     </nav>
     <div class="resultsContainer">
         <div class="searchResults" id="1">
-            <a href="" style="font-size:medium;">URL</a>
-            <h2><a href="">Search 1</a></h2>
-            <p class="description">Search Des</p>
+            <a href="" style="font-size:medium;"></a>
+            <h2><a href=""></a></h2>
+            <p class="description"></p>
         </div>
         <div class="searchResults" id="2">
-            <a href="" style="font-size:medium;">URL</a>
-            <h2><a href="">Search 1</a></h2>
-            <p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quisquam tenetur cum deserunt iste dicta vero blanditiis veritatis omnis illo quia quos minima exercitationem officiis laudantium, nulla consequatur officia. Inventore!</p>
+            <a href="" style="font-size:medium;"></a>
+            <h2><a href=""></a></h2>
+            <p class="description"></p>
         </div>
         <div class="searchResults" id="3">
-            <a href="" style="font-size:medium;">URL</a>
-            <h2><a href="">Search 1</a></h2>
-            <p class="description">Search Des</p>
+            <a href="" style="font-size:medium;"></a>
+            <h2><a href=""></a></h2>
+            <p class="description"></p>
         </div>
         <div class="searchResults" id="4">
-            <a href="" style="font-size:medium;">URL</a>
-            <h2><a href="">Search 1</a></h2>
-            <p class="description">Search Des</p>
+            <a href="" style="font-size:medium;"></a>
+            <h2><a href=""></a></h2>
+            <p class="description"></p>
         </div>
         <div class="searchResults" id="5">
-            <a href="" style="font-size:medium;">URL</a>
-            <h2><a href="">Search 1</a></h2>
-            <p class="description">Search Des</p>
+            <a href="" style="font-size:medium;"></a>
+            <h2><a href=""></a></h2>
+            <p class="description"></p>
         </div>
         <div class="searchResults" id="6">
-            <a href="" style="font-size:medium;">URL</a>
-            <h2><a href="">Search 1</a></h2>
-            <p class="description">Search Des</p>
+            <a href="" style="font-size:medium;"></a>
+            <h2><a href=""></a></h2>
+            <p class="description"></p>
         </div>
         <div class="searchResults" id="7">
-            <a href="" style="font-size:medium;">URL</a>
-            <h2><a href="">Search 1</a></h2>
-            <p class="description">Search Des</p>
+            <a href="" style="font-size:medium;"></a>
+            <h2><a href=""></a></h2>
+            <p class="description"></p>
         </div>
         <div class="searchResults" id="8">
-            <a href="" style="font-size:medium;">URL</a>
-            <h2><a href="">Search 1</a></h2>
-            <p class="description">Search Des</p>
+            <a href="" style="font-size:medium;"></a>
+            <h2><a href=""></a></h2>
+            <p class="description"></p>
         </div>
         <div class="searchResults" id="9">
-            <a href="" style="font-size:medium;">URL</a>
-            <h2><a href="">Search 1</a></h2>
-            <p class="description">Search Des</p>
+            <a href="" style="font-size:medium;"></a>
+            <h2><a href=""></a></h2>
+            <p class="description"></p>
         </div>
         <div class="searchResults" id="10">
-            <a href="" style="font-size:medium;">URL</a>
-            <h2><a href="">Search 1</a></h2>
-            <p class="description">Search Des</p>
+            <a href="" style="font-size:medium;"></a>
+            <h2><a href=""></a></h2>
+            <p class="description"></p>
+        </div>
+        <div class="searchResults" id="11">
+            <a href="" style="font-size:medium;"></a>
+            <h2><a href=""></a></h2>
+            <p class="description"></p>
+        </div>
+        <div class="searchResults" id="12">
+            <a href="" style="font-size:medium;"></a>
+            <h2><a href=""></a></h2>
+            <p class="description"></p>
+        </div>
+        <div class="searchResults" id="13">
+            <a href="" style="font-size:medium;"></a>
+            <h2><a href=""></a></h2>
+            <p class="description"></p>
         </div>
     </div>
 

diff --git a/client/googleImage.png b/client/googleImage.png
diff --git a/client/homepage.html b/client/homepage.html
@@ -4,7 +4,8 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="style.css">
+    <link rel="icon" type="image/x-icon" href="./images/googlesearchicon.png">
+    <link rel="stylesheet" href="./styles/style.css">
     <script src="js/showOne.js" defer></script>
     <title>Google</title>
 </head>
@@ -13,25 +14,25 @@
         <a href="#">Gmail</a>
         <a href="#">Images</a>
         <div class="navDots">
-            <img src="9dots.PNG" alt="">
+            <img src="./images/9dots.PNG" alt="">
         </div>
         <div class= "profile">
-        <img src="teal_circle.png" alt="">
+        <img src="./images/teal_circle.png" alt="">
         </div>
     </nav>
     <main>
-        <img src="googleImage.jpg" alt="">
+        <img src="./images/googleImage.jpg" alt="">
         <form action="">
             <div class="searchContainer">
-                <img src="searchicon.png" alt="">
-                <input type="text" class="searchbar">
+                <img src="./images/searchicon.png" alt="">
+                <input type="text" class="searchbar" id="searchInput">
             </div>
             <br>
-            <div class="buttonContainer">
-                <input type="submit" value="Show One" class="searchButton" id="ten">
-                <a href="allSearches.html"><input type="button" value="Show All" class="searchButton2" id="one"></a>
-            </div>
         </form>
+        <div class="buttonContainer">
+            <button id="one" class="searchButton">Show One</button>
+            <button id="ten" class="searchButton">Show All</button>
+        </div>
     </main>
 </body>
 </html>
diff --git a/client/9dots.PNG → client/images/9dots.PNG b/client/9dots.PNG → client/images/9dots.PNG
diff --git a/client/googleImage.jpg → client/images/googleImage.jpg b/client/googleImage.jpg → client/images/googleImage.jpg
diff --git a/client/images/googlesearchicon.png b/client/images/googlesearchicon.png
diff --git a/client/searchicon.png → client/images/searchicon.png b/client/searchicon.png → client/images/searchicon.png
diff --git a/client/settings.png → client/images/settings.png b/client/settings.png → client/images/settings.png
diff --git a/client/teal_circle.png → client/images/teal_circle.png b/client/teal_circle.png → client/images/teal_circle.png
diff --git a/client/js/search.js b/client/js/search.js
@@ -0,0 +1,56 @@
+window.addEventListener("load", getResults)
+
+let datalength
+const searchName = localStorage.getItem("searchName")
+
+fetch("http://localhost:3000/searches")
+        .then((res) => res.json())
+        .then(data => {
+            console.log(data.length)
+            datalength = data.length;
+        })
+
+
+function getResults(e) {
+    e.preventDefault();
+    console.log(searchName)
+    let searchResultsNum = 1;
+
+    for(let i = 1; i <= datalength; i++){
+        let url = `http://localhost:3000/searches/${i}`
+
+        fetch(url)
+        .then((res) => res.json())
+        .then(data => {
+
+            if(data.name == searchName){
+                let searchResult = document.getElementById(`${searchResultsNum}`);
+                let a = searchResult.querySelector("a")
+                let h2 = searchResult.querySelector("h2")
+                let h2a = h2.querySelector("a")
+                let p = searchResult.querySelector("p")
+
+                a.textContent = data.url;
+                a.setAttribute("href", data.url);
+                h2a.textContent = data.title;
+                h2a.setAttribute("href", data.url);
+                p.textContent = data.desc;
+
+                searchResultsNum++;
+            }
+            else return;
+        })
+    } 
+}
+
+const searchButton = document.getElementById("searchButton");
+
+searchButton.addEventListener("click", getSearchURL)
+
+function getSearchURL(e){
+    e.preventDefault();
+    console.log("hello");
+    const inputValue = document.getElementById("searchInput").value
+    localStorage.setItem("searchName", inputValue);
+    window.location.replace("search.html");
+}
diff --git a/client/js/showAll.js b/client/js/showAll.js
@@ -1,9 +1,19 @@
 window.addEventListener("load", getResults)
 
+let datalength
+
+// fetch("http://localhost:3000/searches")
+//         .then((res) => res.json())
+//         .then(data => {
+//             console.log(data.length)
+//             datalength = data.length;
+//         })
+
+
 function getResults(e) {
     e.preventDefault();
 
-    for(let i = 1; i <= 10; i++){
+    for(let i = 1; i <=13; i++){
         let url = `http://localhost:3000/searches/${i}`
 
         fetch(url)
@@ -25,3 +35,15 @@ function getResults(e) {
         })
     }
 }
+
+const searchButton = document.getElementById("searchButton");
+
+searchButton.addEventListener("click", getSearchURL)
+
+function getSearchURL(e){
+    e.preventDefault();
+    console.log("hello");
+    const inputValue = document.getElementById("searchInput").value
+    localStorage.setItem("searchName", inputValue);
+    window.location.replace("search.html");
+}
diff --git a/client/js/showOne.js b/client/js/showOne.js
@@ -1,19 +1,36 @@
-const buttonOne = document.getElementById("ten")
-addEventListener("submit", getRandomSearch)
+const buttonTen = document.getElementById("ten");
+buttonTen.addEventListener("click", () => {
+    window.location.replace("allSearches.html");
+});
 
-function randomNumberGenerator(){
-    return Math.floor(Math.random() * (10 - 1 + 1) + 1);
-}
+const buttonOne = document.getElementById("one");
+buttonOne.addEventListener("click", getSearchURL)
 
-function getRandomSearch(e){
-    e.preventDefault();
-    let id = randomNumberGenerator();
-    let url = `http://localhost:3000/searches/${id}`
+// function getInfoByName(search, allData) {
+//     result = allData.find(data => data.name == search);
+//     if(!result){
+//         return;
+//     }
+//     return result;
+// }
+
+// function getSearchURL(e){
+//     e.preventDefault();
+//     const inputValue = document.getElementById("searchInput").value;
+//     let url = `http://localhost:3000/searches`
 
-    fetch(url)
-    .then((res) => res.json())
-    .then(data => {
-        let webLink = data.url;
-        window.location.replace(webLink);
-    })
+//     fetch(url)
+//     .then((res) => res.json())
+//     .then(data => {
+//         result = getInfoByName(inputValue, data);
+//         let webLink = result.url;
+//         window.location.replace(webLink);
+//     })
+// }
+
+function getSearchURL(e){
+    e.preventDefault();
+    const inputValue = document.getElementById("searchInput").value
+    localStorage.setItem("searchName", inputValue);
+    window.location.replace("search.html");
 }