Skip to content

Commit ab3103f

Browse files
fullstackNRJfullstackNRJ
committed
day 12
1 parent 7ade796 commit ab3103f

File tree

8 files changed

+175
-0
lines changed

8 files changed

+175
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,4 @@ Motivate yourself to code daily till 60 days, and see the magic!
2828
| [Day 9](./each%20day%20build%20day!/Day%209/) | [Sketchpad](./each%20day%20build%20day!/Day%209/) | [demo](https://codepen.io/neeraj-mukta/pen/RwWWBNw) | [Takeaways](./each%20day%20build%20day!/Day%209/README.md/) |
2929
| [Day 10](./each%20day%20build%20day!/Day%2010/) | [Infinite scrolling ComicBook](./each%20day%20build%20day!/Day%2010/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2010/README.md/) |
3030
| [Day 11](./each%20day%20build%20day!/Day%11/) | [Drag & Drop File Upload](./each%20day%20build%20day!/Day%2011/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2011/README.md/) |
31+
| [Day 12](./each%20day%20build%20day!/Day%12/) | [Multi select checkboxes](./each%20day%20build%20day!/Day%2012/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2012/README.md/) |

‎each day build day!/day 12/1.png

126 KB
Loading

‎each day build day!/day 12/2.png

123 KB
Loading

‎each day build day!/day 12/3.png

119 KB
Loading

‎each day build day!/day 12/README.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Multi select with shift key
2+
3+
A common use case today is making it easy for user to auto select a bunch of consecutive items in a list, pressing ctrl could get overwhelmin sometimes. This is easy solution lets users to select multiple items between first and last selected items auto magically just pressing down simple `shift` key. This is all done using plain javascript.
4+
5+
# Challenges
6+
- key events
7+
- DOM
8+
- CSS3 transistions
9+
10+
11+
# demo
12+
![step 1](1.png)
13+
![step 2](2.png)
14+
![step 3](3.png)

‎each day build day!/day 12/index.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Multi-selection 🤹‍♂️ </title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<h1>Multi-selection with shift</h1>
14+
<p>A multi selection feature to select items in between the first and the last item selected of a list</p>
15+
16+
<button type="reset" class="btn" onclick="clearSelection()">Clear</button>
17+
18+
<div class="MovieList">
19+
<div class="item">
20+
<input type="checkbox">
21+
<p>American Pyscho 👻 </p>
22+
</div>
23+
<div class="item">
24+
<input type="checkbox">
25+
<p>3 idiots 🥴 </p>
26+
</div>
27+
<div class="item">
28+
<input type="checkbox">
29+
<p>The shashwank redemption 😥 </p>
30+
</div>
31+
<div class="item">
32+
<input type="checkbox">
33+
<p>Moonrise kingdom 💌 </p>
34+
</div>
35+
<div class="item">
36+
<input type="checkbox">
37+
<p>The schendler's list 🇩🇪 </p>
38+
</div>
39+
<div class="item">
40+
<input type="checkbox">
41+
<p>Don Jon 😿 </p>
42+
</div>
43+
<div class="item">
44+
<input type="checkbox">
45+
<p>Contagion 🦠 </p>
46+
</div>
47+
<div class="item">
48+
<input type="checkbox">
49+
<p>Inception 👐 </p>
50+
</div>
51+
<div class="item">
52+
<input type="checkbox">
53+
<p>Fight club 🥊 </p>
54+
</div>
55+
</div>
56+
57+
58+
</div>
59+
60+
61+
<script src="main.js"></script>
62+
</body>
63+
64+
</html>

‎each day build day!/day 12/main.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
const checkboxes = document.querySelectorAll('input[type="checkbox"]')
2+
3+
let lastChecked;
4+
5+
function handleCheck(e) {
6+
// Check if they had the shift key down
7+
// AND check that they are checking it
8+
let inBetween = false;
9+
if (e.shiftKey && this.checked) {
10+
// go ahead and do what we please
11+
// loop over every single checkbox
12+
checkboxes.forEach(checkbox => {
13+
//console.log(checkbox);
14+
if (checkbox === this || checkbox === lastChecked) {
15+
inBetween = !inBetween;
16+
//console.log('Starting to check them in between!');
17+
}
18+
19+
if (inBetween) {
20+
checkbox.checked = true;
21+
}
22+
});
23+
}
24+
25+
lastChecked = this;
26+
}
27+
28+
function clearSelection() {
29+
// console.log('called')
30+
checkboxes.forEach(checkbox => {
31+
32+
if (checkbox.checked) {
33+
34+
checkbox.checked = false;
35+
}
36+
37+
})
38+
}
39+
40+
checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));

‎each day build day!/day 12/style.css

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
html {
2+
font-family: sans-serif;
3+
background: #d1d1ce;
4+
}
5+
6+
.container{
7+
display: flex;
8+
flex-direction: column;
9+
justify-content: space-evenly;
10+
align-items: center;
11+
}
12+
13+
.btn{
14+
margin-bottom: 10px;
15+
width: 50px;
16+
height:30px;
17+
}
18+
19+
.inbox {
20+
max-width: 400px;
21+
margin: 50px auto;
22+
background: white;
23+
border-radius: 5px;
24+
box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
25+
}
26+
27+
.item {
28+
display: flex;
29+
align-items: center;
30+
border-bottom: 1px solid #F1F1F1;
31+
}
32+
33+
.item:last-child {
34+
border-bottom: 0;
35+
}
36+
37+
38+
input:checked + p {
39+
background: rgb(103, 236, 70);
40+
text-decoration: line-through;
41+
}
42+
43+
input[type="checkbox"] {
44+
margin: 20px;
45+
}
46+
47+
p {
48+
margin: 0;
49+
padding: 20px;
50+
transition: background 0.2s;
51+
flex: 1;
52+
font-family: 'helvetica neue';
53+
font-size: 20px;
54+
font-weight: 200;
55+
border-left: 1px solid #D1E2FF;
56+
}

0 commit comments

Comments
 (0)