learn-co-curriculum / phase-1-monsters

Additional Practice: Monsters

Learning Goals

• Access information from an API using a GET request and use it to update the DOM
• Listen for user events and update the DOM in response
• Send data to an API using a POST request

Introduction

For this practice code challenge, your objective is to build a frontend for our monsters data. Currently, the index.html page has a script tag to js/demo.js so that you can see a demo of the finished app. Comment out the script tag to js/demo.js and uncomment out the script tag to js/index.js where you will code your solution.

Once you're done, be sure to commit and push your code up to GitHub, then submit the assignment using CodeGrade. Even though this practice code challenge does not have tests, it must still be submitted through CodeGrade in order to be marked as complete in Canvas.

Getting Started

If you haven't yet, install json-server:

$ npm install -g json-server

Then run the server with:

$ json-server --watch monsters.json

Deliverables

• When the page loads, show the first 50 monsters. Each monster's name, age, and description should be shown.
• Above your list of monsters, you should have a form to create a new monster. You should have fields for name, age, and description, and a 'Create Monster Button'. When you click the button, the monster should be added to the list and saved in the API.
• At the end of the list of monsters, show a button. When clicked, the button should load the next 50 monsters and show them.

API methods

Get the list of monsters:

GET http://localhost:3000/monsters

optional parameters:

_limit=[number] - limit the number of monsters returned
_page=[number] - offset your request for monsters to some page (must specify a limit)

example:

GET http://localhost:3000/monsters/?_limit=20&_page=3

sample response:
[
  {
    "name": "Chronos",
    "age": 4005.302453418598,
    "description": "Effulgence eldritch shunned foetid. Ululate gibbering tenebrous foetid iridescence daemoniac. Stench nameless gambrel. Amorphous furtive iridescence noisome. Foetid mortal nameless.",
    "id": 1
  },
  {
    "name": "Tartarus",
    "age": 1874.4913565609456,
    "description": "Cyclopean swarthy amorphous singular accursed furtive non-euclidean stygian. Swarthy gibbering charnel eldritch daemoniac gibbous. Cyclopean lurk hideous tentacles squamous immemorial tenebrous mortal. Madness tentacles furtive mortal foetid decadent. Foetid immemorial comprehension.",
    "id": 2
  },
  {
    "name": "Hemera",
    "age": 4094.8375978925988,
    "description": "Dank immemorial abnormal gambrel. Cat lurk unutterable. Abnormal tenebrous ululate. Nameless swarthy manuscript eldritch indescribable accursed antediluvian decadent.",
    "id": 3
  }
]

Create a monster:

POST http://localhost:3000/monsters
headers:
{
  "Content-Type": "application/json",
  Accept: "application/json"
}

body:
{ name: string, age: number, description: string }

phase-1-monsters's Issues

I may have mistakenly pushed my updates to the master.js

Good Evening,

I just wanted to notify the admin of this curriculum that I may have mistakenly updated the master.js file in this lab by mistake. I was finishing up an assignment for school. I did not notice the issue until I proceeded to |git add .| git commit -m "Completed Assignment"| and git push| in my Ubuntu terminal. If so I apologize for this error. I am usually pretty good with forking a copy to my personal github and not making this mistake.

I think everything may be okay.... but just wanted to reach out to be on the safe side. I've attached a screenshot for reference.... Enjoy the evening.

-Jamond Turner