Skip to content

Commit 985fedc

Browse files
KAJASEKAJASE
committed
Slide Project
1 parent 3a326ae commit 985fedc

3 files changed

Lines changed: 75 additions & 6 deletions

File tree

‎14-todo/setup/app.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,33 @@ const submitBtn = document.querySelector(".submit-btn");
66
const container = document.querySelector(".grocery-container");
77
const list = document.querySelector(".grocery-list");
88
const clearBtn = document.querySelector(".clear-btn");
9-
const karen = document.querySelector(".karen");
109

1110
// edit option
1211
let editElement;
1312
let editFlag = false;
1413
let editID = "";
1514

1615
// ****** EVENT LISTENERS **********
17-
form.addEventListener('submit', addItem)
16+
form.addEventListener('submit', addOrEditItem)
1817

1918
clearBtn.addEventListener('click', clearItems)
2019

2120
window.addEventListener("DOMContentLoaded", setupItems);
2221
// ****** FUNCTIONS **********
23-
function addItem(e){
22+
function addOrEditItem(e){
2423
e.preventDefault();
2524
const value = grocery.value;
2625
const id = new Date().getTime().toString();
27-
if(value && !editFlag){
26+
const isAddition = (value && !editFlag);
27+
const isEdit = (value && editFlag);
28+
if(isAddition){
2829
createListItem(id,value);
2930
displayAlert("item added to the list", "success");
3031
container.classList.add("show-container");
3132
addToLocalStorage(id,value);
3233
setBackToDefault();
3334
}
34-
else if(value && editFlag){
35+
else if(isEdit){
3536
editElement.innerHTML = value;
3637
displayAlert('value changed', 'success');
3738
//edit local storage

‎15-slider/setup/app.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
const slides = document.querySelectorAll(".slide");
2+
const nextBtn = document.querySelector(".nextBtn");
3+
const prevBtn = document.querySelector(".prevBtn");
4+
5+
slides.forEach(function(slide,index){
6+
slide.style.left = `${index * 100}%`;
7+
});
8+
9+
let counter = 0;
10+
nextBtn.addEventListener("click", function(){
11+
counter++;
12+
carousel();
13+
});
14+
prevBtn.addEventListener("click", function(){
15+
counter--;
16+
carousel();
17+
});
18+
19+
function carousel(){
20+
//working with slides
21+
22+
// if(counter === slides.length){
23+
// counter = 0;
24+
// }
25+
//if(counter < 0){
26+
// counter = slides.length - 1;
27+
// }
28+
29+
//working with buttons
30+
if(counter < slides.length -1){
31+
nextBtn.style.display = 'block';
32+
}
33+
else{
34+
nextBtn.style.display = "none";
35+
}
36+
if(counter > 0){
37+
prevBtn.style.display = 'block';
38+
}
39+
else{
40+
prevBtn.style.display = "none";
41+
}
42+
slides.forEach(function(slide){
43+
slide.style.transform = `translateX(-${counter * 100}%)`;
44+
})
45+
}
46+
prevBtn.style.display = "none";

‎15-slider/setup/index.html‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,29 @@
99
<link rel="stylesheet" href="styles.css" />
1010
</head>
1111
<body>
12-
<h1>slider project</h1>
12+
<div class="slider-container">
13+
<div class="slide">
14+
<img src="img-1.jpeg" class="slide-img" alt="">
15+
<h1>1</h1>
16+
</div>
17+
<div class="slide">
18+
<h1>2</h1>
19+
</div>
20+
<div class="slide">
21+
<h1>3</h1>
22+
</div>
23+
<div class="slide">
24+
<div>
25+
<img src="person-1.jpeg" class="person-img" alt="">
26+
<h4>susan doe</h4>
27+
</div>
28+
<h1>4</h1>
29+
</div>
30+
</div>
31+
<div class="btn-container">
32+
<button type="button" class="prevBtn">prev</button>
33+
<button type="button" class="nextBtn">next</button>
34+
</div>
1335

1436
<!-- javascript -->
1537
<script src="app.js"></script>

0 commit comments

Comments
 (0)