DEV Community: Saqib Suleman

My first JavaScript App

Saqib Suleman — Fri, 19 Feb 2021 16:23:59 +0000

Practice makes a man perfect.

Learning JavaScript is not something that can be accomplished overnight or by just watching some tutorial, one thing that every skill requires you to do if you want to be a master at it, is definitely practice. After going through the JavaScript section of the course, I decided to put my freshly learned skills to practice.

A friend of mine shared a Dribble design for a clock app, so I decided to clone that app as close as possible. Initially, I was unaware that HTML and CSS can be such powerful tools when creating a UI. When I first looked at the app design, I didn't even think it was possible to make such UI with just HTML and CSS but when I started working on it, it all just came naturally to me.

After I was done adding the content and styling it, it was time to make the clock work like clockwork :D. I tried but I couldn't come up with my own logic to make the clock work so I had to take help from a YouTube tutorial. Even after watching the tutorial, I was unable to figure out how the logic was actually working because I had never seen any of the methods being used in the tutorial such as Date(), getSeconds(), getMinutes() and getHours(), so, I decided to write the logic by coding along and after the app was working I printed out each of the methods with console.log() to how each method was contributing to the working of the app and after that, I was completely able to understand the logic of the app.

App link: https://amazing-curran-015dd1.netlify.app/
Source code on Github: https://github.com/saqibs3291/myClock_APP

Ping Pong Scorekeeper Widget

Saqib Suleman — Fri, 19 Feb 2021 15:17:57 +0000

After going through the basic JavaScript in the Web Developer Bootcamp course by Colt Steele, I moved on to functions and Document Object Model(DOM). Once I got enough practice with functions and manipulating DOM objects by doing the course's coding exercises, I decided to do a code-along project of a scorekeeper widget, specifically for Ping Pong. Bulma was used as a CSS framework for the styling of the widget.

Before adding the logic for the widget with JavaScript, basic HTML was added to layout the content on the page. A "Player 1" button, a "Player 2" button and a "Reset" button were added for manipulating the widget. A "select" was also added to determine the score up to which the game will be played.

You can check out the widget at vigorous-blackwell-9259c4.netlify.app.

Source code can be found at Github: github.com/saqibs3291/scoreKeeper_widget

Talking about "for" and "while" loops in JavaScript

Saqib Suleman — Wed, 10 Feb 2021 18:02:26 +0000

Looping in JavaScript is a time-efficient method to actually run a code more than once according to the requirement. Loops are very helpful in most cases and save a great deal of time and effort. There is various type of loops that are used in different situations as explained below:

For Loops
For loops are used where some code is to be repeated a number of time that can be predetermined by giving it specific instructions such as

for (let i=1; i<=6; i++){
    console.log("Da ba dee da ba daa");
}

While Loops
While loops are used where it cannot be pre-determined how many times the code will actually run. In while loops, the code keeps repeating "while" the given condition is not satisfied as shown below

while (i < 10) {
  text += "The number is " + i;
  i++;
}

Decision Making and Loops in JavaScript

Saqib Suleman — Tue, 09 Feb 2021 10:30:08 +0000

There are situations when we want to run the code at different conditions, such as, if one condition applies run a particular code, if another condition applies another code is run. This is prioritized with "if" and "else if" conditionals as follows:

function getColor(phrase){
   if (phrase === "stop"){
       console.log("red");
   } else if (phrase === "slow"){
       console.log("yellow");
   } else if (phrase === "go"){
       console.log("green");
   } else {
       console.log("purple");
   }
}

We can run codes in multiple loops if we want to with the help of loops. With loops, our code runs until a certain condition is satisfied such as:

for (let i = 25; i >= 0; i-=5) {
    console.log(i)
}

Arrays and Object Literals in JavaScript

Saqib Suleman — Tue, 09 Feb 2021 10:29:59 +0000

Arrays are like a set of primitive types that is used to store information in them in the form of numbers, strings, booleans etc. Arrays can be modified by adding or removing data.

let lottoNumbers = [1, 2, 3, 4, 5, 6];

Object literals are also like arrays except for the fact that data is stored in them with a key. Every primitive type data that is stored in them has a key assigned to it which can then be called out to display or modify that data.

let product = {
    name: "Gummy Bears",
    inStock: true,
    price: 1.99,
    flavors: ["grape","apple","cherry"]
}

Learning the Primitive types of JavaScript

Saqib Suleman — Tue, 09 Feb 2021 10:29:49 +0000

Firstly we learned about the primitive types Numbers and Strings, which are just as the name suggest that if we input number they are treated as a mathematical number and strings are treated as a string of information that we have inserted. Next up, we see Booleans which are just a true and false response from the script and other primitive types which are null meaning empty and undefined meaning not-defined or non-existing in our script.

Starting with JavaScript

Saqib Suleman — Tue, 09 Feb 2021 10:29:38 +0000

Ahhhh. Feels like an era spent on HTML and CSS but finally graduated both of them and now starting with JavaScript. Finally, we get to the verb of our Web developer bootcamp journey with which we can actually make our site do something other than just displaying content nicely. After a nice meet and greet the language, we dive into the basics of JavaScript such as learning about the primitive types which include Numbers, Strings, Booleans, Null and Undefined. We ran our JavaScript code in the Google Chrome Console initially just for the sake of simplicity. We learn about all the primitive types one by one in the upcoming sections.

Trafalgar (Figma Project)

Saqib Suleman — Tue, 09 Feb 2021 10:29:22 +0000

After completing the Museum of Candy Project, I felt like I needed more practice with HTML and CSS before moving on to JavaScript. So, a friend of mine shared a Figma webpage design and suggested that I clone that webpage as close as possible. I took up the task and started writing the HTML for that webpage section by section and I also kept styling it simultaneously so that I would have a better idea of my progress. I stumbled across many small issues when cloning that webpage. The issue that had me scratching my head was that I couldn't center some of my content but after revisiting some of the lectures about bootstrap grid, I finally figured it out. Beside that, I also got a bit familiar working with SVGs that I exported from Figma to use in my webpage. After adding all the content and styling it properly, I made my webpage responsive across multiple breakpoints by using the bootstrap grid system.

I have deployed that webpage on Netlify under the link zealous-jang-e14cfe.netlify.app. You can also find the source code on Github.

Github link: github.com/saqibs3291/trafalgar

Orignal Figma design: figma.com/file/s69MNKYf4OEwrhqPPo5aQL/trafa..

Museum of Candy Project

Saqib Suleman — Tue, 09 Feb 2021 10:29:11 +0000

After I completed the CSS section of the Web Developer Bootcamp including Bootstrap, we were pretty much done with learning basic CSS, now all that remained was to bring all the skills, that I picked up in the CSS section, to practice. For that, I recreated a simple webpage that was a code-along exercise of the course where we added a navigational bar, a header section and 3 more lorem ipsum sections just to practice responsive images and order of columns. In this exercise, I learned how to make a website responsive and got to see how we can use bootstrap to layout our content properly. It was a good overall practice of the basic HTML and CSS properties that I had learned in the previous section.

I have deployed that site on Netlify under the link infallible-wozniak-d9d3e2.netlify.app. You can also find the source code on Github.

Github link: github.com/saqibs3291/Museum-of-Candy

CSS Framework(Bootstrap)

Saqib Suleman — Tue, 09 Feb 2021 10:28:55 +0000

When we are working on a big project, adding styles to all of our content can be a lot of work, especially when we are new to programming and are not not familiar with the tips and tricks to get our work done quickly. So, there are CSS frameworks that help us add styles to our content in short time without having to style each of our individual element. When we use a CSS framework like Bootstrap, we don't need to write as much CSS code as we would have to if we are not using the framework. In Bootstrap, all of the CSS is pre-written and we just call out a particular style for our content by simply adding the specific class in our HTML markup which then picks up that particular style from Bootstrap style sheet. This is a much more time efficient process of adding styles to our markup. Other than this, adding navigational bars and laying out our content on the webpage with the grid system is also relatively simple and it helps us making our webpage responsive as well.

Note: The Bootstrap styles is added before our own style sheet if we need to write some extra CSS so that our CSS sheet can over-write the pre-defined style sheet of Bootstrap.

The CSS Box Model(Flexbox)

Saqib Suleman — Tue, 09 Feb 2021 10:28:34 +0000

Understanding the box model of CSS makes positioning and aligning our content much easier. In our CSS box model, we understand that every element has its own box model, such as if we add a paragraph to our webpage, that paragraph has a blue-box first which is the content of the paragraph, then there is padding between the content and the border of the content, then comes the border of our paragraph and outside of that border is the margin that our content is keeping from other content. In this way, we can position our content, in this case a paragraph, relative to other content on the web page.

After learning the Flexbox, I made a small pricing table project which you can check on Github. Github link: github.com/saqibs3291/pricing-table

Common CSS properties

Saqib Suleman — Tue, 09 Feb 2021 10:28:14 +0000

With the help of CSS, we can style our HTML in any way we want. Most common properties of CSS that are used to style our content include background, background color, background image, background position, border, border style, border color, margin, padding, display, font size, font family, font weight, text align, text decoration, visibility, width etc. CSS units which can be absolute such as px and relative such as ems and rems also play an important role in understanding CSS.

Note: It is possible to add style to our markup right in the HTML file but it is not recommended, a separate style sheet should be made which can then be linked with our HTML file.