diff --git a/README.md b/README.md new file mode 100644 index 0000000..646c211 --- /dev/null +++ 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 index 4b87a95..09e411b 100644 --- a/client/allSearches.html +++ b/client/allSearches.html @@ -4,7 +4,8 @@ - + + Google All Searches @@ -12,75 +13,91 @@
- URL -

Search 1

-

Search Des

+ +

+

- URL -

Search 1

-

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!

+ +

+

- URL -

Search 1

-

Search Des

+ +

+

- URL -

Search 1

-

Search Des

+ +

+

- URL -

Search 1

-

Search Des

+ +

+

- URL -

Search 1

-

Search Des

+ +

+

- URL -

Search 1

-

Search Des

+ +

+

- URL -

Search 1

-

Search Des

+ +

+

- URL -

Search 1

-

Search Des

+ +

+

- URL -

Search 1

-

Search Des

+ +

+

+
+
+ +

+

+
+
+ +

+

+
+
+ +

+

diff --git a/client/googleImage.png b/client/googleImage.png deleted file mode 100644 index 2fbba7a..0000000 Binary files a/client/googleImage.png and /dev/null differ diff --git a/client/homepage.html b/client/homepage.html index 5814f0f..b57d451 100644 --- a/client/homepage.html +++ b/client/homepage.html @@ -4,7 +4,8 @@ - + + Google @@ -13,25 +14,25 @@ Gmail Images
- +
- +
- +
- - + +

-
- - -
+
+ + +
diff --git a/client/9dots.PNG b/client/images/9dots.PNG similarity index 100% rename from client/9dots.PNG rename to client/images/9dots.PNG diff --git a/client/googleImage.jpg b/client/images/googleImage.jpg similarity index 100% rename from client/googleImage.jpg rename to client/images/googleImage.jpg diff --git a/client/images/googlesearchicon.png b/client/images/googlesearchicon.png new file mode 100644 index 0000000..9a538d3 Binary files /dev/null and b/client/images/googlesearchicon.png differ diff --git a/client/searchicon.png b/client/images/searchicon.png similarity index 100% rename from client/searchicon.png rename to client/images/searchicon.png diff --git a/client/settings.png b/client/images/settings.png similarity index 100% rename from client/settings.png rename to client/images/settings.png diff --git a/client/teal_circle.png b/client/images/teal_circle.png similarity index 100% rename from client/teal_circle.png rename to client/images/teal_circle.png diff --git a/client/js/search.js b/client/js/search.js new file mode 100644 index 0000000..7ab624c --- /dev/null +++ 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 index d40fd96..12b9c92 100644 --- 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 index 5d70feb..b38429e 100644 --- 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"); } diff --git a/client/search.html b/client/search.html new file mode 100644 index 0000000..2e04295 --- /dev/null +++ b/client/search.html @@ -0,0 +1,105 @@ + + + + + + + + + + Google Search + + + +
+
+ +

+

+
+
+ +

+

+
+
+ +

+

+
+
+ +

+

+
+
+ +

+

+
+
+ +

+

+
+
+ +

+

+
+
+ +

+

+
+
+ +

+

+
+
+ +

+

+
+
+ +

+

+
+
+ +

+

+
+
+ +

+

+
+
+ + + diff --git a/client/style.css b/client/styles/style.css similarity index 95% rename from client/style.css rename to client/styles/style.css index 65ce950..457f1a8 100644 --- a/client/style.css +++ b/client/styles/style.css @@ -1,3 +1,7 @@ +body { + font-family: Arial, Helvetica, sans-serif; +} + .nav { display: flex; justify-content: flex-end; @@ -102,14 +106,10 @@ main form { .buttonContainer { display: flex; justify-content: center; - width: 100%; + width: 30%; column-gap: 10px; } .searchButton { width: 30%; -} - -.searchButton2 { - width: 139.22px; -} +} \ No newline at end of file diff --git a/client/stylesearch.css b/client/styles/stylesearch.css similarity index 88% rename from client/stylesearch.css rename to client/styles/stylesearch.css index 78c88da..b4b4b9f 100644 --- a/client/stylesearch.css +++ b/client/styles/stylesearch.css @@ -1,3 +1,7 @@ +body { + font-family: Arial, Helvetica, sans-serif; +} + .nav { display: flex; justify-content: space-between; @@ -76,6 +80,15 @@ width: 25px; } +.searchContainer button { + position: absolute; + right: -5%; + top: 0px; + border: none; + height: 100%; + border-radius: 20px; +} + .searchbar{ width: 90%; border: none; @@ -111,6 +124,8 @@ } .searchResults h2 { + font-weight:normal; + font-size: large; margin: 5px 0px; color: rgb(69, 69, 243); } diff --git a/server/app.js b/server/app.js index 6df486e..2526c1c 100644 --- a/server/app.js +++ b/server/app.js @@ -1,4 +1,4 @@ -const express = require("express"); +const express = require("express"); // install express const bodyParser = require("body-parser"); const searchRoutes = require("./routes/searchResults") const app = express(); @@ -19,4 +19,6 @@ app.listen(port, () => { app.use(bodyParser.json()); app.use("/searches", searchRoutes) + +// export app module.exports = app diff --git a/server/data.js b/server/data.js index bee6068..48fff29 100644 --- a/server/data.js +++ b/server/data.js @@ -1,14 +1,17 @@ const searchResults = [ - {id: 1, url: "https://theuselessweb.com/", title: "The Useless Web", desc: "The Useless Web... because some websites, we just couldn't do without - By Tim Holman - Read About The Sites - submit your own ..."}, - {id: 2, url: "https://www.youtube.com/", title: "Youtube", desc: "Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube."}, - {id: 3, url: "https://www.whatsapp.com/", title: "WhatsApp", desc: "WhatsApp Messenger: More than 2 billion people in over 180 countries use WhatsApp to stay in touch with friends and family, anytime and anywhere."}, - {id: 4, url: "https://www.friv.com/", title: "Friv® | FRIV.COM : The Best Free Games! [Jogos | Juegos]", desc: "A safe place to play free online games and more on your desktop, mobile or tablet! No in-app purchases and no nagging! :)"}, - {id: 5, url: "https://www.amazon.co.uk", title: "Amazon.co.uk: Low Prices in Electronics, Books, Sports ...", desc: "Sign up to Amazon Prime for unlimited free delivery. Low prices at Amazon on ..."}, - {id: 6, url: "https://www.w3schools.com/", title: "W3Schools Online Web Tutorials", desc: "W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and ..."}, - {id: 7, url: "https://www.riotgames.com/en", title: "Riot Games", desc: "Riot Games is the most player-focused game developer and publisher in the world. We published League of Legends in 2009, and have since released Teamfight ..."}, - {id: 8, url: "https://www.linkedin.com/", title: "LinkedIn: Log In or Sign Up", desc: "Sign up to Amazon Prime for unlimited free delivery. Low prices at Amazon on ..."}, - {id: 9, url: "https://github.com/", title: "GitHub: Let's build from here · GitHub", desc: "GitHub is where over 94 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, ..."}, - {id: 10, url: "https://slack.com/intl/en-gb", title: "Slack is your digital HQ", desc: "In Slack, you've got all the flexibility to work when, where and how it's best for you. You can easily chat, send audio and video clips, or join a huddle to ..."} + {id: 1, name: "useless", url: "https://theuselessweb.com/", title: "The Useless Web", desc: "The Useless Web... because some websites, we just couldn't do without - By Tim Holman - Read About The Sites - submit your own ..."}, + {id: 2, name: "youtube", url: "https://www.youtube.com/", title: "Youtube", desc: "Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube."}, + {id: 3, name: "whatsapp", url: "https://www.whatsapp.com/", title: "WhatsApp", desc: "WhatsApp Messenger: More than 2 billion people in over 180 countries use WhatsApp to stay in touch with friends and family, anytime and anywhere."}, + {id: 4, name: "friv", url: "https://www.friv.com/", title: "Friv® | FRIV.COM : The Best Free Games! [Jogos | Juegos]", desc: "A safe place to play free online games and more on your desktop, mobile or tablet! No in-app purchases and no nagging! :)"}, + {id: 5, name: "amazon", url: "https://www.amazon.co.uk", title: "Amazon.co.uk: Low Prices in Electronics, Books, Sports ...", desc: "Sign up to Amazon Prime for unlimited free delivery. Low prices at Amazon on ..."}, + {id: 6, name: "w3schools", url: "https://www.w3schools.com/", title: "W3Schools Online Web Tutorials", desc: "W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and ..."}, + {id: 7, name: "riot", url: "https://www.riotgames.com/en", title: "Riot Games", desc: "Riot Games is the most player-focused game developer and publisher in the world. We published League of Legends in 2009, and have since released Teamfight ..."}, + {id: 8, name: "linkedin", url: "https://www.linkedin.com/", title: "LinkedIn: Log In or Sign Up", desc: "Sign up to Amazon Prime for unlimited free delivery. Low prices at Amazon on ..."}, + {id: 9, name: "github", url: "https://github.com/", title: "GitHub: Let's build from here · GitHub", desc: "GitHub is where over 94 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, ..."}, + {id: 10, name: "slack", url: "https://slack.com/intl/en-gb", title: "Slack is your digital HQ", desc: "In Slack, you've got all the flexibility to work when, where and how it's best for you. You can easily chat, send audio and video clips, or join a huddle to ..."}, + {id: 11, name: "trains", url: "https://www.nationalrail.co.uk/", title: "National Rail Enquiries - Official source for UK train times and ...", desc: "The gateway to Britain's National Rail network. A portal into UK rail travel including train company information and promotions; train times; ..."}, + {id: 12, name: "trains", url: "https://www.thetrainline.com/", title: "Trainline : Search, Compare & Buy Cheap Train Tickets", desc: "The gateway to Britain's National Rail network. A portal into UK rail travel including train company information and promotions; train times; ..."}, + {id: 13, name: "trains", url: "https://www.lner.co.uk/", title: "LNER | London North Eastern Railway", desc: "Need train tickets? Book quickly and easily direct with LNER. Save 52% on LNER Advance tickets, and travel with confidence from start to finish!"}, ] module.exports = searchResults; diff --git a/server/models/searchResults.js b/server/models/searchResults.js index a1ff9d3..d791402 100644 --- a/server/models/searchResults.js +++ b/server/models/searchResults.js @@ -3,6 +3,7 @@ const searchResults = require("../data"); class Search{ constructor(data){ this.id = data.id; + this.name = data.name; this.url = data.url; this.title = data.title; this.desc = data.desc; @@ -15,12 +16,21 @@ class Search{ static findById(id){ const searchID = searchResults.filter((searches) => searches.id === id)[0] - if(!id){ + if(!searchID){ return; } const search = new Search(searchID); return search; } + + static findByName(name){ + const searchName = searchResults.filter((searches) => searches.name === name)[0] + if(!searchName){ + return; + } + const search = new Search(searchName); + return search; + } } module.exports = Search; diff --git a/server/routes/searchResults.js b/server/routes/searchResults.js index 63fcb06..a667234 100644 --- a/server/routes/searchResults.js +++ b/server/routes/searchResults.js @@ -12,6 +12,7 @@ router.get('/', (req, res) => { router.get('/:id', (req, res) => { try{ const id = parseInt(req.params.id); + const searchResult = Search.findById(id); if(!searchResult){ throw new Error("There is no result"); @@ -25,4 +26,20 @@ router.get('/:id', (req, res) => { } }) +router.get("/name/:name", (req, res) => { + try{ + const name = req.params.name; + const searchResult = Search.findByName(name); + if(!searchResult){ + throw new Error("There is no result"); + } + else{ + res.send(searchResult); + } + } catch (err){ + console.log(err); + res.status(404).send({message: err.message}); + } +}) + module.exports = router;