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.
Top comments (0)