Our project this week was to create an app using react using API data within.
We decided to build a Snake Game with tipping our hats to the Nokia days - Keep your eyes peeled for the easter 🥚...
In this game you will never be defeated by react 🧘
- Clone the repo
npm i
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
-
Fetch github users profile image
-
Create basic HTML page
Logo (it could anchor tag that on click runs the reset() function - acting like a home button?)
Template/ React render():
Profile image (Name) - response from API
Form/input box with submit button - fetch request
Create Grid
- flexbox : container
- containing a
snake-grid
div - containing a grid of
div-items
Snake (With profile picture)
Snake food
- Append profile image to snake head
Append a random follower profile image to the food item
Reset button
-
Handle forms and inputs in React https://github.com/oliverjam/learn-react/tree/main/05-transform-the-form
-
Working with the github API in React
https://github.com/sofiapoh/react-dynamic-data-workshop
Javascript’s initial setInterval wasn't great with hooks so we've used useInterval, a custom React Hook that provides a declarative setInterval.
useInterval(callback, delay);
It takes a callback
parameter, function that will be called every delay
milliseconds
This delay
parameter is a number representing the delay in msecs. Set to null to "pause" the interval.
- Netlify link hasn't updated to the master branch - Any tips on this would be appreciated
- A manual refresh is needed to restart the game
- React
- JS
- CSS
- Whimsical