Active button feature doesent work

HTML-CSS
1

Hi, im working on building a protfolio project through the freeCodeCamp youtube channel and im stuck, theres a point in the video where you have to create buttons on the menu bar that when you click on the button it changes its color to green but for some reason when I right the code in VS and open the live server the feature doesent work even thogh im doing everything right!!
heres the link to the video im doing the guided project through

Its at about minute 31
Ill be glad for any help in the topic:)

2

Hello, looks like a good project, this is common with a tutorial and it seems it dosn’t work like theres’ does, is the editor giving a readout in the terminal you may have to have use some debugging etc…

Here are some reasons why a line server might not be working correctly in Visual Studio Code (VS Code):

Visual Studio Code Live Server Not Working - freeCodeCamp

Aug 14, 2020 — Set the default browser for your operating system Even after telling Live Server which browser you want to use, it’s possible that it’s still not opening your page in that browser correctly. The next thing to try is to set the default browser for your operating system itself.

freeCodeCamp

Troubleshoot Visual Studio Code Integrated Terminal launch failures

Some terminal launch failures may be due to your shell installation and are not specific to VS Code. The exit codes displayed come from the shell and you may be able to diagnose shell issues by searching on the internet for the specific shell and exit code. Use the most recent version of VS Code.

Visual Studio Code

Can’t See Code on Index.html File in VS Code - SheCodes

Check firewall settings: Make sure that your firewall is not blocking incoming connections to the localhost port. You can temporarily disable your firewall to see if it resolves the issue. If it does, you may need to configure your firewall to allow incoming connections on the specific port.

Jun 7, 2020 — I had the same problem, sometimes it is because of HTML structure, Live server doesn’t really work if the HTML structure is not proper. The file should have and tags. Go to Windows search bar. Type in PowerShell.

Live server installed but not working in VS code - Stack Overflow

Stack Overflow

Jun 28, 2023 — Check if the server is running: Make sure that the live server is running and there are no errors in the console. You can check this by looking at the output panel in VS Code. Clear your browser cache: Sometimes, the browser cache can cause issues with loading your work.

Why can’t I open a live server in VS Code? I have live server extension …

Here’s How to Make VSCode Faster

Check for slow-starting extensions Once you hit enter, you will be able to see a list of your currently running extensions, and the start-up time in milliseconds of each. If you find that some of them are taking over 1000 milliseconds to start, you may want to investigate this further.

vscode.one

  • Default browser

The page might not open correctly if the default browser is not set. Try setting the default browser for your operating system.

  • HTML structure

The live server might not work if the HTML structure is not proper. The file should have and tags.

  • Browser cache

The browser cache can cause issues with loading work. Try clearing the browser cache.

  • Firewall settings

The firewall might be blocking incoming connections to the localhost port. Try temporarily disabling the firewall.

  • Slow-starting extensions

Some extensions might be taking over 1000 milliseconds to start.

  • Shell installation

Some terminal launch failures might be due to the shell installation. Search on the internet for the specific shell and exit code to diagnose shell issues.

Other things to try include:

  • Checking if the server is running
  • Restarting VS Code
  • Using the shortcut Control + exclamation sign + tab to get a basic boilerplate
3

We need to see your code.

4

this is my html file:

<!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>Portfolio</title>
    <link rel="stylesheet" href="styles/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body class="main-content">
    <header class="section sec1 header active">

    </header>
    <main>
        <section class="section sec2 about"></section>
        <section class="section sec3 portfolio"></section>
        <section class="section sec4 blogs"></section>
        <section class="section sec5 contact"></section>
    </main>
    <div class="controls">
        <div class="control  control-1 active-btn">
            <i class="fa-solid fa-house"></i>
        </div>

        <div class="control control-2 " data-id="about">
            <i class="fa-solid fa-user"></i>
        </div>
        <div class="control control-3 " data-id="portfolio">
            <i class="fa-solid fa-briefcase"></i>
        </div>
        <div class="control control-4 " data-id="blogs">
            <i class="fa-solid fa-newspaper"></i>
        </div>
        <div class="control control-5 " data-id="contact">
            <i class="fa-solid fa-envelope"></i>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

this is my scss file:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

:root{
    --color-primary: #191d2b;
    --color-secondary: #27AE60;
    --color-white: #FFFFFF;
    --color-black: #000;
    --color-grey0: #f8f8f8;
    --color-grey-1: #dbe1e8;
    --color-grey-2: #b2becd;
    --color-grey-3: #6c7983;
    --color-grey-4: #454e56;
    --color-grey-5: #2a2e35;
    --color-grey-6: #12181b;
    --br-sm-2: 14px;
    --box-shadow-1: 0 3px 15px rgba(0,0,0,.3);
}

body{
    background-color: var(--color-primary);
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    color: var(--color-white);
    transition: all .4s ease-in-out;
}
a{
    display: inline-block;
    text-decoration: none;
    color: inherit;
    font-family: inherit;
}

header{
    height: 100vh;
    color: var(--color-white);
    overflow: hidden;
    padding: 0 !important;
}
section{
    min-height: 100vh;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding: 3rem 18rem;

}
.section{
    transform: translateY(-100%);
    transition: all .4s ease-in-out;
    background-color: var(--color-primary);
}
.sec1{
    display: none;
    transform: translateY() scale(1);
}
.sec2{
    display: none;
    transform: translateY() scale(1);
}
.sec3{
    display: none;
    transform: translateY() scale(1);
}
.sec4{
    display: none;
    transform: translateY() scale(1);
}
.sec5{
    display: none;
    transform: translateY(0) scale(1);
}

//Controls
.controls{
    position: fixed;
    z-index: 10;
    top: 50%;
    right: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    .control{
        padding: 1rem;
        cursor: pointer;
        background-color: var(--color-grey-4);
        width: 55px;
        height: 55px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: .7rem 0;
        box-shadow: var(--box-shadow-1);
        i{
            font-size: 1.2rem;
            color: var(--color-grey-2);
            pointer-events: none;
        }
    }
    .active-btn{
        background-color: var(--color-secondary) !important;
        transition: all .4s ease-in-out;
        i{color: var(--color-white);}
    }
}

and this is my JavaScript file:

const sections = document.querySelectorAll('.section');
const sectBtns = document.querySelectorAll('.controls');
const sectBtn = document.querySelectorAll('.control');
const allSections = document.querySelector('.main-content');


function PageTransitions(){
    //Button click active class
    for(let i = 0; i < sectBtn.length; i++){
        sectBtn[i].addEventListener =('click', function(){
            let currentBtn = document.querySelectorAll('.active-btn');
            currentBtn[0].className = currentBtn[0].className.replace('active-btn', '');
            this.className += 'active-btn';           
        }) 
    }
}
PageTransitions();

צילום מסך 2024-01-04 105011
צילום מסך 2024-01-04 105011648×589 13.8 KB

the green button is suppose to move from button to button when you click on it but for some reason its not working?!

5

addEventListener is a method on the element. You do not assign values to it = but pass the values as arguments.

element.addEventListener('someEvent', someCallback);

I didn’t look at the code from the video but what you have now seems odd.

  1. I would use a forEach.

  2. As there will ever only be one element with the class you can remove the class before adding it again to the click target (this).

function PageTransitions() {
  sectBtn.forEach((btn) => {
    btn.addEventListener("click", function () {
      document.querySelector(".active-btn").classList.remove("active-btn");
      this.classList.add("active-btn");
    });
  });
}
6

Im having trouble again in my project, what you sent me works ,but now when I move from the section its suppose to change the colors of the viewport, Im sorry im still a newbe in web development I only know the basics of html css and javascipt Id love to know where I can understand more about the concepts im using in this project if you can reference me to something it can be great.
this is my JavaScript code:

function PageTransitions() {
    sectBtn.forEach((btn) => {
      btn.addEventListener("click", function () {
        console.log(document.querySelector(".active-btn").classList)
        document.querySelector(".active-btn").classList.remove("active-btn");
        this.classList.add("active-btn");
      });
    });
    allSections.addEventListener('click', (e) => {
      const id = e.target.dataset.id;
      if(id){
        //remove selected from the other btns
        sectBtns.forEach((btn) =>{
          btn.classList.remove('active')
        })
        e.target.classList.add('active')

        //hide other sections
        sections.forEach((section)=>{
          section.classList.remove('active')
        })

        const element = document.getElementById(id)
        element.classList.add('active');
      }
    })
}

I added the following code so the website will change colors when I move from button to button but its not working for some reason!!
this is my css code:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

:root{
    --color-primary: #191d2b;
    --color-secondary: #27AE60;
    --color-white: #FFFFFF;
    --color-black: #000;
    --color-grey0: #f8f8f8;
    --color-grey-1: #dbe1e8;
    --color-grey-2: #b2becd;
    --color-grey-3: #6c7983;
    --color-grey-4: #454e56;
    --color-grey-5: #2a2e35;
    --color-grey-6: #12181b;
    --br-sm-2: 14px;
    --box-shadow-1: 0 3px 15px rgba(0,0,0,.3);
}

body{
    background-color: var(--color-primary);
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    color: var(--color-white);
    transition: all .4s ease-in-out;
}
a{
    display: inline-block;
    text-decoration: none;
    color: inherit;
    font-family: inherit;
}

header{
    height: 100vh;
    color: var(--color-white);
    overflow: hidden;
    padding: 0 !important;
}
section{
    min-height: 100vh;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding: 3rem 18rem;

}
.section{
    transform: translateY(-100%) scale(0);
    transition: all .4s ease-in-out;
    background-color: var(--color-primary);
}
.sec1{
    display: none;
    transform: translateY(0) scale(1);
    background-color: slateblue;
}
.sec2{
    display: none;
    transform: translateY(0) scale(1);
    background-color: slateblue;
}
.sec3{
    display: none;
    transform: translateY(0) scale(1);
    background-color: rgb(146, 205, 90);
}
.sec4{
    display: none;
    transform: translateY(0) scale(1);
}
.sec5{
    display: none;
    transform: translateY(0) scale(1);
}
.active{
    display: block;
}

//Controls
.controls{
    position: fixed;
    z-index: 10;
    top: 50%;
    right: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    .active-btn{
        background-color: var(--color-secondary) !important;
        transition: all .4s ease-in-out;
        i{color: var(--color-white);}
    }
    .control{
        padding: 1rem;
        cursor: pointer;
        background-color: var(--color-grey-4);
        width: 55px;
        height: 55px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: .7rem 0;
        box-shadow: var(--box-shadow-1);
        i{
            font-size: 1.2rem;
            color: var(--color-grey-2);
            pointer-events: none;
        }
    }
}
7

Please post all your code.

allSections is the body element, you will not get a dataset id from that click target.

You need to be inside the buttons click handler and get the dataset id from the button click target. Then using the id you get from the button click target select the section using a querySelector, for example document.querySelector(`.section.${id}`) then use the selected element querySelector returns and add the .active class to it.

8

this is all my 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>Portfolio</title>
    <link rel="stylesheet" href="styles/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body class="main-content">
    <header class="section sec1 header active" id="home">

    </header>
    <main>
        <section class="section sec2 about" id = "about"></section>
        <section class="section sec3 portfolio" id = "portfolio"></section>
        <section class="section sec4 blogs" id = "blogs"></section>
        <section class="section sec5 contact" id = "contact"></section>
    </main>
    <div class="controls">
        <div class="control  control-1 active-btn" data-id="home">
            <i class="fa-solid fa-house"></i>
        </div>
        <div class="control control-2 " data-id="about">
            <i class="fa-solid fa-user"></i>
        </div>
        <div class="control control-3 " data-id="portfolio">
            <i class="fa-solid fa-briefcase"></i>
        </div>
        <div class="control control-4 " data-id="blogs">
            <i class="fa-solid fa-newspaper"></i>
        </div>
        <div class="control control-5 " data-id="contact">
            <i class="fa-solid fa-envelope"></i>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

const sections = document.querySelectorAll('.section');
const sectBtns = document.querySelectorAll('.controls');
const sectBtn = document.querySelectorAll('.control');
const allSections = document.querySelector('.main-content');


function PageTransitions() {
    sectBtn.forEach((btn) => {
      btn.addEventListener("click", function () {
        console.log(document.querySelector(".active-btn").classList)
        document.querySelector(".active-btn").classList.remove("active-btn");
        this.classList.add("active-btn");
      });
    });
    allSections.addEventListener('click', (e) => {
      const id = e.target.dataset.id;
      if(id){
        //remove selected from the other btns
        sectBtns.forEach((btn) =>{
          btn.classList.remove('active')
        })
        e.target.classList.add('active')

        //hide other sections
        sections.forEach((section)=>{
          section.classList.remove('active')
        })

        const element = document.getElementById(id)
        element.classList.add('active');
      }
    })
}
  
PageTransitions();

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

:root{
    --color-primary: #191d2b;
    --color-secondary: #27AE60;
    --color-white: #FFFFFF;
    --color-black: #000;
    --color-grey0: #f8f8f8;
    --color-grey-1: #dbe1e8;
    --color-grey-2: #b2becd;
    --color-grey-3: #6c7983;
    --color-grey-4: #454e56;
    --color-grey-5: #2a2e35;
    --color-grey-6: #12181b;
    --br-sm-2: 14px;
    --box-shadow-1: 0 3px 15px rgba(0,0,0,.3);
}

body{
    background-color: var(--color-primary);
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    color: var(--color-white);
    transition: all .4s ease-in-out;
}
a{
    display: inline-block;
    text-decoration: none;
    color: inherit;
    font-family: inherit;
}

header{
    height: 100vh;
    color: var(--color-white);
    overflow: hidden;
    padding: 0 !important;
}
section{
    min-height: 100vh;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding: 3rem 18rem;

}
.section{
    transform: translateY(-100%) scale(0);
    transition: all .4s ease-in-out;
    background-color: var(--color-primary);
}
.sec1{
    display: none;
    transform: translateY(0) scale(1);
    background-color: slateblue;
}
.sec2{
    display: none;
    transform: translateY(0) scale(1);
    background-color: slateblue;
}
.sec3{
    display: none;
    transform: translateY(0) scale(1);
    background-color: rgb(146, 205, 90);
}
.sec4{
    display: none;
    transform: translateY(0) scale(1);
}
.sec5{
    display: none;
    transform: translateY(0) scale(1);
}
.active{
    display: block;
}

//Controls
.controls{
    position: fixed;
    z-index: 10;
    top: 50%;
    right: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    .active-btn{
        background-color: var(--color-secondary) !important;
        transition: all .4s ease-in-out;
        i{color: var(--color-white);}
    }
    .control{
        padding: 1rem;
        cursor: pointer;
        background-color: var(--color-grey-4);
        width: 55px;
        height: 55px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: .7rem 0;
        box-shadow: var(--box-shadow-1);
        i{
            font-size: 1.2rem;
            color: var(--color-grey-2);
            pointer-events: none;
        }
    }
}
9

You didn’t make any of the changes I suggested.

I would suggest you give the new curriculum a try, it has lots of plain DOM manipulation projects.

10

Yes I still have some gaps in my knowledge in javascript ,ill take the course
Thankyou :pray:

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.