A simple weather app using javascript, html and css with a persona 5 theme within it. I'm still a novice in JS, html and css and this is my second time handling fetch api's in java script. This is if not one of the longest projects I ever made and I hope you guys enjoy it as well as I did.
Click this link to visit the project
OR
Fork this repo and open in VS Code and run the live view extention of your choice.
-
I highly suggest that you visit this project in a Chromium based browser like Google Chrome and Microsoft Edge etc. and NOT browsers like Mozilla Fire Fox due to how they render css properties that I will get to here.
-
I also advice that your monitor has a 1080p display for a better experience. There is mobile view but some features are not present in the mobile version of the website.
- My Friends for helping me suggest any features in this project of mine
- Caffe-Nate for his repo it helped quite a lot on though I have few words about that here.
- animate.style an animation library that I used for the transitions
- Spriters-resource for the sprite sheets of joker and morgana
Project-Kaptan a weather app that uses the free Open-Meteo api that has theme of the all time popular JRPG Game, Persona 5 by Atlus™. Kaptan comes from the Filipino Mythology, Kaptan is the sepreme god that dwells on the sky and is also a counter part of Bathala. You can see why I named this project in that way considering both have something to do with the weather.
- Production Some of the assets used like joker and morgana was taken from a sprite sheet in which I manipulated to do the animations
Examples:
I started making project kaptan in july to futher test my knowledge of fetching an api in js and as well to sharpen my skills in css, so on the thoughts of the "how to design my weather app" i thought why not theme it to the game I hold dearly which was Persona and the rest is history.
In making of project kaptan, I stumbled upon another weather app just like what i was about to built but more professional unlike mine and it was none other than Caffe-Nate's.
I will be honest that I did took some inspiration of the design to his BUT please here me out. All the code,css and js is COMPLETELY DIFFERENT and will further elaborate here but you can always compare mine to his and it will be like camparing night and day because of all my noobish mistakes and what not.
-
There are alot of stuff that I did not achieved due to my lack of knowledge and through the strictness of having to rely on vanilla js or in short, my incompetence. And speaking of incompetence, my colleagues where right on most of my design choices, that I should have used image altering/editting software like photoshop or illustrator but I never did listened for I never knew how to use them in the first place and yet I should have listened. As the words of my colleague "told you" and indeed you did, 30% of the production of this website could've been shorter if I have used an image editing software, so I apologize for not listening alright?
-
One of my other short comings was the over reliance of css in creating assets for the sites For Example
As seen in the images above those corners of the letters that are rounded was made by how both of the browsers rendered the css property, -webkit-text-stroke-. In the case of Mozilla fox, it rendered it with rounded corners which is oh well it is what it is.
- Another minor short coming is that it gets weird when you use a different screen resolution, oh well.
I still can't believe I made this piece of shit. I will now enjoy the last weeks of my summer vacation (because I used it all on making this although, it is all worth it in the end) and maybe pick a framework to build upon. For now I will continue playing Darkest Dungeon.
Feel free to use some of the assets that I have created though I am too lazy to explain how some of them works so good luck understanding my stupidity, my friend.