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...
For further actions, you may consider blocking this person and/or reporting abuse
Actually, I don't see anything unique here.
In addition to the layout of the site header 💁🏼♂️
Bro it for encouraging beginners 😅.
BTW thank for reply
Beginners will not figure out how the javascript code works without a glass 😁
OK bro you win i lose 😎
Now I'm not comfortable.
I'm sorry bro
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.
// I think! here you can use icons then code will be reduced.
// Any way thanks for this awesome tutorial.
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 😅
Nice project 👍 ,but you should add explanation also this will help the beginners.
give me one more chance bro i will definitely include explanation from next time.
thanks for reply bro 😊
Nice project here,
Was wondering whether I cud make a video abt it on ma yet channel