Creating Weather App Using JavaScript [Day 1]

INTRODUCTION

Today, I thought maybe I should practice my frontend knowledge so I check some challenges from Frontend Mentor but all the challenges were either completed by me or were boring. I am a big fan of frontend mentor's challenges but I haven't purchased the premium version, that's why I have to stick with the free versions.

But then while surfing the internet I found DevChallenges. It is a website similar to frontend mentor's but the only difference it has, that I really like, is it provides you the Figma designs of the challenges for free.

While exploring their challenges I found a weather app. Well, you will say what's new about the weather app, yeah I know it's pretty basic but when I saw the design it just blew my mind.

The designs were very amazing. How a simple weather app that many courses or youtube videos show us can be very complex and amazing. And soon after I saw those designs I understood this app needs to be on my portfolio website, So I start building it. Here is my GitHub Repo if you want to follow. I don't know how much time it will take me to complete it.

Tech Stack

The Website suggests creating this project using a JavaScript framework like React or Vue but I thought creating a weather app using a JavaScript framework could be a little time killer. That's why I chose vanilla JavaScript. Now let's talk about styling. You could use normal CSS for it or any CSS frameworks but I will prefer you to choose Sass if you really want to practice your frontend skills.

Now, module bundler. There are plenty of module bundlers in the market like Parcel, Webpack, Snowpack, etc, but I am going to use Vite which is very fast. I have also written a blog about it Read Here. Now let's move on to the building part.

Creating New Project With Vite

Copy the below command and paste it into your terminal for creating a Vite app.

npm init vite@latest

Give a name to your project and choose vanilla js. And then change your directory to that folder and install all the modules.

cd *your-project-name*
npm install
npm run dev

After that, we need to install some dependencies. We are going to install Axios for fetching data from the rest API. The API we are using is MetaWeather. And then we will install Sass.

npm install axios

npm install -D sass

Folder Structure

Now, let's talk about folder structure. NOTE:- YOU CAN ARRANGE YOUR FOLDERS HOWEVER YOU WANT, THESE ARE HOW I LIKE TO DO. First of all create an src folder on your root directory, it will hold all your source code except your index.html file. Create scripts and scss file inside your src folder. Put your main.js file inside of the scripts folder and delete the styles.css file from the root directory as we are going to use scss.

Your folder structure will look something like this.

I have also added an assets folder which has nothing but only an image that you can download from the DevChallenge. We will use the image for styling our app.

Sass Folder Structure

We are going to use 7-1 pattern. I will suggest you Read Here. 7-1 pattern means you have to create 7 folders and only 1 scss file for example a base folder which will hold all your base styles like typography and resets etc. An abstracts folder will contain colors, fonts and breakpoints, and much more. And only 1 scss file you need to create.

Inside of styles.scss file there is only a single line.

@use './base';

What is @use? Well, @use is a special syntax that gets available to us in the recent dart-sass update. What about @import? You can still use @import to import all your styles in scss but if you visit the sass website they will suggest you use @use and @forward instead of @import which does the same thing. They have also written that maybe in the future @import will be deprecated and in longer in use. So, it's better to use it from now on. You can check youtube videos to learn more.

In the above case, @use works as @import but instead of importing every file which is inside of the base folder which we used to do previously, it imports the whole folder.

So what's inside the base folder. You can see the picture below to understand.

The base folder holds what we might call the boilerplate code for the project. In there, you might find the reset file, some typographic rules, and probably a stylesheet defining some standard styles for commonly used HTML elements.

We have a _helpers.scss file which are all the helper classes we might be needed in the future. After that, we have a _reset.scss file which contains margin and padding resets. You can also name it _boilerplate.scss. Then, we have _typography.scss which contains styling related to typography. NOTE:- IF YOU WANT TO LOOK INSIDE THE FILES MAKE SURE TO VISIT MY GITHUB REPOSITORY.

You might be asking why you are putting an underscore in front of every file name? Well because if you create files without an underscore it will create each file in the dist folder but we want only one scss file that's why we need to put it with an underscore.

One thing you will also notice that that in every folder inside of the scss folder there is a _index.scss file. The index file acts as a forwarder, it forwards all our files which will get imported in styles.scss file. Previously, we import every single file in our styles.scss file but now, we just have to import the folder.

// _index.scss

@forward './reset';
@forward './helpers';
@forward './typography';

We also have an abstracts folder inside of the scss folder, so what does the abstracts folder contain. Well, it gathers all Sass tools and helpers used across the project. Every global variable, function, mixin, and placeholder should be put in there. I have created only two files. A _variables.scss file for storing colors and fonts and a _breakpoints.scss file which contain media queries that could be used in our project.

CONCLUSION

Well, only this much I have set up on day 1. I will keep posting till the project is completed. I will also share what I learned each day while creating this project. If you want to create this project on your own don't forget to visit DevChallenges and if you want to view my code, visit my GitHub Repo. If you want to talk more about anything don't forget to comment. And if you want to learn more about @use and @forward then I will highly suggest you watch this YouTube Video from Kevin Powell.

I haven't talked about @use and @forward in great detail but watching the video will clear all your doubts. Kevin Powell also has a video about organizing your sass files as I have done you can also check it Over Here. Comment if you want me to write a blog about organizing sass files and talking about @use and @forward.