We need an HTML file for our project.

From Amy- on Discord: For the .html, we could have like. A input with a button And then two like paragraphs/headers with the score/name of the company?

I haven't looked in to what this process involves, but it seems like it might be beneficial to rename this project to help others find it who may want to contribute down the line. Maybe something like "LGBTQ-Acceptance-Rating"?

Might also be beneficial to look in to tagging the project (if possible) with key words that can help people search for it too.

If Node version is older than version 18, you must define 'fetch' in the server.js file, or the server won't run. If Node version is version 18 or newer, you cannot define 'fetch' in the server.js file, or the server won't run.

We need a way for the server to run regardless of which Node version someone is using, preferably programmatically.

Put the starbuckslogo.png here before we decided on using the Yelp API, would appreciate if someone with permissions would delete it to declutter the project. Thanks in advance!

Discovered this in the repo settings, could really jazz this place up a lil'.

Feel free to offer suggestions!!!

https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/setting-guidelines-for-repository-contributors

(main.js)

Every time the makeReq function is called, a random rating should be displayed to the page. you can use/repurpose variable randomRating for this.

the html element the rating should be displayed through has an id of "businessRating"

To comply with web content accessibility guidelines (WCAG), color contrast between the background and the text needs to be improved. A couple ideas: darken the background and leave the light font OR switch to dark font (and potentially lighten the background)

https://webaim.org/resources/contrastchecker/

This pull request adds a CONTRIBUTING.md file with a new style guide, some content swapped over from the README.

irrelvant information was removed from patchnotes.txt, and it was renamed to API-documentation.txt.

This update adds a conditional statement that checks the version of Node. If the version is older than Node 18, it defines 'fetch'. If you try to define 'fetch' in Node 18 or above, it breaks the code.

The API is working!! You can enter a restaurant name, or a food item, or really anything into the input, then when you press the button, the server makes an API request (with an encrypted API Key), then it stores the top 5 results for that search in a javascript variable. These objects have a lot of information: business name, image url, site url, overall rating, etc. Lots of good info.

Also new: API key privacy. With API keys come great responsibility. You'll need to download a separate file from discord so that the code will work on your end, or else you won't be able to develop the site properly. I'll post it in the group, and/or you can just message me and I'll get it to you. Inside the folder, open the file labeled "OPEN ME FIRST PLEASE =) " first, there is VERY important information in there; please follow the directions.

Below is a list of each new public folder/file in the repository, along with their purpose:

package-lock.json & package.json - both files contain Node module dependencies in text form. It makes it so we don't have to download big files every time we run a git pull.

Code Removed: Removed some unnecessary code. we weren't using 'otherpage.html', or 'otherotherpage.html', so I removed the if/else block from server.js to declutter. The original files remain, so if we want to bring them back, it's just a few keystrokes.

Pastel rainbow background, pastel transgender pride flag background on the form button, centering and color changes to the title text, and centering to the input and button.

Some minor HTML changes as well to make working with the CSS file easier to work and test. These HTML changes are changes to the title of the page, as well as the title displayed on the tab, a section added to hold the input and button elements, edited the link to the CSS file so it connects properly, and linked the CSS file to the "otherpage.html" and "otherotherpage.html".

Refactor the server.js code using express to handle requests.

Example for easy reference (from class 38 material's "express-api" server file):

const express = require('express')
const app = express()
const cors = require('cors')
const PORT = 8000

app.use(cors())

let rappers = {
    '21 savage': {
        'age': 28,
        'birthName': 'Shéyaa Bin Abraham-Joseph',
        'birthdate': '22 October 1992'
    },
    'chance the rapper':{
        'age': 28,
        'birthName': 'Chancelor Jonathan Bennett',
        'birthdate': 'April 16, 1993'
    },
    'unknown':{
        'age': 'unknown',
        'birthName': 'unknown',
        'birthdate': 'unknown'
    }
}

app.get('/', (request, response) => {
    response.sendFile(__dirname + '/index.html')
})

app.get('/api/:name', (request, response) => {
    const rapperName = request.params.name.toLowerCase()
    if(rappers[rapperName]){
        response.json(rappers[rapperName])
    }else{
        response.json(rappers['unknown'])
    }
})

app.listen(process.env.PORT || PORT, () => {
    console.log(`Server running on port ${PORT}`)
})

Our input fields in index.html need labels to improve accessibility. The MDN link below has example code at the top of how to implement labels and associate them with their related input field: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints