DEV Community 👩‍💻👨‍💻

Cover image for How I Created a Pokedex with CSS
Oryam
Oryam

Posted on • Updated on

How I Created a Pokedex with CSS

A small CSS & HTML Drawing poject

  1. Planing
  2. Start Coding
  3. Adding curved lines
  4. Adding some Javascript

See it on Codepen

Planning

Found a sample image to mock on google.

Alt text of image

Then arranged the basic layout.(using draw.io)
Alt Text
I used a grid for the main structure and most of the sections in the grid as a flex-box.
I also colored parts I thought would share the same properties so I could try to reuse some classes.

Start Coding

I started to write the left panel, everything got pretty good as planned, up to the navigation button.
I couldn't remove the border of the top rectangle in the middle.

Alt Text

So, I google it.
I found a way to make it work by adding borders with the same color as the button background and position them so they cover the original border.

HTML

<div class="nav-button">
    <div class="nav-center-circle"></div>
    <div class="nav-button-vertical"></div>
    <div class="nav-button-horizontal">
        <div class="border-top"></div>
        <div class="border-bottom"></div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

.border-top {
  border-top: 3.5px solid var(--main-buttons-color);
  position: absolute;
  top: -3px;
  left: 20px;
  right: 19.5px;
}
.border-bottom {
  border-top: 3.5px solid var(--main-buttons-color);
  position: absolute;
  top: 11px;
  left: 20px;
  right: 19.5px;
}
Enter fullscreen mode Exit fullscreen mode

Finally it looks like that:

Alt Text

Adding curved lines

At first I tried to use the same method with the borders, but it didn't work as planned (mainly because of the positioning).
I found out about SVG drawing and it turned out to be a good solution.

<svg height="100" width="225" class="left-svg">
    <polyline
     points="0,75 70,75 90,38 224,38"
     style="fill: none; stroke: black; stroke-width: 3"
     />
</svg>
Enter fullscreen mode Exit fullscreen mode

Alt Text

For the right panel I used the same technique.

For cutting the right panel border I used pseudo element:

#right-panel {
  background-color: var(--main-bg-color);
  box-sizing: border-box;
  position: relative;
  height: 100%;
  width: 50%;
  display: grid;
  grid-template-rows: 24% repeat(4, 19%);
  border-bottom: solid black 3px;
  border-bottom-right-radius: 10px;
}
#right-panel::before {
  content: '';
  position: absolute;
  left: -3px;
  bottom: 0;
  width: 100%;
  height: 265px;
  border-right: solid black 3px;
  border-bottom-right-radius: 7px;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Adding some Javascript

The only thing left is to fetch some data and display it on the screens.
For this I used the pokeapi and some JS

const getPokemonData = (pokemon) => {
  fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon}`)
    .then((response) => response.json())
    .then((data) => {
      let id = ('00' + data.id).slice(-3);
      imageScreen.style.backgroundImage = `url('https://assets.pokemon.com/assets/cms2/img/pokedex/full/${id}.png')`;
      nameScreen.innerHTML = data.name;
      typeScreen.innerHTML = data.types[0].type.name;
      idScreen.innerHTML = `#${data.id}`;
      aboutScreen.innerHTML = `Height: ${data.height * 10}cm Weight: ${
        data.weight / 10
      }kg`;
      inputField.value = '';
    });
};
Enter fullscreen mode Exit fullscreen mode

The full Code is on Codepen

Thanks for reading and I hope you liked it.

Top comments (5)

Collapse
 
robiningelbrecht profile image
Robin Ingelbrecht

Hi Oryam! Thanks for this tutorial. Just wanted to let you know that I used your codepen as an example to build my own pokedex functionality. I credited your work in the readme: github.com/robiningelbrecht/vanill.... Hope you don't mind?

Collapse
 
oryam profile image
Oryam

Wow thanks 😊
Glad to hear you found it useful

Collapse
 
henrybrown profile image
HenryBrown

Can you do anything with CSS?
Love spells in dubai

18 Useful Github Repositories Every Developer Should Bookmark

18 Useful GitHub repositories every developer should bookmark: everything from learning resources and roadmaps to best practices, system designs, and tools.