Forem: Ayush Saini

Build a Netflix like custom Accordion

Ayush Saini — Sun, 06 Jun 2021 13:54:36 +0000

Recently I cloned the UI of Netflix's Landing Page using just React and Sass to practice CSS. Though it was simple, there were a lot of learning opportunities for someone like me to play with frontend development, and I quite enjoyed that challenge. Here's the link to the project if you are interested : Netflix Landing Page Clone.

In this post, we will be focusing on a section that you might have already seen on many other online platforms and learn how to implement that. It is called accordion, not the piano one thought 😂.

What is a web accordion?

It helps you manage collapsable content. They are useful when you want to toggle between hiding and showing a large amount of content.

This is what I built for the clone project:

If you click on one of the blocks, it would expand the content and look like this:

Let's get building 🔨

Note: For the sake of simplicity, I will use plain HTML, CSS, and Javascript to build this instead of React and Sass.

✏ First, let's create the structure of the accordion with HTML:

<div class="qna">
  <button class="accordion">Question 1</button>
  <div class="panel panel-closed">
    <p>Answer of Question 1</p>
  </div>
  <button class="accordion">Question 2</button>
  <div class="panel panel-closed">
    <p>Answer of Question 2</p>
  </div>
  <button class="accordion">Question 3</button>
  <div class="panel panel-closed">
    <p>Answer of Question 3</p>
  </div>
  <button class="accordion">Question 4</button>
  <div class="panel panel-closed">
    <p>Answer of Question 4</p>
  </div>
</div>

🎨 Now, we will add some basic styles and reset defaults with CSS:

/* Centers horizontally */
.qna{
  max-width: 500px;
  margin: 0 auto;
}
/* Button default resets */
button{
  border: none;
  outline: none;
  cursor: pointer;
}
/* Styling the accordion buttons */
.accordion{
  width: 100%;
  background-color: #303030;
  color: #fff;
  font-size: 20px;
  padding: 18px 20px;
  margin-bottom: 1px;
  text-align: left;
  /*  To push the plus sign to the right  */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* adding the "plus" sign (+) */ 
.accordion::after{
  content: '\02795';
  font-size: 20px;
  color: #fff;
}

.panel{
  background-color: #303030;
  color: #fff;
  margin-bottom: 4px;
  overflow: hidden;
}
.panel > p {
  font-size: 20px;
  padding: 10px 20px;
}
.panel-closed{
  max-height: 0;
  overflow: hidden;
}

⚙ Adding Functionality with Javascript

We should roughly note down what we want. When someone clicks on the accordion button, we would want to:

show the panel below the accordion (with sliding down animation)
change the "plus sign (+)" to something else, like a "cross sign (x)"
auto close the previous panel if another button is clicked

Let's code that down, one by one:

Here, we can add a class panel-open and remove the panel-closed class on the panel div when someone clicks the accordion button and similarly do the opposite when the button is clicked again. We already have the closed class, let's write the open class:

.panel-open{
  max-height: 700px;
}

Coding the class add and remove logic in javascript:

let accordion = document.getElementsByClassName("accordion");
const totalAccordions = accordion.length;

for (let i = 0; i < totalAccordions; i++) {
  accordion[i].addEventListener("click", (e) => {
    let panel = e.target.nextElementSibling;

    if (panel.classList[1] === "panel-closed") {
      panel.classList.add("panel-open");
      panel.classList.remove("panel-closed");
    } else {
      panel.classList.add("panel-closed");
      panel.classList.remove("panel-open");
    }
  });
}

This would toggle max-height property based on the click event on the accordion button.

Now, to change the plus sign to a cross sign, we can add another class to the accordion button on active state and javascript would handle that on the same click event handler function:

/* active class for accordion, adds the "cross sign (x)" */
.accordion-active::after {
  content: "\274C";
}

After adding the js code:

let accordion = document.getElementsByClassName("accordion");
const totalAccordions = accordion.length;

for (let i = 0; i < totalAccordions; i++) {
  accordion[i].addEventListener("click", (e) => {

  // toggle the class 'accordion-active' on accordion button
  e.target.classList.toggle("accordion-active");

    let panel = e.target.nextElementSibling;

    if (panel.classList[1] === "panel-closed") {
      panel.classList.add("panel-open");
      panel.classList.remove("panel-closed");
    } else {
      panel.classList.add("panel-closed");
      panel.classList.remove("panel-open");
    }
  });
}

A more Clean way of doing that would be to use toggle instead to add and remove:

let accordion = document.getElementsByClassName("accordion");
const totalAccordions = accordion.length;

for (let i = 0; i < totalAccordions; i++) {
  accordion[i].addEventListener("click", (e) => {

  // toggle the class 'accordion-active' on accordion button
  e.target.classList.toggle("accordion-active");

    let panel = e.target.nextElementSibling;

    if (panel.classList[1] === "panel-closed") {
      panel.classList.toggle("panel-open");
    } 
  });
}

🌈 Adding smooth slide down animation:

To make the sliding of the panel look smooth, we can also add a transition property that would look for the max-height, all we have to do is to add that on the panel class.

.panel{
  transition: max-height .33s cubic-bezier(.5,0,.1,1);
}

Here's a nice visual comparison between the above cubic-bezier curve and a linear transition.

This is how it looks like after adding the transition property:

We are almost done, but something is missing. Yep, the previous panel doesn't auto-close on opening a new panel.

Let's create a function for that, this function would take in the currently open panel as an argument and close all the other open panels (if any) on opening another accordion.

const closeAllExcept = (pan) => {
  for (let i = 0; i < totalAccordions; i++) {
    let panelToClose = accordion[i].nextElementSibling;
    if(panelToClose !== pan){
       accordion[i].classList.remove("accordion-active");
       panelToClose.classList.remove("panel-open");
    }
  }
}

We now need to invoke this function. Below is the final javascript code, you would also notice that I had moved the accordion-active class toggle code inside the if block because now closeAllExcept also has the control to toggle the class.

let accordion = document.getElementsByClassName("accordion");
const totalAccordions = accordion.length;

for (let i = 0; i < totalAccordions; i++) {
  accordion[i].addEventListener("click", (e) => {
    let panel = e.target.nextElementSibling;

    if (panel.classList[1] === "panel-closed") {
      e.target.classList.toggle("accordion-active");
      panel.classList.toggle("panel-open");
      closeAllExcept(panel);
    }
  });
} 

const closeAllExcept = (pan) => {
  for (let i = 0; i < totalAccordions; i++) {
    let panelToClose = accordion[i].nextElementSibling;
    if(panelToClose !== pan){
       accordion[i].classList.remove("accordion-active");
       panelToClose.classList.remove("panel-open");
    }
  }
}

Hooray, it's working perfectly now 😍

It was fun building this, isn't it? 😎 If you want to play and mess around, here's a link to my Codepen for this project. If you enjoyed reading this, let me know in the comments or reach out to me on Twitter @AyushCodes 🙌

📖 Resources

Promise in Javascript

Ayush Saini — Wed, 26 May 2021 09:55:36 +0000

In the previous post, we talked about Asynchronous Javascript. In this article you will learn:

What are promises?
What is fetch API?
How and why fetch works differently than other web APIs like setTimeout?
What is Microtask Queue and how it is different from Callback Queue?

What is a Promise?

A promise is a special kind of object in javascript that lets asynchronous methods return values like synchronous methods, i.e, it gets returned immediately when we make a call to a web API like fetch to supply the final value at some point in the future.

We also attach functionality to the promise object that gets automatically triggered when that value comes back in the javascript from the browser API and that value would also be the input of that function.

What is fetch API?

Suppose you are building a Weather application that displays the weather of a city/country on search. Let's say the UI is done, now comes the main part - the weather data. Here's what you might need -

The app should be able to get the data from a server.
When the data arrives, the app should display it.
If the data fails to arrive, you would still want to display something like an error message.

Javascript doesn't know how to interact with the outer world a.k.a Internet. You know from the Asynchronous Javascript post that this is where Web APIs shine.

Fetch is a Web API that provides an interface for fetching data. Let's see how fetch works.

Why fetch is different than setTimeout?

Fetch works differently than the web APIs we discussed earlier like setTimeout because it not only initiates a background browser functionality but also immediately returns a placeholder object known as Promise.

How fetch works under the hood?

Consider the code below:

function display(data){
    console.log(data);
}

const upcomingData = fetch('https://getWeatherData.com/temp/seattle'); 
upcomingData.then(display);

console.log('Me first??');

upcomingData would be the return value of the fetch('https://getWeatherData.com/temp/seattle') Fetch returns an object with the initial value undefined and another hidden property onFulfilled that is an empty array. This special object runs all the functions provided inside the onFulfilled array when the value gets updated.

Fetch sets up XHR i.e, XMLHttpRequest in the browser which retrieves the data from the URL. Now while fetch was getting the data from the getWeatherData servers, javascript continues to execute the next line of code because the task was asynchronous.

Now on the next line, we have upcomingData.then(display), if I were to ask you what this line is doing, you would most probably tell that 'when we get upcomingData, then call display function'. At least this was what I had in my mind before. But this is a wrong explanation.

Remember earlier I said that there is a hidden array called onFulfilled. Well, the method then will take the argument display which is a function definition, and push it inside the onFulfilled array, and on updating the placeholder value of the promise object, all the functions inside the onFulfilled array will get run automatically.

🤔 Quick doubt - Why use `then`, why not `onFulfilled.push()` ?

Because it's not a normal array, remember it's a hidden array. That's why you can't use the push() method on the onFulfilled array.

Now on the next line, Me first?? would be logged to the browser console. Now all of our synchronous code, but the fetch was doing its background work to get the temperature of Seattle city from the server. Let's say it comes back with a response with a value of 12°C, which updates the value of upcomingData object to 12°C, which triggers display function to run with input 12°C. Hence, now 12°C is logged to the console.

This is how the output would look like:

Me first??
12°C

What if the server fails to send back the data?

Just like onFulfilled, there is onRejected array also, which auto triggers any function inside it when the promise is not resolved. And you would pass the error handling function inside of onRejected through another method called catch(). For example:

upcomingData
    .then(display)
    .catch(handleRejected);

This is known as promise chaining.

That's how fetch works under the hood. Now since you know that, let's see one more example:

function display(data){
    console.log(data);
} 
function printHello(){
    console.log('Hello');
}
function blockFor300ms(){ 
    // blocks js thread for 300ms with long for loop
}

setTimeout(printHello, 0);

const upcomingData = fetch('https://getWeatherData.com/temp/seattle'); 
upcomingData.then(display);

blockFor300ms();

console.log('Me first??');

Our first 3 blocks of code are 3 function definitions, so javascript will declare the functions and store their entire definition in the memory line by line.

Now we hit our first obstacle, setTimeout which starts a timer in the browser for 0 ms, which is completed instantaneously. Hence, at 0ms, the function printHello is added to Callback Queue and setTimeout's work is done, but the Event Loop won't let it run because there is still out global code to run.

Now, on the next line, we have upcomingData, so javascript would declare a constant upcomingData and make it undefined because its value is not defined yet, i.e, fetch hasn't returned a value yet. Fetch initially returns an empty object a.k.a Promise with the value undefined and onFulfilled empty array. But its work isn't done yet because it will also do some background browser work of getting the data from the server and when it retrieves the data, it will update the value property on the promise object.

The data retrieving work was going on in the background while we execute the next line of code, we are calling then() on upcomingData and passing in the display which will pass the display inside the onFulfilled array and whenever the value of the promise object gets updated, the display function would be triggered to run. But it isn't called yet.

Now the next line of code will block the further code execution for 300ms, i.e, it would be pushed on the Call stack for 300ms.

While it was there, fetch gets back the data from the servers and updates the value of the promise object to 12°C which triggers display to run. But it is not pushed into the Call Stack directly just like the callback of setTimeout. It is queued into a Queue. Well, it turns out like there is a Callback Queue that we use to queue the callback of setTimeout, there is another queue known as Microtask Queue in which functions triggered by updating the value property of promise object get queued.

Not after 300ms, the function blockfor300ms is popped off the Call Stack, and the code on the next line gets executed, which logs Me first?? onto the browser console, and all of our synchronous code is finished executing.

There are two queues with functions waiting to be executed, now comes the question:

🥇 Which will run first?

It turns out that Event Loop gives precedence to Microtask Queue over Callback Queue. It sees display waiting inside the Microtask Queue, hence it is dequeued and pushed into the Call Stack first, and 12°C is logged to the console.

Now since the Microtask Queue is empty, Event Loop will check the Callback Queue, and then push printHello into the Call Stack and Hello is logged to the console window.

This is how the output of the code would look like:

Me first??
12°C
Hello

It's surprising how printHello gets called at the last even though it was the one waiting from the beginning. And here's an interesting thing you can do, you can never let printHello run by continuously queuing the Microtask Queue and starve the Callback Queue.

This is how fetch works under the hood and why is it different from setTimeout. If you understand this, there is pretty much nothing left in the asynchronous javascript.

If you are still with me, I want to thank you for reading it. Let me know in the comments if there's something you would like to discuss, or reach out to me on Twitter @AyushCodes, my DMs are open for you.

Happy hacking!!!

📖 Resources

Asynchronous Javascript

Ayush Saini — Mon, 17 May 2021 08:58:39 +0000

🎉 Brief Overview of what you will learn in this article:

What is asynchronicity in Javascript?
How javascript code is executed under the hood?
Introduction to Web APIs like setTimeout and how they work
Basics of Event Loop, Call Stack, and Callback Queue.

The word asynchronous generally refers to two or more events not happening at the same time. It means a task-A can be done while waiting for another task-B to be done. Let's me show you what that means by an example:

🍔 A Scenario to understand asynchronous tasks:

Suppose you go out to a burger king restaurant and ordered a cheeseburger but the restaurant was quite busy that day therefore the staff noted your order and told you that it will take some time to process your order and will notify you when it's done. Now you see a soft drink machine and purchased a coke while your burger order was still processing. This is a simple example of an asynchronous event in which while you were waiting for your order to process, you continued with another task of buying coke, instead of scheduling the task of buying coke after you got your burger.

Asynchronicity in Javascript

Consider the code below:

console.log("start");

const data = getDataAndWait(); // it could take any amount of time
console.log(data);

console.log("end");

Imagine if there is a function getDataAndWait() which gets the data from a remote source and returns it. Here, the code after line 3 would not run until the getDataAndWait function returns something and therefore it prevents the execution of further code. This is because javascript is actually a synchronous language.

🤷‍♂️ Synchronous... Wha???

Javascript is synchronous (each line is executed in order the code appears) and single-threaded Language (one command executing at a time). Although it's synchronous in nature, we would still want to perform some tasks asynchronously like waiting for data to come from an API server or perhaps waiting for a timer to finish but we also do not want to block the rest of the code from executing while we are waiting. This is why we need to figure out a way to use asynchronicity in a language that is synchronous.

✅ Defining what our end goals are

We would like to be able to do a task that takes some time to complete, like fetching data from an API
We would want to simultaneously execute the rest of the code line by line while waiting for a response from a long time taking task
When that time-consuming task completes, we would want to be able to know that the task and its functionality are done.

Earlier I said that we need a way to use asynchronicity in javascript. But javascript is synchronous, right. So how can we do that? The answer is we don't need to because that is where Web APIs come into play.

🌈 Web APIs & amazing features of a browser

The browser you are using right now is actually quite powerful in the way that it can perform various tasks that javascript cannot. It has amazing tools like a timer, local storage, indexedDB, getting a client's geolocation, interacting with the DOM elements, fetching data from the internet, and so on. For example, the function setTimeout is actually a web API and not part of the javascript language itself. The console is another example of web API, 😲 surprising isn't it?
The web browser exposes the web API like console which can be accessed from any global object.

A Solution:

console.log("start");

setTimeout(function cb(){
  console.log("Hello")
}, 1000);

console.log("end");

Let's dive a little deep into the execution of the code line by line.

Brief summary of how code is executed under the hood

Everything in Javascript happens inside the Execution Context. Whenever a program is run, a global execution context is created inside the Call Stack and when the program is done executing, the global execution context is popped off the call stack.

When line 1 is executed since you know that console and setTimeout are not part of javascript but actually features of Browser. The console.log() will use the console API of the browser and log the string start into the console window.

Now on line 3, setTimeout() will use the timer feature and activate the time for 1000 milliseconds and register the cb() function.

Now control moves over the next line of code and logs end to the console window. Since there is no code left, the program is executed and the global execution context is popped off the Call Stack. The synchronous Javascript code is done now. But wait, what about the function cb because after that 1000 ms timer expires, the cb function needs to be executed, but that doesn't happen directly.

Event Loop & Callback Queue

As soon as the timer expires, the function cb is moved inside the Callback Queue which is a queue having code that is waiting to be pushed inside the Call Stack. But when is this function allowed to go in? Something that continuously loops and checks if the call stack is empty or not. If there's some code waiting to be executed in the Callback Queue, it quickly pushes it into the Call Stack and then the code is executed. That something is known as Event Loop

Hence, the cb is executed and it logs the word hello on the browser console.

//This is the output of the code
start
end
hello

Look like we have got what we wanted. The cb function is executed after some time without blocking the execution of the rest of the code. But there are some drawbacks with this approach:

The main task of cb was to log hello into the browser console window, but that is available in the callback function. This doesn't sound much of a problem because the example was very short. But in a real-world application, the asynchronous code often ends up with a callback inside another callback and so on. This is known as Callback Hell.
Passing a function into another function might feel a bit odd just to execute it after some time.

👋 That all for this article, I don't want to bore you people so, in the next article, we will look at another solution to write asynchronous code through promises. If there's something you would like to talk about you can ask me in the comments or, you can directly reach out to me on Twitter @AyushCodes

Forem: Ayush Saini

Build a Netflix like custom Accordion

What is a web accordion?

Let's get building 🔨

✏ First, let's create the structure of the accordion with HTML:

🎨 Now, we will add some basic styles and reset defaults with CSS:

⚙ Adding Functionality with Javascript

🌈 Adding smooth slide down animation:

📖 Resources

Promise in Javascript

What is a Promise?

What is fetch API?

Why fetch is different than setTimeout?

How fetch works under the hood?

🤔 Quick doubt - Why use then, why not onFulfilled.push() ?

What if the server fails to send back the data?

🥇 Which will run first?

📖 Resources

Asynchronous Javascript

🍔 A Scenario to understand asynchronous tasks:

Asynchronicity in Javascript

🤷‍♂️ Synchronous... Wha???

✅ Defining what our end goals are

🌈 Web APIs & amazing features of a browser

A Solution:

Brief summary of how code is executed under the hood

Event Loop & Callback Queue

📖 Resources

🤔 Quick doubt - Why use `then`, why not `onFulfilled.push()` ?