💆‍♀️How To Create Basic Messenger Home Page Layout Clone💬

Note: If you are a beginner, this is something you need to know. Scroll the below section or Click here

All HTML DOM (like querySelector, querySelectorAll etc)
Postion property & z-index CSS
string method (like toUpperCase(), indexOf() etc) in JS
window event in JS
parentElement & childElement & onkeyup etc in JS
All display propery in CSS

Click the menu and Scroll horizontally & vertically each chatlist and search here for find your chatlist friend.

Chats

🖊️

Shahriar Shanto Chats Market Place Message requests Archive

your note

khaled

Shanto

Abdullah

Hasan

Maruf

Shahriar Shanto

Khaled Mahmud Jon

Abdullah Nazmuz Sakib

Md Shohag

Maruf Hossain

Azmain Fayek

Mahmudul Hasan

Ismail Hossain

Here I used same image for different person but you can use different image for different person.

HTML


<div class="showcontent">

            
<h2>Click the menu and Scroll horizontally & vertically each chatlist and here Search for finding your friend</h2>



<div class="msgrow">

    <div class="msgtop">


        <div>

            <button class="msgmenu">☰</button><span style="color: white;font-weight:bold;font-size:20px"> Chats</span>

        </div>

        <div>

            <p style="background-color: #333;">🖊️</p>

        </div>

    </div>


    <div class="collapsemenu collapsemenu">

        <a href="#"><img src="379 shanto.jpeg" alt="profile" width="40px" height="40px" style="border-radius: 50%;">  Shahriar Shanto</a>

        <a href="#">Chats</a>

        <a href="#">Market Place</a>

        <a href="#">Message requests</a>

        <a href="#">Archive</a>

    </div>


    <div class="msgsearch">

        <input type="search" placeholder="search here.." id="chatsearch" onkeyup="search()">


    </div>


    <div class="personnote">

        <div class="person">

            <div class="imgdiv">

                <img src="379 shanto.jpeg" alt="">

            </div>

            <div class="name">

                <span>your note</span>

            </div>

        </div>


        <div class="person">

            <div class="imgdiv">

                <img src="1111.jpg" alt="">

            </div>

            <div class="name">

                <span>khaled</span>

            </div>

        </div>


        <div class="person">

            <div class="imgdiv">

                <img src="image.png" alt="">

            </div>

            <div class="name">

                <span>Shanto</span>

            </div>

        </div>

        <div class="person">

            <div class="imgdiv">

                <img src="379 shanto.jpeg" alt="">

            </div>

            <div class="name">

                <span>Abdullah</span>

            </div>

        </div>

        <div class="person">

            <div class="imgdiv">

                <img src="1111.jpg" alt="">

            </div>

            <div class="name">

                <span>Hasan</span>

            </div>

        </div>

        <div class="person">

            <div class="imgdiv">

                <img src="image.png" alt="">

            </div>

            <div class="name">

                <span>Maruf</span>

            </div>

        </div>

    </div>



    <div class="chatlist" style="margin-top: 10px;">


        <div class="list">

            <div class="imgdiv">

                <img src="image.png" alt="">

            </div>

            <span>Shahriar Shanto </span>

            
        </div>


        <div class="list">

            <div class="imgdiv">

                <img src="1111.jpg" alt="">

            </div>

            <span>Khaled Mahmud Jon</span>

        </div>

        <div class="list">

            <div class="imgdiv">

                <img src="379 shanto.jpeg" alt="">

            </div>

            <span>Abdullah Nazmuz Sakib</span>

            
        </div>


        <div class="list">

            <div class="imgdiv">

                <img src="image.png" alt="">

            </div>

            <span>Mahmudul Hasan</span>

            
        </div>


        <div class="list">

            <div class="imgdiv">

                <img src="1111.jpg" alt="">

            </div>

            <span>Maruf Hossain</span>

        </div>


        <div class="list">

            <div class="imgdiv">

                <img src="379 shanto.jpeg" alt="">

            </div>

            <span>Azmain Fayek</span>

            
        </div>

        <div class="list">

            <div class="imgdiv">

                <img src="image.png" alt="">

            </div>

            <span>Mahmudul Hasan</span>

            
        </div>


        <div class="list">

            <div class="imgdiv">

                <img src="1111.jpg" alt="">

            </div>

            <span>Ismail Hossain</span>

        </div>



    </div>


</div>


<div>Here I used same image for different person but you can use different image for different person.</div>


</div>

JavaScript


let menu=document.querySelector(".collapsemenu");
window.onclick=function(event){
    //console.log(event);
    if(event.target.className=="msgmenu" && menu.style.width=="65%"){
        menu.style.width="0%";
    }
    else if(event.target.className=="msgmenu"){
        menu.style.width="65%";
    }
    else if(event.target.className=="collapsemenu collapsemenu"){
        menu.style.width="65%";
    }
    else{
        menu.style.width="0%";
    }
};


function search(){ 
    let inputvalue=document.querySelector("#chatsearch").value.toUpperCase();
    //console.log(inputvalue);

    let namelist=document.querySelectorAll(".list span");
    //console.log(namelist.length);
    for(let i=0;i< namelist.length;i++){
        //console.log(namelist[i].innerHTML);
        let Name=namelist[i].innerHTML.toUpperCase();
        //console.log(namelist[0].parentElement);

        if(Name.indexOf(inputvalue)>-1){
            namelist[i].parentElement.style.display="";
        }
        else{
            namelist[i].parentElement.style.display="none";
        }
        
    }

}

CSS


*{
    box-sizing: border-box;
}
.msgrow{
    height: 550px;
    max-width: 320px;
    margin:auto;
    position: relative;
    background-color: #222;
    overflow:auto;
    border-radius: 8px;
}
.msgrow::-webkit-scrollbar{
    display: none;
}
.msgtop{
    padding: 0 6px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position:sticky;
    top: 0;
    z-index:100;
    background-color:rgba(0, 0, 0, 0.955);
    
}
.msgtop button,p{
    border: none; 
    font-size: 17px;
    padding: 8px;
    border-radius: 50%;
    background-color: #333;
    color: white;
    cursor: pointer;
}
.collapsemenu {
    background-color: rgba(0, 0, 0, 0.95);
    display: flex;
    flex-direction: column;
    width: 0%;
    height: 100%;
    transition: 0.5s;
    z-index: 999;
    
    position:sticky;
    top: 0;
    
    overflow: hidden;

}
.collapsemenu a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    padding: 14px 16px;
}
.collapsemenu a:hover{
    background-color: #444;
}
.msgsearch input{
    width: 80%;
    display: flex;
    margin: auto;
    font-size: 16px;
    padding: 6px;
    border-radius:8px;
    margin-top: -550px;
}
.personnote{
    position: relative;
    width: 100%;
    height: auto;
    white-space:nowrap;
    overflow-x:scroll;
}
.personnote::-webkit-scrollbar{
    display: none;
}
.person{
    
    display: inline-block;
    margin:3px;
    margin-top: 8px;
    width: 55px;
    height: 58px;
    color: white;
    
    font-size: 14px;
}

.imgdiv{
    margin: auto;
    width: 40px;
    height: auto;
    
}
.imgdiv img{
    width: 100%;
    height: inherit;
    border-radius: 50%;
    cursor: pointer;
}
.person .name{
    margin-top: 1px;
    text-align: center;
    position: relative;
}



.list{
    padding: 5px;
    display: flex;
    align-items: center;
    color: white;
    font-size: 18px;
}
.list .imgdiv{
    
    margin: 0;
}
.list span{
    padding-left: 5px;
}

Math.floor() Method

The Math.floor() method in JS is used to round a number down to the nearest integer.

setInterval()

This method in JS repeatedly calls a function or executes a code with a fixed time delay between each call.

setTimeout()

This method is used to execute a function or code snippet after a specified delay in milliseconds.

date.get....()

getDate(): Returns the day of the month(1-31)
getMonth(): Returns the month(0-11)
getFullYear(): Returns the year(4 digit year)
getDay(): Returns the day of the week(0-6)
getHours(): Returns the hours(0-23)
getMinutes(): Returns the minites(0-59)
getSeconds(): Returns the seconds(0-59)
getMilliseconds(): Returns the milliseconds(0-999)
getTime(): Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC

Projects