Fix log message

public/index.html

@@ -76,6 +76,25 @@
                 <div id="rectangle"></div>
               </a>
             </div>
+            <div class="pen-body">
+              <div id="brush-colour">
+                <h3>Brush size</h3>
+              </div>
+              &nbsp;
+              <div class="slide-size">
+                <input
+                  type="range"
+                  min="1"
+                  max="100"
+                  value="50"
+                  class="slider"
+                  id="range"
+                />
+                <p style="text-align: center; margin: 0px">
+                  Size: <span id="value"></span>
+                </p>
+              </div>
+            </div>
           </div>
         </div>
         <div id="palette" class="properties" style="padding-top: 150px">

public/styles.css

@@ -256,6 +256,40 @@ button.selected {
   text-align: center;
 }
 
-.properties:palette {
-  padding-top: 50px;
+.slide-size {
+  width: 90%;
+  height: 20%;
+}
+
+.slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 25px;
+  background: #d3d3d3;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: 0.2s;
+  transition: opacity 0.2s;
+  margin-top: 30px;
+}
+
+.slider:hover {
+  opacity: 1;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  background: #4f4f4f;
+  cursor: pointer;
+}
+
+.slider::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  background: #4f4f4f;
+  cursor: pointer;
 }

src/app.js

@@ -101,6 +101,12 @@ for (var i = 1; i < svg.length; i++) {
   })
 }
 
+HTML.output.innerHTML = HTML.slider.value
+
+HTML.slider.oninput = function() {
+  HTML.output.innerHTML = this.value
+}
+
 HTML.eraserButton.addEventListener("click", () => {
   currentTool = tools.ERASER
   HTML.penButton.classList.remove("selected")

src/canvas.js

@@ -84,7 +84,6 @@ export const renderPath = (id, points) => {
       // Further split up segments based on thickness.
       const subpath_ = subpath.slice()
       let w = subpath_[0][2]
-      console.log(w)
       for (let i = 1; i < subpath_.length; i++) {
         if (subpath_[i][2] != w) {
           const d = lineFn([...subpath_.splice(0, i), subpath_[0]])

src/elements.js

@@ -20,3 +20,5 @@ export const span = document.querySelectorAll(".close")
 export const palette = document.getElementById("palette")
 export const rectangle = document.getElementById("rectangle")
 export const wheel = document.getElementById("wheel")
+export const slider = document.getElementById("range")
+export const output = document.getElementById("value")