Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Will jones #7

Merged
merged 3 commits into from
Nov 18, 2022
Merged

Will jones #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9226a79
Cleaned up js file
will16363 Nov 18, 2022
ae37892
Cleaned up style sheet
will16363 Nov 18, 2022
7eb5bed
Cleaned up index file
will16363 Nov 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
<script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"
integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg="
crossorigin=""></script>
<p>RR8 Will Jones</p>
</head>
<body>
<header class="header">
Expand Down
66 changes: 11 additions & 55 deletions client/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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];
Expand Down Expand Up @@ -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');
Expand All @@ -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
70 changes: 5 additions & 65 deletions client/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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: <div class="wrapper">
- note that the period vanishes there!
*/


.wrapper {
min-height: 100vh;
display: flex;
Expand Down Expand Up @@ -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: <div class="box section">

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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}

Expand All @@ -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,
Expand Down