From 9226a79c27ef56001338a01034fc3805c99aea01 Mon Sep 17 00:00:00 2001 From: William Jones Date: Fri, 18 Nov 2022 09:08:38 -0500 Subject: [PATCH 1/3] Cleaned up js file --- client/script.js | 66 ++++++++---------------------------------------- 1 file changed, 11 insertions(+), 55 deletions(-) diff --git a/client/script.js b/client/script.js index e58b998a4..e9da3c600 100644 --- a/client/script.js +++ b/client/script.js @@ -1,12 +1,7 @@ -/* - ## Utility Functions - Under this comment place any utility functions you need - like an inclusive random number selector - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random -*/ function getRandomIntInclusive(min, max) { newMin = Math.ceil(min); newMax = Math.floor(max); - return Math.floor(Math.random() * (newMax - newMin + 1) + newMin); // The maximum is inclusive and the minimum is inclusive + return Math.floor(Math.random() * (newMax - newMin + 1) + newMin); } function injectHTML(list) { @@ -25,7 +20,7 @@ function getRandomIntInclusive(min, max) { function processRestaurants(list) { console.log('fired restaurants list'); - const range = [...Array(15).keys()]; //Special notation to create an array of 15 elements + const range = [...Array(15).keys()]; const newArray = range.map((item) => { const index = getRandomIntInclusive(0, list.length); return list[index]; @@ -68,46 +63,24 @@ function getRandomIntInclusive(min, max) { } async function mainEvent() { - /* - ## Main Event - Separating your main programming from your side functions will help you organize your thoughts - When you're not working in a heavily-commented "learning" file, this also is more legible - If you separate your work, when one piece is complete, you can save it and trust it - */ - const pageMap = initMap(); // the async keyword means we can make API requests - const form = document.querySelector('.main_form'); // get your main form so you can do JS with it - const submit = document.querySelector('#get-resto'); // get a reference to your submit button + const form = document.querySelector('.main_form'); + const submit = document.querySelector('#get-resto'); const loadAnimation = document.querySelector('.lds-ellipsis'); - submit.style.display = 'none'; // let your submit button disappear + submit.style.display = 'none'; - /* - Let's get some data from the API - it will take a second or two to load - This next line goes to the request for 'GET' in the file at /server/routes/foodServiceRoutes.js - It's at about line 27 - go have a look and see what we're retrieving and sending back. - */ const results = await fetch('/api/foodServicePG'); - const arrayFromJson = await results.json(); // here is where we get the data from our request as JSON + const arrayFromJson = await results.json(); - /* - Below this comment, we log out a table of all the results using "dot notation" - An alternate notation would be "bracket notation" - arrayFromJson["data"] - Dot notation is preferred in JS unless you have a good reason to use brackets - The 'data' key, which we set at line 38 in foodServiceRoutes.js, contains all 1,000 records we need - */ console.table(arrayFromJson.data); - // in your browser console, try expanding this object to see what fields are available to work with - // for example: arrayFromJson.data[0].name, etc console.log(arrayFromJson.data[0]); - // this is called "string interpolation" and is how we build large text blocks with variables console.log(`${arrayFromJson.data[0].name} ${arrayFromJson.data[0].category}`); - // This IF statement ensures we can't do anything if we don't have information yet - if (arrayFromJson.data?.length > 0) { // the question mark in this means "if this is set at all" - submit.style.display = 'block'; // let's turn the submit button back on by setting it to display as a block when we have data available + if (arrayFromJson.data?.length > 0) { + submit.style.display = 'block'; loadAnimation.classList.remove('lds-ellipsis'); loadAnimation.classList.add('lds-ellipsis_hidden'); @@ -118,33 +91,16 @@ function getRandomIntInclusive(min, max) { console.log(event.target.value); const filteredList = filterList(currentList, event.target.value); injectHTML(filteredList); - markerPlace(filteredList, pageMap); + // markerPlace(filteredList, pageMap); }); - // And here's an eventListener! It's listening for a "submit" button specifically being clicked - // this is a synchronous event event, because we already did our async request above, and waited for it to resolve form.addEventListener('submit', (submitEvent) => { - // This is needed to stop our page from changing to a new URL even though it heard a GET request submitEvent.preventDefault(); - - // This constant will have the value of your 15-restaurant collection when it processes currentList = processRestaurants(arrayFromJson.data); - - // And this function call will perform the "side effect" of injecting the HTML list for you injectHTML(currentList); - markerPlace(currentList, pageMap); - - - // By separating the functions, we open the possibility of regenerating the list - // without having to retrieve fresh data every time - // We also have access to some form values, so we could filter the list based on name + // markerPlace(currentList, pageMap); }); } } - - /* - This last line actually runs first! - It's calling the 'mainEvent' function at line 57 - It runs first because the listener is set to when your HTML content has loaded - */ + document.addEventListener('DOMContentLoaded', async () => mainEvent()); // the async keyword means we can make API requests \ No newline at end of file From ae378925ea81bb7af50443c25a3042596e81f7c7 Mon Sep 17 00:00:00 2001 From: William Jones Date: Fri, 18 Nov 2022 09:11:10 -0500 Subject: [PATCH 2/3] Cleaned up style sheet --- client/styles.css | 70 ++++------------------------------------------- 1 file changed, 5 insertions(+), 65 deletions(-) diff --git a/client/styles.css b/client/styles.css index 663a95ced..a1f542ee8 100644 --- a/client/styles.css +++ b/client/styles.css @@ -2,10 +2,6 @@ box-sizing: border-box; } - /* - These rules apply to actual HTML elements with no labelling! - So: they style the tags directly - */ html { background-color: #cda0cb; @@ -50,14 +46,6 @@ accent-color: hsla(120, 100%, 50%, 0.482); } - /* - - These styles use 'class names' - - You can apply them by using the 'class' attribute on your HTML - - like this:
- - note that the period vanishes there! - */ - - .wrapper { min-height: 100vh; display: flex; @@ -92,45 +80,21 @@ } - /* - This rule implies that the H1 tag lives within another HTML tag - It "inherits" some rules from the above - Those rules won't apply to an h1 that's outside a block with the class of 'header' - */ - .header h1 { display: block; - /* this will push other blocks out of the way */ - - /* colors */ background-color: #cda0cb; color: #2c2c2c; - - /* shapes */ border-radius: 6px; font-size: 1.5rem; padding: 1.25rem; - margin:0; /* removing the margin on h1 tags means the header pins to the top if we move */ - - - /* box-shadows are fancy */ + margin:0; box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 10%), 0 0 0 1px rgb(10 10 10 / 2%); } - - /* - Rules can be combined on a block to apply the 'cascade' in order - So you can use two classnames in a single class attribute - like:
- - Rules may combine in unexpected ways - remember that the LAST thing written in this file will have "priority" - And will be what displays in your client - */ - + .box { background-color: #cda0cb; border-radius: 4px; - width: fit-content; height:fit-content; padding: 0.5rem; @@ -163,11 +127,6 @@ flex-wrap: nowrap; } - /* - This block is actually dependent on the "container" block having a flex set on it - and the "wrapper" block displaying as a flex column with a "vertical height" (vh) of 100. - That serves to cram the footer to the bottom of the page. - */ .footer { flex-shrink: 0; @@ -182,15 +141,9 @@ text-decoration: underline; } - /* - This is an example of a 'pseudoclass' - In this instance, it says what to do if a mouse hovers over a link - This is pretty desktop-specific, since there's no hover function on touchscreens - */ + .footer a:hover { - /* Hue, saturation, luminosity, alpha */ background-color: #2c2c2c; - /* red, green, blue, alpha */ color: #743dec; text-decoration: none; } @@ -202,7 +155,6 @@ } - /* Deploy this with images as direct "children" and the images should pop into shape */ .grid { display: flex; justify-content: space-evenly; @@ -249,17 +201,6 @@ } .carousel_item img { - /* - Setting width, rather than max-width or min-width, - means annoying pop-ins won't happen - but it also means you need to format your images to be compatible - or they will stretch weird - - - try a tall one and see what happens - - change the height on a fixed image size and see what happens - - now make sure that images are _always_ square - - ... there's a reason crop tools are popular in image editors - */ width: 150px; } @@ -272,14 +213,13 @@ font-weight: bold; height: 45px; padding: 10px; - line-height: 0; /* This centers a button's text! */ - border: 2px solid rgb(99,99,99); /* shorthand for how to do a border */ + line-height: 0; + border: 2px solid rgb(99,99,99); } .prev:focus, .next:focus { margin: 0; - /* Pick a good border colour and check out how it works with your buttons */ } .prev:hover, From 7eb5beda919b633c0a1a1ecc330969a90ea33bcc Mon Sep 17 00:00:00 2001 From: William Jones Date: Fri, 18 Nov 2022 09:13:14 -0500 Subject: [PATCH 3/3] Cleaned up index file --- client/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/client/index.html b/client/index.html index abc89fc28..df510a9d2 100644 --- a/client/index.html +++ b/client/index.html @@ -10,7 +10,6 @@ -

RR8 Will Jones