Skip to content

Commit 84fb004

Browse files
Narahari-SundaragopalanNarahari-Sundaragopalan
committed
carousel and deep filter
1 parent 3aa03c9 commit 84fb004

File tree

5 files changed

+460
-0
lines changed

5 files changed

+460
-0
lines changed

‎FE-JS-Questions/Carousel.md

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
## Carousel
2+
3+
```html
4+
<div class="carouselWrapper">
5+
<button class="carouselButton carouselButtonLeft displayNone">
6+
<img src="images/left.svg" alt="" />
7+
</button>
8+
9+
<div class="carouselContainer">
10+
<ul class="carouselTracker">
11+
<li class="carouselSlide currentSlide">
12+
<img class="carouselImage" src="images/slide-1.jpg" alt="" />
13+
</li>
14+
<li class="carouselSlide">
15+
<img class="carouselImage" src="images/slide-2.jpg" alt="" />
16+
</li>
17+
<li class="carouselSlide">
18+
<img class="carouselImage" src="images/slide-3.jpg" alt="" />
19+
</li>
20+
</ul>
21+
</div>
22+
23+
<button class="carouselButton carouselButtonRight">
24+
<img src="images/left.svg" alt="" />
25+
</button>
26+
27+
<div class="carouselNavigation">
28+
<button class="carouselIndicator currentSlide"></button>
29+
<button class="carouselIndicator"></button>
30+
<button class="carouselIndicator"></button>
31+
</div>
32+
</div>
33+
```
34+
35+
```css
36+
.carouselWrapper {
37+
position: relative;
38+
height: 600px;
39+
width: 80%;
40+
margin 0 auto;
41+
}
42+
43+
.carouselImage {
44+
width: 100%;
45+
height: 100%;
46+
object-fit: cover;
47+
}
48+
49+
.carouselContainer {
50+
background: lightgreen;
51+
height: 100%;
52+
position: relative;
53+
overflow: hidden;
54+
}
55+
56+
.carouselTracker {
57+
padding: 0;
58+
margin: 0;
59+
list-style: none;
60+
height: 100%;
61+
position: relative;
62+
transition: transform 250ms ease-in;
63+
}
64+
65+
.carouselSlide {
66+
position: absolute;
67+
top: 0;
68+
bottom: 0;
69+
width: 100%;
70+
}
71+
72+
.carouselButton {
73+
position: absolute;
74+
top: 50%;
75+
transform: translateY(-50%);
76+
background: transparent;
77+
border: 0;
78+
cursor: pointer;
79+
}
80+
81+
.carouselButtonLeft {
82+
left: -40px;
83+
}
84+
85+
.carouselButtonRight {
86+
right: -40px;
87+
}
88+
89+
.carouselButton img {
90+
width: 12px;
91+
}
92+
93+
.carouselNavigation {
94+
display: flex;
95+
justify-contents: center;
96+
padding: 10px 0;
97+
}
98+
99+
.carouselIndicator {
100+
border: 0;
101+
border-radius: 50%;
102+
height: 12px;
103+
width: 12px;
104+
margin: 0 12px;
105+
background: rgba(0, 0, 0, 0.3);
106+
cursor: pointer;
107+
}
108+
109+
.carouselIndicator.currentSlide {
110+
background: rgba(0, 0, 0, 0.8);
111+
}
112+
113+
.displayNone {
114+
display: none;
115+
}
116+
```
117+
118+
119+
```js
120+
const track = document.querySelector('.carouselTracker');
121+
const slides = Array.from(track.children);
122+
const prevButton = document.querySelector('.carouselButtonLeft');
123+
const nextButton = document.querySelector('.carouselButtonRight');
124+
const dotsNav = document.querySelector('.carouselNavigation');
125+
const dots = Array.from(dotsNav.children);
126+
127+
// get each slide width
128+
const slideWidth = slides[0].getBoundingClientRect().width;
129+
130+
// arrange slides next to each other
131+
const setSlidePosition = (slide, index) => {
132+
slide.style.width = `${slideWidth * index}px`;
133+
};
134+
slides.forEach(setSlidePosition);
135+
136+
const moveToSlide = (track, currentSlide, targetSlide) => {
137+
track.style.transform = `translateX(-${targetSlide.style.left})`;
138+
currentSlide.classList.remove('currentSlide');
139+
targetSlide.classList.add('currentSlide');
140+
};
141+
142+
const updateDots = (currentDot, targetDot) => {
143+
currentDot.classList.remove('currentSlide');
144+
targetDot.classList.add('currentSlide');
145+
};
146+
147+
const hideShowArrows = targetIndex => {
148+
if (targetIndex === 0) {
149+
prevButton.classList.add('displayNone');
150+
nextButton.classList.remove('displayNone');
151+
} else if (targetIndex === slides.length - 1) {
152+
prevButton.classList.remove('displayNone');
153+
nextButton.classList.add('displayNone');
154+
} else {
155+
prevButton.classList.remove('displayNone');
156+
nextButton.classList.remove('displayNone');
157+
}
158+
};
159+
//on click right, move slides to right
160+
nextButton.addEventListener('click', event => {
161+
const currentSlide = track.querySelector('.currentSlide');
162+
const nextSlide = currentSlide.nextElementSibling;
163+
const currentDot = dotsNav.querySelector('.currentSlide');
164+
const nextDot = currentDot.nextElementSibling;
165+
const nextIndex = slides.findIndex(slide => slide === nextSlide);
166+
167+
moveToSlide(track, currentSlide, nextSlide);
168+
updateDots(currentDot, nextDot);
169+
hideShowArrows(nextIndex);
170+
});
171+
172+
prevButton.addEventListener('click', event => {
173+
const currentSlide = track.querySelector('.currentSlide');
174+
const prevSlide = currentSlide.previousElementSibling;
175+
const currentDot = dotsNav.querySelector('.currentSlide');
176+
const prevDot = currentDot.previousElementSibling;
177+
const prevIndex = slides.findIndex(slide => slide === prevSlide);
178+
179+
moveToSlide(track, currentSlide, prevSlide);
180+
updateDots(currentDot, prevDot);
181+
hideShowArrows(prevIndex);
182+
});
183+
184+
dotsNav.addEventListener('click', event => {
185+
const targetDot = event.target.closest('button');
186+
187+
if (!targetDot) return;
188+
189+
const currentSlide = track.querySelector('.currentSlide');
190+
const currentDot = dotsNav.querySelector('.currentSlide');
191+
const targetIndex = dots.findIndex(dot => dot === targetDot);
192+
const targetSlide = slides[targetIndex];
193+
194+
moveToSlide(track, currentSlide, targetSlide);
195+
updateDots(currentDot, targetDot);
196+
hideShowArrows(targetIndex);
197+
})
198+
```

‎FE-JS-Questions/DeepFilter.md

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
## Deep Filter
2+
3+
> Given an object and a filter function, write a function that will go through and filter the object, then return a filtered object
4+
5+
```
6+
Example 1
7+
Input Object
8+
9+
{
10+
a: 1,
11+
b: {
12+
c: 2,
13+
d: -3,
14+
e: {
15+
f: {
16+
g: -4,
17+
},
18+
},
19+
h: {
20+
i: 5,
21+
j: 6,
22+
},
23+
}
24+
Input Function
25+
const filter = (n) => n >= 0
26+
27+
Output
28+
29+
{ a: 1, b: { c: 2, h: { i: 5, j: 6 } } }
30+
```
31+
32+
```js
33+
const filter = (n) => n >= 0;
34+
let inputObj = {
35+
'a': 1,
36+
'b': {
37+
'c': 2,
38+
'd': -3,
39+
'e': {
40+
'f': {
41+
'g': -4,
42+
},
43+
},
44+
'h': {
45+
'i': 5,
46+
'j': 6,
47+
},
48+
}
49+
}
50+
51+
const deepFilter = (inputObject, callbackFilterFn) => {
52+
53+
for (let key in inputObject) {
54+
if (typeof inputObject[key] === 'object') {
55+
deepFilter(inputObject[key], callbackFilterFn);
56+
if (Object.keys(inputObject[key]).length === 0) {
57+
delete inputObject[key];
58+
}
59+
} else {
60+
if (!callbackFilterFn(inputObject[key])) {
61+
delete inputObject[key];
62+
}
63+
}
64+
}
65+
66+
return inputObject;
67+
}
68+
69+
deepFilter(inputObj, filter);
70+
```

‎concepts/Trie.md

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
## TRIE Data Structure
2+
> A Trie data structure is a special tree used to store and retrieve strings efficiently. The nodes of the Trie DS store the character and strings or words can be re`trie`ved by traversing down a branch path of the tree.
3+
4+
> A Trie DS has a root node and one or more children nodes. If a node has no children its called a leaf. Each node has a map (of its children), with the key as a character and value as a node. Additionaly, a boolean flag (isEndOfWord) indicates if the current node is a valid end of word.
5+
6+
```js
7+
class TrieNode {
8+
constructor() {
9+
this.children = new Map();
10+
this.isEndOfWord = false;
11+
}
12+
}
13+
14+
class Trie {
15+
constructor() {
16+
this.root = new TrieNode();
17+
}
18+
19+
insert(word) {
20+
let current = this.root;
21+
22+
for (let i = 0; i < word.length; i++) {
23+
let ch = word.charAt(i);
24+
let node = current.children.get(ch);
25+
26+
if (node === null) {
27+
node = new TrieNode();
28+
current.children.set(ch, node);
29+
}
30+
current = node;
31+
}
32+
current.isEndOfWord = true;
33+
}
34+
35+
search(word) {
36+
let current = this.root;
37+
38+
for (let i = 0; i < word.length; i++) {
39+
let ch = word.charAt(i);
40+
let node = current.children.get(ch) || null;
41+
42+
if (node === null) {
43+
return false;
44+
}
45+
current = node;
46+
}
47+
return current.isEndOfWord;
48+
}
49+
50+
delete(word) {
51+
deleteWord(this.root, word, 0);
52+
}
53+
54+
deleteWord(current, word, index) {
55+
if (index === word.length) {
56+
if (!current.isEndOfWord) {
57+
return false;
58+
}
59+
current.isEndOfWord = false;
60+
return current.children.size === 0;
61+
}
62+
let ch = word.charAt(index);
63+
let node = current.children.get(ch) || null;
64+
65+
if (node === null) {
66+
return false;
67+
}
68+
69+
shouldDeleteCurrentNode = deleteWord(node, word, index + 1);
70+
71+
if (shouldDeleteCurrentNode) {
72+
current.children.delete(ch);
73+
return current.children.size === 0;
74+
}
75+
76+
return false;
77+
}
78+
79+
startsWith(prefix) {
80+
let current = this.root;
81+
82+
for (let i = 0; i < prefix.length; i++) {
83+
let ch = prefix.charAt(i);
84+
let node = current.children.get(ch) || null;
85+
86+
if (node === null) {
87+
return false;
88+
}
89+
current = node;
90+
}
91+
92+
return current !== null;
93+
}
94+
}
95+
```

0 commit comments

Comments
 (0)