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;
+}