Whether Weather simulates a global weather information for multiple cities, including current conditions, seven-day forecast, alongside a dashboard overview, user preferences interface, and an additional wind chill calculator feature. All weather data used in this project is hardcoded. This multi-page weather forecasting website was built using Eleventy (11ty), Nunjucks, Bulma, HTML, and CSS.
Follow the steps below to run the project locally.
- Ensure Node.js, npm, Git are installed on your machine. You can verify the setup by running in a command prompt terminal (cmd).
node -v
npm -v
git –version
- Download or clone the repository.
Clone the project from GitHub and move into the project directory:
git clone https://github.com/your-username/your-repository-name.git
cd your-repository-name
- Install dependencies using npm:
npm install
This will install Eleventy and all other dependencies defined in package.json.
- Start Eleventy’s development server:
Run npx @11ty/eleventy --serve
Eleventy will build the site, monitor file changes and serve the project locally during development.
- Open your browser and visit:
http://localhost:8080
- Deploy the project from Github on Netlify (optional)
Once the project is running, users can:
- Browse the Dashboard to quickly compare weather in different cities
- Click a city card to open a City Focus Page with detailed weather information
- Use the Settings Page to select favourite cities and preferred weather conditions (UI only)
- Explore the Wind Chill Calculator to understand how wind speed affects perceived temperature
Navigation is available on every page using the main menu.
City and weather data are stored in a global JSON file:
/_data/cities.json
To add or modify cities:
- Edit
cities.json
Eleventy will automatically update the dashboard, city pages, and settings options.
_includes/
layouts/
base.njk
partials/
footer.njk
nav.njk
components/
dashboard-card.njk
day-summary.njk
toggle.njk
_data/
cities.json
pages/
index.njk
dashboard.njk
city.njk
settings.njk
wind-chill-calculator.njk
_css/
styles.css
Eleventy (11ty) – Static site generator
Nunjucks – Templating engine
Bulma – CSS framework for layout and styling
HTML5 / CSS3 – Markup and styling
Netlify – Deployment platform
GitHub – Version control and repository hosting
Eleventy: https://www.11ty.dev/docs/
Nunjucks: https://mozilla.github.io/nunjucks/
Bulma: https://bulma.io/documentation/
HTML: https://developer.mozilla.org/en-US/docs/Web/HTML
CSS: https://developer.mozilla.org/en-US/docs/Web/CSS
Netlify: https://docs.netlify.com/
GitHub: https://docs.github.com/en
This project was created for an academic assignment. Contributions are not expected, but suggestions and feedback are welcome.
This project was completed for educational purposes as part of a web development course.
For questions related to this project, please contact the author Boun Chun or the course instructor John Reillis.