17
Building a Netflix clone with Vanilla JavaScript.
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 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.
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.
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.
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:
The sign-in feature consists of “E-mail Address” and “Password” input elements, where the email uses a regex 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.
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.
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'
}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.
Demo of our videos and gifs in use.
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 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.
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.
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.
.footer-column{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 4rem;
}
Demo of the app in use
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.
17