Multiplication table is a table of the product of two numbers.

Image for post
Image for post

Hello 👋 my dear JavaScript developer friends. Hope you all are good and creating your dream projects. For quite some time I have been thinking about starting a series of Practical JavaScript Projects wherein I plan to create some projects in vanilla JavaScript and share with you all.

So, to start with, today I will be writing code to create basic multiplication tables with HTML table using JavaScript.

Create basic markup in index.html file

<div id="container" class="container">
</div>

Write some basic styles in styles.css

body {
font-family: sans-serif;
background-color: #fff68f;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 95vh…


As a web developer, I was always fascinated by the way the famous chat applications are built and the logic that goes behind their functioning. So, I chose to develop one myself as my React project as a part of web development immersive bootcamp at Juno College.

Project Description

Chat-Box is a chat application platform that enable instant messaging and allows real-time interaction. …


Image for post
Image for post

Rest Parameter uses the same syntax (…) like Spread operator, but the use and functionality is little different.

We know that many JavaScript built-in functions support an arbitrary number of arguments. For instance:

  • Math.max(arg1, arg2, ..., argN) – returns the greatest of the arguments.
  • Object.assign(dest, src1, ..., srcN) – copies properties from src1..N into dest.

Here, we’ll try to do the same (make a function take any number of arguments). And also, how to pass arrays to such functions as parameters.

A function can be called with any number of arguments, no matter how it is defined. Like here:

const product = (a, b) => {
return a * b;
}

console.log( product(1, 2, 3, 4, 5) ); //…


Image for post
Image for post
Spread Operator Syntax

In JavaScript ES6 has brought with it some really interesting features that has added expressive power to the language. Even though these tools allow us to perform some common operations, they are worth understanding because they do their job in a more concise and elegant way. One such new feature is the Spread Operator.

Spread Operator

The spread operator is used to split an array into a list of comma-separated values which can be used in various places such as function arguments or array matching. It allows any iterable value to spread individually inside a receiver. Iterables are anything that can be looped over such as strings, arrays, and sets. …


Image for post
Image for post

In any programming language a variable is simply a name of storage location. Similarly, in JavaScript a variable holds a reference to the location of the data in memory.

In JavaScript a variable name also holds the data type of the variable and it can be changed anytime. The variable’s data type is the JavaScript scripting engine’s interpretation of the type of data that variable is currently holding. A string variable holds a string, a number variable holds a number value, and so on.

let varOne = 10;
let varTwo = 20;

However, unlike many other languages, in JavaScript, the same variable can hold different types of data, all within the same application. This is a concept known by the terms loose typing/dynamic typing, both of which mean that a JavaScript variable can hold different data types at different times depending on context. …


Image for post
Image for post
The three floats { float: left }

We see the images in newspaper and articles are placed in certain position with rest of the content wrapped around it. But how is this possible because by default, block-level elements will not line up beside one another in a column-based format. Since columns are necessary in virtually every CSS layout, the float property is used to get this look.

What is a “Float” ?

The CSS float property allows a developer to incorporate table-like columns in an HTML layout. Float property forces any element to float inside its parent body with the rest of the element to wrap around it.

As I mentioned, originally Floats by design were created to allow flowing text around an image. Floats were not meant for layouts! If you try to use float property for full web page layout, making the page fully responsive will be a real struggle. …


Image for post
Image for post

After four years of crazy studying hours, insane assignments, gruelling exams and wild expectations, I made it! I was an engineer! A young energetic civil engineer who had a job in hand when she stepped out of college. I had made my parents proud and secured a stable future for myself.

The close to five years of construction industry experience was full of excitement and learning for me and I believe that experience has made me what I am today. …

About

Bhagirthi Jhamb

Front-end Web Developer, Bootcamp grad, learning Full-stack Web Development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store