From 75e54ae6a43dca0c37d74eee025577d37a66d4e6 Mon Sep 17 00:00:00 2001 From: couldntfindabetterusername Date: Tue, 8 Mar 2022 23:00:29 +0530 Subject: [PATCH] day 22 completed --- my code/22-drawing-app/index.html | 30 +++++++++++++ my code/22-drawing-app/script.js | 71 +++++++++++++++++++++++++++++++ my code/22-drawing-app/style.css | 60 ++++++++++++++++++++++++++ 3 files changed, 161 insertions(+) create mode 100644 my code/22-drawing-app/index.html create mode 100644 my code/22-drawing-app/script.js create mode 100644 my code/22-drawing-app/style.css diff --git a/my code/22-drawing-app/index.html b/my code/22-drawing-app/index.html new file mode 100644 index 0000000..bb8a660 --- /dev/null +++ b/my code/22-drawing-app/index.html @@ -0,0 +1,30 @@ + + + + + + + + 21 drawing app + + + + + +
+ +
+
+ + + + +
+
+
+
+ + + + + \ No newline at end of file diff --git a/my code/22-drawing-app/script.js b/my code/22-drawing-app/script.js new file mode 100644 index 0000000..17de3bb --- /dev/null +++ b/my 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(); +} diff --git a/my code/22-drawing-app/style.css b/my code/22-drawing-app/style.css new file mode 100644 index 0000000..aed536d --- /dev/null +++ b/my 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; +}