Look up a city and get back weather forecast for searched city and top News headline related to that city and an interactive map which shows the location of that city.

Related tags

Learning resource WeatheredVibes
Overview

WeatheredVibes

Description

As a user I want to look up a city to get the current weather and suggested current news articles based on the location searched, so that I can stay up to daye with my surroundings.

Usage

Weathered Vibes is an application that lets a user look up a city and get the current weather and suggested news articles based on the location searched, so that they can stay up to date with their surroundings. At the top of the application is a search bar for the user to type in a city. Below the search bar are three containers. The first container is the current weather of the city searched. This container includes the city, date and time, current temp, current weather conditions, current wind speed, and current humidty. The second container is a suggested news article based on the location search. There is a desciription of the news article and a link to the whole article on a third party site. The third container lists all the previous cities searched as well as a clear history button. This container allows you to click on a previous searched city and get the current weather as well as clearing all the previously searched cities. At the bottom of the page is an interactive radar map that pulls up the location that was searched.

Used Libraries

  1. Open Weather Map API
  2. TOMTOM API
  3. GNews API
  4. JavaScript
  5. HTML
  6. CSS
  7. jQuery
  8. Bulma

Homepage

plot

Demo

Watch the demo

Webiste

  • Deployed Project can be found here
  • Repository can be found here

Contributers

Comments
  • Radar Map

    Radar Map

    Fetch api for google maps, weather radar, geocoding

    Optimize number of api calls

    Improve user experience/interface by showing county/state names on map

    Add buttons to change weather radar overlay (I.e. precipitation, wind speed, temperature, clouds)

    opened by Kawilder 2
  • Feature/weather/local storage

    Feature/weather/local storage

    • Added local storage
    • Introduced music api work to dig further
    • Fixed the history of searched weather
    • Some reformatting and styling
    • Fixed some bugs
    • Added weather icon images
    • Added package json to see if we need it for the music api
    • Removed unused files
    • Updated readme with names and url and used libraries
    opened by SepidehAyani 1
  • Weather Search Alerts

    Weather Search Alerts

    This can be a last minute issue, We can not use window alerts. Bug issues: If user misspells city or doesn't put in a city, there is not alert to say "please enter city" If api is not connecting, there is no alert to say "error cannont connect to openweather"

    Right now there are no alerts.

    Look into using modals instead of window alerts

    invalid 
    opened by hmailahn 1
  • local storage

    local storage

    Save recently search cities using local storage Create divs to save cities Create event listeners to each saved city to pull up current weather of city Fix bug to make sure that the same city isn’t being saved twice

    opened by hmailahn 1
  • Music

    Music

    lastfm api Fetch api Create conditions for music based on weather conditions based on genres (happy= sunny) Display music based on current weather conditions

    invalid 
    opened by hmailahn 1
  • Develop

    Develop

    • weather icon
    • radar map bug fix
    • added config file to stores keys and token
    • removed unused and commented code
    • removed console.logs
    • reformatted date/time to show more readable format to user
    opened by SepidehAyani 0
  • fixed the map bug...

    fixed the map bug...

    • fix the radar map bug so now the map shows the searched city
    • added config file to store the api keys and token
    • cleaned up commented and unused code
    • cleaned up the console.log
    • added @hmailahn's changed for weather icon
    • reformatted the date/time to be more readable for user
    • more cleanups
    opened by SepidehAyani 0
  • used another news api as the other one was tide to limited dates

    used another news api as the other one was tide to limited dates

    • used another news api as I found a bug with the previous one
    • updated the readme
    • some minor styling for the display weather and news fonts
    • reformat the readme
    • reformat the js file
    opened by SepidehAyani 0
  • margins and fixed radar map

    margins and fixed radar map

    • adjusted some of the margins
    • fixed the radar map so it does not sit at the bottom of the page
    • played around with the search history buttons we talked about, but I think it needs a "li" div to style as individual buttons (when I attach button to the "ul" div it makes every city search apart of the same button)
    opened by Metelak 0
  • added news api

    added news api

    • Added the News API
    • Reformatting and code cleanups
    • Renamed weather.js to script.js (to be generic)
    • Some minor html changes to have a cleaner display of weather and News
    • Deleted unused JS files that were created before
    opened by SepidehAyani 0
Owner
Sepideh Ayani
Sepideh Ayani
GitHub
NewsStation is a news app which can be used to grab daily news bites. If you are interested in news whether politics, business, entertainment, general, health, science, sports and technology news NewsStation is for you!

This is a NewsStation WebApp Project Using News API NewsStation is a news app which can be used to grab daily news bites. If you are interested in new

Ravi Chauhan 2 Feb 7, 2022
Weather app created using vanilla JavaScript and APIs. You can search cities worldwide and get current and forecast weather features.

Weather App Live Demo About the Project Weather app created using vanilla JavaScript and APIs. You can search cities worldwide and get current and for

Lua 22 Dec 28, 2022
This project is about building a web application to show a weather forecast using weather API.

Weather App Web application to show the current and upcoming week weather forecast. Want to see live preview » ✧ View Demo ✧ Report Bug ✧ Getting Star

Mohit Sehrawat 10 Dec 25, 2022
Weather forecast for Turkey's cities.

Weather App Weather forecast for Turkey's cities. This web app built with using Vite + React. You can preview here Project Details React Day.js for pa

Melin Kan 32 Jan 3, 2023
This is the backend of Wherechat, which is a chat application that allows users to find and meet each other through their location on the map.

wherechat-backend About the project This is the backend of Wherechat, which is a chat application that allows users to find and meet each other throug

Isaac Ndala 5 Nov 23, 2022
Scriptable Widget which shows current news from tagesschau.de

tagesschau-widget for Scriptable Based on this reddit post of u/trbn_hck Unfortunately the Repositorie in his GitHub profile is no longer exist. Widge

Robinson 5 Sep 12, 2022
App that receives data from a microcontroller that is set up at your electricity meter, which at certain intervals will send an image to be processed, this then gets sent to a Python instance which will get the data read from the image. That data gets sent back and will be saved to the account this meter belongs to. This gives you the ability to track your currently analog meter in a digtal environment.

Usage App Server About this project App that receives data from a microcontroller that is set up at your electricity meter, which at certain intervals

null 7 Dec 20, 2022
Simple weather app written in HTML, CSS, and JavaScript using the OpenWeather API for fetching weather and geolocation information

Description Simple weather app written in HTML, CSS, and JavaScript using the OpenWeather API for fetching weather and geolocation information. Acknow

Gleb Korzan 4 Feb 23, 2022
Weather Condition App is a mobile application that has a category of countries in the home age and the users can access to weather of each country.

World Weather This is a SPA react-app project that is built using two APIs. And users can select and choose countries and states and get their updated

Ahmad Zamir Yousufi 2 Oct 10, 2022
A Weather API project inspired by The Ultimate API Challenge / Weather API.

Weather API Project A Weather API project inspired by The Ultimate API Challenge / Weather API. Tech Stack: React.js Tailwind Axios Inspiration The Pr

Franziska 1 Dec 29, 2021
Weather-magic - Working with APIs to create a weather dashboard

Weather Magic link to website Following the link above will bring you to the Wea

null 1 Feb 3, 2022
Hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar.

Hourly Weather Card by @decompil3d An hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar. Can y

Jonathan Keslin 49 Dec 29, 2022
Its an app that uses a weather API with access to over 200,000 cities current weather conditons.

Weather App Its an app that uses a weather API with access to over 200,000 cities current weather conditons. Screenshots Links Live Site URL: live sit

Yusuf Lawal 5 Aug 17, 2022
TV Shows Web App - A web application based on an external API which contains information about TV shows

TV Shows Web App - A web application based on an external API which contains information about TV shows. th web app let you like the shows that you like the most and comment what you think about them making use of an involvement API to save this interaction information.

Williams Colmenares 14 Dec 17, 2022
TV Shows Web App - A web application based on an external API which contains information about TV shows

TV Shows Web App - A web application based on an external API which contains information about TV shows. th web app let you like the shows that you like the most and comment what you think about them making use of an involvement API to save this interaction information.

Williams Colmenares 14 Dec 17, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Keeping pace with the increasing number of matches has become very hard. So here we have **News Dribble** , making following NBA easier, more exciting and engaging. From News Updates, Standing Tables, Upcoming Games to Minting NFTs for your favorite teams and player! Even more, we can place bets on upcoming games and win Crypto!

News Dribble Timeout! Time for News Dribble!!! Inspiration I am a big fan of NBA and personally I have been looking for platforms where I can get upda

Aaryan Arora 3 Nov 2, 2022