Project 23: Weather Widget

HTML Masterclass

Builds on these lessons

Api History Api Url Api Notifications Api Permissions

Step 1 of 3

Project

Widget Skeleton & City Search

Build a <form action="/weather" method="GET"> with a city search input. Submitting a GET form appends its fields to the URL as a query string (e.g. ?city=denver) — exactly the string the URL API parses back apart on the receiving page. The form is the plain-HTML mechanism; the URL API is just what reads the result.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather</title>
</head>
<body>
  <h1>Weather</h1>
  <form action="/weather" method="GET">
    <label for="city">City</label>
    <input type="text" id="city" name="city" placeholder="Denver">
    <button type="submit">Check Weather</button>
  </form>
</body>
</html>

← Previous Next →