Skip to content

Commit d375f35

Browse files
thecodedealerthecodedealer
authored
Merge pull request #3 from Dyrits/main-fork-update
Update app.js
2 parents cff321a + 63b21c4 commit d375f35

7 files changed

Lines changed: 341 additions & 775 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# PHPStorm
2+
.idea

‎app.js‎

Lines changed: 11 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,13 @@
1-
const sections = document.querySelectorAll('.section');
2-
const sectBtns = document.querySelectorAll('.controlls');
3-
const sectBtn = document.querySelectorAll('.control');
4-
const allSections = document.querySelector('.main-content');
5-
6-
7-
function PageTransitions(){
8-
//Button click active class
9-
for(let i = 0; i < sectBtn.length; i++){
10-
sectBtn[i].addEventListener('click', function(){
11-
let currentBtn = document.querySelectorAll('.active-btn');
12-
currentBtn[0].className = currentBtn[0].className.replace('active-btn', '');
13-
this.className += ' active-btn';
1+
(function () {
2+
[...document.querySelectorAll(".control")].forEach(button => {
3+
button.addEventListener("click", function() {
4+
document.querySelector(".active-btn").classList.remove("active-btn");
5+
this.classList.add("active-btn");
6+
document.querySelector(".active").classList.remove("active");
7+
document.getElementById(button.dataset.id).classList.add("active");
148
})
15-
}
16-
17-
//Sctions Active
18-
allSections.addEventListener('click', (e) =>{
19-
const id = e.target.dataset.id;
20-
if(id){
21-
//resmove selected from the other btns
22-
sectBtns.forEach((btn) =>{
23-
btn.classList.remove('active')
24-
})
25-
e.target.classList.add('active')
26-
27-
//hide other sections
28-
sections.forEach((section)=>{
29-
section.classList.remove('active')
30-
})
31-
32-
const element = document.getElementById(id);
33-
element.classList.add('active');
34-
}
9+
});
10+
document.querySelector(".theme-btn").addEventListener("click", () => {
11+
document.body.classList.toggle("light-mode");
3512
})
36-
37-
//Toggle theme
38-
const themeBtn = document.querySelector('.theme-btn');
39-
themeBtn.addEventListener('click',() =>{
40-
let element = document.body;
41-
element.classList.toggle('light-mode')
42-
})
43-
}
44-
45-
PageTransitions();
13+
})();

‎index.html‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
1313
</head>
1414
<body class="main-content">
15-
<header class="section sec1 header active" id="home">
15+
<header class="container header active" id="home">
1616
<div class="header-content">
1717
<div class="left-header">
1818
<div class="h-shape"></div>
@@ -40,7 +40,7 @@ <h1 class="name">
4040
</div>
4141
</header>
4242
<main>
43-
<section class="section sec2 about" id="about">
43+
<section class="container about" id="about">
4444
<div class="main-title">
4545
<h2>About <span>me</span><span class="bg-text">my stats</span></h2>
4646
</div>
@@ -213,7 +213,7 @@ <h5>3d Animation<span> - Brighton University</span></h5>
213213
</div>
214214
</div>
215215
</section>
216-
<section class="section sec3" id="portfolio">
216+
<section class="container" id="portfolio">
217217
<div class="main-title">
218218
<h2>My <span>Portfolio</span><span class="bg-text">My Work</span></h2>
219219
</div>
@@ -356,7 +356,7 @@ <h3>Project Source</h3>
356356
</div>
357357
</div>
358358
</section>
359-
<section class="section sec4 " id="blogs">
359+
<section class="container" id="blogs">
360360
<div class="blogs-content">
361361
<div class="main-title">
362362
<h2>My <span>Blogs</span><span class="bg-text">My Blogs</span></h2>
@@ -437,7 +437,7 @@ <h4>
437437
</div>
438438
</div>
439439
</section>
440-
<section class="section sec5 contact" id="contact">
440+
<section class="container contact" id="contact">
441441
<div class="contact-container">
442442
<div class="main-title">
443443
<h2>Contact <span>Me</span><span class="bg-text">Contact</span></h2>
@@ -538,28 +538,26 @@ <h4>Contact me here</h4>
538538
</section>
539539
</main>
540540

541-
<div class="controlls">
542-
<div class="control control-1 active-btn" data-id="home" >
541+
<div class="controls">
542+
<div class="control active-btn" data-id="home" >
543543
<i class="fas fa-home"></i>
544544
</div>
545-
<div class="control control-2 " data-id="about">
545+
<div class="control" data-id="about">
546546
<i class="fas fa-user"></i>
547547
</div>
548-
<div class="control control-3" data-id="portfolio">
548+
<div class="control" data-id="portfolio">
549549
<i class="fas fa-briefcase"></i>
550550
</div>
551-
<div class="control control-4" data-id="blogs">
551+
<div class="control" data-id="blogs">
552552
<i class="far fa-newspaper"></i>
553553
</div>
554-
<div class="control control-5" data-id="contact">
554+
<div class="control" data-id="contact">
555555
<i class="fas fa-envelope-open"></i>
556556
</div>
557557
</div>
558-
559558
<div class="theme-btn">
560559
<i class="fas fa-adjust"></i>
561560
</div>
562-
563561
<script src="app.js"></script>
564562
</body>
565563
</html>

‎styles/_media.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
width: 90%;
3737
}
3838

39-
.controlls{
39+
.controls{
4040
top: auto;
4141
bottom: 0;
4242
flex-direction: row;
@@ -69,7 +69,7 @@
6969
padding-bottom: 6rem;
7070
}
7171

72-
.section{
72+
.container{
7373
padding: 2rem 2.5rem !important;
7474
}
7575

@@ -140,7 +140,7 @@
140140
}
141141

142142
@media screen and (max-width:1432px){
143-
.section{
143+
.container{
144144
padding: 7rem 11rem;
145145
}
146146

@@ -220,7 +220,7 @@
220220
}
221221

222222
@media screen and (max-width:970px){
223-
.section{
223+
.container{
224224
padding: 7rem 6rem;
225225
}
226226
.about-container .left-about{
@@ -254,7 +254,7 @@
254254
}
255255
}
256256
@media screen and (max-width:700px){
257-
.section{
257+
.container{
258258
padding: 7rem 3rem;
259259
}
260260
.about-stats .progress-bars{

0 commit comments

Comments
 (0)