Inspiration

The majority of our group is from California so we do not see drastic changes in weather compared to the weather here so we thought it would be a cool idea if we could make a weather forecast website. We also wanted to try and learn something new so we went with using HTML, CSS, and javascript because we barely had any experience with it before this.

What it does

Tells the weather forecast of the current day and 15 days into the future. Background changes every day to the current condition of the weather. Location is able to change to numerous locations and all the data will change according to the location.

How I built it

I built this project by only using HTML, CSS, and javascript. I used a weather API from a website called visual crossing to gain all the data that is shown on the website. Then I utilized javascript and HTML to print out the data onto the website and decorated the website using CSS. I used a for loop to show 15 days' worth of weather data on the website. Made buttons through CSS to move from one HTML site to another which shows the weather of different locations as well.

Challenges I ran into

We really wanted to make it so that the weather website would have a user input function so that the data for the weather is shown depending on the location the user wanted. However, we realized that this would be very hard with our limited knowledge while we were working on it leading us to scrap the idea and a portion of the code we were working on.

Accomplishments that I'm proud of

I am very proud of the fact that we were able to make a full-fledged weather report website that accurately shows the weather in different places with pretty much 0 knowledge in front-end web development.

What I learned

I learned what front-end web development is and what HTML, CSS, and javascript individually do. I also learned what APIs really were and how they were utilized in HTML. I learned the potential of other projects while coding this project which opened me up to many different ideas.

What's next for Weather Report Website

In the future, I am planning to make a user input function and also have a way more visually appealing website.

Built With

Share this project:

Updates