Vue

by mpetrovich

HTML

<div id="app">
    <weather zip="32832"></weather>
</div>

CSS

.weather {
    background-color: rgba(0, 0, 0, 0.09);
    height: 6em;
    text-align: center;
    border-radius: 1em;
    box-shadow: #00000038 5px 5px 48px -7px;
    border: solid #cccccc 1px;
    max-width: 50em;
    margin: 0 auto;
}

.weather-city,
.weather-forecast {
    display: inline-grid;
    float: left;
    height: 100%;
    padding-top: .5em;
}

.weather-header,
.weather img,
.weather-forecast .weather-header {
    width: 100%;
    text-align: center;
}

.weather-city {
    width: 25%;
}

.weather-header {
    font-weight: 900;
    float: left;
}

.weather img {
    width: 50px;
    height: 50px;
}

.weather-forecast {
    width: 15%;
}

.weather-today {
    font-size: 125%;
    background-color: #0000001a;
    border-radius: 0px 0px .7em .7em;
    color: black;
}

.weather-temperature {
    font-weight: 900;
    font-size: 150%;
    float: left;
}

.weather-today>.weather-temperature {
    font-size: 200%;
}

Vue

Vue.component('weather', {
	template: `
<div class="weather">
	<span class="weather-city">
		<span class="weather-header">{{city_name}}</span>
		<span class="weather-img">
			<img :src="day_p0_img" alt="weather desc">
		</span>
	</span>
	<span class="weather-forecast weather-today">
		<span class="weather-header">Currently</span>
		<span class="weather-temperature">{{day_p0_temp}}</span>
	</span>
	<span class="weather-forecast">
		<span class="weather-header">Tomorrow</span>
		<span class="weather-temperature">{{day_p1_temp}}</span>
	</span>
	<span class="weather-forecast">
		<span class="weather-header">{{day_p2_name}}</span>
		<span class="weather-temperature">{{day_p2_temp}}</span>
	</span>
	<span class="weather-forecast">
		<span class="weather-header">{{day_p3_name}}</span>
		<span class="weather-temperature">{{day_p3_temp}}</span>
	</span>
	<span class="weather-forecast">
		<span class="weather-header">{{day_p4_name}}</span>
		<span class="weather-temperature">{{day_p4_temp}}</span>
	</span>
</div>
  `,
	props: ['zip'],
	created: function()
	{
		this.getWeather();
	},
	data: function()
	{
		return {
			city_name: 'solaris',
			day_p0_img: 'http://openweathermap.org/img/w/01d.png',
			day_p0_temp: '0',
			day_p1_temp: '0',
			day_p2_name: '...',
			day_p2_temp: '0',
			day_p3_name: '...',
			day_p3_temp: '0',
			day_p4_name: '...',
			day_p4_temp: '0'
		};
	},
	methods: {
		getWeather: function ()
		{
			var weatherURL =
				"https://api.openweathermap.org/data/2.5/forecast?zip=" +
				this.zip +
				"&units=imperial"+
				"&APPID=b08abc60f5222977c05dc54b137b2d17";
			$.ajax({
				method: 'GET',
				url: weatherURL
			}).done(data => {
				this.parseWeather(data);
			});
		},
		parseWeather: function(data)
		{
			var days = {
				0: [],
				1: [],
				2: [],
				3: [],
				4: [],
				5: [],
				6: [],
			};
			var dayBuffer = 0;
			var dayLast = new Date((data.list[0].dt)*1000).getDay();

			$.each(data.list, function(key, element) {
				var date = new...