Posts

Showing posts with the label Tool

Building a Country Higher or Lower Game

I Built a Country Higher or Lower Game with JavaScript and Country Data I recently built a small browser game called Country Higher or Lower. The idea is simple: the game shows two countries, one population is visible, and the player has to guess whether the other country has a higher or lower population. This project is based on a similar idea to my Pokémon Higher or Lower game, but it feels different in practice. Pokémon stats are fun if you know Pokémon, but countries are much more general. Almost everyone understands the concept immediately. You see two countries, compare them, and make a guess. That is why I think this version works well as a small browser game. It is clean, fast to play, and easy to understand. The player does not need to read a long explanation before starting. The game can be played directly in the browser, and it also works on mobile. You can play the game here: Country Higher or Lower Game The source code is available here: Country Higher or L...

How to Use APIs in a Web Game (Pokémon Example with JSON Optimization)

I built a simple browser game where you compare two Pokémon and guess which one has higher total stats. The idea is simple: you see two Pokémon, choose the one you think is stronger, and then the game checks the real data. The project started as a small JavaScript game using the PokéAPI. At first, the game fetched new Pokémon data directly from the API during gameplay. That worked, but it also created a scaling problem. Every round needed new API requests, and every player would create more requests. To fix that, I changed the project so the game uses a local JSON file instead. The API is still used, but only once during the data-building step. During gameplay, the game loads the prepared JSON file and runs almost completely locally in the browser. Play the Pokémon Higher or Lower Game View Source Code Overview The earlier random Pokémon generator The first approach: fetching data per round ...

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

Image
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 th...

How Websites Fetch Data from APIs with JavaScript fetch()

Image
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, image...

I built a random Pokémon generator while learning JavaScript

Image
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 JavaScrip...