Application was built with Bootstrap 4 and Vue.js. Axion is used for the API call to OpenWeatherMap API.
The app is also live at the following url:
Download or clone.
Please make sure Node.js and NPM are installed
"cd" into project folder.
run npm install
and then
run gulp dev
This will open up a preview of the template in your default browser.
I was thinking personally what would be interesting and different that wasn't "just another weather site". I made it something I would find useful personally as an avid fly fisherman in the middle of some of the best fishing in the world. Why not incorporate weather, fishing report, and what sort of fly's are being used at the moment at these destinations. I also wanted something visually attractive to capture your attention, and provide useful information to someone interested in fly fishing, something to capture the grandeur of these locations in the Mountain West.
I would probably incorporate images for each of the popular destinations that would be visually engaging, create that sense of desire to get away. I was able to utilize Vue.js to create the dynamic data being called from the API with a very small amount of code. I also used a Bootstrap 4 starter that I use often to rapidly prototype a responsive layout such as this.
With more time I would definitely revisit the weather icons, maybe get them animated and refine the text a bit, add conditions to render icons based on weather as well. All in all I think I'm satisfied with what I came up with in a short amount of time, especially digging a bit deeper into Vue.js, I'm sure there is a better way to approach the Javascript side of things but this library seemed to be very light weight and easy to manipulate things quickly. I will definitely consider it more in the future for prototyping and projects. Lastly I would include some sort of search and/or navigation, maybe homepage section to find all the destinations covered by the app.