DEV Community: Danarkey

The react pokedex pages

Danarkey — Fri, 17 Nov 2023 03:45:11 +0000

For a final post I feel like I should discuss the pages themselves and how they render the way they do.

Pokedex page

How it works:

Import statements
Functional component declaration for Pokedex component
State hooks to create and manage state variables (when a component needs to “remember” some information between renders) within the pokedex component
getAllPokemons function is responsible for fetching data about Pokemon from the PokeAPI. It updates the state with the fetched data and the URL for the next set of Pokemon.
Modal interaction functions to make it visible/hidden
useEffect hook is used here to run the getAllPokemons function when the component mounts (due to the empty dependency array []). This ensures that the initial set of Pokemon is fetched when the component is first rendered.
JSX structure that defines how the component is rendered
Export statement

Favourites page

Again the favourites page functions a little differently as it is fetching data from the json server rather than the API. Here is the code breakdown of the page:

How it works:

Import statements
Functional component declaration for the Favourites component
The useState hooks create and manage state variables within the Favourites component. State allows the component to keep track of data that may change over time.
The useEffect hook is used here to run the fetchFavourites function when the component mounts (due to the empty dependency array []). This ensures that the list of favorite Pokemon is fetched when the component is first rendered.
Function to fetch favourite pokemon data - updates the state with the fetched data
Modal interaction functions - open and close
Function to update favourite pokemon - passed down to the FavouritesModal component. It updates the state with the latest list of favorite Pokemon after a Pokemon is added or removed.
JSX structure to render the component
Export statement

Final thoughts

So that pretty much sums up the entire project and how I was able to make it. Big thanks to Albert for being an amazing mentor. If you want to check out the app you can access it here: https://p2-app.vercel.app/pokedex

React pokedex - FavouritesModal

Danarkey — Fri, 17 Nov 2023 03:30:26 +0000

Welcome back! From the previous post we are going to be discussing the FavouritesModal and how it differs from the PokemonModal when in reality they look indentical.

The problem

As was previously mentioned, I couldn't simply use the same component in the same way as this page was fetching the data from the json server rather than the API.

Now I'm sure there's a way to incorporate both so that you are saving just the pokemon's name in the backend and then you can fetch the relevant data from the API, however I couldn't figure that out and I was pulling out my hair at the best of times.

So to get around that, all of the data that was being rendered on the modal I decided to pass to the json server so that we could simply get that data and render it on a new component.

The code

Here is the code for the FavouritesModal.jsx

How it works:

Import statements
Functional component declaration for pokemon, closeModal function, favourites and updateFavourites
Type color mapping that maps pokemon types to specific colours
Set default background colour to gray again if a type can’t be identified
useState hook to create a piece of state (isInFavourites) and a function (setIsInFavourites) to manage whether the current Pokemon is in the user's favourites
useEffect hook checks whether the current Pokemon is in the user's favorites and updates the state accordingly whenever the favourites array or the pokemon.id changes
handleFavourites function is responsible for handling the addition or removal of a Pokemon from the user's favorites. It uses the fetch function to communicate with a server. If the Pokemon is already in the favorites, it removes it; otherwise, it adds it
JSX structure for the modal component
Export statement

Closing remarks

So that's the favourites modal for ya. Again I'm sure there's a more efficient way to do this so that you don't need a separate component but I found this method the easiest for myself!

React pokedex - component breakdown

Danarkey — Fri, 17 Nov 2023 03:19:51 +0000

The first proper component (sorry header and footer) I would need to create are the pokemon cards that would appear on the page. The plan was that the cards would have the dex number, image, name and the typing of pokemon.

Once these cards are clicked a modal would pop up with more information and favourites button.

Creating the pokemon card component

I know I wanted each card to be coloured with the corresponding type of each pokemon so we had to include some sort of styling variable.

Pokemoncards.jsx:

The breakdown of how it works is here:

Functional component declaration that takes in the data parameters of id, image, name, type and openModal function.
CSS class name styling that combines the ‘type’ property with the string “card-container”
JSX structure for the content
The outermost has a class name assigned based on the style variable we defined earlier. It also has an onClick event that triggers the openModal function when the component is clicked.
Inside this container, there's another displaying the Pokemon number (#0{id}).
Depending on whether there's an image ({img ? ... : ...}), it renders either an tag with the Pokemon image or a paragraph (
) saying "No image available."
Finally, there's another containing the Pokemon's name and type
Export statement so that the PokemonCard component can be used in other parts of the application

In my App.css file I had declared a hex value for each pokemon type so that the cards would be coloured depending on that. In the future I would love to add some sort of colour effect for pokemon with multiple types. I had seen some people do a gradient if the pokemon was dual typed where the top of the card was one colour blending into a new colour at the bottom.

Creating the pokemon modal component

Unfortunately the pokemon modal component proved more difficult than the pokemon card which led me to having to create separate components for the favourited component and you'll see why shortly.

PokemonModal.jsx:

How it works:

Functional declaration for parameters pokemon, image, type and the closeModal function
Object typeColorMap maps the pokemon types to specific colors
modalStyle variable sets the background colour to gray if a type can’t be identified
useState hook to create a piece of state isInFavourites and a function setIsInFavourites to manage whether the current pokemon is in the user’s favourites
useEffect hook is used to fetch data when the component mounts or the pokemon.id changes – it checks if the current pokemon is in the user’s favourites and updates the state accordingly
handleFavourites uses the fetch function to add or a remove a pokemon from the users favourites
JSX structure to render the component

Closing remarks

As you can see the initial modal is fetching the data from the pokemon API. Once you add the pokemon to favourites the favourites page is using the information in the db.json file rather than the API.

To work around this I passed each of the rendered values for the pokemon to the json server so that the new modal can use that data to produce the component that looks the same.

In the next post I'll go over the favourites modal and how that works.

Planning the react pokedex

Danarkey — Fri, 17 Nov 2023 02:52:16 +0000

Having had no prior react experience this project was proving quite a challenge as I wasn't able to fall back on past knowledge. From such I found this project the hardest as it was learning something completely new and applying that learning.

Like with all problems though the best way to start is to plan an action of attack.

What should it do?

As previously stated I had acquired the json file of all competitive pokemon movesets and wanted users to be able to view them save them for later.

Spoiler alert we didn't manage to do that as it was taking me far too long to do the basics.

So the functionality I settled on was that it would be a card like list that featured the full 1010 entries that would load on a 24 card basis.

If a user clicks on a pokemon a modal will appear with its name, stats and the option to add to favourites. If the pokemon is already in favourites the button will change to remove and users can delete its entry. There will be a favourites page where users can view their favourited pokemon.

Getting started

With the functionality plan sorted it was time to start. First step creating a new react app in my console and installing the relevant node modules such as router for the navigation.

Initially I started building everything out in the App.jsx component which I came soon to realise would be a headache to transfer everything.

I shortly changed to the page approach and had a Pokedex and Favourites page. With the structure sorted it was time to plan the components.

Components

The components I created for this app were the:

Header
Footer
Individual pokemon cards
Load more button
Pokemon modal
Modal background overlay
Favourited pokemon modal

I know looking at the list you can see a double up on the modal and then a modal overlay sitting there as well but how I had set up the initial modal made it much harder for that functionality to work for the favourited section.

Closing remarks

In the next post I'll go over the modals and cards as the header and footer were pretty basic.

The react pokedex project

Danarkey — Fri, 17 Nov 2023 02:43:18 +0000

The final project of the front end web dev course with Academy Xi was to create a web app using react. There were a few requirements that also needed to be fulfilled to ensure that the knowledge that we learnt from the course was applied.

Requirements

Create a single page application using create-react-app
Have 5 components to ensure the code is organised
Use React Router to have at least 3 client-side routes
Include a nav bar or other UI navigation elements
Use a json-server to create a RESTful API for the backend
Add some styling to make it aesthetically pleasing

Starting off

Having just finished the phase 1 project which was using javascript to connect and fetch data from the pokemon API - I wanted to use that previous knowledge to my advantage.

I decided to create a new pokedex app but this time using react. During our online sessions we had discussed using hooks to add and remove entries from our db.json file to act as a favourites section.

My initial plan was to get the external smogon json movesets for each pokemon and apply that to each card for the pokemon. Allowing users to view competitive battle sets and save them for later. However my ambition got the best of me and ended delaying the final product where I had scrapped that functionality entirely.

Closing remarks

In the next post I'll go through my planning phase and how I set up the app initially and the styling choices I ended up going with.

Bringing it all together - Pokedex Project 5

Danarkey — Sun, 17 Sep 2023 12:18:20 +0000

Thanks for sticking with this series all the way up to here. The fruits of our labour are done and it's time to showcase the final product.

As you can see once a user has input a Pokemon into the search field the species, typing and stats update below.

After the final push into github and making the github pages, the favicon and background image were no longer loading.

This was an easy fix though as I forgot that github doesn't like it when you start your URLs with a /

Future features

In the future I do hope to add in that functionality where you press the speaker button and you can hear the cry of the Pokemon. Unfortunately that isn't apart of the API but I did find an external site that has all of the saved.

Additionally I would also like to have it so that if you click on the dropdown preview, the input field will auto populate. After hours of trying to get that to work I decided to throw in the towel and focus on finishing the other aspects of the project such as this blog series and the video tutorial on how to use the app.

If you want to see the app for yourself you can find it here.

The big part - Pokedex Project 4

Danarkey — Sun, 17 Sep 2023 11:31:18 +0000

Hello and welcome back to the my Pokedex Project blog series. In the last post we explored using Javascript to get a dropdown list option for users when they are searching for a Pokemon. While that was in a different environment, we now need to merge the solutions and make a start on the Pokedex itself.

At the end of the day if the Single Page Application doesn't look good, what's the point of it. Making things look good especially in a CSS sense is arguably one of the most time consuming parts - for me anyway!

Approaching the new problem

If you have read my previous posts you're probably sick of me mentioning my problem solving approach. Luckily for you and me, this first new problem had two paths we could take.

Use an image of a Pokedex and have our code input everything over the top of it
Style it in CSS and make it more responsive

Maybe if I knew what was involved in creating your own elements in CSS and HTML I would've opted for the easier route but man, this part was difficult.

Using an image would've been easier

Now if you're an experienced programmer you'll know what is involved when it comes to creating your own webpage elements such as SVGs. Naive me, did not and was tasked with creating their own functioning Pokedex from scratch for a very important course project.

Having a reference image did help in the fact that we are essentially reverse engineering something and just need to create elements to match those that already exist.

For those of you who are unaware what a Pokedex even is, the following image is what I am referring too.

As you can see there are a lot of small buttons which means creating a lot of elements. Not knowing where to start I had a browse online to see what other people had done as creating a Single Page Application Pokedex is nothing new.

There are heaps out there, so many talented coders who were able to simply create the entire thing from scratch. Others had opted for the easier route of simply using an image for the background and rendering details over the top of that.

Looking at what was involved I came to the conclusion that less is probably more in this case as I need something that works without taking me 5 years to finish.

I decided to strip back on the styling and have two main screens. The left would be where the Pokemon sprite would appear and the right would be where the information appears.

Stripping back the problem and tackling each part of the Pokedex individually definitely made the task a bit easier.

The code

Now the time you have all been waiting for, the CSS code for a Pokedex. How I went about this was to have a background and then render each individual area as a part of the device.

I utilised the before and after tags to better target each individual element and not break it by trying to do it all in one go.

For example here is the styling for the light classes:

.light {
position: relative;
height: 1.5rem;
width: 1.5rem;
margin-top: 1rem;
margin-right: 0.5rem;
border: 1px solid black;
border-radius: 100%;
}

.light::before {
content: "";
position: absolute;
}

.light::after {
content: "";
position: absolute;
}

I could then go into more detail for each individual light on the device as there were going to be a few:

.light-red {
background-color: #ee0707;
}

.light-red::after {
background-color: #ee0707;
}

.left-screen-top .light--yellow {
background-color: #dde214;
}

.left-screen-top .light--yellow::after {
background-color: #dde214;
}

.light-green {
background-color: #91f913;
}

.light-green::after {
background-color: #91f913;
}

.light-blue {
background-color: #0ad1ff;
}

.light-blue::after {
background-color: #0ad1ff;
}

To get the 3D like effect of the device I had seen that someone utilised borders to make a drop-shadow like effect but with the colouring scheme made it look like it was 3D. Once the position of the left bottom part of the screen was aligned that's when we could then give it those borders to give it that effect:

.left-screen-bottom {
position: relative;
height: 78%;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.left-screen-bottom::after {
content: "";
position: absolute;
width: 90%;
height: 100%;
border-left: 2px solid #73121e;
border-bottom: 2px solid #73121e;
border-bottom-left-radius: 20px;
}

As you can see the left screen was broken up into top and bottom where the lights would sit in the top and the main screen would sit in the bottom. Getting this blank screen was step one.

Additional styling then had to be done for the top lights container and the main screen where the sprite would appear. Trying to stick to the original source material as close as possible, I even got the speaker to be on the page.

.main-screen-speaker {
margin-left: auto;
margin-right: 0.5rem;
}

.main-screen-speaker > * {
width: 3.8rem;
height: 0.3rem;
margin-top: 3px;
border-radius: 10px;
background-color: #4d4d4d;
}

By declaring this class, any div that would be made would look like an old plastic speaker line.

I could probably drone on and on about the styling elements but that might take longer than actually doing all of it.

To be honest using resources online really helped me get through this part as trying to do something like this from scratch as a novice proved very difficult!

In the next post I'll go over the final result and future features that I would like to implement.

Pokedex Project 3 - getting a dropdown list

Danarkey — Sun, 17 Sep 2023 11:01:38 +0000

Welcome back to the Pokedex project series! In this post we are going to be exploring getting a dropdown list enabled on our SPA.

The goal is for when users are typing out a Pokemon name into the input field, the entire Pokedex will appear based on the letters they have input thus far. I also was considering having their dex entry and maybe a small sprite appear as well.

Getting started

The first decision I had to make when thinking about the dropdown list was how it should appear on the page and the correct elements I should be using.

As I previously mentioned I had theorised using the element to make the list as it would be an easy solution for people to click on and the value would autopopulate into the input field. However it looked terrible and I wasn't able to change the styling due to how the element works within browsers.

To get around this I decided upon using an unordered list when I would then fetch the Pokemon from the API and have them as list items.

Starting anew

As to not completely destroy what I had previously created I decided to test this dropdown field on a new set of files starting from scratch.

I had a brief understanding of how I could get the elements to populate however I came to a crossroads that lead me down a YouTube tutorial rabbit hole to implement this feature.

First steps

To get started as I mentioned before I started a with a new set of HTML, CSS and JS files as to not ruin what I had already done. The video tutorial I was watching fetched a list of countries and had the filter feature that I was after with the Pokemon.

All I had to do was swap out their API for my own right?

Unfortunately things are never that simple and the solution proved to be a bit more involved.

So going back to our basics we need to break the problem down into smaller little problems and tackle it one step at a time.

Fetch the entire Pokedex list
Load the name of each Pokemon
Filter the list by the text that a user has input

Solving the problem

Breaking the problem down into smaller pieces makes things that seem daunting a lot more manageable, especially when you are just a novice in this area.

We had already tackled fetching the API data once, so yay step one done.

Eventually I came to a conclusion that suited what I was after.

const apiUrl = "https://pokeapi.co/api/v2/pokemon/";

let pokemon = [];
const pokemonListElement = document.querySelector('#pokemon-list');
const pokemonInputElement = document.querySelector('#pokemon-input');

function fetchPokemon() {
fetch(apiUrl + ?limit=1020&offset=0)
.then((response) => response.json())
.then((data) => {
pokemon = data.results.map((x) => x.name);
pokemon.sort();
});
}

function loadData(data, element) {
if (data) {
element.innerHTML = "";
let innerElement = "";
data.forEach((item) => {
innerElement += <li>${item}</li>;
});

    element.innerHTML = innerElement;
}

}

function filterData(data, searchText) {
return data.filter((x) => x.toLowerCase().includes(searchText.toLowerCase()));
}

fetchPokemon();

pokemonInputElement.addEventListener("input", function () {
const filteredData = filterData(pokemon, pokemonInputElement.value);
loadData(filteredData, pokemonListElement);
});

Breakdown of what is happening

Declare our API url for ease of use
Create an empty array to assign values too
Declare our list and element inputs
Fetch the entire 1010 Pokedex list
Load the data from the API where each Pokemon becomes an LI item
Filter the data from the user's input (have included extra measures to not make it case sensitive)
Create an event listener that triggers the list to appear once a user has input something

Styling

Cool now that this input is working we can adjust the styling for it and since it is an unordered list, we can use CSS for this. At the time this is the CSS I had for this test batch:

.autocomplete-input {
padding: 25px 15px;
width: calc(100% - 30px);
border-radius: 1px;
border: none;
outline: none;
font-weight: bold;
background-color: #fff;
}

.autocomplete-list {
position: absolute;
top: 70px;
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #fff;
width: 100%;
max-height: 200px;
overflow-y: auto;
}

.autocomplete-list li {
padding: 15px;
width: calc(100% - 30px);
font-weight: bold;
cursor: pointer;
}

The plan was for it to sit just below the input field and not be too wide as to account for the input field and page length.

Closing items

Thanks for tuning into part 3! In the next edition I will go over how I implemented this into my current environment and how we went about the styling for the Pokedex itself!

Getting into the Pokedex code - Project post 2

Danarkey — Sun, 17 Sep 2023 10:22:03 +0000

Hi there, welcome back to part two of the Pokedex Project series. So far we had gotten to the pitching part of the project where we talked to our mentor to see if what we have planned was feasible and met the criteria for the project.

As mentioned previously, I had done some initial coding leading up to the pitch to better visualise in mine and the mentor's head my plan.

Baby code

To begin the initial coding I wanted to have that input field that would then update the table below once a Pokemon had been selected. Initial styling wasn't important as I just wanted something on a page.

Below was the HTML for that first instance:

Getting the JS to work

After the basic setup of the HTML document I needed to get the code to fetch the Pokemon stats from the name of the Pokemon that the user has input. So following our plan and attack methodology we need to break down the problem into each individual section and find a solution one step at a time.

Set up a const of when a user inputs a Pokemon
Fetch the stats from the API for said Pokemon
Update the table with the stats for each corresponding value

So from those points our initial JS code was looking a little something like this:

const apiUrl = "https://pokeapi.co/api/v2/pokemon/";
const updateStats = (selectedPokemon) => {
fetch(apiUrl + selectedPokemon)
.then((response) => response.json())
.then((data) => {
const stats = data.stats;

  stats.forEach((stat) => {
    const statName = stat.stat.name;
    const baseStat = stat.base_stat;

    const statValueElement = document.getElementById(`${statName}-value`);
    const statBarElement = document.getElementById(`${statName}-bar`);

    statValueElement.textContent = baseStat;
    statBarElement.style.width = `${calculateBarWidth(baseStat)}%`;
    statBarElement.style.backgroundColor = calculateBarColor(baseStat);
  });
})
.catch((error) => {
  console.error("Error fetching API data:", error);
});

};

const searchInput = document.getElementById("pokemon-search");
const datalist = document.getElementById("pokemon-options");

searchInput.addEventListener("input", (event) => {
const searchText = event.target.value.toLowerCase();
datalist.innerHTML = "";

fetch(apiUrl + ?limit=10&offset=0)
.then((response) => response.json())
.then((data) => {
const pokemonList = data.results.map((pokemon) => pokemon.name);
const filteredList = pokemonList.filter((pokemon) => pokemon.includes(searchText));

  filteredList.forEach((pokemon) => {
    const option = document.createElement("option");
    option.value = pokemon;
    datalist.appendChild(option);
  });
})
.catch((error) => {
  console.error("Error fetching API data:", error);
});

});

searchInput.addEventListener("change", (event) => {
const selectedPokemon = event.target.value.toLowerCase();
updateStats(selectedPokemon);
});

At first I was thinking about having a datalist as an option for users to select what Pokemon they want - hence the datalist const but I later scrapped this as you can't style them as they are browser specific.

Adjusting the stats table

Okay so we have our JS to allow users to input a Pokemon name and once they do our event listener will change the values of the table.

I also added an event listener to change any input to all lowercase when searching so that it won't be case sensitive when people are searching.

The next step was the get this table to update in a manner where the bars would be proportional for their value and I wanted for them to be a different colour ranging from a red to green dependent upon if the value was low to high.

The bar width takes the percentage of the stat where 255 is the max and adjusts the bar to the size based on the percentage.

Calculating the bar colour involved taking that value and then returning a hex value. I trailed using ranges to assign the colour but that had inconsistent results for me. In the future I could simplify this but I wanted a decent range of colours for the different stat values.

The Pokedex project

Danarkey — Sun, 17 Sep 2023 09:00:03 +0000

As part of the Front-End web development course with Academy Xi, our phase one project was to create a Single Page Application (SPA). The goal of this project was to bring together our learnings from the course thus far where the front end of the application would be utilising our HTML and CSS skills while we will also be communicating with an API of our choice with Javascript.

We also had to create a video no longer than 3 minutes how to use the SPA as well as a 5 blog post series that documents how we learnt throughout the Javascript Phase of the course.

I have decided to use the blog requirement to showcase how I made the Pokedex and my thoughts along the way.

Project requirements
Planning the features
Pitching the project

Project requirements

Your app must be a HTML/CSS/JS frontend that accesses data from a public API or from a db.json file using json-server. Your API or db.json should return a collection of at least 5 objects with each object having at least 3 attributes. All interactions between the client and the API should be handled asynchronously and use JSON as the communication format. Try to avoid using an API that requires a key. APIs that are free and require no authorization will be easiest to use.

Your entire app must run on a single page. There should be NO redirects or reloads. In other words, your project will contain a single HTML file.

Use at least 3 distinct event listenersLinks to an external site. (3 events of different types) that enable interactivity. What this means is that, if you had 3 click events, that would only count as 1 distinct event and you would need to add at least 2 more. Think search or filter functionality, toggling dark/light mode, upvoting posts, etc. Each of your event listeners should also have its own unique callback function. These must be added using JavaScript's .addEventListener() method. Events embedded into HTML elements and CSS will not count toward the total. Please ask your instructor if you have questions regarding this requirement.

Your project must implement at least one instance of array iteration using available array methods (map, forEach, filter, etc). Manipulating your API data in some way should present an opportunity to implement your array iteration.

Follow good coding practices. Keep your code DRY (Do not repeat yourself) by utilizing functions to abstract repetitive code.

Initial thoughts

After reading the project and browsing the the list of no-auth APIs my initial thought was to use the Pokemon API. Already having a decent amount of Pokemon knowledge stored away, I thought this would be an interesting one to work with.

Planning the features

As with all coding problems the first step after thinking of an idea is to plan out how it should work. Following the steps from our course manual:

Plan out your features
Develop user stories
“As [ a user ], I want [ to perform this action ] so that [ I can accomplish this goal ].”
Features should not need you there to explain them to users
Plan out the structure of your JSON requests

I wanted users to be able to search for a Pokemon in a pokedex like environment. Once they have selected their Pokemon the Pokedex will update with their name, typing, stats and sprite.

Most other Pokedex SPAs tend to just have basic information so I wanted to extend that a bit more and display their base stats. Long-long down the road I could see myself adding in cries for the Pokemon when a button is pressed and potentially having optimal movesets and training spreads to appear as well. But first thing first is to get something down.

Pitching the project

To avoid what happened to my previous project where I misinterpreted what needed to be done, I wanted to pitch the project to our mentor ASAP.

I told him the features I had planned for it and he encouraged me to push forward with the concept and even gave me some pointers for how I could potentially style the stats.

To make the most of the initial pitch, I had put together the basic concept of an input field that once you have typed in a name of the Pokemon, the table below it would update based on their stats.

Closing out

Thanks for reading part 1 of the creation of the pokedex project. Come back and see the other instalments once everything is complete :)

DEV Community: Danarkey

The react pokedex pages

Pokedex page

Favourites page

Final thoughts

React pokedex - FavouritesModal

The problem

The code

Closing remarks

React pokedex - component breakdown

Creating the pokemon card component

Creating the pokemon modal component

Closing remarks

Planning the react pokedex

What should it do?

Getting started

Components

Closing remarks

The react pokedex project

Requirements

Starting off

Closing remarks

Bringing it all together - Pokedex Project 5

Future features

The big part - Pokedex Project 4

Approaching the new problem

Using an image would've been easier

The code

Pokedex Project 3 - getting a dropdown list

Getting started

Starting anew

First steps

Solving the problem

Breakdown of what is happening

Styling

Closing items

Getting into the Pokedex code - Project post 2

Baby code

Getting the JS to work

Adjusting the stats table

The Pokedex project

Table Of Contents

Project requirements

Initial thoughts

Planning the features

Pitching the project

Closing out