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
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,