# Creating a game using events
You don waka ever wonder how websites sabi when you click button or type for inside textbox? Na the magic wey dey inside event-driven programming! Wetin better way to learn dis important skill than to build something useful - typing speed game wey dey react to every keystroke wey you do.
You go see for yourself how web browsers dey "talk" to your JavaScript code. Every time you click, type, or move your mouse, the browser dey send small messages (we dey call dem events) go your code, and na you go decide how to respond!
By the time we finish here, you go don build real typing game wey dey track your speed and accuracy. More importantly, you go understand the fundamental concepts wey dey power every interactive website wey you don ever use. Make we dive inside!
## Pre-Lecture Quiz
[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/21)
## Event driven programming
Think about your favorite app or website - wetin make am feel alive and responsive? Na everything about how e dey react to wetin you do! Every tap, click, swipe, or keystroke na wetin we dey call "event," and na there the real magic of web development dey happen.
This na wetin make programming for web dey interesting: we no sabi when person go click that button or begin type for inside textbox. E fit click immediately, wait five minutes, or maybe no click at all! This unpredictability mean say we need to think differently on top how we dey write our code.
Instead of writing code wey go run from top to bottom like recipe, we dey write code wey just siddon wait patiently for something to happen. E be like how telegraph operators for 1800s dey siddon near their machines, ready to respond the moment message show for the wire.
So wetin be "event"? Simply put, na wetin happen! When you click button - na event be dat. When you type letter - na event be dat. When you move your mouse - na another event be dat.
Event-driven programming let us set our code to listen and respond. We dey create special functions wey we dey call **event listeners** wey go wait patiently for specific things to happen, then come rush into action when dem happen.
Think event listeners as doorbell for your code. You set the doorbell (`addEventListener()`), tell am which sound to listen for (like 'click' or 'keypress'), then specify wetin suppose happen when person ring am (your own custom function).
**Dis na how event listeners dey work:**
- **Listen** for specific user actions like clicks, keystrokes, or mouse movements
- **Run** your custom code when the specified event happen
- **Respond** immediately to user interactions, create smooth experience
- **Handle** multiple events on same element using different listeners
> **NOTE:** E good to know say plenty ways dey to create event listeners. You fit use anonymous functions, or create named ones. You fit use different shortcuts, like to set `click` property, or to use `addEventListener()`. For our exercise, we go focus on `addEventListener()` and anonymous functions, as na the most common way web developers dey use. E get plenty flexibility too, as `addEventListener()` dey work with all events, and event name fit dey passed as parameter.
### Common events
Even though web browsers get plenty different events wey you fit listen to, most interactive apps rely on just few important events. To sabi these main events go give you foundation to build better user interactions.
You get [dozens of events](https://developer.mozilla.org/docs/Web/Events) wey you fit listen for when you dey create app. Basically anything wey user do on page go raise event, this one dey give you plenty power to make sure dem get the experience you want. Luckily, you go normally need only small handful of events. Here some common ones (including the two we go use for making our game):
| Event | Description | Common Use Cases |
|-------|-------------|------------------|
| `click` | User click on something | Buttons, links, interactive elements |
| `contextmenu` | User click right mouse button | Custom right-click menus |
| `select` | User highlight some text | Text editing, copy operations |
| `input` | User input some text | Form validation, real-time search |
**To understand these event types:**
- **Trigger** when users interact with specific elements on your page
- **Provide** detailed info about user's action through event objects
- **Enable** you to create responsive, interactive web apps
- **Work** consistently across different browsers and devices
## Creating the game
Now wey you don understand how events dey work, make we take that knowledge put am for practice by building something useful. We go create typing speed game wey go show how event handling dey work and help you develop important developer skill.
We go create game to explore how events dey work for JavaScript. Our game go test player typing skill which be one of the most underrated skills wey all developers suppose get. Fun fact: the QWERTY keyboard layout wey we use today na im dem design for typewriters back for 1870s - and good typing skill still dey very valuable for programmers today! The general flow of the game go be like this:
```mermaid
flowchart TD
A[Player click Start] --> B[Random quote show]
B --> C[Player dey type for textbox]
C --> D{Word finish?}
D -->|Yes| E[Highlight di next word]
D -->|No| F{E correct so far?}
F -->|Yes| G[Make style normal]
F -->|No| H[Show error style]
E --> I{Quote finish?}
I -->|No| C
I -->|Yes| J[Show success message with time]
G --> C
H --> C
```
**Here na how our game go work:**
- **Start** when player click start button and display random quote
- **Track** player typing progress word by word in real-time
- **Highlight** the current word to guide player focus
- **Provide** immediate visual feedback for typing errors
- **Calculate** and display the total time when the quote complete
Make we build our game, and learn more about events!
### File structure
Before we start to code, make we organize ourselves! To get clean file structure from the beginning go save headache later and make your project look professional. 😊
We go keep am simple with just three files: `index.html` for page structure, `script.js` for all our game logic, and `style.css` to make everything fine. Dis na classic trio wey dey power most web!
**Create new folder for your work by opening console or terminal and run dis command:**
```bash
# Linux or macOS
mkdir typing-game && cd typing-game
# Windows
md typing-game && cd typing-game
```
**Here na wetin these commands go do:**
- **Create** new directory wey dem call `typing-game` for your project files
- **Goto** the newly created directory automatically
- **Set** clean workspace for your game development
**Open Visual Studio Code:**
```bash
code .
```
**Dis command:**
- **Launch** Visual Studio Code for current directory
- **Open** your project folder inside editor
- **Provide** access to all development tools wey you go need
**Add three files to the folder inside Visual Studio Code with these names:**
- `index.html` - get structure and content of your game
- `script.js` - handle all game logic and event listeners
- `style.css` - define visual look and styling
## Create the user interface
Now make we build the stage where all our game action go happen! Think am like to design control panel for spaceship - we need make sure everything wey our players need dey for place wey dem expect.
Make we think wetin our game really need. If na you dey play typing game, wetin you go want see for the screen? Here na wetin we go need:
| UI Element | Purpose | HTML Element |
|------------|---------|-------------|
| Quote Display | Show the text to type | `
` with `id="quote"` |
| Message Area | Show status and success messages | `
` with `id="message"` |
| Text Input | Where players type the quote | `` with `id="typed-value"` |
| Start Button | Begin the game | `