For this assignment I have written a weather dashboard app, starting with HTML and using a Bootstrap framework, JavaScript and the OpenWeatherMap API. The dashboard includes a search bar to input a city and displays the current weather conditions as well as a 5-day forecast.
The body of the page is divided into two main sections: a jumbotron at the top, which contains the heading of the page and a brief introduction, and a container below that, which is further divided into two columns. The left column is a search bar that allows the user to input the name of a city. The search bar has an input field and a search button. Below the search bar, there is a "Clear history" button.
The right column displays the current weather conditions and a 5-day forecast for the city entered in the search bar. The current weather conditions include the city name, an icon, temperature, humidity, and wind speed. The 5-day forecast includes the date, an icon, temperature, wind, and humidity for each day. The forecast is displayed using a grid layout, with each day's information displayed in a separate box.
My HTML code is linked to two external stylesheets, one for the Bootstrap framework and another for Font Awesome icons. The styles for the HTML elements are defined in the external stylesheet "style.css". The code also includes two external JavaScript files, one for jQuery and another for the custom JavaScript code that handles the user input and fetches data from the OpenWeatherMap API.
© 2023 Andrea Gates