Add this code inside the body tags in index.html:
We should see two buttons.
You may be asking:
"Why are they on top of the canvas when we clearly wrote the code for the buttons after we created the canvas?"
Let's find out!
We can change this by giving the Processing canvas a "parent"
will place the Processing canvas inside a div with a certain id.
Add this code to the setup function in index.js:
We should see our buttons below the canvas now!
Add this code to the index.css file:
Doesn't that look better?
Add this to the bottom of our index.js file:
To do this we have to add some code inside the button tag.
Change this code in index.html file:
Test the Back button and see if the pokemon changes. Make sure pokemonId starts at something above zero to actually see it change.
Very similar to the last step!
The next and back button should both work!
We will be using an input element to let the user type the pokemon ID they want to jump to.
Add this code to index.html:
We should see the input and button below our canvas
We need to get the reference to the input element using the id name
Add this code to index.js:
HINT: Look at how we did it for the back and next button
Try searching a number between 0 to 150. The correct sprite appears but the data is wrong!
When we input "1", it shows the data for pokemon "11". Searching "2" shows "21". Anything after 15 has an error. Let's investigate!
So when we made pokemonId equal to a string, it will now join a variable when we try to add it.
Change this code inside our function:
The data bug should now be fixed!
The lesson is now done! The rest of the steps are optional.
The input value should display the actual pokemon's ID that is searched (For example, searching "1" will show Bubasaur).
Also, only change the pokemonId if the value is within the range 1-151.
Created 6 months ago
Teach coding to your students with MVCode Teach
MVCode offers an integrated product designed to teach coding to students.
Learn more about MVCode Teach