-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsaa_tanaan.html
150 lines (129 loc) · 6.4 KB
/
saa_tanaan.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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="fi">
<head>
<title>Portfolio</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS file: -->
<link rel="stylesheet" href="styles.css">
<!-- Import Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed&display=swap" rel="stylesheet">
<!-- Load an icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
</head>
<body>
<div id="topMenu" class="topNav">
<div class="overlay-content">
<div class="inner2">
<a href="index.html"><i class="fa fa-fw fa-home"></i> Etusivu</a>
</div>
<div class="inner2">
<a href="tausta.html"><i class="fa fa-user"></i> Tausta</a>
</div>
<div class="inner2 dropdown">
<a href="javascript:void(0)" class="dropbtn active"><i class="fa fa-desktop"></i> Projektit</a>
<div class="dropdown-content">
<a href="uxdesign.html">UX Design</a>
<a href="koodaus.html">Ohjelmointi</a>
</div>
</div>
<div class="inner2">
<a href="otayhteytta.html"><i class="fa fa-fw fa-envelope"></i> Ota Yhteyttä</a>
</div>
<a href="https://linkedin.com/in/jarno-seppanen" target="_blank">Linked <i id="linkedin"
class="fa-brands fa-linkedin"></i></a>
</div>
</div>
<div class="mobileUp">
<a href="https://linkedin.com/in/jarno-seppanen" class="mobileLinkedin" target="_blank">Linked <i id="linkedin"
class="fa-brands fa-linkedin"></i></a>
</div>
<div>
<div>
<h1 class="title">JARNO</h1>
<h3 class="underText">UX Designer & Developer</h3>
</div>
<div id="mainPara" class="mainText center">
<h3>Sää Nyt</h3>
<p>
React.js fundamentals -kurssin suoritettuani jatkoin Reactin opiskelua itsenäisesti ja päätin toteuttaa pienen sovelluksen.
Tarkoitus oli harjoitella React.js:ää sekä tiedon hakua API rajapinnasta. Rajapinnaksi valikoitui OpenWeather,
koska se on yleisesti käytetty ja juolahti mieleeni esimmäisenä. OpenWeather tarjoaa tietoa JSON ja XML muodossa.
Tässä soveluksessa käytetään JSON muotoista dataa. Aiemmissa koulun Javascript projekteissa olen käyttänyt myös XML muotoa tiedon hakuun.
</p>
<img src="saaKuvat/saaEtusivu.JPG" alt="Mobiili Etusivu" id="saaEtu" class="project_img">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<p>
Mobiiliversion etusivu (Kuva suurenee klikkaamalla)
</p>
<p>
Sovellukseen haettavat säätiedot valikoituivat sen perusteella, mitkä minusta ovat mielenkiintoisia ja relevantteja.<br>
Sovellus kertoo haetun kaupungin tai kunnan nimen ja päivämäärän ennen haettuja säätietoja.<br>
Haettavat säätiedot ovat keli, lämpötila (myös miltä lämpötila tuntuu), kosteus prosentti ja tuulen nopeus.
</p>
<img src="saaKuvat/saaHel.JPG" alt="Säätiedot Mobiili" id="tiedotMobi" class="MobiScrImg">
<p>
Säätiedot mobiili näkymässä (Kuva suurenee klikkaamalla)
</p>
<p>
Webversio sovelluksesta on lähes samanlainen kuin mobiiliversio:
</p>
<img src="saaKuvat/saaHel_Desktop.JPG" alt="Säätiedot Webversio" id="tiedotWeb" class="project_img">
<p>
Säätiedot web näkymässä (Kuva suurenee klikkaamalla)
</p>
<p>
Sovelluksessa on dynaaminen taustakuva, joka vaihtuu kun sää on lämpimämpi kuin 12 astetta (kuvat ylempänä).
Muuten sovellus käyttää taustakuvaa, joka havainnoillistaa kylmää ilmaa.
</p>
<img src="saaKuvat/saaRov.JPG" alt="Dynaaminen taustakuva" id="taustaRov" class="MobiScrImg">
<p>
Taustakuva viileällä ilmalla (Kuva suurenee klikkaamalla)
</p>
<p>
Projekti oli hyvää harjoitusta sekä taidon ylläpitoa. Vaikka sovellus on yksinkertainen, se oli mielenkiintoinen toteuttaa.
Varsinaisen React sovelluksen kirjoittamisen lisäksi tutustuin syvemmin OpenWeatherin toimintaan ja dokumentaatioon.
</p>
<p>
Sovellusta voit kokeilla täällä:<br>
<a href="https://rutjake.github.io/weather_app_build/" target="_blank">Sää Nyt</a>
</p>
<p>
Linkki lähdekoodiin:<br>
<a href="https://github.com/Rutjake/weather_app" target="_blank">Lähdekoodi GitHubissa</a>
</p>
<p><a href="koodaus.html"><i class="fa-regular fa-circle-left"></i><Strong> Takaisin</Strong></p></a>
</div>
</div>
<div id="mobileMenu" class="mobileDown">
<div class="overlay-content">
<div class="inner">
<a href="index.html"><i id="home" class="fa fa-fw fa-home"></i><br> Etusivu</a>
</div>
<div class="inner">
<a href="tausta.html"><i id="user" class="fa fa-user"></i><br> Tausta</a>
</div>
<div class="inner mobile-dropup">
<a href="#" class="active"><i id="desktop" class="fa fa-desktop"></i><br> Projektit</a>
<div class="mobile-dropup-content">
<a href="uxdesign.html">UX Design</a>
<a href="koodaus.html">Ohjelmointi</a>
</div>
</div>
<div class="inner">
<a href="otayhteytta.html"><i id="envelope" class="fa fa-fw fa-envelope"></i><br> Ota
Yhteyttä</a>
</div>
</div>
</div>
<!-- JavaScript file: -->
<script src="port_js\saa_enlarge_images.js"></script>
</body>
</html>