TikTok Clone usingg HTML CSS & JavaScript

Hello my wonderful friends, how are you all doing today, today in this blog we are going to be learning how to create this awesome TikTok app using HTML CSS & JavaScript. as always before we dive into the source code let me explain what this app does and how to implement this idea in making a cool version of this. As above in the image preview, we can see we have our normal TikTok content, the header which shows our Following and our For-You-Page, now below that we have our video tab which shows the video playing as you know on the default TikTok app, now this is different from the default app because I disabled the scrolling effect, now we can change our video using the arrow icon that you can also see above, this icon changes the video between forward and backward a user can go forward in the video, or if he misses a video he/she can choose to go back.

Now the Concept behind making this

I have used JavaScript and index path and created an array to store all the videos.

here's an example of what I'm talking about

let arrays = [
    {
        path: "videos/random_video2.mp4"
    },
]; 

Now that you have seen an example of what storing a file in an array looks like let's now look into the video of this project

TikTok Clone using HTML CSS & JavaScript[Video Tutorial]

Now with this video, I'm sure you have understood the basics behind creating this program for those of you still finding it difficult I'll be linking the source code in the description for you.

TikTok Clone using HTML CSS & JavaScript[Source Code]

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tiktok Web App Clone - HTML CSS & JavaScript</title>
    <!-- Boxicons CSS -->
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="content">
            <div class="tabs tabs-banner">
                <div class="tab" id="following">Following</div>
                <div class="tab active" id="fyp">For You</div>
            </div>
            <!--  -->
            <div class="video-block">
                <div class="videos">
                    <div class="video-lab">
                        <video src="videos/random_video2.mp4" autoplay preload="auto" loop></video>
                    </div>
                </div>
            </div>
            <!--  -->
            <div class="c5">
                <div class="left-controls">
                    <div class="ctrl">
                        <div class="img">
                            <img src="images/band.jfif" alt="">
                        </div>
                        <div class="icon" id="heart">
                            <i class='bx bxs-heart'></i>
                        </div>
                        <div class="icon" id="comment">
                            <i class='bx bxs-message-rounded-dots'></i>
                        </div>
                        <div class="icon" id="share">
                            <i class='bx bx-share bx-flip-horizontal' ></i>
                        </div>
                        <div class="icon" id="music">
                            <i class='bx bxs-disc'></i>
                        </div>
                    </div>
                </div>
                <!--  -->
                <div class="d1">
                    <div class="bottom-controls">
                        <div class="ctrl-2">
                            <div class="name">@example <span><i class='bx bxs-check-circle' ></i></span></div>
                            <div class="title">My latest Post</div>
                                <div class="bottom">
                                    <div class="music-content"><i class='bx bxs-music' ></i> original sound - example</div>
                            </div>
                        </div>
                        <div class="btm-tabs">
                            <div class="tab-btn">
                                <div class="tab-home">
                                    <i class='bx bx-home' ></i>
                                </div>
                                <!--  -->
                                <div class="tab-search">
                                    <i class='bx bx-search'></i>
                                </div>
                                <!--  -->
                                <div class="tab-add">
                                    <i class='bx bx-plus-circle'></i>
                                </div>
                                <!--  -->
                                <div class="tab-message">
                                    <i class='bx bxs-message-minus' ></i>
                                </div>
                                <!--  -->
                                <div class="tab-account">
                                    <i class='bx bx-user' ></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="prev_next">
            <div class="btn">
                <div class="prev">
                    <i class='bx bxs-chevron-left' ></i>
                </div>
                <div class="next">
                    <i class='bx bxs-chevron-right' ></i>
                </div>
            </div>
        </div>
        <div class="play_pause">
            <div class="icon">
                <i class='bx bx-play' ></i>
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

CSS CODE:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #563c9b;
}
.wrapper {
  width: 100%;
  max-width: 500px;
  padding: 30px 30px;
  background: #111112;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  position: relative;
}
.wrapper .content{
    z-index: 999;
    position: relative;
    color: #fff;
}
.wrapper .content .tabs{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.wrapper .content .tabs-banner{
    color: #fff;
}
.wrapper .content .tabs .tab{
    color: #fff;
    font-size: 1.1em;
    user-select: none;
    cursor: pointer;
}
.wrapper .content .tabs .tab.active{
    font-weight: 500;
}
.wrapper .content .tabs .tab#following{
    position: relative;
}
.wrapper .content .tabs .tab#following::before{
    content: '';
    position: absolute;
    top: 0;
    left: 80px;
    width: 10px;
    height: 10px;
    background: #FF0544;
    border-radius: 50%;
}
.wrapper .content .tabs .tab#following::after{
    content: '';
    position: absolute;
    top: 0;
    left: 150px;
    width: 2px;
    height: 25px;
    background: #bfbfbf;
}
.wrapper .content .video-block{
    margin: 50px 0;
}
.wrapper .content .video-lab video{
    width: 100%;
    height: 100%;
    border-radius: 20px;
}
.wrapper .content .left-controls{
    position: absolute;
    right: 0px;
    top: 82px;
}
.wrapper .content .left-controls .ctrl .img img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.wrapper .content .left-controls .ctrl .img{
    position: relative;
    right: 6px;
    top: 10px;
    cursor: pointer;
}
.wrapper .content .left-controls .ctrl .img::before{
    content: '+';
    position: absolute;
    top: 30px;
    left: 10px;
    width: 18px;
    height: 18px;
    background: #FF0544;
    border-radius: 50%;
    font-size: 0.9em;
    text-align: center;
    line-height: 18px;
}
.wrapper .content .left-controls .ctrl i{
    color: #fff;
    font-size: 1.8em;
    margin-bottom: 10px;
    position: relative;
    top: 20px;
    cursor: pointer;
}
.wrapper .content .d1{
    width: 113%;
    margin-left: -29px;
    background: #16171B;
    position: absolute;
    bottom: -80px;
    left: 0;
    padding: 20px 20px;
    border-radius: 20px;
}
.wrapper .content .d1 .bottom-controls .ctrl-2 .name,
.wrapper .content .d1 .bottom-controls .ctrl-2 span{
    font-size: 0.9em;
}
.wrapper .content .d1 .bottom-controls .ctrl-2 span{
    color: #24eff2;
}
.wrapper .content .d1 .bottom-controls .ctrl-2 .title{
    font-size: 0.9em;
}
.wrapper .content .d1 .bottom-controls .bottom .music-content{
    font-size: 0.9em;
}
.wrapper .content .d1 .bottom-controls .btm-tabs .tab-btn{
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
}
.wrapper .content .d1 .bottom-controls .btm-tabs{
    margin-top: 20px;
    width: 100%;
    border-top: 2px solid #f0f0f0;
}
.wrapper .content .d1 .bottom-controls .btm-tabs .tab-btn i{
    font-size: 2em;
    cursor: pointer;
}
.wrapper .content .d1 .bottom-controls .btm-tabs .tab-btn .tab-add{
    border: 2px solid #24eff2;
    border-radius: 50%;
    width: 43px;
    height: 43px;
    text-align: center;
    position: relative;
    cursor: pointer;
}
.wrapper .content .c5:hover .left-controls{
    z-index: 999;
}
.wrapper .content .d1 .bottom-controls .btm-tabs .tab-btn .tab-add::before{
    content: '';
    position: absolute;
    top: -7px;
    left: -7px;
    width: 50px;
    height: 50px;
    border: 2px solid #24eff2;
    border-radius: 50%;
    opacity: 0;
}
.wrapper .content .d1 .bottom-controls .btm-tabs .tab-btn .tab-add:hover::before{
    animation: blinking 0.9s linear;
}
@keyframes blinking {
    60%{
        opacity: 0.5;
    }
    100%{
        opacity: 1;
    }
}
.wrapper .content .d1 .bottom-controls .btm-tabs .tab-btn .tab-add i{
    font-size: 2.3em;
    text-align: center;
    line-height: 43px;
    cursor: pointer;
}
.wrapper .prev_next{
    color: #fff;
}
.wrapper .prev_next .btn{
    display: flex;
    align-items: center;
}
.wrapper .prev_next .btn .prev{
    position: absolute;
    top: 40%;
    left: 40px;
    z-index: 999;
    font-size: 2em;
    color: #f0f0f0;
    cursor: pointer;
}
.wrapper .prev_next .btn .next{
    position: absolute;
    top: 40%;
    right: 58px;
    z-index: 999;
    font-size: 2em;
    color: #f0f0f0;
    cursor: pointer;
}
/* js */
.play_pause{
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    font-size: 6em;
}
.play_pause.show{
    opacity: 1;
    pointer-events: none;
}
.wrapper .content .left-controls .ctrl .img.followed::before{
    content: '✓';
    position: absolute;
    top: 30px;
    left: 10px;
    width: 18px;
    height: 18px;
    background: #FF0544;
    border-radius: 50%;
    font-size: 0.9em;
    text-align: center;
    line-height: 18px;
}
.wrapper .content .left-controls .ctrl .img.fade::before{
    animation: fade 0.9s linear;
    opacity: 0;
}
@keyframes fade {
    50%{
        opacity: 0.5;
    }
    70%{
        opacity: 0.3;
    }
    100%{
        opacity: 0;
    }
}

JAVASCRIPT CODE:

const prev = document.querySelector(".prev i"),
next = document.querySelector(".next i"),
video = document.querySelector(".video-lab video"),
play_pause = document.querySelector(".play_pause"),
text_name = document.querySelector(".name"),
img_box = document.querySelector(".img");

prev.addEventListener("click", (e) =>{
    prevTrack();
    backwrd();
});
next.addEventListener("click", (e) =>{
    nextTrack();
    fwrd();
});
// Specify globally used value
let track_index = 0;
let isPlaying = false;

// Create the video element for the player
let curr_track = document.createElement('video');
let track_list = [
    {
        path: "videos/random_video2.mp4"
	},
	{
        path: "videos/random_video3.mp4"
	},
	{
        path: "videos/random_video4.mp4"
	},
	{
        path: "videos/random_video5.mp4"
	},
	{
        path: "videos/random_video6.mp4"
	},
	{
        path: "videos/random_video7.mp4"
	},
	{
        path: "videos/random_video8.mp4"
	},
];
let track = [
    "videos/random_video2.mp4",
    "videos/random_video3.mp4",
    "videos/random_video4.mp4",
    "videos/random_video5.mp4",
    "videos/random_video6.mp4",
    "videos/random_video7.mp4",
    "videos/random_video8.mp4"
]
let radome_track = track[Math.floor(Math.random()*track.length)]; //sorting items one-by-one and picking them randomly
window.onload = (e)=>{
    video.src = radome_track;
}
// Load the first track in the tracklist
loadTrack(track_index);

// calling the loadTrack function
function loadTrack(track_index) {
    // Load new track
    video.src = track_list[track_index].path;
    curr_track.load(); //loading the firsr track
    curr_track.addEventListener("ended", nextTrack);
}
function playpauseTrack() {
    // Switch between playing and pausing
    // depending on the current state
    if(!isPlaying) playTrack();
    else pauseTrack();
}
video.addEventListener("click", e => {
    pauseTrack();
    console.log(e);
});
// function to pause track
function pauseTrack() {
    // pause the loaded track
    video.pause();
    isPlaying = false;
    play_pause.classList.add("show");
    play_pause.innerHTML = "<i class='bx bx-play' ></i>";

    setTimeout(()=>{
        video.play();
        isPlaying = true;
        play_pause.innerHTML = "<i class='bx bx-pause' ></i>";
    },1000);

    setTimeout(()=>{
        play_pause.classList.remove("show");
    }, 1300);
}
function nextTrack() {
    // Go forward to the next track if the
	// current one is the last in the track list
    if(track_index < track_list.length - 1)
    track_index += 1;
    else track_index = 0;

    // Load and play the new track
    loadTrack(track_index);
    playTrack();
}
function prevTrack() {
    // Go back to the last track if the
	// current one is the first in the track list
    if(track_index > 0)
    track_index -= 1;
    else track_index = track_list.length;

    // Load and play the new track
    loadTrack(track_index);
    playTrack();
}
function playTrack() {
	// play the loaded track
	curr_track.play();
	isPlaying = true;
}
function backwrd() {
    // storing username in an array
    idArray = new Array()
    idArray [1] = "@techno_logy"
    idArray [2] = "@primal_tech"
    idArray [3] = "@tech_videos"
    idArray [4] = "@PC_Work"
    idArray [5] = "@Meta_verse"
  
    randomParagraph = Math.floor(Math.random()*5);
  
    text_name.innerHTML = idArray[randomParagraph + 1] + "<i class='bx bxs-check-circle' style='color: #24eff2'></i>";
}
function fwrd() {
    // storing username in an array
    idArray = new Array()
    idArray [1] = "@techno_logy"
    idArray [2] = "@primal_tech"
    idArray [3] = "@tech_videos"
    idArray [4] = "@PC_Work"
    idArray [5] = "@Meta_verse"
  
    randomParagraph = Math.floor(Math.random()*5);
  
    text_name.innerHTML = idArray[randomParagraph + 1] + "<i class='bx bxs-check-circle' style='color: #24eff2'></i>";
}
img_box.addEventListener("click", (e) => {
    console.log(e);
    img_box.classList.add("followed");

    setTimeout(()=>{
        img_box.classList.add("fade");
    },1400);
});

That's all now you've successfully created this TikTok App with using HTML CSS & JavaScript, If you faced difficulty understanding or copying the source code you can just download the source code file from the given download button, extract the file, and use it.

TikTok Clone usingg HTML CSS & JavaScript

Creative Tutorials

Post a Comment

Post a Comment

Contact Form