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