coditech · mahmoudchamas · Dec 6, 2022 · Dec 6, 2022 · Dec 6, 2022 · Dec 7, 2022
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/Step_1.html b/03_Exercises/03_JavaScript/javascript-basics-01/Step_1.html
@@ -3,7 +3,9 @@
     <head>
         <title>Step 1</title>
         <meta charset="UTF-8">
+        <script src="step_1.js"></script>
     </head>
     <body>
+
     </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/Step_2.html b/03_Exercises/03_JavaScript/javascript-basics-01/Step_2.html
@@ -3,7 +3,9 @@
     <head>
         <title>Step 2</title>
         <meta charset="UTF-8">
+        <script src="step_2.js"></script>
     </head>
     <body>
+
     </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/Step_3.html b/03_Exercises/03_JavaScript/javascript-basics-01/Step_3.html
@@ -3,6 +3,7 @@
     <head>
         <title>Step 3</title>
         <meta charset="UTF-8">
+        <script src="step_3.js"></script>
     </head>
     <body>
     </body>

diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/Step_4.html b/03_Exercises/03_JavaScript/javascript-basics-01/Step_4.html
@@ -3,13 +3,14 @@
     <head>
         <title>Step 4</title>
         <meta charset="UTF-8">
+        <Script src="Step_4.js"></Script>
     </head>
     <body>
         <form>
             <label for="name">name : </label><input type="text" name="name" id="name"/>
             <label for="surname">surname : </label><input type="text" name="surname" id="surname"/>
             <label for="city">city : </label><input type="text" name="city" id="city"/>
-            <button  name="validate" id="validate">Validate</button>
+            <button onclick="info()" name="validate" id="validate">Validate</button>
         </form>
     </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/Step_4.js b/03_Exercises/03_JavaScript/javascript-basics-01/Step_4.js
@@ -0,0 +1,10 @@
+alert("enter your name, surname and city")
+function info(){
+    var num1 , num2 , sum ;
+    name1 = parseInt(document.getElementById("name").value);
+    surname= parseInt(document.getElementById("surname").value);
+    city= parseInt(document.getElementById("city").value);
+
+
+alert("name:"+name1+"\n"+"surname:"+surname+"\n"+"city:"+city    );
+}
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/Step_5.html b/03_Exercises/03_JavaScript/javascript-basics-01/Step_5.html
@@ -3,12 +3,13 @@
     <head>
         <title>Step 5</title>
         <meta charset="UTF-8">
+        <script src="Step_5.js"></script>
     </head>
     <body>
         <form>
             <label for="first_number">first number : </label><input type="text" id="first_number" name="first_number"/><br/>
             <label for="second_number">second number : </label><input type="text" id="second_number" name="second_number"/><br/>
-            <button  id="validate" name ="validate">validate</button>
+            <button onclick="add()"  id="validate" name ="validate">validate</button>
         </form>
     </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/Step_5.js b/03_Exercises/03_JavaScript/javascript-basics-01/Step_5.js
@@ -0,0 +1,8 @@
+function add(){
+var num1 , num2 , sum ;
+num1 = parseInt(document.getElementById("first_number").value);
+num2 = parseInt(document.getElementById("second_number").value);
+sum = num1 + num2;
+
+alert("the sum of to number is :"+sum)
+}
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/Step_6.html b/03_Exercises/03_JavaScript/javascript-basics-01/Step_6.html
@@ -3,12 +3,13 @@
     <head>
         <title>Step 6</title>
         <meta charset="UTF-8">
+        <script src="Step_6.js"></script>
     </head>
     <body>
         <form>
             <label for="first_number">first number : </label><input type="text" id="first_number" name="first_number"/><br/>
             <label for="second_number">second number : </label><input type="text" id="second_number" name="second_number"/><br/>
-            <button  id="validate" name ="validate">validate</button>
+            <button onclick="rem()" id="validate" name ="validate">validate</button>
         </form>
     </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/Step_6.js b/03_Exercises/03_JavaScript/javascript-basics-01/Step_6.js
@@ -0,0 +1,8 @@
+function rem(){
+    var num1 , num2 , reminder;
+    num1 = parseInt(document.getElementById("first_number").value);
+    num2 = parseInt(document.getElementById("second_number").value);
+    reminder= num1%num2;
+
+    alert("the reminder of division ="+reminder)
+    }
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/Step_7.html b/03_Exercises/03_JavaScript/javascript-basics-01/Step_7.html
@@ -3,12 +3,13 @@
     <head>
         <title>Step 7</title>
         <meta charset="UTF-8">
+        <script src="Step_7.js"></script>
     </head>
     <body>
         <form>
             <label for="shoe_size">shoe size : </label><input type="text" id="shoe_size" name="shoe_size"/><br/>
             <label for="year">Birth year : </label><input type="text" id="year" name="year"/><br/>
-            <button id="validate" name="validate">validate</button>
+            <button id="validate" onclick="result1()"  oname="validate">validate</button>
         </form>
     </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/Step_7.js b/03_Exercises/03_JavaScript/javascript-basics-01/Step_7.js
@@ -0,0 +1,13 @@
+alert("What is your shoe size and your  birthday day")
+function result1(){
+    var shoe_size , year  ,  result;
+     shoe_size= parseInt(document.getElementById("shoe_size").value);
+   year  = parseInt(document.getElementById("year").value);
+    shoe_size = shoe_size*2 ;
+    shoe_size = shoe_size + 5 ;
+    shoe_size = shoe_size * 50 ;
+     result = shoe_size - year ;
+     result = result + 1766
+
+    alert("the reminder of division ="+result);
+    }
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/Step_8.html b/03_Exercises/03_JavaScript/javascript-basics-01/Step_8.html
@@ -3,11 +3,12 @@
     <head>
         <title>Step 8</title>
         <meta charset="UTF-8">
+        <script src="Step_8.js"></script>
     </head>
     <body>
         <form>
             <label for="age">your age : </label><input type="text" id="age" name="age"/><br/>
-            <button id="validate" name="validate">validate</button>
+            <button onclick="age1()" id="validate" name="validate">validate</button>
         </form>
     </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/Step_8.js b/03_Exercises/03_JavaScript/javascript-basics-01/Step_8.js
@@ -0,0 +1,13 @@
+alert("enter your name")
+function age1(){
+    var age ;
+    num1 = parseInt(document.getElementById("age").value);
+
+    if(age => 18){
+        alert("your age is under 18");
+
+
+    }else {
+    alert("your age is over 18");
+    }
+}
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/step_1.js b/03_Exercises/03_JavaScript/javascript-basics-01/step_1.js
@@ -0,0 +1,3 @@
+
+var a="Mahmoud" ;
+alert(a);
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/step_2.js b/03_Exercises/03_JavaScript/javascript-basics-01/step_2.js
@@ -0,0 +1,5 @@
+var name1="Mahmoud";
+var surname="Chamas";
+var city="Beirut";
+alert("name:"+name1+"\n"+"surname:"+surname+"\n"+"city:"+city    )
+
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/step_3 copy.js b/03_Exercises/03_JavaScript/javascript-basics-01/step_3 copy.js
@@ -0,0 +1,7 @@
+let person = prompt("enter your name");
+let text ;
+if(person==null || person ==""){
+    text="user cancelled the prompt.";
+}else{
+  window.alert("hello"+"  "+person);
+}
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/step_3.js b/03_Exercises/03_JavaScript/javascript-basics-01/step_3.js
@@ -0,0 +1,7 @@
+let person = prompt("enter your name");
+let text ;
+if(person==null || person ==""){
+    text="user cancelled the prompt.";
+}else{
+  window.alert("hello"+"  "+person);
+}
diff --git a/03_Exercises/03_JavaScript/javascript-basics-02/.vscode/settings.json b/03_Exercises/03_JavaScript/javascript-basics-02/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/03_Exercises/03_JavaScript/javascript-basics-02/step 1/Step_1.js b/03_Exercises/03_JavaScript/javascript-basics-02/step 1/Step_1.js
@@ -0,0 +1,5 @@
+var image = document.querySelector("#image1");
+image.addEventListener('mouseover', function(){
+    image.src="./images/image1_2.jpg"
+
+})
diff --git a/03_Exercises/03_JavaScript/javascript-basics-02/step 1/index.html b/03_Exercises/03_JavaScript/javascript-basics-02/step 1/index.html
@@ -3,8 +3,13 @@
   <head>
     <meta charset="utf-8">
     <title>Step 1</title>
+
   </head>
   <body>
+
+
       <img src="images/image1.jpg" id="image1" />
+    <script src="Step_1.js"></script>
+
   </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-02/step 2/Step_2.js b/03_Exercises/03_JavaScript/javascript-basics-02/step 2/Step_2.js
@@ -0,0 +1,3 @@
+function myfunction() {
+  alert("thankyou for participation");
+}
diff --git a/03_Exercises/03_JavaScript/javascript-basics-02/step 2/index.html b/03_Exercises/03_JavaScript/javascript-basics-02/step 2/index.html
@@ -1,12 +1,20 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <meta charset="utf-8">
-  <title>Step 2</title>
-</head>
-<body>
-  <form>
-    <label for="name">Your name  : </label><input type="text" name="name" value="" id="name"/>
-  </form>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Step 2</title>
+    <script src="Step_2.js"></script>
+  </head>
+  <body>
+    <form>
+      <label for="name">Your name : </label
+      ><input
+        type="text"
+        name="name"
+        value=""
+        id="name"
+        onblur="myfunction()"
+      />
+    </form>
+  </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-02/step 3/Style_3.js b/03_Exercises/03_JavaScript/javascript-basics-02/step 3/Style_3.js
@@ -0,0 +1,6 @@
+function target1(){
+    var x= document.getElementById("name").value;
+    document.getElementById("target").innerHTML= x;
+
+
+}
diff --git a/03_Exercises/03_JavaScript/javascript-basics-02/step 3/index.html b/03_Exercises/03_JavaScript/javascript-basics-02/step 3/index.html
@@ -3,10 +3,14 @@
 <head>
   <meta charset="utf-8">
   <title>Step 3</title>
+  <script src="Style_3.js"></script>
 </head>
 <body>
   <form>
-    <label for="name">Your name  : </label><input type="text" name="name" value="" id="name"/>
+    <div id=" target"><p>this is a target</p></div>
+    <label for="name">Your name  : </label><input type="text" name="name" value="" id="name" onchange="target1"/>
+    <div id="target" ></div>
   </form>
+
 </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-02/step 4/Style_4.js b/03_Exercises/03_JavaScript/javascript-basics-02/step 4/Style_4.js
@@ -0,0 +1,11 @@
+function test1() {
+  var val = confirm("you are going to reset the form");
+  if (val == true) {
+    document.getElementById("name").value = null;
+    document.getElementById("surname").value = "";
+    document.getElementById("city").value = "";
+  } else {
+    alert("no ");
+    return 0;
+  }
+}
diff --git a/03_Exercises/03_JavaScript/javascript-basics-02/step 4/index.html b/03_Exercises/03_JavaScript/javascript-basics-02/step 4/index.html
@@ -1,15 +1,19 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <meta charset="utf-8">
-  <title>Step 4</title>
-</head>
-<body>
-  <form>
-    <label for="name">Your name  : </label><input type="text" name="name" value="Doe" id="name" />
-    <label for="surname">Your surname  : </label><input type="text" name="surname" value="John" id="surname" />
-    <label for="city">Your city  : </label><input type="text" name="city" value="New York" id="city" />
-    <button type="button" name="button">Reset</button>
-  </form>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Step 4</title>
+    <script src="Style_4.js"></script>
+  </head>
+  <body>
+    <form id="">
+      <label for="name">Your name : </label
+      ><input type="text" name="name" value="Doe" id="name" />
+      <label for="surname">Your surname : </label
+      ><input type="text" name="surname" value="John" id="surname" />
+      <label for="city">Your city : </label
+      ><input type="text" name="city" value="New York" id="city" />
+      <button onclick="test1()" type="button" name="button">Reset</button>
+    </form>
+  </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-02/step 5/index.html b/03_Exercises/03_JavaScript/javascript-basics-02/step 5/index.html
@@ -3,14 +3,15 @@
   <head>
     <meta charset="utf-8">
     <title>Step 5</title>
+    <script src="step_5.js"></script>
   </head>
   <body>
     <div class="container">
-      <img src="images/image1.jpg" id="image1" />
-      <img src="images/image2.jpg" id="image2" />
-      <img src="images/image3.jpg" id="image3" />
-      <img src="images/image4.jpg" id="image4" />
-      <img src="images/image5.jpg" id="image5" />
+      <img src="images/image1.jpg" id="image1"  onmouseover=changeImage()/>
+      <img src="images/image2.jpg" id="image2"onmouseover=changeImage() />
+      <img src="images/image3.jpg" id="image3" onmouseover=changeImage() />
+      <img src="images/image4.jpg" id="image4" onmouseover=changeImage()/>
+      <img src="images/image5.jpg" id="image5" onmouseover=changeImage()/>
     </div>
   </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-02/step 5/step_5.js b/03_Exercises/03_JavaScript/javascript-basics-02/step 5/step_5.js
@@ -0,0 +1,37 @@
+function changeImage(){
+    const image1 = document.querySelector("#image1");
+
+    image1.addEventListener('mouseover', function (){
+        image1.src="images/image1_2.jpg"
+
+    })
+
+        const image2 = document.querySelector("#image2")
+
+    image2.addEventListener('mouseover', function (){
+        image2.src="images/image2_2.jpg"
+
+    })
+        const image3 = document.querySelector("#image3");
+
+    image3.addEventListener('mouseover', function (){
+        image3.src="images/image3_2.jpg"  
+    })
+
+    const image4 = document.querySelector("#image4");
+
+       image4.addEventListener('mouseover', function (){
+        image4.src="images/image4_2.jpg"
+
+    })
+
+        const image5 = document.querySelector("#image5");
+
+    image5.addEventListener('mouseover', function (){
+        image5.src="images/image5_2.jpg"
+
+    })
+
+
+
+}
diff --git a/03_Exercises/03_JavaScript/javascript-basics-03/step 1/Step_1.js b/03_Exercises/03_JavaScript/javascript-basics-03/step 1/Step_1.js
@@ -0,0 +1,10 @@
+
+let img1 = document.querySelector("#image1");
+image1.addEventListener('mouseover', function (){
+        image1.style.border = "3px red solid ";
+
+})
+
+
+
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,6 +3,7 @@ @@
         <head>
             <title>Step 3</title>
             <meta charset="UTF-8">
+            <script src="step_3.js"></script>
         </head>
         <body>
         </body>
@@ Expand Down @@