Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ab3103f

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /