Should I wear a hat on my run today?

🧢 Should I Wear a Hat on My Run Today? Documentation:

Overview

Ever found yourself stepping out for a run, only to be greeted by unexpected rain, wind or even a swarm of bugs? Should I Wear a Hat on My Run Today? is a quirky (/silly) web app that uses the power of AI to advise runners whether they should don a hat for their daily jog, based on the current weather conditions. In this demo, we're looking at Toronto.

🌦️ What Does It Do?

At the press of a button, the application fetches real-time weather data using Browse AI's automated web scraping tool, which scours the internet for the most up-to-date weather information. This data includes metrics such as temperature, wind speed, gusts, UV index, air quality, pollen count, and even bug activity! 🦟

The application then analyzes this data and provides a handy hat-wearing recommendation. It also provides an engaging summary of the weather conditions, complete with emojis for a quick and easy understanding of the day's weather.

💻 How Does It Work?

This application is built with JavaScript, using the Fastify framework. The backend fetches and analyzes data from the Browse AI API, using Node.js and Axios. The HTML, CSS, and JavaScript on the frontend then render this data in a friendly, engaging manner.

For the full rundown, let's break it down by file:

server.js

The server uses Fastify to handle requests and serve static files. Fastify is configured to use Handlebars as its view engine, which helps us render the HTML templates with the fetched weather data.

getWeatherData() is a function that makes a GET request to Browse AI's API to fetch the most recent successful weather data task. This data is then parsed and turned into an easy-to-read weather summary, complete with emojis!

Two routes are defined: '/' for the main page and '/weather' for fetching and displaying the weather data.

public/index.html

This is the main webpage, which asks the user the all-important question: "Should I wear a hat on my run today?". On pressing the "?" button, it fetches weather data from the server and displays it.

public/weather.html

This page is a Handlebars template. It's filled with the weather data fetched by the server and displays the results. Along with the weather summary, it also gives the user a friendly hat recommendation, and links back to the main page to fetch fresh data.

public/styles.css

This CSS file adds a sprinkle of style and sparkle to our HTML pages, providing a clear, clean, and engaging user interface. The pages are reactive, so they work nicely on mobile and larger screens.

🚀 How to Run?

Fetch your weather data using Browse.ai's API or whatever other method you want! (You'll need to add the API key into .env for security 🔐)

Then, embed it as an iframe, or just run it as a full webpage. Simple, really.

🤖 Behind the Scenes

This project was built as a fun way to trial Browse.AI's web scraping capabilities and also test my HTML, CSS, API, and automation knowledge. It's a simple project, but behind the scenes it's leveraging powerful AI and web scraping automation to provide valuable, real-time data in a user-friendly manner. And, hopefully, it makes your running experience a little more comfortable! Unless you don't live in Toronto 🤷‍♂️

Remember, whether you're running with or without a hat, keep on running! 🏃‍♂️