Hello I need help a project I'm following on Youtube

Portfolio Website Tutorial – Frontend Development with HTML, CSS, JavaScript

Switch Between section menu code is not working can someone review my code and tell me where is went wrong please and thank you
HTML:

<!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
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
      rel="stylesheet"
    />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
      integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </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="controlls">
      <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-blog"></i>
      </div>
      <div class="control control-5" data-id="contact">
        <i class="fa-solid fa-envelope-open"></i>
      </div>
    </div>
    <script src="../app.js"></script>
  </body>
</html>

CSS

* {
  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-grey1: #dbe1e8;
  --color-grey2: #b2becd;
  --color-grey3: #6c7983;
  --color-grey4: #454e56;
  --color-grey5: #2a2e35;
  --color-grey6: #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 0.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;
}

section {
  min-height: 100vh;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  padding: 3rem 18rem;
}

.section {
  transform: translateY(-100%) scale(0);
  transition: all 0.4s ease-in-out;
  background-color: var(--color-primary);
}

.sec1 {
  display: none;
  transform: translateY(0) scale(1);
}

.sec2 {
  display: none;
  transform: translateY(0) scale(1);
}

.sec3 {
  display: none;
  transform: translateY(0) scale(1);
}

.sec4 {
  display: none;
  transform: translateY(0) scale(1);
}

.sec5 {
  display: none;
  transform: translateY(0) scale(1);
}

.controlls {
  position: fixed;
  z-index: 10;
  top: 50%;
  right: 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
}
.controlls .active-btn {
  background-color: var(--color-secondary) !important;
  transition: all 0.4s ease-in-out;
}
.controlls .active-btn i {
  color: var(--color-white) !important;
}
.controlls .control {
  padding: 1rem;
  cursor: pointer;
  background-color: var(--color-grey4);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.7rem 0;
  box-shadow: var(--box-shadow-1);
}
.controlls .control i {
  font-size: 1.2rem;
  color: var(--color-grey2);
  pointer-events: none;
}/*# sourceMappingURL=styles.css.map */

SCSS

*{
    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-grey1: #dbe1e8;
    --color-grey2: #b2becd;
    --color-grey3: #6c7983;
    --color-grey4: #454e56;
    --color-grey5: #2a2e35;
    --color-grey6: #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;
}

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);
}

.sec2{
    display: none;
    transform: translateY(0) scale(1);
}
.sec3{
    display: none;
    transform: translateY(0) scale(1);
}

.sec4{
    display: none;
    transform: translateY(0) scale(1);
}

.sec5{
    display: none;
    transform: translateY(0) scale(1);
}

//controls
.controlls{
    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) !important;
        }
    }
    .control{
        padding: 1rem;
        cursor: pointer;
        background-color: var(--color-grey4);
        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-grey2);
            pointer-events: none;
        }

    }

}

app.js (Javascript) code

const sections = document.querySelectorAll('.secions');
const sectBtns = document.querySelectorAll('.controlls');
const sectBtn = document.querySelectorAll('.control');
const allSections = document.querySelectorAll('.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';
        })
    }
}

The Javascript code suppose to let me switch between buttons and when I click 1 the others disappear can you please point out where my code went wrong and why its not working. Thank you

Hi i didnt do this course, If you want to run javascript you have to call the functions somewhere

Also, you have a typo in your querySelectorAll argument of the following line:

let currentBtn = document.querySelectorAll('.active.btn');

And lastly, the following line is not going to do what you are expecting:

this.className += 'active-btn';

Research the toggle method for add/removing classes.

This selector has a typo as well.

const sections = document.querySelectorAll('.secions');

Also, just in case it wasn’t clear, the code in the video has a space in front of the string that is being concatenated for the className.


But as suggested, I wouldn’t use that code.

sectBtn.forEach((btn) => {
  btn.addEventListener('click', ({ currentTarget }) => {
    document.querySelector('.active-btn').classList.remove('active-btn');
    currentTarget.classList.add('active-btn');
  });
});

I think something like that should work the same (just an example).

Another solution using the toggle method.

  sectBtn.forEach(function (button) {
    button.addEventListener("click", function () {
      const prevActiveButton = document.querySelector(".active-btn");
      prevActiveButton.classList.toggle("active-btn");
      this.classList.toggle("active-btn");
    });
  });

or my preferred solution that only adds a single event listener to the group of buttons:

  sectBtns.addEventListener('click', function ({ target }) {
    const prevButton = this.querySelector(".active-btn");
    prevButton.classList.toggle("active-btn");
    target.classList.toggle("active-btn");
  });