Pokedex Website using HTML and Javascript

Planning
Step 1
This lesson will focus on adding buttons and input fields to our pokedex website

We will learn Javascript code to detect certain actions on HTML elements like clicking a button or sending input.

Untitled

This lesson assumes you completed the "Pokedex Website using jQuery and CSV files" and "Pokedex Website using P5JS and Spritesheets" lesson.

Step 2
Lets start by organizing our html body into div groups and adding some buttons

Add this code inside the body tags in index.html:

2
Check Your Work
Step 3
Save your code

We should see two buttons.

3

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!

Information
Step 4
When Processing creates a canvas it automatically creates it after all the elements inside the HTML body

We can change this by giving the Processing canvas a "parent"

4
Information
Step 5
To give a canvas a parent means we want the canvas to be inside a certain div group

The code:

createCanvas(width, height).parent(divID)

will place the Processing canvas inside a div with a certain id.

6
Step 6
Let's parent our canvas to the appropriate div group

Add this code to the setup function in index.js:

5
Check Your Work
Step 7
Save your code

We should see our buttons below the canvas now!

7
Step 8
Let's make our elements centered to make it look nicer

Add this code to the index.css file:

8
Check Your Work
Step 9
Save your code

Doesn't that look better?

9
Step 10
Let's make two functions that decrease and increase pokemonId

Add this to the bottom of our index.js file:

19
Information
Step 11
We can call a function when clicking a button by using the button's "onclick" event attribute

To do this we have to add some code inside the button tag.

1
Step 12
Let's connect our back function to the back button

Change this code in index.html file:

2
Check Your Work
Step 13
Save your code

Test the Back button and see if the pokemon changes. Make sure pokemonId starts at something above zero to actually see it change.

Challenge
Step 14
Call the next function when the next button is clicked

Very similar to the last step!

4
Check Your Work
Step 15
Save your code

The next and back button should both work!

Planning
Step 16
Since it's hard to scroll through every pokemon by clicking a button, let's make it easier to jump around

We will be using an input element to let the user type the pokemon ID they want to jump to.

7
Step 17
Let's add an input and button element to our website

Add this code to index.html:

5
Check Your Work
Step 18
Save your code

We should see the input and button below our canvas

6
Information
Step 19
We can access the input value using Javascript code

We need to get the reference to the input element using the id name

8
Step 20
We now need to make a function that will change the pokemonId to the input value

Add this code to index.js:

7
Challenge
Step 21
Call the "checkID" function when the button is clicked

HINT: Look at how we did it for the back and next button

8
Check Your Work
Step 22
Save your code

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!

9
Information
Step 23
The value is a string (word, not a number) and adding to a string means joining it

So when we made pokemonId equal to a string, it will now join a variable when we try to add it.

10
Step 24
We can solve this by converting the value into a integer number

Change this code inside our function:

12
Check Your Work
Step 25
Save your code

The data bug should now be fixed!

13

The lesson is now done! The rest of the steps are optional.

Challenge
Step 26
BONUS: Add some fixes when checking the search value

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.

14
Challenge
Step 27
BONUS: Add some CSS code to make the website look nice
Untitled
Pokedex Website using HTML and Javascript Info

Account

MVCode Clubs

Created By

Missing tiny aaronjau101

Course:

Pokedex Website

Access Level

public

For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach