Add files via upload (pranjay-poddar#4593)

Nikita06211 · Aug 3, 2023 · b114dac · b114dac
1 parent ea1b58a
commit b114dac
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 0 deletions.
diff --git a/Frontend-Projects/Painting/index.html b/Frontend-Projects/Painting/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Painting App</title>
+</head>
+
+<body>
+    <div class="container">
+        <h1>Painting App</h1>
+        <canvas id="canvas" width="800" height="500"></canvas>
+        <div class="colors">
+            <button class="color" style="background-color: black;"></button>
+            <button class="color" style="background-color: red;"></button>
+            <button class="color" style="background-color: green;"></button>
+            <button class="color" style="background-color: blue;"></button>
+            <button class="color" style="background-color: yellow;"></button>
+        </div>
+        <button id="clearBtn">Clear</button>
+    </div>
+    <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/Frontend-Projects/Painting/main.js b/Frontend-Projects/Painting/main.js
@@ -0,0 +1,54 @@
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+let isDrawing = false;
+let color = 'black';
+let prevX = 0;
+let prevY = 0;
+
+canvas.addEventListener('mousedown', (e) => {
+    isDrawing = true;
+    prevX = e.offsetX;
+    prevY = e.offsetY;
+});
+
+canvas.addEventListener('mousemove', (e) => {
+    if (isDrawing) {
+        draw(e.offsetX, e.offsetY);
+    }
+});
+
+canvas.addEventListener('mouseup', () => {
+    isDrawing = false;
+});
+
+canvas.addEventListener('mouseleave', () => {
+    isDrawing = false;
+});
+
+function draw(x, y) {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 5;
+    ctx.lineJoin = 'round';
+    ctx.lineCap = 'round';
+    ctx.beginPath();
+    ctx.moveTo(prevX, prevY);
+    ctx.lineTo(x, y);
+    ctx.stroke();
+    prevX = x;
+    prevY = y;
+}
+
+const colors = document.querySelectorAll('.color');
+
+colors.forEach((button) => {
+    button.addEventListener('click', () => {
+        color = button.style.backgroundColor;
+    });
+});
+
+const clearBtn = document.getElementById('clearBtn');
+
+clearBtn.addEventListener('click', () => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+});
diff --git a/Frontend-Projects/Painting/style.css b/Frontend-Projects/Painting/style.css
@@ -0,0 +1,43 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f2f2f2;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    text-align: center;
+}
+
+h1 {
+    margin-bottom: 20px;
+}
+
+canvas {
+    border: 1px solid #ccc;
+    background-color: #fff;
+}
+
+.colors {
+    margin-top: 10px;
+}
+
+.colors .color {
+    width: 30px;
+    height: 30px;
+    border: none;
+    margin: 5px;
+    cursor: pointer;
+}
+
+#clearBtn {
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    margin-top: 20px;
+    cursor: pointer;
+}