HTTP & API's

Making Things Clickable

If you’ve ever clicked something on a webpage that looks clickable… but absolutely nothing happens, you know that weird moment of confusion.

You hover. The cursor changes.
You click again.
Still nothing.

That was me recently while working through some front-end exercises. And weirdly enough, that tiny frustration ended up teaching me a lot about how the browser actually works.

I’m currently learning software engineering and documenting what I build along the way. Two exercises recently helped a bunch of things “click” (literally and figuratively):

• building a multi-select sports picker using DOM events

• building a geocoding tool that talks to a real external API

Both sound small, but they forced me to understand two really important pieces of web development, how to make a page respond to user actions and how to fetch real data from the internet and use it inside your app

Picture this: a grid of 6 sports cards. They look clickable. When you hover, the cursor changes. But when you click... nothing. Crickets. The fix sounds simple, but it taught me something fundamental about how the browser works.

Before writing a single line of JavaScript, I learned to ask: what actually needs to happen?

const sports = document.querySelectorAll('.sport');
 sports.forEach((sport) => { 
 sport.addEventListener('click', (event) => {                                    
  event.currentTarget.classList.toggle('active'
   ); 
 }); 
});

querySelectorAll grabs all matching elements as a NodeList

- forEach loops over each one

- addEventListener('click', ...) attaches a listener that fires on click

- event.currentTarget the specific element that was clicked

- classList.toggle('active') adds the class if absent, removes it if present

The CSS already had .active styles defined. My job was just to wire up the toggle.

One thing that surprised me early on: in JavaScript, functions are values. You can store them in variables and pass them around without calling them. This is huge for cleaning up nested code. The original code had 3 levels of indentation, not ideal. Here's the refactored version:

const toggleActiveClass = (event) => { event.currentTarget.classList.toggle('active'); };

const bindSportToClick = (sport) => { sport.addEventListener('click', toggleActiveClass); };

const sports = document.querySelectorAll('.sport'); sports.forEach(bindSportToClick);

Notice: forEach(bindSportToClick) ,no parentheses after bindSportToClick. We're passing the function itself as a callback, not calling it. This tripped me up the first time, but once it clicked , it felt like a superpower.

Talking to the Internet

An API (Application Programming Interface) is basically a door into someone else's server. You send a request in a specific format, they send data back. In web development, this usually means HTTP requests , the same protocol your browser uses to load every web page you've ever visited. The most common type for fetching data is a GET request. You're not sending anything new to the server, you're asking it to give you something.

In one of the challenges, I had to build a form where a user types an address, hits submit, and sees the GPS coordinates returned , using the Mapbox Geocoding API.

After signing up for a free Mapbox account and getting an API key, the documentation told me I can call:

"https://api.mapbox.com/search/geocode/v6/forward?q=Los%20Angeles&access_token=YOUR-API-KEY"

const form = document.querySelector('form');

form.addEventListener('submit', (event) => { event.preventDefault();
  event.preventDefault();

const address = event.currentTarget.querySelector('input[type="text"]').value; fetchCoordinates(address); 
});

Event.preventDefault() was a revelation. Without it, submitting a form causes a full page reload and wipes all your JavaScript state. To fetch the data, I wrote:

const fetchCoordinates = (address) => { 
 const apiKey = 'YOUR-API-KEY'; 
 const url = `https://api.mapbox.com/search/geocode/v6/forward?            q=\({address}&access_token=\){apiKey}`; 
 fetch(url) 
  .then(response => response.json()) 
  .then(data => { 
    console.log(data); 

    const coordinates = data.features[0].geometry.coordinates; 
    const longitude = coordinates[0]; 
    const latitude = coordinates[1];

    document.querySelector('#coordinates')
     .innerText = `Latitude: \({latitude}, Longitude: \){longitude}`; 
  }); 
};

A few things worth noting:

• fetch() returns a promise, asynchronous code that resolves when the server responds

• .then(response => response.json () ), parses the raw HTTP response into a JavaScript object

• The data is deeply nested, data.features[0].gemetry.coordinates, always console.long(data) first and explore the shape of the response

• Mapbox returns longitude first, latitude second

Going from "user types an address" to "here's a live map with a pin on it" using around 20 lines of code felt genuinely magical the first time it worked. The browser is an event-driven machine. Once that clicked for me, everything started making more sense.

Last Thoughts

Write pseudo-code first. It forces you to think before you type. Functions are values in JavaScript. Pass them around without calling them for cleaner callbacks. Always console log API responses first . I got to see how web pages go from static HTML… to something that actually reacts to users and pulls live data from external services.