DEV Community

Cover image for How to built a Instagram Navbar Clone | HTML CSS & Js

How to built a Instagram Navbar Clone | HTML CSS & Js

adwait12345 on November 27, 2021

Learn how to create an Instagram Navbar clone with pure HTML CSS and JavaScript! This project is good for beginners to start with , and after com...
Collapse
 
brendan8c profile image
Artem • Edited

Actually, I don't see anything unique here.
In addition to the layout of the site header 💁🏼‍♂️

Collapse
 
adwait12345 profile image
adwait12345

Bro it for encouraging beginners 😅.
BTW thank for reply

Collapse
 
brendan8c profile image
Artem

Beginners will not figure out how the javascript code works without a glass 😁

Thread Thread
 
adwait12345 profile image
adwait12345

OK bro you win i lose 😎

Thread Thread
 
brendan8c profile image
Artem

Now I'm not comfortable.
I'm sorry bro

Collapse
 
shyam3050 profile image
Shyam3050

const profile = document.querySelector(".profile-img");
const dropDown = document.querySelector(".drop-down");
const homeColorChange = document.querySelector("#home1");
const whiteHome =
"M45.3 48H30c-.8 0-1.5-.7-1.5-1.5V34.2c0-2.6-2-4.6-4.6-4.6s-4.6 2-4.6 4.6v12.3c0 .8-.7 1.5-1.5 1.5H2.5c-.8 0-1.5-.7-1.5-1.5V23c0-.4.2-.8.4-1.1L22.9.4c.6-.6 1.5-.6 2.1 0l21.5 21.5c.4.4.6 1.1.3 1.6 0 .1-.1.1-.1.2v22.8c.1.8-.6 1.5-1.4 1.5zm-13.8-3h12.3V23.4L24 3.6l-20 20V45h12.3V34.2c0-4.3 3.3-7.6 7.6-7.6s7.6 3.3 7.6 7.6V45z";
const blackHome =
"M45.5 48H30.1c-.8 0-1.5-.7-1.5-1.5V34.2c0-2.6-2.1-4.6-4.6-4.6s-4.6 2.1-4.6 4.6v12.3c0 .8-.7 1.5-1.5 1.5H2.5c-.8 0-1.5-.7-1.5-1.5V23c0-.4.2-.8.4-1.1L22.9.4c.6-.6 1.6-.6 2.1 0l21.5 21.5c.3.3.4.7.4 1.1v23.5c.1.8-.6 1.5-1.4 1.5z";
profile.addEventListener("click", () => {
dropDown.classList.toggle("hidden");
if (!dropDown.classList.contains("hidden")) {
homeColorChange.setAttribute("d", whiteHome);
} else if (dropDown.classList.contains("hidden")) {
homeColorChange.setAttribute("d", blackHome);
}
});

// i wrote this type of js because i am begginer. Is it ok bro.

Collapse
 
shyam3050 profile image
Shyam3050

// I think! here you can use icons then code will be reduced.
// Any way thanks for this awesome tutorial.

Collapse
 
adwait12345 profile image
adwait12345

Thank you Bro for replying
and in professional websites svgs are used and we can dynamically change them with js , but if you want to use icons you an definitely use there is no restrictions 😅

Collapse
 
codeflix profile image
Codeflix

Nice project 👍 ,but you should add explanation also this will help the beginners.

Collapse
 
adwait12345 profile image
adwait12345

give me one more chance bro i will definitely include explanation from next time.
thanks for reply bro 😊

Collapse
 
lilfred profile image
Lil-Fred

Nice project here,
Was wondering whether I cud make a video abt it on ma yet channel