NWC2 · AghaDev · Aug 30, 2023 · Aug 30, 2023 · Aug 30, 2023 · Aug 30, 2023
diff --git a/javascript-basics-01/Step_1.html b/javascript-basics-01/Step_1.html
@@ -5,5 +5,8 @@
         <meta charset="UTF-8">
     </head>
     <body>
+    <script src="./step_1.js">
+
+    </script>
     </body>
 </html>
diff --git a/javascript-basics-01/Step_2.html b/javascript-basics-01/Step_2.html
@@ -5,5 +5,7 @@
         <meta charset="UTF-8">
     </head>
     <body>
+        <script src="./step_2.js"></script>
     </body>
+
 </html>
diff --git a/javascript-basics-01/Step_3.html b/javascript-basics-01/Step_3.html
@@ -6,4 +6,7 @@
     </head>
     <body>
     </body>
+    <script src="step_3.js">
+
+    </script>
 </html>
diff --git a/javascript-basics-01/Step_4.html b/javascript-basics-01/Step_4.html
@@ -11,5 +11,6 @@
             <label for="city">city : </label><input type="text" name="city" id="city"/>
             <button  name="validate" id="validate">Validate</button>
         </form>
+        <script src="step_4.js"></script>
     </body>
 </html>
diff --git a/javascript-basics-01/Step_5.html b/javascript-basics-01/Step_5.html
@@ -8,7 +8,8 @@
         <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="multiply()"  id="validate" name ="validate">validate</button>
         </form>
+        <script src="step_5.js"></script>
     </body>
 </html>
diff --git a/javascript-basics-01/Step_6.html b/javascript-basics-01/Step_6.html
@@ -8,7 +8,8 @@
         <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="remainder()" id="validate" name ="validate">validate</button>
         </form>
+        <script src="step-6.js"></script>
     </body>
 </html>
diff --git a/javascript-basics-01/Step_7.html b/javascript-basics-01/Step_7.html
@@ -8,7 +8,8 @@
         <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 onclick="bwad()" id="validate" name="validate">validate</button>
         </form>
+        <script src="step-7.js"></script>
     </body>
 </html>
diff --git a/javascript-basics-01/Step_8.html b/javascript-basics-01/Step_8.html
@@ -7,7 +7,8 @@
     <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="CalculateAge()" id="validate" name="validate">validate</button>
         </form>
+        <script src="step-8.js"></script>
     </body>
 </html>
diff --git a/javascript-basics-01/step-6.js b/javascript-basics-01/step-6.js
@@ -0,0 +1,7 @@
+function remainder(){
+
+    let x = document. getElementById("first_number"). value;
+    let y = document. getElementById("second_number"). value;
+    let result = (x%y);
+    alert(result);
+    }
diff --git a/javascript-basics-01/step-7.js b/javascript-basics-01/step-7.js
@@ -0,0 +1,6 @@
+function bwad(){
+    let x = document.getElementById("shoe_size"). value;
+    let year = parseInt(document.getElementById("year").value)
+    let result = ((((x*2+5)*50)-year)+1766);
+    alert(result);
+    }
diff --git a/javascript-basics-01/step-8.js b/javascript-basics-01/step-8.js
@@ -0,0 +1,9 @@
+function CalculateAge(){
+    let age = parseFloat(document.getElementById("age").value)
+    if(age>18){
+        alert("User is over 18")
+    }
+    else
+        alert("User is under 18")
+
+    }
diff --git a/javascript-basics-01/step_1.js b/javascript-basics-01/step_1.js
@@ -0,0 +1,2 @@
+let name = "Moe";
+alert(name)
diff --git a/javascript-basics-01/step_2.js b/javascript-basics-01/step_2.js
@@ -0,0 +1,4 @@
+let name = "Moe";
+let surname = "Agha";
+let city = "Beirut";
+alert("Name: "+name+"\nSurname: "+surname+"\nCity: "+city);
diff --git a/javascript-basics-01/step_3.js b/javascript-basics-01/step_3.js
@@ -0,0 +1,2 @@
+var name = prompt("Please enter your name: ");
+alert("Hello "+name)
diff --git a/javascript-basics-01/step_4.js b/javascript-basics-01/step_4.js
@@ -0,0 +1,4 @@
+var name = prompt("Please enter your name: ");
+var surname = prompt("Please enter your surname: ");
+var city = prompt("Please enter the name of the city you live in: ");
+alert("Hello "+name+ " "+surname+ " from "+city);
diff --git a/javascript-basics-01/step_5.js b/javascript-basics-01/step_5.js
@@ -0,0 +1,7 @@
+function multiply(){
+
+let x = document. getElementById("first_number"). value;
+let y = document. getElementById("second_number"). value;
+let result = (x*y);
+alert(result);
+}
diff --git a/javascript-basics-02/step 1/index.html b/javascript-basics-02/step 1/index.html
@@ -7,4 +7,5 @@
   <body>
       <img src="images/image1.jpg" id="image1" />
   </body>
+  <script src="js2-step1.js"></script>
 </html>
diff --git a/javascript-basics-02/step 1/js2-step1.js b/javascript-basics-02/step 1/js2-step1.js
@@ -0,0 +1,8 @@
+let img = document.querySelector("#image1");
+
+img.addEventListener("mouseover",()=>
+{
+
+    img.setAttribute("src","images/image1_2.jpg");
+}
+)
diff --git a/javascript-basics-02/step 2/index.html b/javascript-basics-02/step 2/index.html
@@ -6,7 +6,8 @@
 </head>
 <body>
   <form>
-    <label for="name">Your name  : </label><input type="text" name="name" value="" id="name"/>
+    <label for="name">Your name  : </label><input type="text" onblur="myFunction()" name="name" value="" id="name"/>
   </form>
+  <script src="js2-step2.js"></script>
 </body>
 </html>
diff --git a/javascript-basics-02/step 2/js2-step2.js b/javascript-basics-02/step 2/js2-step2.js
@@ -0,0 +1,4 @@
+function myFunction(){
+    let name = document.querySelector("#name");
+    alert("thank you for participating");
+}
diff --git a/javascript-basics-02/step 3/index.html b/javascript-basics-02/step 3/index.html
@@ -6,7 +6,10 @@
 </head>
 <body>
   <form>
-    <label for="name">Your name  : </label><input type="text" name="name" value="" id="name"/>
+    <label for="name">Your name  : </label><input type="text" onkeyup="myFunction()" name="name" value="" id="name"/>
   </form>
+  <script src="js2-step3.js"></script>
+  <div></div>
 </body>
+
 </html>
diff --git a/javascript-basics-02/step 3/js2-step3.js b/javascript-basics-02/step 3/js2-step3.js
@@ -0,0 +1,5 @@
+function myFunction(){
+    let div = document.querySelector("div");
+    let name = document.querySelector("#name");
+    div.innerHTML = name.value;
+}
diff --git a/javascript-basics-02/step 4/index.html b/javascript-basics-02/step 4/index.html
@@ -9,7 +9,8 @@
     <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>
+    <button type="button" onclick="myFunction()" name="button">Reset</button>
   </form>
+  <script src="js2-step4.js"></script>
 </body>
 </html>
diff --git a/javascript-basics-02/step 4/js2-step4.js b/javascript-basics-02/step 4/js2-step4.js
@@ -0,0 +1,12 @@
+function myFunction(){
+    let confirm = prompt("do you really wanna reset?");
+    let name = document.getElementById("name");
+    let surname = document.getElementById("surname");
+    let city = document.getElementById("city");
+
+    if(confirm == 'y' || confirm == 'Y'){
+        name.value = ""
+        surname.value="";
+        city.value="";
+    }
+}
diff --git a/javascript-basics-02/step 5/index.html b/javascript-basics-02/step 5/index.html
@@ -6,11 +6,12 @@
   </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" onmouseover="agha()" id="image1" />
+      <img src="images/image2.jpg" onmouseover="agha()" id="image2" />
+      <img src="images/image3.jpg" onmouseover="agha()" id="image3" />
+      <img src="images/image4.jpg" onmouseover="agha()" id="image4" />
+      <img src="images/image5.jpg" onmouseover="agha()" id="image5" />
     </div>
+    <script src="js2-step5.js"></script>
   </body>
 </html>
diff --git a/javascript-basics-02/step 5/js2-step5.js b/javascript-basics-02/step 5/js2-step5.js
@@ -0,0 +1,13 @@
+var img1 = document.getElementById("image1");
+var img2 = document.getElementById("image2");
+var img3 = document.getElementById("image3");
+var img4 = document.getElementById("image4");
+var img5 = document.getElementById("image5");
+
+function agha(){
+img1.src = 'images/image1_2.jpg';
+img2.src = 'images/image2_2.jpg';
+img3.src = 'images/image3_2.jpg';
+img4.src = 'images/image4_2.jpg';
+img5.src = 'images/image5_2.jpg'
+}
diff --git a/javascript-basics-02/step 6/index.html b/javascript-basics-02/step 6/index.html
@@ -5,10 +5,11 @@
     <title>Step 6</title>
   </head>
   <body>
-      <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="hover()" onmouseleave="leave()"/>
+      <img src="images/image2.jpg" id="image2" onmouseover="hover()" onmouseleave="leave()"/>
+      <img src="images/image3.jpg" id="image3" onmouseover="hover()" onmouseleave="leave()"/>
+      <img src="images/image4.jpg" id="image4" onmouseover="hover()" onmouseleave="leave()"/>
+      <img src="images/image5.jpg" id="image5" onmouseover="hover()" onmouseleave="leave()"/>
+      <script src="js2-step6.js"></script>
   </body>
 </html>
diff --git a/javascript-basics-02/step 6/js2-step6.js b/javascript-basics-02/step 6/js2-step6.js
@@ -0,0 +1,22 @@
+var img1 = document.getElementById("image1");
+var img2 = document.getElementById("image2");
+var img3 = document.getElementById("image3");
+var img4 = document.getElementById("image4");
+var img5 = document.getElementById("image5");
+
+function hover(){
+img1.src = 'images/image1_2.jpg';
+img2.src = 'images/image2_2.jpg';
+img3.src = 'images/image3_2.jpg';
+img4.src = 'images/image4_2.jpg';
+img5.src = 'images/image5_2.jpg'
+}
+
+function leave(){
+    img1.src = 'images/image1.jpg';
+    img2.src = 'images/image2.jpg';
+    img3.src = 'images/image3.jpg';
+    img4.src = 'images/image4.jpg';
+    img5.src = 'images/image5.jpg'
+
+}
diff --git a/javascript-basics-03/step 1/index.html b/javascript-basics-03/step 1/index.html
@@ -5,6 +5,7 @@
     <title>Step 1</title>
   </head>
   <body>
-      <img src="images/image1.jpg" id="image1"/>
+      <img src="images/image1.jpg" onmouseover="hover()" id="image1"/>
+      <script src="js3-step1.js"></script>
   </body>
 </html>
diff --git a/javascript-basics-03/step 1/js3-step1.js b/javascript-basics-03/step 1/js3-step1.js
@@ -0,0 +1,5 @@
+let img = document.querySelector("#image1");
+function hover(){
+    img.style.border = "3px solid red";
+
+}
diff --git a/javascript-basics-03/step 2/index.html b/javascript-basics-03/step 2/index.html
@@ -5,10 +5,11 @@
   <title>Step 2</title>
 </head>
 <body>
-<a href="#" id="show">Show</a>
-<a href="#" id="hide">Hide</a>
+<a href="#" id="show" >Show</a>
+<a href="#" id="hide" >Hide</a>
   <div id="texte">
     <p>Joseph Dacre Carlyle (Carlisle, 4 juin 1758 - Newcastle upon Tyne, 12 avril 1804) est un orientaliste anglais.Après ses études à l'université de Cambridge, il y devint professeur d'arabe. En 1799, il fut attaché par le gouvernement britannique à l'ambassade de Lord Elgin dans l'Empire ottoman. Il était chargé d'explorer les bibliothèques de la région (principalement celle du Sérail) pour y découvrir (et y acquérir) des manuscrits inédits de textes antiques. Il se rendit aussi en Égypte, en Terre sainte et au mont Athos. Sa mission fut, de son point de vue, un échec. Il acheta quelques centaines d'ouvrages, principalement dans les bazars de Constantinople, mais aucun ne contenait de texte inédit. Cependant, la façon dont certains manuscrits avaient été acquis, principalement ceux du patriarche de Jérusalem Anthème Ier, ainsi que la querelle entamée sur la plaine de Troie entre Carlyle et un autre professeur de Cambridge, Edward Daniel Clarke, allaient être utilisées, après la mort de Carlyle, contre Lord Elgin, dans les controverses autour de l'acquisition des « marbres d'Elgin ».De retour en Grande-Bretagne à l'automne 1801, Joseph Dacre Carlyle entama une traduction en arabe de la Bible. Sa mort en avril 1804 coupa court à ce travail.</p>
   </div>
+  <script src="js3-step2.js"></script>
 </body>
 </html>
diff --git a/javascript-basics-03/step 2/js3-step2.js b/javascript-basics-03/step 2/js3-step2.js
@@ -0,0 +1,13 @@
+document.addEventListener('DOMContentLoaded', function(){
+    let show = document.getElementById('show');
+    let hide = document.getElementById('hide');
+    let text = document.getElementById('texte');
+
+    show.addEventListener('click',function(){
+        text.style.display="block";
+    })
+
+    hide.addEventListener('click',function(){
+        text.style.display="none";
+})
+})
diff --git a/javascript-basics-03/step 3/index.html b/javascript-basics-03/step 3/index.html
@@ -14,5 +14,6 @@
   <div class="color red" ></div>
   <div class="color blue" ></div>
 </div>
+<script src="js3-step3.js"></script>
 </body>
 </html>
diff --git a/javascript-basics-03/step 3/js3-step3.js b/javascript-basics-03/step 3/js3-step3.js
@@ -0,0 +1,30 @@
+// document.addEventListener('DOMContentLoaded', function(){
+    // let green = document.getElementsByClassName('color green');
+    // let red = document.getElementsByClassName('color red');
+    // let blue = document.getElementsByClassName('color blue');
+
+//     show.addEventListener('click',function(){
+//         green.style.display="block";
+//     })
+
+//     show.addEventListener('click',function(){
+//         red.style.display="block";
+// })
+//     show.addEventListener('click',function(){
+//         blue.style.display="block";
+// })
+// })
+let green = document.querySelector('.green');
+let red = document.querySelector('.red');
+let blue = document.querySelector('.blue');
+let text = document.getElementById('text');
+    red.addEventListener("click",function(){
+        text.style.color = 'red';
+    })
+    green.addEventListener("click",function(){
+        text.style.color = 'green';
+    })
+    blue.addEventListener("click",function(){
+        text.style.color = 'blue';
+    })
+
diff --git a/javascript-basics-03/step 4/index.html b/javascript-basics-03/step 4/index.html
@@ -8,7 +8,8 @@
   <form>
     <label for="password">password : </label><input type="text" name="password" value="" id="password" />
     <label for="confirmation">Confirm : </label><input type="text" name="confirmation" value="" id="confirmation" />
-    <button type="button" name="button" >Test</button>
+    <button onclick="checkPass()" type="button" name="button" >Test</button>
   </form>
+  <script src="js3-step4.js"></script>
 </body>
 </html>
diff --git a/javascript-basics-03/step 4/js3-step4.js b/javascript-basics-03/step 4/js3-step4.js
@@ -0,0 +1,12 @@
+let pass = document.getElementById("password")
+let confirm = document.getElementById("confirmation")
+function checkPass(){
+    if (pass.value != confirm.value){
+        pass.style.border = "3px solid red";
+        confirm.style.border = "3px solid red";
+    }
+    else{
+        pass.style.border = "1px solid black";
+        confirm.style.border = "1px solid black"
+    }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,5 +5,7 @@ @@
             <meta charset="UTF-8">
         </head>
         <body>
+            <script src="./step_2.js"></script>
         </body>
     </html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		var name = prompt("Please enter your name: ");
		alert("Hello "+name)