A weather search and forecast web application built with plain JavaScript / Um aplicativo web de busca e previsão do tempo feito com JavaScript puro.
A weather search and forecast web application built with plain JavaScript (Vanilla JS), featuring location search with autocomplete, current weather conditions, detailed weather metrics, and a 5-day forecast.
WeatherSearch lets users search for any city in the world and view, on a dedicated page, the current weather conditions for that location (temperature, feels-like temperature, chance of rain, wind speed, humidity, and UV index), along with the forecast for the following five days. The application also supports switching between dark and light themes and between Celsius and Fahrenheit units, with user preferences persisted across sessions.
- Location search with real-time suggestions (autocomplete)
- Result page with current weather conditions for the selected location
- Display of feels-like temperature, chance of rain, wind speed, air humidity, and UV index
- 5-day weather forecast
- Dark and light theme toggle
- Temperature unit toggle (Celsius and Fahrenheit)
- Theme and unit preferences saved locally across sessions
- Responsive interface
- HTML5
- CSS3
- JavaScript (ES6, Vanilla JS)
- Open-Meteo Geocoding API
- Visual Crossing Weather API
- DOM manipulation without frameworks
- Code organization into reusable components
- Consuming external REST APIs
- Debounce on search input
- Simple routing between pages in a single-page application
- Managing user preferences with localStorage
- Conditional rendering and dynamic UI updates
- Handling loading and error states
- Responsiveness and basic accessibility (visible focus, prefers-reduced-motion)
weathersearch/
├── api/
│ ├── client.js # Integration with the Visual Crossing Weather API
│ └── search.js # Integration with the Open-Meteo Geocoding API
├── ui/
│ ├── components/
│ │ ├── Header.js
│ │ ├── SearchBar.js
│ │ └── Controls.js
│ ├── Home.js
│ ├── Search.js
│ ├── Page.js
│ └── icons.js
├── style/
│ ├── theme.css
│ ├── home.css
│ ├── header.css
│ └── card.css
├── utils/
│ └── preferences.js
├── router.js
├── index.html
└── index.js
Clone the repository:
git clone https://github.com/<username>/weathersearch.git
cd weathersearch
Install dependencies:
npm install
Create a .env file in the project root with your Visual Crossing Weather API key:
KEY=your_api_key_here
The key can be obtained for free at visualcrossing.com.
Start the project:
npm run start
- Automatic location detection via browser geolocation
- Display of the most searched locations on the home page
- Caching of searches and weather results
- Automated tests
- Internationalization (i18n) of the interface
Link to the deployed version: rayssarrsilva.github.io/Weather-App/
Rayssa Roberta R. Silva LinkedIn: https://www.linkedin.com/in/rayssa-r-14936622a/
Suggestions, fixes, and improvements are welcome.
Feel free to:
- Fork the project and open a Pull Request
- Report issues through the Issues tab
- Reach out via LinkedIn
This project is licensed under the MIT License.
Um aplicativo web de busca e previsão do tempo feito com JavaScript puro (Vanilla JS), com busca de localização por autocomplete, condições climáticas atuais, métricas detalhadas do clima e previsão de 5 dias.
O WeatherSearch permite que os usuários busquem qualquer cidade do mundo e visualizem, em uma página dedicada, as condições climáticas atuais daquela localização (temperatura, sensação térmica, chance de chuva, velocidade do vento, umidade e índice UV), junto com a previsão para os cinco dias seguintes. A aplicação também permite alternar entre temas escuro e claro e entre as unidades Celsius e Fahrenheit, com as preferências do usuário persistidas entre sessões.
- Busca de localização com sugestões em tempo real (autocomplete)
- Página de resultado com as condições climáticas atuais da localização selecionada
- Exibição de sensação térmica, chance de chuva, velocidade do vento, umidade do ar e índice UV
- Previsão do tempo de 5 dias
- Alternância entre tema escuro e claro
- Alternância de unidade de temperatura (Celsius e Fahrenheit)
- Preferências de tema e unidade salvas localmente entre sessões
- Interface responsiva
- HTML5
- CSS3
- JavaScript (ES6, Vanilla JS)
- Open-Meteo Geocoding API
- Visual Crossing Weather API
- Manipulação de DOM sem frameworks
- Organização do código em componentes reutilizáveis
- Consumo de APIs REST externas
- Debounce no campo de busca
- Roteamento simples entre páginas em uma single-page application
- Gerenciamento de preferências do usuário com localStorage
- Renderização condicional e atualizações dinâmicas de UI
- Tratamento de estados de carregamento e erro
- Responsividade e acessibilidade básica (foco visível, prefers-reduced-motion)
weathersearch/
├── api/
│ ├── client.js # Integração com a Visual Crossing Weather API
│ └── search.js # Integração com a Open-Meteo Geocoding API
├── ui/
│ ├── components/
│ │ ├── Header.js
│ │ ├── SearchBar.js
│ │ └── Controls.js
│ ├── Home.js
│ ├── Search.js
│ ├── Page.js
│ └── icons.js
├── style/
│ ├── theme.css
│ ├── home.css
│ ├── header.css
│ └── card.css
├── utils/
│ └── preferences.js
├── router.js
├── index.html
└── index.js
Clone o repositório:
git clone https://github.com/<username>/weathersearch.git
cd weathersearch
Instale as dependências:
npm install
Crie um arquivo .env na raiz do projeto com sua chave da Visual Crossing Weather API:
KEY=your_api_key_here
A chave pode ser obtida gratuitamente em visualcrossing.com.
Inicie o projeto:
npm run start
- Detecção automática de localização via geolocalização do navegador
- Exibição das localizações mais buscadas na página inicial
- Cache de buscas e resultados climáticos
- Testes automatizados
- Internacionalização (i18n) da interface
Link para a versão publicada: rayssarrsilva.github.io/Weather-App/
Rayssa Roberta R. Silva LinkedIn: https://www.linkedin.com/in/rayssa-r-14936622a/
Sugestões, correções e melhorias são bem-vindas.
Fique à vontade para:
- Fazer um fork do projeto e abrir um Pull Request
- Reportar problemas pela aba Issues
- Entrar em contato pelo LinkedIn
Este projeto está licenciado sob a Licença MIT.