💻Lab: Scavenger Hunt - Stage 1

Scavenger Hunt - Stage 1

From the in-class codealong you should start with:

• A client folder that has index.html and js folder

• A database with a challenges table in it and some sample data.

• An Express app server.js which has an endpoint /api/challenges to get a list of all challenges.

Part 1 - list all the challenges

Fill out the renderChallengeList() function to:

• Use axios.get to fetch the challenges from /api/challenges

• Create a box for each challenge, with the name, challenge and address details included.

• Make sure you can switch between the

Part 2 - Component structure

Create a folder in your js folder called components. Each independant piece of the user interface is a separate component and we can keep them in separate files to help our JS be a bit cleaner.

Structure your files like this:

/client
 - /js
    initialize.js
    /components
      - header.js
      - challengeList.js
      - rules.js

Put renderHeader in the header.js etc. You'll need to add <script> tags to your index.html to import each file.

We can use initalize.js to do all the things that we do when the page first loads. It's the only <script> tag we need to add defer on (the other JS files load a bit faster that way).

initalize.js

renderHeader()
renderChallengeList()

Part 3 - Make it nice to use

Add some CSS to make the layout a bit nicer:

• The header should have the nav links all on one line (use flex)

• The nav links should look like they are clickable, including a hover effect which changes the mouse cursor to indicate it's clickable.

• Any other CSS you want!

Extensions

Expandable challenges:

• Make the challenge list only show the name of each challenge. When you click on a challenge it expands to show you more details.

• Make the /api/challenges/ endpoint only return the id and name of each challenge

• Add a second /api/challenges/<id> to fetch more detail about any particular challenge

Avoid redundant API calls

• If the challenge list was loaded less than 2 min ago, don't load it again, just use the one from before.