Building a Netflix clone with Vanilla JavaScript.
Tags: javascript, fintech, css, beginners
Published: 2021-07-07 09:33:53

Without the application of JavaScript, the Internet as we know it would not be at the level it is at today. JavaScript has become integral to the Internet experience as developers build both basic as well as advanced applications with the aim of a dynamic and increased interaction experience for users. This means that social media apps, e-commerce platforms, online video streaming, search and map engines would not be possible without it. Online video streaming platforms like [Netflix](http://www.netflix.com) have contributed to the Internet through the distribution of high quality media content, the type of entertainment that has been traditionally produced by the Hollywood studios and major television networks. Today we’ll be building a Netflix clone using plain JavaScript and the main prerequisite for building or understanding this article is knowledge of HTML, CSS and vanilla JavaScript.

#Getting Started
In this article, we will go about how a Netflix clone can be created using HTML, CSS and plain JavaScript, written in a way where every developer, regardless of skill level, should be able to follow.
#Defining our elements



##Background header

The header is made with a background image that uses a `cover` CSS property as its background size to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges. The “Sign in” and “Get Started” buttons created are linked to our sign-in page with the help of an `onclick()` element, which calls onto a function.

```javascript
function displayButton(){
    var final = document.getElementById('final');
    var main = document.getElementById('main');
    final.classList.toggle('closed');
    main.classList.add('closed');
}
```

The purpose of the function above is to hide the Netflix header then show the sign-in page once either of the “Sign in” or “Get Started” buttons are clicked.

The image below shows the Netflix header:
![Background Header](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5zfnqer37bjl83q6oi7.png)

##Sign In Feature

The sign-in feature consists of “E-mail Address” and “Password” `input` elements, where the email uses a [regex](https://en.wikipedia.org/wiki/Regular_expression) sequence of characters to validate an `if/else` statement. The `if/else` statement checks whether any value put into the email address `input` element is in the form of an email, else an alert would pop up stating that the email is invalid. In a situation where it is left blank, a different alert pops up stating that the email cannot be left blank.

```javascript
if(eVal === ''){
  alert('Email cannot be left blank');
  } else if(!isEmail(eVal)){
    alert('Email is invalid');
  } else if(isEmail(eVal)){
    console.log(true);
  }

function isEmail(EmailVal){
  return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(EmailVal);
}
```
The password input element also uses an if/else  statement to prevent it form being left blank. If both input elements pass the validation test, a message saying “Thanks for signing in. Click the sign out button” pops up below the sign-in button.

```javascript
if(pVal === ''){
  alert('Password cannot be left blank');
  } else {
    console.log(true);
  }
  if(isEmail(eVal) == true && pVal !== true){
    thanks.innerHTML = 'Thanks for signing in. Click the sign out button'
  }
```

##Videos and Gifs

This section applies the use of videos, images ,and gifs. The attribute `autoplay playsinline muted loop` is added to the video element, where the `playsinline` attribute enables the video to always play in a required position rather than in fullscreen. With the help of some CSS properties the videos and gifs are also sized and adjusted to fit their required positions.

{% youtube aNK9ZKxUc4Y %}
**Demo of our videos and gifs in use.**

##Building an accordion menu
We'll need to build an accordion to house the FAQs(Frequently Asked Questions) and answers to them, for that an accordion menu will be needed.
An [accordion](https://en.wikipedia.org/wiki/Accordion_(GUI)) menu is a graphical control element comprising a vertically stacked list of items that can be clicked to reveal or hide content associated with them. Suitable answers are provided within the list of items, in a way that when the control element is clicked on, the answers will be revealed. A function is linked to the FAQ element to enable it to show and hide its content with ease.

The function below reveals or hide the accordion content.
```javascript
function toggle1(){
    var x = document.getElementById('ans1');
    var y = document.getElementById('rot1');
    y.classList.toggle('rotate');
    x.classList.toggle('closed');
}
```
As shown above, the function toggles on the class of our control element answers using a `classlist` property, where the `closed` class has a CSS property of `display: none` to hide or show its content.

##Footer

The footer makes use of a `grid` CSS property to style it in the form of rows and columns, making it easier to design web pages without having to use floats and positioning. The CSS property `grid-template-columns: repeat(4, 1fr)` creates 4 columns and a row. The extra CSS properties below are applied to make it look better. 
```CSS
.footer-column{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 4rem;
}
```

##Video
{% youtube Bd-3CsRGnm0 %}

**Demo of the app in use**

##Conclusion

With basic knowledge of JavaScript and the application of these few steps, you can build a Netflix clone. To have better understanding of the code base of this article, you can check it out on [Github](https://github.com/ugwutotheeshoes/netflix-clone).