@@ -3,7 +3,8 @@ document.addEventListener('DOMContentLoaded', () => {
   const ctx = canvas.getContext('2d')
 
   let isDrawing = false
-  let currentColor = '#000'
+  let currentColors = []
+  let strokeIndex = 0
   let lastX = 0
   let lastY = 0
   let lineWidth = 1
@@ -72,29 +73,30 @@ document.addEventListener('DOMContentLoaded', () => {
     canvas.addEventListener('mousedown', (ev) => {
       ev.preventDefault()
       isDrawing = true
-      currentColor = '#222'
+      currentColors = ['#000', '#222', '#444', '#666']
       _saveLastPosition(ev)
     })
 
     canvas.addEventListener('contextmenu', (ev) => {
       ev.preventDefault()
       isDrawing = true
-      currentColor = '#1d41d6'
+      currentColors = ['#001867', '#1d41d6']
       _saveLastPosition(ev)
     })
   }
 
-  function _drawLine(ev) {
+  function _drawLine (ev) {
     if (isDrawing) {
-      ctx.strokeStyle = currentColor
+      ctx.strokeStyle = currentColors[strokeIndex % currentColors.length]
       ctx.lineCap = 'round'
       ctx.lineJoin = 'round'
-      ctx.lineWidth = lineWidth
+      ctx.lineWidth = Math.floor(Math.random() * 2) + lineWidth
       ctx.beginPath()
       ctx.moveTo(lastX, lastY)
       ctx.lineTo(ev.offsetX, ev.offsetY)
       ctx.stroke()
-      ctx.strokeStyle.bold()
+
+      strokeIndex++
     }
   }
 
 
@@ -103,7 +103,6 @@
     </div>
   </div>
 
-<script>
-</script>
+  <script src="index-START.js"></script>
 </body>
 </html>
@@ -0,0 +1,27 @@
+const checkboxes = document.querySelectorAll('input')
+let lastIndex = -1
+checkboxes.forEach((checkbox, index) => {
+  checkbox.dataset.index = index
+  checkbox.addEventListener('click', (ev) => {
+    const currentIndex = ev.target.dataset.index
+    const currentCheckedState = ev.target.checked
+    if (ev.shiftKey) {
+      if (lastIndex >= 0) {
+        if (lastIndex < currentIndex) {
+          for (let i = lastIndex; i <= currentIndex; i++) {
+            const currentElement = document.querySelector(`input[data-index="${i}"]`)
+            currentElement.checked = currentCheckedState
+          }
+        } else {
+          for (let i = lastIndex; i >= currentIndex; i--) {
+            const currentElement = document.querySelector(`input[data-index="${i}"]`)
+            currentElement.checked = currentCheckedState
+          }
+        }
+      }
+    } else {
+      lastIndex = currentIndex
+      console.log(`--lastIndex--`); console.log(lastIndex) // DEBUG
+    }
+  })
+})