Pokedex Website using JQuery with CSV files

Planning
Step 1
Pokedex Website

This lesson is about making a website that will display Pokemon data just like a Pokedex.

1
Information
Step 2
What is jQuery?

jQuery is a Javascript library that can do difficult tasks in small amount of code.

0 s1goua9k1munuapv

Here's a tutorial with more information.

Information
Step 3
What is a CSV file?

CSV stands for Comma-Separated Values and looks like this:

Input file

It is similar to an Excel Spreadsheet (example below) because it has rows of data with each column being a different type of value.

1
Check Your Work
Step 4
Notice that our project has an HTML file named "pokemonData.html"

This will serve as our CSV file with all the pokemon data we will use later.

1
Step 5
Let's start by adding some code to our HTML file

An HTML file needs a head and body tag in order to run some Javascript or jQuery code.

Add this code to your index.html file:

Untitled
Step 6
Lets now add a CDN for jQuery in the header tag

This will let our HTML website know that we will be using the jQuery language later on.

Copy the jQuery CDN and paste it to the head tag:

2 3
Step 7
We now need to tell the body that we will be running code from index.js

Add this code inbetween the body tags:

4
Check Your Work
Step 8
Save your code

You should see the header title in the website:

5
Planning
Step 9
We will now be experimenting with some jQuery code

The main thing to know about jQuery coding is the syntax (the way the code looks).

It looks like this:

4

The selector is the certain element we are targeting and the action is what we want to do with that element.

Step 10
Let's add a simple line of jQuery code to our Javascript file

Add this code to the index.js file:

6
Information
Step 11
The code we added is telling any <h1> tag to hide

Remember the selector and action syntax from above?

7
Check Your Work
Step 12
Save your code

You should now see nothing on our website because our h1 tag is now hidden.

8
Step 13
Let's replace our jQuery code with something more sophisticated

Change your index.js to look like this:

9
Information
Step 14
This jQuery code is an example of an action that can accept parameters

The click() action can accept a function that will run when the selector is clicked.

10

Notice that the parameter function is running the code we created originally except this is our selector which is referring to the h1 tag that was clicked.

Check Your Work
Step 15
Save your code

Try clicking on your header title and it should hide

Challenge
Step 16
Try changing the jQuery code to make it change the header's color when it is clicked

HINT:

You will only need to change the code inside the function parameter.

You may want to look at this website to learn about the css() action.

Planning
Step 17
We will now be using jQuery to receive information from another website

It will be similar to using a phone:

Send a signal to receiver and ask for connection.

Receiver accepts connection and now they can communicate.

11
Information
Step 18
To send and receive information from different websites we need to use AJAX

AJAX is a tool that can exchange data across different websites.

Here's the syntax of the ajax() action:

14

The selector is left empty because it is not necessary.

The action is ajax().

The parameter is an object (notice the curly brackets {}).

The object parameter accepts many settings but we will be using only two: The URL of the website we want to access and a function we want to call if we succesfully connect.

Step 19
Let's add some jQuery code using AJAX to access our data from pokemonData.html

Add this code:

12
Check Your Work
Step 20
Save the code and then open the console to see if our message appeared

Here's a three step process of opening the console:

13

If you see "Success!", then you have successfully transferred the data.

Step 21
To see the actual data we transferred, we need to use the variable "result"

Print out the result to our console instead of "Success!"

15
Check Your Work
Step 22
Save your code

We should now see the data in our console.

17
Planning
Step 23
One problem is that our data is one SUPER long string (or word)

We will need to use string functions to break it up into rows and columns.

Essentially, this is what result currently represents:

18

However, we want it to represent this:

19
Information
Step 24
Strings have a function named "split()" that will be very helpful

It splits a string at a certain character into an array.

Here's an example where we split a string at the space character " ":

20
Step 25
We will make a function that will split our CSV data into arrays

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

21

Note that we are splitting the data using the new line character "\n", so it will return an array of each line.

We are also printing the number of lines to the console.

Step 26
We will also need to tell our AJAX function to use the organizeData function

Change this code:

22
Check Your Work
Step 27
Save your code

The console should now show 152 representing the number of lines in our data.

23
Step 28
Let's create a new variable to hold our organized data

Add this code above our organizeData function:

26
Step 29
Let's now push every line into the new variable using a for loop and the print it to the console

Change some code inside of the organizeData function:

27
Check Your Work
Step 30
Save your code

In the console, we should see a big array with 152 lines looking like this:

28
Planning
Step 31
Now that each line is seperated, we want to separate each value from each other.

We can do this by splitting the line at the comma character ","

24
Challenge
Step 32
When pushing the line into the new variable, let's split the line at the comma character

Read the step above to learn how to split at the comma character.

29
Check Your Work
Step 33
Save your code

The console should now show a big array holding smaller arrays for each line like this:

30
Planning
Step 34
As well as receive information, jQuery can also send information to HTML files

In the next few steps, we will be creating a table with our pokemon data using jQuery.

31
Step 35
Let's start by adding a "div" element with the id "pokemonTable"

Add this code to our index.html file:

32
Information
Step 36
We can now use the jQuery action append() to add to this "div" element

The selector needs to be the id name of the div and the parameter will be added inside.

33
Step 37
Let's create a new function that will be create a table and append it to the "div" element.

For now we will only be adding a h2 title to the pokemonTable div.

Add this function and call it inside index.js:

34
Check Your Work
Step 38
Save your code

Our website should display the new title for the table.

35
Information
Step 39
To make a table in HTML, we need to use three different elements.

The tag table creates a table.

The tag tr creates a row in the table.

The tag td creates a data in the row.

The HTML code looks like this:

1

And it will display this:

2
Step 40
Let's start by adding the table tags to create a table

Add this code to the createTable function:

4
Challenge
Step 41
Let's now use a double for loop to add all the data and rows to our table.

Add this new code inbetween the table's start and end tags and fill in the blanks:

5

HINT: The blanks are where we need to add the start and end tags for the td and tr. Look at table diagram above for more help.

Check Your Work
Step 42
Save your code

You should see the table with evenly spaced out data

6
Step 43
Lets add a quick CSS styling to make our table look nice

Add this to our index.html head tag:

7
Step 44
Now lets make our table and data have a thin black border

Add this code to the index.css file:

8
Check Your Work
Step 45
Save your code

The table should look much nicer!

9
Planning
Step 46
This lesson is done!

Using jQuery, we have successfully loaded data from one website and then displayed the data as a table on another website.

The next lesson will focus on P5JS code to creates Sprites for each Pokemon and display a specific Pokemon's image and stats.

10
Pokedex Website using JQuery with CSV files 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