I recently created a weather forecast application that showcases my proficiency in HTML, CSS, JavaScript, Bootstrap, Jquery, and API Key usages. The application allows users to search for the weather forecast of any area by typing in the area's name or zip code. The application makes use of the OpenWeather API to retrieve accurate and up-to-date weather data. It is designed using Bootstrap to ensure responsiveness and compatibility with different screen sizes. The user interface is intuitive, with a simple search bar and autocomplete functionality to suggest possible search queries. Overall, I'm proud of the application I've created, and it demonstrates my proficiency in these technologies.
When you first open the application, you'll see a search bar where you can enter either the name of the area or the zip code that you want to know the weather forecast for. Once you've entered your search query and clicked on the "Search" button, the application will make a request to the OpenWeather API using your API key and retrieve the forecast data for the specified area.
The forecast data will be displayed on the screen in a clean and easy-to-read format. You'll see the current temperature, the weather condition (such as cloudy, sunny, or rainy), the high and low temperatures for the day, and the humidity level. Additionally, you'll see a 5-day forecast that shows the expected weather conditions and temperatures for the next five days.
The application uses Bootstrap to ensure that it's responsive and looks great on any device, whether you're using a desktop computer, tablet, or smartphone. The user interface is simple and intuitive, making it easy to use for anyone.
One of the key features of this application is its use of jquery. The search bar has autocomplete functionality, which means that as you start typing, it will suggest possible search queries based on what you've entered so far. This saves you time and ensures that you're entering the correct information.
Overall, this weather forecast application is a great tool for anyone who wants to stay up-to-date on the latest weather conditions for a particular area. Its use of Javascript, HTML, CSS, jquery, Bootstrap, and the OpenWeather API makes it a powerful and reliable tool that you can count on.
- Link to live application https://codenamenoah.github.io/Weather-Forecast-API/
To Clone My Repository Using CLI
- Click on the green code button and copy the link for the SSH key.
- Once clip-boarded load up a command line interface and change directory to one of your preference
- Enter in the command
git clone git@github.com:CodeNameNoah/Weather-Forecast-API.git - Enter your protected SSH password
- Enjoy!
To Download My Repository as a ZIP File
- Click on the green code button
- In the bottom of the drop-down menu, click Download Zip
- Enjoy!
- Click on the link to the live application of the Weather-Forecast-API
- Type the name or area zip code of a location you would like to obtain weather information on.
- Click the 'Give Forecast' button to retrieve your forecast of the area you previously entered into the input field
- You will have received information in an appealing UI for you to enjoy!
- Guide for Gifs to use in README.md
- Inspiration for Weather Forecast Application
- Tutorial assisting me with coding this application
- Link to Google Fonts Library
- Link to Application I used to help style
- Open Weather API Keys
- Tutorial on JavaScript 'Fetch' Usage
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the MIT license.