Coding My Own Weather App:

Coding My Own Weather App:

Following on from my use of Processing to carry out our one hundred book covers briefly I began to think of what I could learn to code next. With the use of ChatGPT I used Visual Studio Code to create my own weather app on my laptop with the use of a HTML file run by a Java Script file.

Initial HTML File:
Initial Java Script File:

I had to use Open Weather Map to create an API key that accessed the weather when the geolocation of your device was accessed to generate the weather for where you are on your device.

Open Weather Map API Keys:

I had to install the live server library in VS Code to allow the weather app to run effectively and this is how the layout of the files was looking.

File Folder:

I decided to add a CSS file into the folder in order to make the HTML look less basic and much cleaner but this meant adjustments to the other files so that it would follow the styles I set out in the CSS file:

HTML File:
CSS File:
Java Script File:

Once  had added in these elements of code here is how my weather app was looking:

Opening Page:
Weather Page:

And here is my coding functioning:

0:00
/0:08

Weather App In Use:

I really like what I have created here however I think it is a shame that it cannot be accessed by other devices if the files aren't downloaded, I would have liked it to be a URL link that can just be used by anyone to see what the weather is based on their location.

Finlay Clemens

Finlay Clemens

Graphic Design student at Leeds Beckett University currently discovering what techniques and styles I like to work with the best. Passion for live music which reflects heavily on my chosen subjects!
Leeds/Manchester