-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
29 lines (25 loc) · 2.31 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenWeatherMap and Vue.js</title>
<link rel="stylesheet" href="/dist/openweather-vue.css">
</head>
<body>
<div class="grid-container">
<h1>OpenWeatherMap and Vue.js</h1>
<p>This is a simple Vue.js app, fetching weather data for a user-selected location, for educational purposes. It uses the <a href="https://developers.google.com/maps/documentation/geocoding/start">Google Geocode API</a> for location suggestions based on user input or GPS position (if available), and <a href="https://openweathermap.org/api">OpenWeatherMap API</a> to render 5 days weather forecast.</p>
<p>I also use <a href="https://vuex.vuejs.org/en/">Vuex</a> for state management, for no other reason than getting to know the workings of it. HTTP requests are handled with <a href="https://github.com/axios/axios">axios</a>. Finally, I use a local, patched version of <a href="http://sagalbot.github.io/vue-select/">Vue Select component</a>, with a <a href="https://github.com/sagalbot/vue-select/pull/512/commits/970d1da3c2fbcefeadb2ee8910cd383c98f56032">couple</a> <a href="https://github.com/sagalbot/vue-select/pull/528/commits/a1193f3c0f3fd75dd03dcd3d93d689af97b7513d">of</a> PRs baked in. It will be updated, eventually.</p>
<p>This app was made while I learn <a href="https://webpack.js.org/">webpack</a>, <a href="https://vuejs.org/">Vue.js</a>, ES6, Vuex, <a href="https://mochajs.org/">Mocha</a> and <a href="https://facebook.github.io/jest/docs/en/expect.html">expect</a> — and I still have a lot to learn. I had to cheat and retrofit the tests, so this was not build with <a href="https://en.wikipedia.org/wiki/Test-driven_development">TDD</a>, but one has to start somewhere! I welcome constructive critisism and well documented PRs that whould make me, and anybody else, better developers!</p>
<h2>TODO:</h2>
<ul>
<li>Use the SVGs of <a href="https://erikflowers.github.io/weather-icons/">Weather Icons</a> instead of the font files</li>
</ul>
</div>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.20171210/classList.min.js"></script>
<script src="/dist/openweather-vue.js"></script>
</body>
</html>