Mitio — weather simplified
What is Mitio?
Mitio is a weather app that I created to have a better understanding of the web development process and what it takes to build a web app. I wanted to create a simple-looking weather app without using any third-party libraries (except for animation). I tried to keep the design simple and practical where user can have access to the weather information without much hassle. You can go here for live preview. It only works on desktop, not on mobile devices.
To give a basic idea of the functionality of the website, I used the geolocation API to fetch the user’s location and then weatherbit API to receive necessary weather data. It was then processed into meaningful information and then rendered in the browser. Below I’ve a detailed explanation of the important part.
Setting up the UI
After dribbling through dribbble, I came up with something like this.
My idea was to display information in grids, so it would be easier for the user to go through them easily. I also gave grid cells different dimensions based on the hierarchy of the information. So if the information is something that I think is important to the user then I gave that cell a bigger dimension with higher depth.
To convert my design into code, the obvious choice for me was to use CSS grids. I declared <body> as a grid container because I wanted to show the whole page in single view without any scroll.
This is the result.
Functioning
Let’s divide this section into three parts — Getting data, Modifying Data and Rendering data.
Getting Data — The first step was to get the data. Here by data I mean user’s location and the weather data fetched by keeping user’s location into mind. In programming to access data from a service we use an API (Application Programming Interface). So if we want to access data from Youtube website, we would use Youtube API which acts as a mediator of the information.
In our case to get user’s location I used Geolocation API. Geolocation is one of the many Web APIs browsers provide. In this project I learned something interesting that I want to share. JavaScript is a simple programming language that runs in browser in isolation without having access to internet. It access internet and DOM through Web APIs, which are browser features. So whenever we access DOM using document.getElementById or something else of that sort, we are actually reaching DOM using DOM API. DOM is not a part of JavaScript environment. To read more about Web API, click here.
Geolocation API provides information regarding user’s device location which includes latitude, longitude, acceleration etc. You can find more about Geolocation API here.
We can prompt for user’s location with the following code. If user gives the permission then value will be stored in long and let variables, if not then we can try IP address API to fetch location. But I didn’t use the IP address API in my case.
The second data we need is the weather data. I used weatherbit API and in weatherbit API, it had two endpoints — one for current weather and the other having weather forecast for next 16 days. Endpoints are actually URL which can be used to access data in JSON format. I needed to fetch two different API endpoints. I used fetch method to access these data and then used destructuring to store those data.
Modifying Data — The weatherbit API gives temperature information in Celsius. So I used a simple function that converts Celsius into Fahrenheit when user clicks on it.
The main challenge that I faced while modifying data was to convert UTC time into the time user is in, in 12 hour time format. The weatherbit API always gives UTC time. So I needed to add or subtract the timezone offset from the UTC time.
Here, the idea was to convert the UTC string which comes as a string “00:10” into two separate integers. One being 00 and the other being 10. Then I calculated the Timezone offset using in-built date function. The interesting thing that I found was that for positive timezone, like +5:30. It always gave me a negative number.
Rendering data — For rendering data to the DOM, I simply used textContent to display the values. dayOneDate.textContent = dayOne;
For animation I used Lottie animation library. If you want to know more about Lottie go here. I will try to explain the animations briefly because there’s not much going on here. First I imported the lottie js files in my index.html. Then I’m using if…else conditions to show the right weather animation for the right condition.
Here’s an example. The currentIconId and currentPod are weatherbit data that tells the current weather(rain, snow etc) and whether its day or night respectively. On that basis I’m deciding which animation to show.
Background Animations
There are four types of background animations which depends on the weather — cloudy, snow, rainy and night.
Among them I want to explain here the night animation, the reason being, one it looks great and unlike other animations I came up with the whole idea. The idea was to create several html divs, each having different size and positioning and also different animations.
In this makeStars function, I’m creating 200 <div> elements, each having a size which can be from 1 to 3 pixels using random Math function. Then I’m populating these <div> in the parent div which occupies the whole screen. I’m assigning them different CSS IDs and a main CSS class. On line 903 & 904, I’m shifting their position from top and left randomly based on user screen’s width and height.
The code below is the SCSS snippet which provides randomness (sort of) to the stars. SCSS or SASS is a CSS pre-processor which gives you ability to add logic to your CSS. In other words you can use CSS as a programming language instead of using cascading programming style. Also SCSS or SASS are basically the same things, the only difference is of syntax. SASS uses indent to define scope like in python, on the other hand SCSS uses our friending curly braces {}. To learn more about SASS, click here.
So here, the idea was to divide the 200 star divs into three categories each having different keyframe animations. In the code snippet, I’m again looping through 200 times (no of divs) and assigning two variables — randomId and randomFl. The value of randomId can anything from 1 to 3. randomId variable determines which animation will be given to the star. There’s also three keyframes each having different motions which are attached to the stars div on the basis of randomId.
The first three values in animation property are the keyframe name, time of the animation and the delay.
In my case I am adding two animations to each star div, one is the universal stars class and the other can be one of the three animation keyframes. While assigning them for the time of the animation I am giving a random number which can be anywhere between 16 to 55 seconds for move-1 animation, on top of that I’m also adding an animation delay which can be anywhere between 0 to 9000 ms. These random time values gives an illusion that movement of stars are random. But as you can see all the motions are fixed, I’m just changing the speed of animation and its delay. I’m also adding a flicker animation based on the same logic.
Conclusion
Education without application is just entertainment. — Tim Sanders
Though I had some understanding of the web development in bits and pieces before, but I never understood how these technologies worked together in conjunction with each other. This project helped me to put those pieces together and made me understand the big picture. It made me realize the elegance of web development. Web development has many parts — browser, javascript, DOM, APIs, server and the list goes on. But when you put these things together, it makes sense why these things exists.
I love creating things and I’m pretty sure that I’ll continue to work on new projects with these new tools that I have learned. 😄
