This is an AngularJS based app that fetches data from the Open Weather Map API to display the forecast for 5 european cities. It also allows you to search for other cities in the world.
This project relies on a webserver to make requests to the Open Weather Map API, in order to retrieve the weather info. Because of that, it's not possible to open an html file in a browser and see the project.
⚠️ To see a live version of the app you can click on this link: http://krystalcampioni.com/weatherapp
- Open the terminal and clone this repository by typing:
$ git clone git@bitbucket.org:krystalcampioni/weatherapp.git
-
Enter the folder that was just created:
$ cd weatherapp
-
Download and install Node using this link: https://nodejs.org/en/download/
-
Install the dependencies by typing in the terminal:
$ npm install
-
Start a local server:
$ gulp start
-
Open http://localhost:8888/ in your browser 🚀
The source code is on the app
folder. This project uses Gulp to run several tasks and outputs a final production ready version of the code to the dist
folder.
-
app/ all html files are kept here
-
app/js You'll find an
app.js
file that declares the angular module, dependencies and routes. Thecontrollers
,directives
,filters
andservices
are kept in different files. -
app/lib this project uses iso-3166-country-codes-angular to convert country codes fetched from the API into country Names. The
lib
folder is intended for external code libraries. -
app/scss this project uses Sass as a css preprocessor and the BEM naming convention
- app/scss/components this folder contains a file for each component or "block". Inside each component you'll find it's elements and modifiers, nested under the main class.
- app/scss/base on this folder you'll find non-component related styles, like grid settings and variables
- app/scss/main.scss use this file to import all other scss files, fonts and scss libraries
Instead of using the default weather icons from Open Weather Map, I'm using weather-icons
- Live reload via gulp-webserver
- Minified CSS via gulp-clean-css
- Sass globbing support via node-sass-globbing
- Bourbon support via node-bourbon
- Neat support via node-neat
- Concat and minified JS via gulp-concat and gulp-uglify
- Minified HTML via gulp-minify-html
- Image compression via gulp-imagemin