oprince · haim1212 · Nov 18, 2021 · Nov 18, 2021 · Nov 18, 2021 · Dec 2, 2021
diff --git a/Ex/2021-12-09/errorHandling.html b/Ex/2021-12-09/errorHandling.html
@@ -3,7 +3,7 @@
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="css/styles.css">
-    <script src="js/noErrorHandling.js"></script>
+    <script src="js/errorHandling.js"></script>
   </head>
   <body onload="initPage()">
   <h1>JavaScript Errors handling</h1>
@@ -13,7 +13,7 @@ <h1>JavaScript Errors handling</h1>
         <button id="undefinedFunction" onclick="undefinedFunction()">Call undefined function</button>
       </li>
       <li>
-        <button id="wrongInput" onclick="wrongArgument('123')">Call a function with wrong argument</button>
+        <button id="wrongInput" onclick="wrongArgument(123)">Call a function with wrong argument</button>
       </li>
       <li>
         <label for="userInput">User Input:</label>

diff --git a/Ex/2021-12-09/js/errorHandling.js b/Ex/2021-12-09/js/errorHandling.js
@@ -1,13 +1,13 @@
 
-function initPage(){
+function initPage() {
     console.log("initPage");
-//    window.addEventListener('error', (event) => {
-//        let errorMessage = `${event.type}: ${event.message}\n`;
-//        console.error(errorMessage);
-//        event.preventDefault();
-//    });   
+    //    window.addEventListener('error', (event) => {
+    //        let errorMessage = `${event.type}: ${event.message}\n`;
+    //        console.error(errorMessage);
+    //        event.preventDefault();
+    //    });   
 }
-function handleImageError(event){
+function handleImageError(event) {
     console.log(event);
     //this.onerror=null;this.src='images/imagenotfound.gif';
 }
@@ -24,27 +24,43 @@ function handleImageError(event){
 //         'Column: ' + columnNo,
 //         'Error object: ' + JSON.stringify(error)
 //       ].join(' - ');
-  
+
 //       alert(message);
 //     }
-  
+
 //     //returning true prevents the firing of the default event handler 
 //     return false;  
 // };
 
-function wrongArgument(param1){
-    try{
+function wrongArgument(param1) {
+    const p = document.getElementById("status")
+    let finallyResult;
+    console.log(finallyResult);
+
+    try {
         let result = param1.toLowerCase()
-        console.log(result);    
-    }catch(error){
+        finallyResult = result
+        console.log(result);
+    } catch (error) {
+        finallyResult = error
         console.log(error);
-    }finally{
-        //TODO: Show result or error in "status" element
+    } finally {
+        p.innerHTML = finallyResult
     }
 }
 
-function handleUserInput(){
+function handleUserInput() {
     let userInput = document.getElementById("userInput").value;
-    let result = JSON.parse(userInput);
-    alert("result: " + JSON.stringify(result));
-}
+    let finallyResult;
+    try {
+        let result = JSON.parse(userInput);
+        finallyResult = result
+    } catch (error) {
+        finallyResult = error
+
+    }
+    alert("result: " + JSON.stringify(finallyResult));
+
+}
+
+
diff --git a/Ex/2021-12-20/canvas_draw_shapes.html b/Ex/2021-12-20/canvas_draw_shapes.html
@@ -1,5 +1,30 @@
 <!DOCTYPE html>
 <html>
+<<<<<<< HEAD
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="css/styles.css">
+  <script src="js/draw_shapes.js"></script>
+</head>
+
+<body onload="initPage()">
+  <h1>JavaScript canvas drawing</h1>
+  <br>
+  <div id="catchEventsDiv" class="mouseTests">
+    <canvas id="myCanvas" width="480" height="160"></canvas>
+  </div>
+  <div>
+    <button id="fillBackground" onclick="fillBackground()">Fill background</button>
+    <button id="drawLine" onclick="drawLine()">Draw line</button>
+    <button id="drawCircle" onclick="drawCircle()">Draw circle</button>
+    <button id="drawLines" onclick="drawLines()">Draw lines</button>
+
+  </div>
+</body>
+
+</html>
+=======
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="css/styles.css">
@@ -19,3 +44,4 @@ <h1>JavaScript canvas drawing</h1>
   </div>
   </body>
 </html>
+>>>>>>> master
diff --git a/Ex/2021-12-23/New folder/README.md b/Ex/2021-12-23/New folder/README.md
@@ -0,0 +1,15 @@
+# JBFullStack29
+
+# Ex 6: Draw lines
+
+- Add “draw colored bars” button that will paint the following on the canvas
+![image](https://user-images.githubusercontent.com/12232897/147269882-9d68221d-8a25-4c81-8fe6-a64716523348.png)
+
+- Use a loop that will calculate the bar coordinates, direction (vertical or horizontal) and color. 
+- The color options should be represented in an array.
+- Represent the bar to be painted using an object.
+- Pass the bar object to `drawBar()` function
+- Add input field were number of bars should be entered by the user.
+
+
+**Advanced:** Add “rotate colored bars” button that will draw a 45° rotated version of the above image
diff --git a/Ex/2021-12-23/New folder/canvas_draw_shapes.html b/Ex/2021-12-23/New folder/canvas_draw_shapes.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="css/styles.css">
+  <script src="js/draw_shapes.js"></script>
+</head>
+
+<body onload="initPage()">
+  <h1>JavaScript canvas drawing</h1>
+  <br>
+  <div id="catchEventsDiv" class="mouseTests">
+    <canvas id="myCanvas" width="480" height="160"></canvas>
+  </div>
+  <div>
+    <button id="fillBackground" onclick="fillBackground()">Fill background</button>
+    <button id="drawLine" onclick="drawLine()">Draw line</button>
+    <button id="drawCircle" onclick="drawCircle()">Draw circle</button>
+    <button id="drawLines" onclick="drawLines()">Draw lines</button>
+    <input id="inputID" type="number">
+    <button id="mapID" onclick="createMap()">draw map</button>
+
+  </div>
+</body>
+
+</html>
diff --git a/Ex/2021-12-23/New folder/css/styles.css b/Ex/2021-12-23/New folder/css/styles.css
@@ -0,0 +1,33 @@
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+li {
+  margin-top: 3em;
+  margin-bottom: 1em;
+  margin-left: 5em;
+}
+.mouseTests {
+  border-color: blue;
+  background-color: cornsilk;
+  height: 10em;
+  width: 30em;
+}
+canvas{  
+  /*width: 98%;
+  height: 85%;*/
+  border: 1px solid #000000;
+}
+div {
+  margin-top: 10px;
+}
+label {
+  font-weight: bold;
+  color: blue;
+}
+p {
+  display: inline-block;
+  font-weight: bold;
+  color: rgb(117, 7, 160);
+}
diff --git a/Ex/2021-12-23/New folder/index.zip b/Ex/2021-12-23/New folder/index.zip
diff --git a/Ex/2021-12-23/New folder/js/draw_shapes.js b/Ex/2021-12-23/New folder/js/draw_shapes.js
@@ -0,0 +1,103 @@
+let canvas;
+let ctx;
+let inputVal;
+let colors = [];
+let colorIndex = 0;
+
+function buildColorsArray(ittarations) {
+    let array = [];
+    for (let i = 0; i < ittarations; i++) {
+        let r = Math.floor(Math.random() * 250) + 1;
+        let g = Math.floor(Math.random() * 250) + 1;
+        let b = Math.floor(Math.random() * 250) + 1;
+
+        let color = `rgb(${r},${g},${b})`
+
+        array.push(color)
+    }
+    return array;
+
+}
+
+function initPage() {
+    console.log("initPage");
+    canvas = document.getElementById("myCanvas");
+    ctx = canvas.getContext("2d");
+    canvas.addEventListener("click", (event) => {
+        let x = event.clientX - canvas.offsetLeft;
+        let y = event.clientY - canvas.offsetTop;
+        let currentColor = colors[colorIndex];
+        ctx.strokeStyle = currentColor;
+        colorIndex += 1;
+        if (colorIndex >= colors.length)
+            colorIndex = 0;
+        ctx.strokeRect(x, y, 10, 10);
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+        ctx.lineTo(x + 30, y);
+        ctx.stroke();
+    });
+}
+
+function fillBackground() {
+    ctx.fillStyle = "orange";
+    //ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.strokeStyle = 'blue';
+    ctx.strokeRect(10, 10, canvas.width - 20, canvas.height - 20);
+
+    //radial gradiant
+    var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 150);
+    grd.addColorStop(0, "orange");
+    grd.addColorStop(1, "red");
+    // Fill with gradient
+    ctx.fillStyle = grd;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+}
+
+function drawLine() {
+    ctx.lineWidth = 5;
+    ctx.strokeStyle = 'blue';
+    ctx.moveTo(100, 50);
+    ctx.lineTo(200, 100);
+    ctx.stroke();
+}
+
+function drawCircle() {
+    ctx.strokeStyle = 'blue';
+    ctx.beginPath();
+    ctx.arc(95, 50, 20, 0, 2 * Math.PI);
+    ctx.stroke();
+}
+
+function drawLines() {
+    canvas.width = canvas.width;
+    inputVal = document.getElementById("inputID").value;
+    colors = buildColorsArray(inputVal)
+    let x = 0;
+    let y = 0;
+    for (let i = 0; i < colors.length; i++) {
+        ctx.lineWidth = 5;
+        ctx.strokeStyle = colors[i];
+        ctx.beginPath();
+        ctx.moveTo(x, ((canvas.height / (colors.length)) / 2 + (canvas.height / (colors.length) * i)));
+        ctx.lineTo(canvas.width, ((canvas.height / (colors.length)) / 2 + (canvas.height / (colors.length) * i)));
+        console.log("horizontal :", ((canvas.height / (colors.length)) / 2 + (canvas.height / (colors.length) * i)));
+
+        ctx.stroke();
+
+
+    }
+    for (let i = 0; i < colors.length; i++) {
+        ctx.lineWidth = 5;
+        ctx.strokeStyle = colors[i];
+        ctx.beginPath();
+        ctx.moveTo(((canvas.width / (colors.length)) / 2 + (canvas.width / (colors.length) * i)), y);
+        ctx.lineTo(((canvas.width / (colors.length)) / 2 + (canvas.width / (colors.length) * i)), canvas.height);
+        console.log("vertical :", (canvas.width / (colors.length)) + (canvas.width / (colors.length) * i) / 2);
+        ctx.stroke();
+
+    }
+
+
+}
+