Pokémon Higher or Lower Game in JavaScript (From Generator to Game)

I Turned My Old Pokémon Generator Into a Higher or Lower Game

I recently made a small Pokémon Higher or Lower game, and the idea for it actually came from something I built a long time ago.

A few days ago I realized that I can embed my GitHub projects directly into my Blogger site. That made me go back and look through some of my older projects, and one of them was my random Pokémon generator.

That project is already a few years old, maybe two or three years, but it still works. It was also a good base to build something new on top of, because it already had the basic idea: pick a Pokémon, get data from the PokéAPI, and show it on the page.

I wanted to make something simple and fun. Not a big project, not a full game with lots of systems, just something small that I could finish quickly and embed on the blog.

The idea that came to mind was a classic Higher or Lower game. It fits really well with Pokémon because every Pokémon has stats, so you can compare them in a way that feels simple but still interesting.

So I built a small game where you get two Pokémon and you have to guess which one has the higher total stats. After each round you get a new comparison and try to keep your score going.

How the game works

The game is built around one simple question: which Pokémon has the higher total base stats?

Each Pokémon has different stats, like HP, attack, defense, special attack, special defense, and speed. For the game, those values are added together into one total number. That makes it easy to compare two Pokémon without making the rules too complicated.

The player sees two Pokémon, chooses the one they think has the higher total, and then the game checks the answer. If the guess is correct, the score goes up and the next round starts.

That is a simple loop, but it works because Pokémon are already familiar. Even if you do not know the exact stats, you probably have some feeling for which Pokémon might be stronger.

How it connects to the old generator

The original random Pokémon generator was much simpler. It picked a random Pokémon, fetched the data, and displayed the name and sprite.

For the Higher or Lower game, I reused that basic idea, but added game logic around it. Instead of only showing one random Pokémon, the game needs two Pokémon at the same time. It also needs to compare their total stats, track the score, and decide if the player guessed correctly.

So the project went from this:

random Pokémon → show name and image

to this:

two random Pokémon → compare stats → player guesses → update score

That small change makes the project feel much more like a game, even though the code is still beginner-friendly.

Why I used Pokémon data

Pokémon data works really well for beginner web projects because it is visual and structured. You get names, sprites, types, stats, and other information from the API.

The PokéAPI is also public and easy to experiment with. You can request data for a Pokémon and get a JSON response back. That makes it a good API for learning how browser projects can use external data: PokéAPI documentation.

For this game, the most useful part was the stats data. The API gives each Pokémon multiple stat values, and those values can be added together into one total score for the comparison.

The first version used live API requests

The whole project was actually very quick. I think the first version took me around two hours or something like that. It was not about building something complex. It was more about getting back into web development and using something I already had.

At first, the game requested Pokémon data live while the player was using it. That worked, but it was not the best long-term solution.

Every round needed new Pokémon data. That means more fetch requests, more waiting, and more dependence on the API being available. For a small project, that is not a disaster, but it made me think about how the project should work if more people used it.

The JavaScript Fetch API is the browser feature that makes this kind of request possible. MDN has a good explanation of how fetch works here: MDN: Fetch API.

Why I changed the data approach later

After building the first version, I realized that I did not really need to request the same Pokémon data over and over again while people were playing.

Pokémon base stats do not change every second. The game does not need live data for each round. So I changed the project to use a local JSON file instead.

That made the game faster and reduced unnecessary API requests. The browser can load the prepared data directly, and the game can choose random Pokémon from that local file.

I wrote a separate post about that part because it became the most interesting technical lesson from the project: How I used JSON to improve my Pokémon API game.

What I liked about this project

What I liked about this is that it connects directly to my old Pokémon generator. Instead of starting from zero, I could reuse the idea and turn it into something more interactive.

It also reminded me that small projects are useful. Not every project has to become a huge app. Sometimes a small idea is enough to practice JavaScript, work with APIs, and finish something playable.

For me, this was mainly about getting back into building things. I had an old project, I saw a way to expand it, and I turned it into a simple browser game.

Play the game

You can play the Pokémon Higher or Lower game here:

Play the Pokémon Higher or Lower Game

If you are interested in the original generator, you can check it out here:

Open the Random Pokémon Generator

I also wrote a separate post about the Pokémon generator itself and how it works:

Read the Generator Blog Post

Source code

The source code for both projects is available on GitHub:

Game Source Code on GitHub Generator Source Code on GitHub

Final thoughts

This project was not about making something huge. It was about taking an old idea and turning it into something more game-like.

The random Pokémon generator taught me how to fetch and display API data. The Higher or Lower game added comparison logic, scoring, and better data handling.

That is why I like projects like this. They are small, but each one teaches something new.

Sources and further reading

• PokéAPI documentation
• MDN: Fetch API

CD-R vs CD-RW: What’s the Difference and Which Should You Use?

When you want to start burning your own CDs, you will quickly come across two types of discs: CD-R and CD-RW. At first, CD-RW sounds like the better option because it can be reused. But for most people, especially if you want to make music CDs, CD-R is usually the better choice.

The main difference is simple: a CD-R can only be burned once, while a CD-RW can be erased and rewritten multiple times. That makes CD-RW more flexible, but it also comes with some downsides.

What is a CD-R?

CD-R stands for Compact Disc Recordable. It is a write-once disc. Once you burn data or music onto it, the disc cannot be erased and used again.

A CD-R uses a photosensitive dye layer inside the disc. When the burner writes to the disc, the laser changes parts of that layer and creates differences in reflectivity. A CD player or computer drive can then read those differences as data.

Canon has a good technical explanation of this process. They describe CD-Rs as using an organic dye layer, where the writing laser changes the dye and reflective layer so the burned areas behave like the pits on a normal pressed CD. If you are curious about the actual optical technology behind CDs, their explanation is worth reading: Canon Science Lab: CDs and DVDs.

Because CD-R is only written once, it is simple and usually works well for finished CDs. If you want to burn a playlist, make a CD for your car, create a small backup, or make a physical gift, CD-R is usually the safer option.

What is a CD-RW?

CD-RW stands for Compact Disc ReWritable. Unlike a CD-R, a CD-RW can be erased and used again.

It works differently from CD-R. Instead of using a normal dye layer, CD-RW uses a phase-change material. The burner heats this material in different ways so it changes between states with different reflectivity. That is what makes it possible to write data, erase it, and write new data again.

This is one of the more interesting technical differences between the two formats. CD-R is basically about permanently changing a dye layer, while CD-RW is about changing the physical state of a rewritable alloy. Canon explains that CD-RW discs use phase-change alloys that can switch between crystalline and amorphous states when heated by the laser.

That sounds useful, and sometimes it is. If you want to test something, move temporary files, or reuse the same disc several times, CD-RW can make sense.

Why CD-R is usually better for music

If you want to make a music CD, I would usually choose CD-R.

The biggest reason is compatibility. Many older CD players, car stereos, and retro devices are more likely to read CD-R than CD-RW. A CD-RW may be burned correctly and still not play in some devices.

This is especially annoying if your goal is to make a custom playlist for a car or an old CD player. In that case, you do not really care that the disc is reusable. You just want it to work.

Why CD-RW is not always worth it

CD-RW sounds convenient because you can erase it and use it again. But in practice, that feature is not always that useful.

Before reusing a CD-RW, you usually have to erase it first. That takes extra time. CD-RW discs can also be slower to burn, and they are often less compatible with older players.

For normal music CDs, it is usually easier to use a new CD-R instead of rewriting an old disc. Blank CD-R discs are often sold in packs and are usually cheap enough that the write-once limitation is not a big problem.

What about long-term storage?

Long-term storage is a bit tricky because it depends on the disc quality and how the discs are stored. Heat, sunlight, humidity, scratches, labels, manufacturing quality, and even the quality of the first burn can all affect how long a disc lasts.

The Library of Congress has a really useful page about CD-R and DVD-R/RW longevity research. What I like about it is that it does not give one simple fake answer like “all CDs last exactly 50 years.” Instead, it explains that recordable discs are made from different materials, that aging and storage conditions matter, and that actual lifetime predictions are difficult.

Their page also explains the material difference between recordable and rewritable discs: CD-R uses a photosensitive organic dye as the data layer, while rewritable media use a phase-changing metal-alloy film. If you want to go deeper into the preservation side, this is the most interesting source to read: Library of Congress: CD-R and DVD-R/RW longevity research.

In general, I would not treat any burned CD as a perfect archive forever. If something is truly important, keep another backup somewhere else too. But if you are burning music, personal files, or creative projects, CD-R is usually the better choice for something you want to keep.

So which one should you pick?

For most people, I would pick CD-R.

Use CD-R if you want to burn music, make a playlist, use an older CD player, play the disc in a car, or keep the disc for longer.

Use CD-RW if you specifically want to erase and reuse the disc, or if you just want to test something before burning the final version.

That is basically the whole decision. CD-RW is more flexible on paper, but CD-R is usually more useful in real life.

Related guides

If you are getting back into CDs, these guides may also help:

• How to burn a CD on Windows 11
• What to look for in a USB CD burner for laptops
• Are CDs making a comeback?

Sources and further reading

• Canon Science Lab: CDs and DVDs
• Library of Congress: CD-R and DVD-R/RW longevity research
• CLIR: Conditions that affect CDs and DVDs

Are CDs Making a Comeback? Why Physical Music Feels Personal Again

Lately I’ve been getting more into Y2K stuff again. Mostly the aesthetic, some fashion, but also the general feeling from that time.

One thing that keeps showing up in that world is CDs.

Old CD players, stacks of blank discs, burned playlists, shiny cases, handwritten tracklists, and people showing their collections. It reminded me of how normal it used to feel to make your own CDs. You would choose songs you liked, burn them onto a disc, maybe write something on the cover, and suddenly it felt like a real object.

I had not thought about that in years.

So I started wondering: are CDs actually making a comeback, or do they just feel interesting again because everything digital has become so temporary?

Are CDs really coming back?

I do not think CDs are suddenly replacing streaming. Streaming is still the easiest and most common way to listen to music. You open an app, search for a song, and it is there instantly.

But I also do not think CDs feel completely irrelevant anymore. They have become interesting again in a different way. Not because they are the most practical format, but because they are physical, collectible, personal, and connected to a very specific kind of nostalgia.

The music industry is still dominated by streaming. IFPI reported that streaming made up 69% of global recorded music revenue in 2024. Physical formats are much smaller by comparison, and global physical revenue even declined in 2024, partly because CD sales were weaker in some markets.

So when I say CDs feel like they are coming back, I do not mean they are taking over again. I mean they are becoming interesting again as an aesthetic, a hobby, and a way to own music physically.

Why CDs feel interesting again

A big part of it is nostalgia. Y2K fashion, old digital cameras, wired headphones, flip phones, burned CDs, and early 2000s tech all have a very specific visual style. CDs fit perfectly into that world.

They are shiny, simple, and a little imperfect. They feel different from just saving a playlist in an app. A burned CD has limits. You have to choose what fits. You have to make decisions. You cannot just throw every song you ever liked into it.

That limitation is part of the charm. It turns a playlist into something more intentional.

Streaming is easy, but it feels temporary

Streaming is convenient, and I use it too. But it has changed the way music feels. You do not really own the music. You have access to it as long as the platform has it, your account works, and your subscription continues.

Most of the time, that is fine. But it also makes music feel less physical and less personal. Songs can disappear, versions can change, albums can be removed, and your library is tied to a service.

A CD is different. Once you have it, it is just there. You can put it on a shelf, lend it to someone, play it in a car, or keep it as part of a collection.

Burned CDs feel personal

The thing I like most about burned CDs is that they feel handmade. You choose the songs, arrange the order, burn the disc, and maybe write the title by hand.

It is not just a playlist anymore. It becomes a small physical object with a mood attached to it.

That also makes burned CDs a nice creative gift. You can make a playlist for a friend, design a simple cover, write a tracklist, or create a little theme around it. Blank CD sleeves and jewel cases are still easy to find, so it can become a small art project too.

CDs as a creative hobby

Making CDs again also fits into the same creative space as journaling, scrapbooking, mood boards, zines, and physical photo albums. It is low-cost, personal, and a little nostalgic.

You can design your own covers, create themed playlists, write notes, decorate the case, or make a small physical collection around different moods.

There is something nice about having a playlist that does not need an app, an algorithm, or an internet connection. It just exists as a thing you made.

The slightly apocalyptic appeal

There is also a funny part of it that I genuinely like. If everything becomes digital, then physical media starts to feel strangely comforting.

Of course, a CD is not some serious survival plan. You still need a CD player, electricity, and a way to store the discs properly. But there is something satisfying about having music that is not locked inside a streaming service.

It feels like a tiny backup of culture. Maybe not practical in the dramatic apocalypse sense, but emotionally, I get the appeal.

Should you start burning CDs again?

If you only care about convenience, probably not. Streaming is faster, easier, and more flexible.

But if you like physical media, Y2K aesthetics, personal playlists, or creative little projects, then burning CDs again can actually be fun.

You do not need much to start. A basic external USB CD burner and a pack of blank CD-R discs are enough. If you want the CD to work in older players or car stereos, CD-R is usually the safer choice than CD-RW.

If you want to try it, these guides may help:

• How to burn a CD on Windows 11
• CD-R vs CD-RW: what is the difference?
• What to look for in a USB CD burner for laptops

If you already have a burner and just need blank discs, a simple pack of blank CD-R discs is usually enough to get started.

Final thoughts

I do not think CDs are coming back in the same way they existed before streaming. That era is gone.

But I do think CDs are becoming meaningful again for a smaller group of people. They are physical, nostalgic, creative, and personal. And in a world where everything is stored in apps and subscriptions, that makes them feel special again.

Maybe that is the real comeback. Not CDs becoming mainstream again, but people rediscovering why physical music felt good in the first place.

Note: This article contains affiliate links. If you buy through them, I may earn a small commission at no extra cost to you.

Sources

• IFPI Global Music Report 2025: global recorded music revenue and streaming share.
• Reuters report on IFPI 2024 music revenue data and physical format trends.

Fix Stretched UI in Unity: 9-Slice Sprites Explained

If your UI elements in Unity start looking stretched when you resize them, you probably ran into one of the most common beginner problems. You make a button, a panel, or a dialogue box, scale it up, and suddenly the corners look wrong.

This happens because Unity normally treats the sprite like a regular image. When you make it wider or taller, the whole thing gets stretched. That is fine for some images, but it looks bad for UI elements with borders, corners, outlines, or pixel art details.

I made a short video showing the problem and the fix. This post is basically the written version of that video, but with more notes about how I would set up simple UI art as a game developer.

What the problem looks like

Here is what happens when the UI element is resized normally. The corners and borders stretch together with the rest of the image, so the whole thing starts to look distorted.

The actual fix is 9-slice

The fix for this is called 9-slice.

9-slice is one of those classic UI tricks that still feels really smart today. Instead of drawing a separate image for every possible button or panel size, you make one small sprite and tell the engine how it is allowed to stretch.

The corners stay untouched, the edges stretch only in one direction, and the middle fills the rest. That means one small button or panel sprite can be reused at many different sizes without destroying the corners.

This is especially useful in game development, because UI needs to adapt constantly. Menus, dialogue boxes, inventory slots, health bars, buttons, mobile layouts, PC layouts, different resolutions. You do not want to redraw everything manually for every size.

Unity explains this in its manual too. The sprite gets divided into nine areas. The corners keep their size, the edges stretch in one direction, and the center fills the remaining space. The official Unity explanation is here: Unity Manual: 9-slicing.

Setting it up in Unity

First, select the sprite you are using for your button or UI panel in the Project window.

In the Inspector, make sure the Texture Type is set to Sprite (2D and UI). Then open the Sprite Editor.

Inside the Sprite Editor, set the borders of the sprite. These borders tell Unity which parts should not be stretched normally. For a button or panel, you usually want the corners and the outline to stay inside the protected border area.

After setting the borders, apply the changes.

Then go back to the UI element in your scene. In the Image component, change the Image Type from Simple to Sliced.

This is the step that is easy to forget. Setting the borders in the Sprite Editor is not enough by itself. The UI Image also has to use the sliced image type.

Now when you resize the element, the corners should stay clean while the middle and edges stretch correctly.

My recommendation for simple UI art

For beginner game UI, I think pixel art is often a really good choice. Not because every game needs to be pixel art, but because pixel UI is easy to control.

With pixel art, you can make a button or panel very small, keep the design readable, and scale it in a predictable way. You do not need huge textures, complex gradients, or detailed art. A simple border, a clean fill area, and readable contrast are usually enough.

For example, you can make a small 16 by 16 pixel panel or button base. Then you protect the corners with 9-slice and let Unity stretch the center. That small sprite can become a small button, a wide button, or a larger panel.

This is the part that makes 9-slice so useful. You do not need to draw ten versions of the same UI box. You draw one good version and let the engine scale it correctly.

Pixel art import settings

If you are using pixel art UI, the import settings matter a lot.

For a 16 by 16 pixel UI sprite, I would usually set Pixels Per Unit to 16. That way, one Unity unit matches 16 pixels. It keeps the setup easy to understand, especially if you are also using 16 by 16 tiles or sprites in your game.

If your UI sprite is 32 by 32, setting Pixels Per Unit to 32 can also make sense. The important thing is consistency. If your game uses 16 pixel art, use 16. If your game uses 32 pixel art, use 32.

For UI size, I would not make the original sprite huge. Something like 16 by 16, 24 by 24, or 32 by 32 can already be enough for simple pixel UI, because 9-slice handles the scaling. The exact size depends on how detailed your corners and borders need to be.

For a very basic button, 16 by 16 can work. For a nicer panel with more corner detail, 32 by 32 or 64 by 64 gives you more room. I would only go larger if the UI art actually needs the detail.

The main thing is that the corner area needs enough pixels to look good. If the corners are only one or two pixels, the UI can look too simple. If the corners are too large, the button may need a minimum size before it looks right.

If your pixel art looks blurry

There is another common issue that can look similar at first. If your UI is pixel art and it looks blurry, the problem might not be 9-slice. It might be the import settings.

For pixel art, set the Filter Mode to Point (no filter). Unity’s manual describes Point filtering as the option that keeps textures blocky up close, while Bilinear and Trilinear smooth the texture. You can read the official texture import settings here: Unity Manual: Texture import settings.

I would also set Compression to None for pixel art UI. Pixel art does not need texture compression in the same way large realistic textures might. Compression can create artifacts, blurry edges, or strange color shifts. For small UI sprites, saving a tiny bit of memory is usually not worth making the interface look worse.

So if the UI shape is stretching wrong, use 9-slice. If the pixel art looks blurry, check the import settings. For pixel art UI, my default would be Filter Mode set to Point (no filter), Compression set to None, and Pixels Per Unit set consistently with the pixel size of the artwork.

Recommended beginner setup

For a simple pixel art UI setup, this is what I would personally start with:

Use small UI sprites, for example 16 by 16, 32 by 32, or 64 by 64 pixels. Set the Texture Type to Sprite (2D and UI). Use Point (no filter), Compression None, and keep Pixels Per Unit consistent with your art style.

If the artwork is based on 16 pixel tiles or 16 pixel sprites, use 16 Pixels Per Unit. If the artwork is based on 32 pixel sprites, use 32 Pixels Per Unit. For UI, consistency is more important than finding one perfect universal number.

Then use 9-slice for anything that needs to resize, like buttons, dialogue boxes, tooltips, inventory panels, shop windows, or menu backgrounds.

Final thoughts

For normal stretched UI elements, 9-slice is usually the fix. Set the borders in the Sprite Editor, apply the changes, and then set the Image Type to Sliced.

For pixel art UI, also check the import settings. A pixel art sprite can have correct 9-slice borders and still look bad if Unity is filtering or compressing the texture.

This is one of those small game dev techniques that is worth learning early. It saves time, keeps your UI clean, and lets you reuse simple art in a smart way.

Sources and further reading

• Unity Manual: 9-slicing
• Unity Manual: Texture import settings

How a Small Unity Prototype Became My First Steam Game

Frogo Jump was my first finished and released game. It started as a small Unity prototype while I was learning how to build games, but over time it became a complete precision platformer that I eventually released on Steam.

At first, I was not trying to make a commercial project. I was experimenting with movement, simple mechanics, and level design. But once the prototype became playable, I showed it to a few people on my phone, and they actually enjoyed it. That was the moment where I started thinking that this could become more than just a test project.

That small prototype became Frogo Jump.

---

What Frogo Jump is

Frogo Jump is a precision platformer where you play as a frog that fell into a well and has to climb back out. The basic idea is simple: jump from platform to platform, avoid hazards, and keep climbing.

The controls are intentionally minimal. You click or hold left or right, and the length of the input affects how far the frog jumps. There are no complicated combos, no large moveset, and no extra abilities to memorize.

The challenge comes from the level mechanics. Each world changes how the player has to think about movement, timing, and risk.

For example, the first world introduces slime walls. When the frog jumps onto them, it sticks to the surface and can jump again from there. Another world uses desert mechanics, including hot stones that cannot be touched for too long and sand blocks that can be passed through in different ways.

There is also an ice world with slippery surfaces and breakable spikes, plus a Halloween-themed world with invisible platforms, traps, and more dangerous timing-based obstacles. Some platforms move, some disappear, and some instantly punish the player for a bad jump.

So even though the input stays simple, the gameplay changes from world to world.

---

Why I made the game

When I started making Frogo Jump, my main goal was not to create a perfect game. I wanted to finish something.

That sounds simple, but finishing a game teaches completely different lessons than starting one. A prototype can be messy and experimental. A finished game needs menus, levels, polish, bug fixes, testing, a store page, screenshots, builds, and all the small things that are easy to ignore at the beginning.

Frogo Jump became the project where I learned how much work exists between “this idea works” and “this is something other people can actually play.”

I also learned why keeping the core mechanic simple can be useful. Because the frog only has a very small set of actions, I could focus more on designing worlds around that movement instead of constantly adding new abilities.

---

What I learned from finishing it

Looking back, Frogo Jump taught me a lot more than I expected. It helped me understand Unity better, but it also taught me practical lessons about scope, game feel, level design, and releasing a project publicly.

One of the biggest lessons was that finishing a game is its own skill. It is not just about programming or art. It is also about deciding what not to add, fixing boring problems, improving small details, and accepting that the project will never be perfect.

I also learned that the genre matters. Precision platformers are difficult to market, especially for a small indie developer without a large audience. That does not make the project useless, but it did teach me that future projects need to be chosen more carefully if I want them to have better commercial potential.

Even with those limitations, I am still glad I made it. Frogo Jump became proof that I could take a game from a small idea to a real release.

---

Looking back at Frogo Jump

Today, there are many things I would do differently. I would plan the visuals more clearly, think about the audience earlier, and probably choose a genre with stronger market potential.

But Frogo Jump is still important to me because it was my first finished game. It was the project where I stopped only learning from tutorials and started learning from actually building, testing, fixing, and releasing something.

That makes it a valuable project, even if it was not a perfect one.

---

Play or check out Frogo Jump

Frogo Jump is available on Steam. If you want to see the game, screenshots, or store page, you can check it out here:

View Frogo Jump on Steam

I will probably write more about what I learned from making and releasing this game, because finishing a project like this teaches much more than expected at the beginning.

You can also visit my projects page to see more games, browser tools, and coding experiments I have worked on.

How Websites Fetch Data from APIs with JavaScript fetch()

When I first started learning JavaScript, I didn’t really understand how websites actually get their data. I thought everything was just written into the page somewhere.

Then I built a small project where I generated a random Pokémon , and that was the first time I worked with an API.

This post explains what an API is, what a fetch() request does, and what actually happens when a website asks another server for data. I’ll use my random Pokémon generator as the example, because it is simple enough to understand without needing a big project.

What is an API?

An API is a way for one program, website, or app to communicate with another system. In a web project, an API is often a server that gives you structured data when you request a specific URL.

You can think of it like a website made for code instead of people. A normal website gives you a page to read. An API gives your code data that it can use.

For example, PokéAPI has data about Pokémon, including names, images, types, abilities, stats, and more. My website does not store all of that information by itself. It asks PokéAPI for the data it needs.

What is a fetch request?

In JavaScript, fetch() is a built-in browser function that can send a request to another URL. The official MDN Fetch API documentation explains that the Fetch API is used for fetching resources, including across the network.

That URL can point to a normal file, a JSON file, or an API endpoint. When you use fetch(), your website is basically saying:

“Please send me the data from this address.”

The server then responds. If the request works, the response usually contains data. Many APIs send that data back as JSON, which is a common format for structured information.

JSON can look a bit like a JavaScript object. It stores information as names and values, which makes it easier for code to read. The MDN guide to JSON is a good place to learn more about how JSON is used in web development.

What happens when you click the button?

In my random Pokémon generator, there is a button. When you click it, the website runs a small piece of JavaScript.

First, the code creates a random number. That number is used as the Pokémon ID.

Then the code adds that number to a PokéAPI URL. For example, this URL asks for Pokémon number 25:

https://pokeapi.co/api/v2/pokemon/25

After that, JavaScript sends a fetch() request to that URL. PokéAPI receives the request, looks up the Pokémon data, and sends a response back.

The website then reads the response, takes the Pokémon name and image, and displays them on the page.

The code example

This is the simplified version of the code:

let id = Math.floor(Math.random() * 1024) + 1;
let fetchid = "https://pokeapi.co/api/v2/pokemon/" + id;

fetch(fetchid)
  .then(response => response.json())
  .then(data => {
    imgElement.src = data.sprites.front_default;
    output.innerHTML = data.name;
  });

The first line creates a random number between 1 and 1024. The second line builds the API URL by adding that number to the PokéAPI address.

Then fetch(fetchid) sends the request. The MDN documentation for window.fetch() explains that fetch() starts the process of fetching a resource and returns a Promise.

After the response arrives, response.json() is used to read the response body and parse it as JSON. The MDN documentation for Response.json() explains this part in more detail.

After that, the code uses data.sprites.front_default for the Pokémon image and data.name for the Pokémon name. Those values are then placed into the page.

What does the API send back?

The API does not send back a finished webpage. It sends back data.

For PokéAPI, the response contains a lot of information about the Pokémon. The generator only needs a small part of that response, so it uses the name and one sprite image.

This is one of the main ideas behind APIs. You can request a larger data object, then choose the specific parts your website actually needs.

What are API keys?

PokéAPI is nice for learning because you can use many of its endpoints without creating an account or adding an API key. The PokéAPI documentation says that no authentication is required, which makes it easy to test directly in the browser.

Many other APIs work differently. They require an API key, which is usually a long text token connected to your account or project. The API key tells the service who is making the request.

API keys are often used for access control, request limits, analytics, or billing. For example, paid APIs may count how many requests your key makes and charge your account based on usage.

That is why you should be careful with API keys. If a key is private or connected to a paid service, you should not paste it into public frontend code, a public GitHub repository, or a blog post. Other people could copy it and make requests through your account.

The OWASP Web Security Testing Guide explains that sensitive information, including private API keys, can be exposed when it is hardcoded into client-side code.

For public frontend projects, you usually want to use APIs that are safe to call from the browser, or you route secret requests through your own backend so the private key is not exposed to visitors. The OWASP REST Security Cheat Sheet also explains why API keys should not be treated as the only protection for sensitive or high-value resources.

Why this matters

This is how many modern websites work. They do not always have every piece of data written directly into the HTML page. Instead, they can request data when they need it.

That is how websites can show dynamic content, search results, live updates, user information, product data, or information from another service. My Pokémon generator is a very small example, but the basic idea is the same.

Once I understood this, web development made a lot more sense. A website can be more than a static page. It can ask for data, process it, and show something new based on the result.

When live API requests are useful

For a small learning project, requesting data directly from an API is a good way to understand how web development works. You click a button, the website sends a request, and the page updates with new information.

This makes the connection between JavaScript, APIs, and dynamic websites much easier to understand. That is why I think this kind of project is useful for beginners.

But live API requests are not always the best solution for every project. If a game or tool sends a new request every time the user clicks, the number of requests can grow quickly. For larger projects, it can be better to prepare the data once and store it locally as a JSON file.

I used that improved approach later in my Pokémon Higher or Lower game. Instead of fetching new data during every round, the game uses preloaded JSON data for better performance and stability.

You can read more about that here:

How I optimized a Pokémon API game using JSON instead of live requests

Why I used Pokémon

I think this part matters. If you are learning programming, it helps when the project is fun.

Pokémon was an easy choice because it is familiar, visual, and has a public API with useful data. Instead of only printing random numbers or placeholder text, I could generate something recognizable with a name and image.

That made the project more interesting to build and easier to understand. It also gave me a better feeling for how real data can be used inside a small browser tool.

Related project pages

You can try the random Pokémon generator here:

Open the Random Pokémon Generator

I also built a Pokémon Higher or Lower game that uses Pokémon stats in a different way. Instead of generating one random Pokémon, it compares two Pokémon and asks which one has the higher total base stats.

Play Pokémon Higher or Lower

You can also visit my projects page to find more small browser tools, games, and coding experiments.

View my projects

Sources and useful links

These are the main sources and technical references related to this post.

PokéAPI Documentation
Used as the Pokémon data source for this project. The documentation also explains that no authentication is required.

MDN Web Docs: Fetch API
Useful for understanding the browser Fetch API and how websites fetch resources across the network.

MDN Web Docs: Window fetch method
Useful for understanding what fetch() does in JavaScript.

MDN Web Docs: Response json method
Useful for understanding how API responses can be parsed as JSON.

MDN Web Docs: Working with JSON
Useful for learning what JSON is and why it is commonly used for structured data on the web.

OWASP: Review Web Page Content for Information Leakage
Useful for understanding why private API keys and other sensitive information should not be exposed in client-side code.

OWASP REST Security Cheat Sheet
Useful for understanding REST API security basics and why API keys should not be treated as the only protection for sensitive resources.

Final thoughts

This was one of the first projects where I understood that websites are not just static pages. They can request data, process it, and show something new every time.

That is a small idea, but it opens the door to a lot of web development. Once you understand API requests, many things on the internet start to feel less mysterious.

Open Tool Page View Source Code

Disclaimer

This is a fan-made learning project created for educational and entertainment purposes only.

Pokémon and all related names, characters, images, and trademarks are the property of Nintendo, Game Freak, and The Pokémon Company.

This project is not affiliated with, endorsed by, or associated with Nintendo, Game Freak, or The Pokémon Company.

I built a random Pokémon generator while learning JavaScript

I built a random Pokémon generator while learning JavaScript. It started as a small beginner project, but it helped me understand how websites can fetch real data from an API and display it on a page.

Open Tool Page View Source Code

A while ago, when I started learning JavaScript, I made a small project just to understand how websites actually work. Nothing serious, just trying things out and seeing what happens.

Recently I saw a TikTok where someone was building a random Pokémon team using Google’s number generator. And I thought, wait, I already made something like that. So I went back and found this old project again.

It is basically a small website where you press a button and it gives you a random Pokémon. The site picks a random number, sends a request to the PokéAPI, and then shows the Pokémon name and image on the page.

That is all it does, but at the time it felt like a big step. It was one of those small projects where you suddenly realize that JavaScript is not just about changing colors or buttons. It can actually talk to another service and bring real data into your page.

Why I built it

The main reason I built it was because I wanted to understand how websites get data. Before that, most things I made were static. I could write HTML, style things with CSS, and use a bit of JavaScript, but the page itself did not really connect to anything.

This project was different. It used data from outside the website. I did not fully understand APIs yet, but building this helped me get a feeling for the basic idea.

I also think it helps when beginner projects are fun. That is why I chose Pokémon. It is familiar, visual, and easy to understand. If I had used something boring, I probably would not have enjoyed the project as much.

How the generator works

The idea behind the project is very simple.

When you press the button, JavaScript creates a random number. That number is used as the Pokémon ID. Then the page sends a request to the PokéAPI and asks for the Pokémon with that ID.

The API sends back data about that Pokémon, including the name and sprite image. JavaScript then takes that response and updates the page so you can see the result.

So the whole project is basically this:

random number → API request → Pokémon data → update the page

That is a small idea, but it teaches a lot. You learn about random numbers, API requests, JSON data, and changing HTML with JavaScript.

What I learned from it

The most important thing I learned was that APIs are not as abstract as they sound at first.

An API can simply be a place where your website asks for data. In this case, my website asks for a Pokémon, and the PokéAPI gives back information that JavaScript can use.

The PokéAPI documentation is also nice for beginner projects because it is public and easy to test. You can open a Pokémon URL in the browser and actually see the data that comes back: PokéAPI documentation.

This also helped me understand why JSON is useful. The API response is not just random text. It is structured data. Once you understand that structure, you can pick out the parts you need, like the Pokémon name or sprite URL.

Why this is a good beginner JavaScript project

I think a random Pokémon generator is a good beginner project because it is small, but it still feels like a real website feature.

You do not need a complicated design. You only need a button, an image, and a text area for the Pokémon name. But behind that simple interface, you still practice important JavaScript concepts.

You use Math.random to generate a random number. You use fetch to request data from an API. You wait for the response, read the JSON, and then update the page.

MDN has good explanations for these parts if you want to understand the JavaScript behind it: MDN: Fetch API and MDN: Math.random.

How this led to another project

Looking at it now, the generator is still very simple. But it also became the starting point for a bigger idea.

After building this, I later made a Pokémon Higher or Lower game. That project used a similar idea, but instead of only showing a random Pokémon, it compared Pokémon stats and turned the API data into a small game.

That is why I like keeping small projects like this. Even if they are simple, they can become the foundation for something better later.

You can read about that project here: Pokémon Higher or Lower Game in JavaScript.

I also wrote a longer post about how I later changed the Pokémon game from live API requests to a local JSON file, because that became a better solution for performance: How I used JSON to improve my Pokémon API game.

Try the generator

If you want to try it, you can open the tool page here:

Open Random Pokémon Generator

If you want to look at the code, you can find it here:

View the source code on GitHub

Final thoughts

This is not a big project, but that is exactly why I still like it. It is small enough to understand, but useful enough to teach something real.

For me, it was one of the first projects where JavaScript started to feel more powerful. Not just because the page reacted to a click, but because it connected to real data from somewhere else.

If you are learning JavaScript, a small API project like this is a good next step after basic HTML, CSS, and button interactions. It is simple, visual, and gives you that nice feeling of building something that actually does something.

Sources and further reading

• PokéAPI documentation
• MDN: Fetch API
• MDN: Math.random

What to Look for in a USB CD Burner for Laptops

Most modern laptops no longer come with a built-in CD or DVD drive. A few years ago, this was normal hardware, but today many devices are thinner, lighter, and focused on cloud storage, streaming, and USB drives.

Still, CDs are not completely gone. You might still want to burn a music CD, back up files, rip an old album, install older software, or simply use blank discs for a nostalgic physical media project.

For that, the easiest solution is usually a simple external USB CD burner. You plug it into your laptop, insert a blank disc, and use your operating system or burning software to create the CD.

This guide is not about finding the most expensive or most advanced drive. It is about what to look for when choosing a USB CD burner for a modern laptop.

Do you actually need a USB CD burner?

Before buying one, it is worth asking what you want to use it for. If you only want to read old CDs, a basic external CD/DVD drive may already be enough. If you want to create your own music CDs or data discs, make sure the drive can also write or burn discs.

Many external drives are sold as DVD writers, but they can usually also read and write CDs. That is normal, because DVD writers are generally backwards compatible with CDs. Still, it is always a good idea to check the product description for support for CD-R and CD-RW.

CD burner vs DVD burner

The naming can be confusing. A product may be called a DVD burner, DVD writer, optical drive, external disc drive, or USB CD/DVD drive.

For most laptop users, an external USB DVD writer is the practical choice. It can usually handle CDs and DVDs, which makes it more flexible than a CD-only drive. If you only care about burning CDs, just make sure the drive clearly supports CD-R and CD-RW.

What to check before buying

Most USB CD burners work in a similar way, but there are a few things I would check before choosing one.

1. CD-R and CD-RW support

If you want to burn normal one-time discs, look for CD-R support. If you want to erase and reuse discs, look for CD-RW support. Most external DVD writers support both, but it is still worth checking.

2. USB connection

Many external burners use USB-A. That is fine for older laptops and desktop PCs. Newer laptops often use USB-C, so you may need either a USB-C compatible burner or a simple adapter.

Some newer drives include both USB-A and USB-C cables, which can be more convenient if you use multiple devices.

3. Plug and play support

Most modern external burners are plug and play. That means you do not need to install extra drivers manually. You connect the drive, wait a moment, and your laptop should detect it.

If a product requires special software just to be recognized, I would usually avoid it unless you specifically need that software.

4. Build quality

Very cheap USB burners can work fine, especially for occasional use. But cheaper drives may feel less stable, make more noise, or fail more often during burning.

If you only burn one or two CDs, a budget option can be enough. If you plan to use it often, a known brand is usually the safer choice.

5. Portability

Most external drives are small and light, but some are thinner and easier to carry than others. If you want to keep the burner in a laptop bag, a slim model can be more practical.

Common problems with cheap USB CD burners

Cheap external burners can be useful, but they sometimes come with small issues. The most common ones are failed burns, slow writing speed, noisy operation, or weak USB cables.

A failed burn does not always mean the drive is broken. It can also happen because of a bad blank disc, unstable USB connection, or burning at a speed that is too high.

If you run into problems, try a different USB port, use a different blank CD, close other programs while burning, and choose a slower burning speed if your software allows it.

Example options

The examples below are not the only good choices. They are simply common types of USB CD/DVD burners you can look for, depending on your use case.

Simple budget-style USB burner

A basic external USB burner can be enough if you only need it occasionally. This type of drive is usually affordable, lightweight, and easy to store.

The downside is that cheaper models may feel less durable and can sometimes be less reliable during longer burning sessions.

View example on Amazon

Known-brand external DVD writer

If you want something that feels a bit more reliable, a known-brand external DVD writer is usually a safer option than the cheapest no-name drives.

A model like the ASUS SDRW-08D2S-U Lite is a common example of this category. It is simple, not especially fancy, but made for exactly this kind of use.

View example on Amazon

Slim USB-C friendly option

If you use a newer laptop with USB-C, a slim drive with USB-C support can be more convenient. Some models include both USB-A and USB-C cables, which makes them easier to use with different devices.

The actual burning performance is often similar to cheaper models, so the main reason to choose this type is convenience, portability, and design.

View example on Amazon

My simple recommendation

If you only want to burn a few CDs, do not overthink it. A basic external USB CD/DVD writer is enough for occasional use.

If you plan to use it more often, I would choose a known-brand model instead of the absolute cheapest option. It does not need to be expensive, but reliability matters when burning discs.

If your laptop only has USB-C ports, check the cable situation before buying. A drive with both USB-A and USB-C support can save you from needing extra adapters.

Related guides

If you are getting back into CDs, these guides may also help:

• CD-R vs CD-RW: What is the difference?
• How to burn a CD on Windows 11
• Are CDs making a comeback?

Final thoughts

A USB CD burner is not something most people need every day anymore, but it is still useful if you work with old discs, want to burn your own music CDs, or enjoy physical media.

For most people, the best choice is not the most expensive drive. It is the one that supports the disc types you need, works with your laptop ports, and feels reliable enough for how often you plan to use it.

This article contains affiliate links. If you buy through them, I may earn a small commission at no extra cost to you.

How to Burn a CD on Windows 11

Burning a CD on Windows 11 is still possible, even if most modern laptops no longer include a built-in disc drive. You can still create your own music CDs, data discs, backups, or nostalgic custom playlists with a simple external USB CD/DVD burner.

This guide explains what you need, the difference between a music CD and a data CD, how to burn files in Windows 11, and what to do if your CD burner does not show up or the burning process fails.

This article contains affiliate links. If you buy through them, I may earn a small commission at no extra cost to you.

What you need before burning a CD

Before you start, you need three basic things:

• A laptop or PC running Windows 11
• A CD/DVD drive that can write discs
• A blank CD-R or CD-RW disc

If your laptop does not have a built-in disc drive, you need an external USB CD/DVD writer. Many external drives are sold as DVD writers, but they usually also support CDs. Just make sure the product description mentions support for CD-R and CD-RW.

If you are not sure what kind of burner to choose, I made a separate guide here: What to look for in a USB CD burner for laptops.

CD-R vs CD-RW: which blank CD should you use?

For most people, a normal CD-R is the best choice. A CD-R can be burned once and then used like a regular disc. This is usually the better option for music CDs, car CD players, and simple backups.

A CD-RW can be erased and reused, but it is not always as compatible with older CD players. If you are making a music CD for a car or an older stereo system, I would usually choose CD-R instead of CD-RW.

I explained the difference in more detail here: CD-R vs CD-RW: what is the difference?

Music CD vs data CD

Before burning your disc, decide what kind of CD you want to create.

Music CD

A music CD is designed to play in regular CD players, car stereos, and older audio systems. The files are converted into an audio CD format during the burning process. This is the better choice if you want to make a custom playlist that works like a normal album.

Data CD

A data CD stores files like MP3s, documents, photos, or backups. It works more like a USB drive, but on a disc. This is useful if you want to store files, but it may not play in every regular CD player.

Step 1: Connect your USB CD burner

Connect your external USB CD/DVD burner to your laptop or PC. Windows 11 should usually recognize it automatically after a few seconds.

Then insert a blank CD into the drive. If you are making a music CD for a car or stereo system, use a blank CD-R if possible.

Here are examples of the basic items you need:

• External USB CD/DVD burner example
• Blank CD-R discs example

Step 2: Open Windows Media Player

For a simple music CD, open Windows Media Player on Windows 11. You can search for it from the Start menu.

In Windows Media Player, look for the Burn tab. This is where you can create a burn list and start writing your files to the disc.

Your connected USB burner should appear as the selected drive. If it does not show up, check the troubleshooting section below.

Step 3: Choose audio CD or data CD

In the burn settings, choose the type of disc you want to make. If you want the disc to work in regular CD players, choose an audio CD option.

If you only want to store files, choose a data CD option instead. A data CD is useful for storing MP3 files, photos, documents, or backups, but it may not work in every audio CD player.

Step 4: Drag your files into the burn list

Drag the songs or files you want to burn into the burn list area. For music CDs, MP3 files are usually the easiest starting point.

Keep in mind that a normal audio CD is limited by playing time, not just file size. Most blank CDs hold around 80 minutes of audio. If you add too many songs, you may need to remove some before burning.

Only burn music you own or have the legal right to use. You can use music from legal downloads, your own recordings, or files you created yourself.

Step 5: Start burning the CD

Once your burn list is ready, click Start burn. Windows will begin writing the disc.

Do not remove the CD or unplug the burner while the process is running. Depending on the number of files and the speed of the drive, burning can take a few minutes.

When the process is finished, Windows should eject the disc or show that the burn is complete. After that, you can test the CD in your laptop, car, stereo, or another CD player.

How to burn a data CD on Windows 11

If you want to burn a data CD instead of a music CD, you can usually do it through File Explorer.

1. Insert a blank CD into your burner.
2. Open File Explorer.
3. Select the files you want to put on the disc.
4. Right-click and choose the option to send or burn the files to the disc.
5. Follow the Windows instructions to finish the disc.

A data CD is useful for documents, photos, MP3 collections, small backups, or moving files to an older computer. But if you want a disc that plays like a normal album, use the audio CD method instead.

Common problems and fixes

The CD burner does not show up

Try unplugging the burner and connecting it again. If possible, use a different USB port. Some external drives also work better when connected directly to the laptop instead of through a USB hub.

The burn fails before finishing

A failed burn can happen because of a bad blank disc, an unstable USB connection, or a writing speed that is too high. Try another blank CD and close other programs while burning.

The CD does not play in a car or stereo

Make sure you created an audio CD, not just a data CD with MP3 files. Some older players also have trouble with CD-RW discs, so a CD-R is usually the safer choice.

There is not enough space on the disc

For audio CDs, the limit is usually around 80 minutes of music. If your playlist is too long, remove a few songs and try again.

The CD plays on the laptop but not elsewhere

This can happen if the disc was not finalized correctly or if the player does not support the disc type. Try burning the CD again as an audio CD and use a normal CD-R.

Tips for better burned CDs

• Use CD-R for better compatibility with older players.
• Use a slower burn speed if your software allows it.
• Do not move or unplug the drive while burning.
• Test the CD before making covers or labels.
• Keep the disc clean and store it in a case.

Why burning CDs is still fun

Burning a CD is not just about storage. It can also be a fun way to make a physical playlist, create a small gift, or bring back the feeling of actually owning your music.

If your car still has a CD player, try making a custom playlist for it. You can give each disc a name, design your own cover, and build a small physical music collection again.

Related guides

If you are getting back into CDs, these guides may also help:

• What to look for in a USB CD burner for laptops
• CD-R vs CD-RW: what is the difference?
• Are CDs making a comeback?

Final thoughts

Burning a CD on Windows 11 is still simple once you know what kind of disc you want to make. For a normal music CD, use Windows Media Player and create an audio CD. For files and backups, use a data CD instead.

A basic USB CD/DVD burner and a pack of blank CD-R discs are enough to get started. The main thing is choosing the right disc type, using files you have the right to burn, and testing the CD after it is finished.