day 22 completed

4 years ago · 75e54ae6a4
parent eafca9af7d
commit 75e54ae6a4
3 changed files with 161 additions and 0 deletions
--- a/code/22-drawing-app/index.html
+++ b/code/22-drawing-app/index.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>21 drawing app</title>
+
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+        <canvas id="canvas"></canvas>
+        <div class="toolbar">
+            <div class="input">
+                <button id="dec">-</button>
+                <span id="stroke"></span>
+                <button id="inc">+</button>
+                <input type="color" name="color" id="color">
+            </div>
+            <div class="clear"><button id="clear"> X</button></div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
--- a/code/22-drawing-app/script.js
+++ b/code/22-drawing-app/script.js
@ -0,0 +1,71 @@
+let strokeValue = 10;
+
+const incCounter = document.getElementById("inc");
+const decCounter = document.getElementById("dec");
+const stroke = document.getElementById("stroke");
+
+const color = document.getElementById("color");
+let colorVal = color.value;
+let isPressed = false;
+let x, y;
+
+stroke.innerText = strokeValue;
+
+incCounter.addEventListener("click", () => {
+  if (strokeValue < 50) {
+    strokeValue = strokeValue + 5;
+    stroke.innerText = strokeValue;
+  }
+});
+decCounter.addEventListener("click", () => {
+  if (strokeValue > 5) {
+    strokeValue = strokeValue - 5;
+    stroke.innerText = strokeValue;
+  }
+});
+
+const canvas = document.getElementById("canvas");
+
+const ctx = canvas.getContext("2d");
+
+canvas.addEventListener("mousedown", (e) => {
+  isPressed = true;
+  x = e.offsetX;
+  y = e.offsetY;
+});
+
+document.addEventListener("mouseup", (e) => {
+  isPressed = false;
+
+  x = undefined;
+  y = undefined;
+});
+
+canvas.addEventListener("mousemove", (e) => {
+  if (isPressed) {
+    const x2 = e.offsetX;
+    const y2 = e.offsetY;
+
+    drawCircle(x2, y2);
+    drawLine(x, y, x2, y2);
+
+    x = x2;
+    y = y2;
+  }
+});
+
+function drawCircle(x, y) {
+  ctx.beginPath();
+  ctx.arc(x, y, strokeValue, 0, Math.PI * 2);
+  ctx.fillStyle = colorVal;
+  ctx.fill();
+}
+
+function drawLine(x1, y1, x2, y2) {
+  ctx.beginPath();
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.strokeStyle = colorVal;
+  ctx.lineWidth = strokeValue * 2;
+  ctx.stroke();
+}
--- a/code/22-drawing-app/style.css
+++ b/code/22-drawing-app/style.css
@ -0,0 +1,60 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.container {
+  height: 100%;
+  margin: auto;
+  width: 800px;
+}
+
+#canvas {
+  width: 100%;
+  height: 85%;
+  border: 2px solid skyblue;
+}
+
+.toolbar {
+  width: 100%;
+  height: 15%;
+  display: flex;
+  background-color: skyblue;
+  justify-content: space-between;
+}
+
+.input,
+.clear {
+  margin: 20px;
+}
+
+.input {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+}
+
+button,
+input,
+span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 20px;
+  background-color: #fff;
+  border: unset;
+  font-size: 20px;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: 600;
+  height: 100%;
+}
+
+#color {
+  padding: unset;
+}