DEV Community: Neha Gupta

Let's talk about CSS Box Model

Neha Gupta — Mon, 20 Sep 2021 12:48:11 +0000

All the HTML elements like a div, a button, or text content are considered as boxes in our CSS file. And, how these boxes are aligned in our web page is answered by CSS Box Model.

These boxes are of two types:
1) Inline-box - They all will get placed on a line and padding or margin will not cause other elements to move away from the box.

eg: <span>, <a>, <em> and <strong> are the inline elements

2) Block-box - This will break onto the new line and will extend in the inline direction to fill space available in its container.

eg: <h1> and <p> are block elements

CSS Box Model

CSS Box Model entails how our web pages are rendered. It contains the following parts:

1) Content: Here all of our content like text/images are placed.
2) Padding: This is a clear space area between our content and border.
3) Border: This forms the boundary around our content & padding.
4) Margin: This is a clear area outside the border.

CSS Box Model

Let's learn this with an example:

Suppose you have two div tags that contain a paragraph with p tag and a button.

In HTML:

<div class="box1">
  <p>box 1</p>
  <button>button</button>
</div>
<div class="box2">
  <p>box 2</p>
  <button>button</button>
</div>

In CSS:

By default, some margin and padding are present on our webpage. Let's set it to 0 for getting more clarity around the topic.

* {
  margin:0;
  padding:0;
}

Now, set background-color to each div tag. The height given to box 1 is 100px.

.box1 {
  height: 100px;
  background-color: rgb(143, 143, 243);
}

.box2 {
  background-color: rgb(255, 159, 204);
}

Our page will look something like this.

Now, in our CSS make the following changes in .box1 class:

.box1 {
  height: 100px;
  margin: 20px;
  border: 10px solid black;
  padding: 20px;
  background-color: rgb(143, 143, 243);
}

We've added margin of 20px, border of 10px and padding of 20px to our box1.

Here, the outer orange box depicts our margin. After that, we have our border of 10px. The green space between our content and border is the padding. Finally, in the innermost part, we have our content.

You can also check this out in our developer tools in our browser.

Content Box Model

Notice that the height that we've mentioned is 100px but, in our developer's tool and the UI, it's getting computed to a lot 160px. To do such calculations we have two types of box-models.
1) Content Box Model
2) Border Box Model

1) Content Box Model

That's because by default, the box-sizing property is set to content-box. Here, only the content of the box is taken in effect when calculating the width of the box. This adds up all the height and width to our content with the following formula:

Total element's width = width + padding-left + padding-right + border-left + border-right
Total element's height = height + padding-top + padding-bottom + border-top + border-bottom

Hence, we were getting 160px of total height = 100px+ 10px + 10px + 20px + 20px

Syntax:
box-sizing: content-box this is present by default.

2) Border Box Model

Here, the width of the element as being the combined width of the border, padding, and content area of the box.

Syntax:
box-sizing: border-box

After applying this in our code, we'll observe the following results:

Border Box Model

The height of the content is reduced from 100px to 40px.

Illustrative difference between content-box and border-box

Difference between content-box and border-box

Wrap Up

Great! Now we know what CSS Box Model is and why it is so useful for aligning HTML elements in our web pages. ❤️
We got a good grasp of the differences between the Content Box Model & Border Box Model.

Thanks for reading!

Everything you need to know about Execution Context in JavaScript

Neha Gupta — Fri, 17 Sep 2021 19:38:43 +0000

Okay! You may be writing your code in JavaScript for ages, you know what logic to use when but, have you ever wondered how variable or function created holds information about its environment?
Well, there's something called Execution Context which gets created by our JS Engine which does all the magic in the background. Let's demystify it in this article.

What is Execution Context?

By the name we can decode it as:

Execution = to execute out code,
Context = specific environment

Hence, Execution Context provides information about our environment where our specific code is stored and executed.

Whenever a script is executed by the JS engine, a new execution context is created. By default Global Execution Context is created.

Global/Default Execution Context

It is the first thing that is created when we write JavaScript code. Hence referred to as Default Context. Since JS is a single-threaded language, only one Global Execution Context(GEC) is created for executing the code.

It has two phases:

1) Creation phase
2) Execution phase

Let's dive deep into it!

1) Creation Phase

In this phase, the compilation of JS code is done but doesn't involve the execution of code. Let's consider the following program.

let x = 5;

function printHello() {
    console.log("Hello Kitty!");
}

printHello();

When we debug this program with our developer's tool of our browser, we could notice that the value of x variable is coming as undefined in our scripts and "Hello Kitty!" has not been printed in our console. Also, there's something called window present in our global scope.

This means in Creation Phase following this happens:

variables - initialized with undefined value
functions - declared and initialized but are NOT executed yet
window/global object - gets created (holds information about function arguments, variables as well as inner functions declaration)
this - created which points to the global object created above

To sum it up,

Image src: https://www.instagram.com/nehacode/

2) Execution Phase

Finally! Our code gets executed in this phase. JS engine executes the code line-by-line where all the variables are finally initialized with their value and functions get invoked. For each function invocation, Functional Execution Context gets created. Let's learn about this.

Functional/Local Execution Context

Whenever a new function gets called, a new execution context is created with basic two phases: The creation phase and the execution phase. This new execution context is known as Local/Functional Execution Context (FEC).

Hence in the above code, while parsing the function invocation we could notice our function being present in the local scope.

This FEC is similar to GEC, the difference is that it creates the arguments object instead of creating the global object where this points to the current object.

Hence, In Execution Phase:

Image src: https://www.instagram.com/nehacode/

Visual Representation

Since, for each function invocation => new execution context is created. Let's visualize this whole concept:

Image src: https://www.instagram.com/nehacode/

and, this feels trippy! 😵‍💫

For ease of storing Global Execution Context and all Local Execution Context, we have a data structure called Call Stack.

Whenever a new execution context is created, it gets stacked above the previous execution context, and so on. The JS engine takes care of keeping track of this stack's execution so that one execution context gets executed at a time to maintain the Single-threaded nature of JS.

Wrap up

Great! Now we know what execution context it and why is it so useful for our beloved JS engine ❤️ We got a good grasp of the differences between Global Execution Context & Local Execution Context, along with the phases required in their creation.

👏Thanks for reading!

Build your own Shakespeare Translation Web App with JavaScript Fetch API

Neha Gupta — Sat, 10 Apr 2021 20:50:54 +0000

Shakespeare may have been a genius, but one thing's for sure: he wasn't speaking our language. His ever-popular works (dramas and poems) make his unique language style live even today.
I've always been curious about how Shakespeare would've expressed my thoughts in his words. Have you been too??
Then you've come to the right place, my friend!

This is a vanillaJS project which uses API from https://funtranslations.com/ to translate English text into Shakespeare English.

Prerequisites	Basic understanding of HTML and CSS, an understanding of what JavaScript is.

This is what we'll build:

Try out the app here

Source Code

In case you get lost while following along, you can grab the source code from here.

Let's begin!

Getting Started

To get started, we'll be using VSCode for writing our code. Create your first file with the name index.html for writing out HTML code.
In our Application, we have 3 basic elements:

Input Field - to accept the user's input
Translate Button - to create an event when the user clicks on the translate button.
Output Field - to preview the translated text.

These 3 elements can be created as follows in HTML:

HTML code snippet - index.html

<body>
    <input type="textarea" id="inputTxt" placeholder="insert your text">
    <button id="translateButton">Translate!</button>
    <p id="outputTxt"></p>
    <script src='/scripts/app.js'></script>
</body>

Note: < script > tag is being used to bind this HTML file with the JavaScript file app.js.

Initialising variables to store our data

This section of the code sets up the variables we need to store the data our program will use.
In your app.js file, create the following variables:

JS code snippet - app.js

let inputElement = document.querySelector("#inputTxt"); // input element
let translateBtnElement = document.querySelector("#translateButton"); // button element
let outputElement = document.querySelector("#outputTxt"); // output element
let url="https://shakespeare.p.mashape.com/shakespeare.json"; //API URL

The first three variables inputElement, translateBtnElement, outputElement are each made to store a reference to the form text input, translate button and output element in our HTML.
Our final variable url is used to store the server's API call URL from where we obtain the translated data.

Here, we've used .querySelector() function for selecting the particular id that we've already set in our index.html file.

To listen to the button click event we need to define an event handler function.

translateBtnElement.addEventListener("click", translateFunction);

Here,

click - is the event
translateBtnElement - is the event listener
translateFunction - is the event handler/callback function.

After click event has been fired on translateBtnElement, the addEventListener() method handles by calling translateFunction().

Before defining the translateFunction() we need to get some basic knowledge about APIs.

What is an API?

API stands for Application Programming Interface, is a set of functions that allows applications to access data and interact with external software components, operating systems, or microservices.

WOAH! What?!

OK! Let me explain this to you in easy words. Suppose you are in a restaurant and you are dying to have that chocolate cake. You don't go straight to the chef for placing the order, right? The waiter does that for you. That's what API is. It's an interface that communicates between applications.
Here,

You/Customer: Client
Waiter: API
Chef: Server Hence, in order to get the data from the web servers, we need APIs.

In our example, we are using FunTranslationAPI to fetch the data in JSON format(key - value pair).

Let's call the API then!

Fetch API

The Fetch API is a modern interface that allows you to make HTTP requests to servers from web browsers to given URL.

Basic syntax involved:

fetch(url)
    .then(response => {
        // handle the response
    })
    .then(data => console.log(data))
    .catch(error => {
        // handle the error
    });

Here in the fetch() function we pass the URL of the resource from where we are requesting the data. This will pass the data as a response object. The response object is the API wrapper for the fetched resource with a number of useful properties and methods to inspect the response. This will then passed to the data variable (you can give any name to this) for printing output.

Now, it's time to define the functions.

Defining Functions() for some action

To get our code into some action, we need to define some functions.

function translateFunction(event){
    let inputValue = inputElement.value;   //fetching input value 
    fetch(url)                             //Fetch API call
        .then(response => response.json())
        .then(data => {
            outputElement.innerText = data;
        })
        .catch(() => alert("Shakespeare(Server) is busy! Try after sometime"))

Now, let's break it down:

We'll extract inputElement value into inputValue variable.
Making fetch API call using the given url and then extracting response object. This is just an HTTP response, not the actual JSON. To extract the JSON body content from the response, we use the json() method via using an arrow function.
Setting data variable's value to the outputElement variable.
Finally, error handling with catch() function.

Let's try our application. Go to the browser, input your text & click on the translate button. You'll get the following output.

In console

{
    "error": {
        "code": 400,
        "message": "Bad Request: text is missing."
    }
}

That's not the output that we were expecting. That's because we've to pass the text to our URL. For that we'll define another function translatedURL().

function translatedURL(inputValue){
    return `${url} ?text= ${inputValue}`;   
}

Let's try our app with sample text Hi. How are you? and calling in fetch() function as fetch(translatedURL(inputValue)) instead of previous fetch(url) to concatenate the text message to our server API's URL. We'll get output like this:

{
    "success": {
        "total": 1
    },
    "contents": {
        "translated": "Good morrow. How art thee?", 
        "text": "Hi. How are you?",     
        "translation": "shakespeare"         
    }
}

Success! Not so much. Notice that the output text doesn't look pretty. This output is JSON data and we need to extract the translated value from it.

Here,

translated: translated text
text: input text
translation: language of translation being used from FunTranslation API We refer it by json.contents.translated. Now our code should look something like this:

function translatedURL(inputValue){
    return `${url}?text=${inputValue}`;  
}

function translateFunction(event){
    let inputValue = inputElement.value;    
    let finalURL = translatedURL(inputValue);
    fetch(finalURL)
        .then(response => response.json())
        .then(json => {
            outputElement.innerText = json.contents.translated;
        })
        .catch(() => alert("Shakespeare(Server) is busy! Try after sometime"))
}

and we get the following output:

Voila! We've built our very own Shakespeare Translation Web App with JavaScript Fetch API.

Note: Funtranslation APIs are free to use, hence they have a limitation of 5 calls/hour. Once it exceeds this limit, it would result in a failure with an error we've mentioned in the catch() block.

Finished for now...

Congrats on making it this far! We've got the basic understanding of DOM scripting i.e. JS in the browser, calling servers, and getting data from there, taking user input and showing user output, and many more things.

Now all that's left for you is to design your own styling with CSS. You can also check out funtranslation site for a similar app with different translation languages.

Click here to check out the live project.

Give it a try, create your version of the same and share your experience and feedback on the comments section.

Thanks for reading!