Error handling nad canvas

tahirajannat · tahirajannat · commit c6d7ee89f9c8 · 2024-01-12T18:23:28.000+06:00
diff --git a/assets/pic_the_scream.jpeg b/assets/pic_the_scream.jpeg
diff --git a/canvas.html b/canvas.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Document</title>
+    </head>
+    <body>
+        <canvas id="myCanvas" width="400px" height="300px"></canvas>"
+        <!-- /// -->
+
+        <p>Image to use:</p>
+
+        <img
+            id="scream"
+            width="220"
+            height="277"
+            src="/assets/pic_the_scream.jpeg"
+            alt="The Scream"
+        />
+
+        <p>Canvas:</p>
+
+        <canvas
+            id="myCanvas2"
+            width="240"
+            height="297"
+            style="border: 1px solid grey"
+        ></canvas>
+        <!-- //// -->
+        <canvas
+            id="myCanvas3"
+            width="200"
+            height="120"
+            style="border: 1px solid #d3d3d3"
+        ></canvas>
+
+        <!-- /// -->
+        <script src="scripts/canvas.js"></script>
+    </body>
+</html>
diff --git a/errorHandling.html b/errorHandling.html
@@ -6,6 +6,10 @@
         <title>Document</title>
     </head>
     <body>
+        <p>Enter a number between 5-10:</p>
+        <input type="text" name="" id="numTextFied" />
+        <button id="checkBtn">Check</button>
+
         <script src="/scripts/errorHandling.js"></script>
     </body>
 </html>
diff --git a/scripts/canvas.js b/scripts/canvas.js
@@ -0,0 +1,31 @@
+const canva = document.querySelector('#myCanvas');
+var canvaTxt = canva.getContext('2d');
+
+canvaTxt.strokeStyle = 'black';
+canvaTxt.strokeRect(10, 10, 382, 282);
+
+canvaTxt.lineWidth = 3;
+canvaTxt.fillStyle = 'green';
+canvaTxt.fillRect(12, 12, 378, 278);
+
+var centerX = canva.width / 2;
+var centerY = canva.height / 2;
+
+canvaTxt.beginPath();
+canvaTxt.arc(centerX, centerY, 80, 0, 2 * Math.PI, false);
+canvaTxt.fillStyle = 'red';
+canvaTxt.fill();
+canvaTxt.stroke();
+//
+
+const canvas = document.querySelector('#myCanvas2');
+const ctx = canvas.getContext('2d');
+const img = document.querySelector('#scream');
+ctx.drawImage(img, 10, 10);
+
+///
+const canvas2 = document.querySelector('#myCanvas3');
+const ctx2 = canvas2.getContext('2d');
+ctx2.beginPath();
+ctx2.arc(100, 50, 50, 0, Math.PI);
+ctx2.stroke();
diff --git a/scripts/errorHandling.js b/scripts/errorHandling.js
@@ -2,3 +2,38 @@
 //try ... catch handle run time errors(program which is)
 //Error object
 //The FInally statement -> execute code, after try and catch
+//The throw statement -> create custom errors.
+
+console.clear();
+// try {
+//     //code
+//     alert('Hi everyone');
+//     alert(x);
+// } catch (err) {
+//     //handle error
+//     alert('Inside Catch block');
+//     console.log(err);
+//     console.log(err.name);
+//     console.log(err.message);
+// } finally {
+//     alert('Bye Everyone');
+// }
+
+// alert('Hi everyone');
+// alert(x);
+// alert('Bye Everyone');
+
+document.querySelector('#checkBtn').addEventListener('click', function () {
+    // alert('button is clicked');
+    let num = document.querySelector('#numTextFied').value;
+    console.log(num);
+    try {
+        if (num < 5) {
+            throw 'Input is too low';
+        } else if (num > 10) {
+            throw 'Input is too high';
+        }
+    } catch (err) {
+        console.log(err);
+    }
+});
