forked from caffi-nate/Persona5-Weather-Forecast
-
Notifications
You must be signed in to change notification settings - Fork 0
/
README.html
30 lines (29 loc) · 1.9 KB
/
README.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
<head>
<meta charset="UTF-8">
<title>README.md</title>
</head>
<body>
<h1 id="persona5_calendar">Persona5_Calendar</h1>
<p>Simple Clock/Weather App based off the <a href="/projectImages/ingame_02.gif">Persona 5 Interface</a></p>
<p><a href="https://caffi-nate.github.io/Persona5_Calendar/">-Github Live Page Link-</a></p>
<p><img src="/projectImages/final_1201.gif" alt="alt text"></p>
<p>Created as a practice project to solidify understanding in</p>
<ul>
<li>HTML5 and CSS3 (basic responsive layout, managing sprite sheets and animations, overlapping elements in CSS Grid)</li>
<li>ES6+ Vanilla Javascript (getting date/time, applying page transitions and animations)</li>
<li>External APIs for weather information (openweathermap.org)</li>
</ul>
<p>Postmortem:
A short, fun project for getting comfortable with CSS/JS fundamentals.
Using CSS Grid for stacked sprite elements was good practice, but became messy very quickly. If I revisited this project I'd love to try displaying elements with something like a javascript canvas instead.
It would be nice to add some more user options for alternative coordinates, too.</p>
<p>Credits:</p>
<ul>
<li>Atlus for Persona 5 sprites/backgrounds</li>
<li>HattyMikune for P5 font rip "P5hatty" <a href="https://drive.google.com/file/d/1CwDPE8fl6ahoktyoiGokwUnJdjp6Rw5d/view">https://drive.google.com/file/d/1CwDPE8fl6ahoktyoiGokwUnJdjp6Rw5d/view</a></li>
<li>"Earwig Factory" by Typodermic: Interface Font <a href="https://www.dafont.com/earwig-factory.font">https://www.dafont.com/earwig-factory.font</a></li>
<li>Drew Clements for help with grabbing weather API information <a href="https://medium.com/@drewclementsdesign/building-a-weather-app-with-vanilla-javascript-920889a78ca2">https://medium.com/@drewclementsdesign/building-a-weather-app-with-vanilla-javascript-920889a78ca2</a></li>
</ul>
</body>
</html>