├── js └── script.js ├── css └── styles.css └── index.html /js/script.js: -------------------------------------------------------------------------------- 1 | const checkboxes = document.querySelectorAll(".inbox input[type='checkbox']"); 2 | 3 | let lastChecked; 4 | 5 | function handleCheck(e){ 6 | let inBetween = false; 7 | if(e.shiftkey && this.checked){ 8 | checkboxes.forEach(checkbox => { 9 | console.log(checkbox); 10 | if (checkbox === this || checkbox === lastChecked){ 11 | inBetween = !inBetween; 12 | console.log("Lets begin here"); 13 | } 14 | 15 | if(inBetween){ 16 | checkbox.checked = true; 17 | } 18 | }); 19 | } 20 | lastChecked = this; 21 | } 22 | 23 | checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck)); -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: "helvetica neue", sans-serif; 3 | background: rgba(0,100,0,0.1); 4 | } 5 | 6 | .inbox{ 7 | max-width: 450px; 8 | margin: 50px auto; 9 | background: rgba(250,250,250,0.8); 10 | border-radius: 5px; 11 | box-shadow: 5px 5px 0 rgba(0,0,0,0.1); 12 | } 13 | 14 | .item{ 15 | display: flex; 16 | align-items: center; 17 | /* border-bottom: 1px solid #f1f1f1; */ 18 | } 19 | 20 | input:checked + p { 21 | background: gray; 22 | text-decoration: line-through; 23 | } 24 | 25 | input[type="checkbox"]{ 26 | margin: 25px; 27 | } 28 | 29 | p { 30 | margin: 0; 31 | padding: 20px; 32 | transition: background 0.2s; 33 | flex: 1; 34 | font-size: 20px; 35 | font-weight: 200; 36 | border-left: 1px solid #D1E2FF; 37 | } 38 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | MULTIPLE CHECKBOX APP 8 | 9 | 10 | 11 |
12 |
13 | 14 |

This is a Custom To-Do Layout.

15 |
16 |
17 | 18 |

This is a Custom To-Do Layout.

19 |
20 |
21 | 22 |

This is a Custom To-Do Layout.

23 |
24 |
25 | 26 |

This is a Custom To-Do Layout.

27 |
28 |
29 | 30 |

This is a Custom To-Do Layout.

31 |
32 |
33 | 34 |

This is a Custom To-Do Layout.

35 |
36 |
37 | 38 |

This is a Custom To-Do Layout.

39 |
40 |
41 | 42 |

This is a Custom To-Do Layout.

43 |
44 |
45 | 46 | 47 | 48 | --------------------------------------------------------------------------------