coditech · sarahhachouche1 · Dec 4, 2022 · Dec 6, 2022 · Dec 6, 2022 · Dec 7, 2022
diff --git a/...vaScript/javascript-basics-01/Step_4.html → ...t/javascript-basics-01/step 4/Step_4.html b/...vaScript/javascript-basics-01/Step_4.html → ...t/javascript-basics-01/step 4/Step_4.html
@@ -9,7 +9,10 @@
             <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>
-        </form>
+            <input type="button" name="validate" value="validate" onclick="f4()">
+
+
+       </form>
+        <script src="step4.js" type="text/javascript"></script> 
     </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/step 4/step4.js b/03_Exercises/03_JavaScript/javascript-basics-01/step 4/step4.js
@@ -0,0 +1,12 @@
+function f4()
+{
+  var name, surname,city;
+   surname=document.getElementById("surname").value;
+   name= document.getElementById("name").value;
+   city=document.getElementById("city").value;
+   alert("Name: "+name+"\n"+"Surname: "+surname+"\n"+"City: "+city) 
+
+
+
+
+} 
diff --git a/...vaScript/javascript-basics-01/Step_7.html → ...t/javascript-basics-01/step 7/Step_7.html b/...vaScript/javascript-basics-01/Step_7.html → ...t/javascript-basics-01/step 7/Step_7.html
@@ -8,7 +8,11 @@
         <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>
+            <input type="button" name="validate" value="validate" onclick="multipleOperations()">
+            <input type="text" id="txtresult" name="TextBox3">
+
         </form>
+        <script src="step7.js" type="text/javascript"></script>  
+
     </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/step 7/step7.js b/03_Exercises/03_JavaScript/javascript-basics-01/step 7/step7.js
@@ -0,0 +1,10 @@
+function multipleOperations()
+{
+  var shoe_size, birth_year, res;
+  shoe_size= parseInt(document.getElementById("shoe_size").value);
+   birth_year = parseInt(document.getElementById("year").value);
+   res=(shoe_size*2+5)*50-birth_year+1766;
+  document.getElementById("txtresult").value = res;
+
+
+} 
diff --git a/...vaScript/javascript-basics-01/Step_1.html → ...pt/javascript-basics-01/step1/Step_1.html b/...vaScript/javascript-basics-01/Step_1.html → ...pt/javascript-basics-01/step1/Step_1.html
@@ -4,6 +4,7 @@
         <title>Step 1</title>
         <meta charset="UTF-8">
     </head>
-    <body>
+    <body onload="showAlert()">
+        <script src="step1.js"></script>  
     </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/step1/step1.js b/03_Exercises/03_JavaScript/javascript-basics-01/step1/step1.js
@@ -0,0 +1,4 @@
+function showAlert() {
+   var name = "name";
+   alert ("Hey "+name);
+ }
diff --git a/...vaScript/javascript-basics-01/Step_2.html → ...pt/javascript-basics-01/step2/Step_2.html b/...vaScript/javascript-basics-01/Step_2.html → ...pt/javascript-basics-01/step2/Step_2.html
@@ -4,6 +4,7 @@
         <title>Step 2</title>
         <meta charset="UTF-8">
     </head>
-    <body>
+    <body onload="showAlert()">
+        <script src="step2.js"></script>  
     </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/step2/step2.js b/03_Exercises/03_JavaScript/javascript-basics-01/step2/step2.js
@@ -0,0 +1,6 @@
+function showAlert() {
+    var name = "Sarah";
+    var surname= "Hachouche";
+    var city="Beirut";
+    alert ("Name: "+name+"\n"+"Surname: "+surname+"\n"+"City: "+city);
+  }
diff --git a/...vaScript/javascript-basics-01/Step_3.html → ...pt/javascript-basics-01/step3/Step_3.html b/...vaScript/javascript-basics-01/Step_3.html → ...pt/javascript-basics-01/step3/Step_3.html
@@ -4,6 +4,7 @@
         <title>Step 3</title>
         <meta charset="UTF-8">
     </head>
-    <body>
+    <body onload="showAlert()">  
+        <script src="step3.js" type="text/javascript"></script>  
     </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/step3/step3.js b/03_Exercises/03_JavaScript/javascript-basics-01/step3/step3.js
@@ -0,0 +1,4 @@
+let person = prompt("Please enter your name");
+function showAlert() {
+    alert ("Hello "+person);
+  }
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/step5/.vscode/launch.json b/03_Exercises/03_JavaScript/javascript-basics-01/step5/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/...vaScript/javascript-basics-01/Step_5.html → ...pt/javascript-basics-01/step5/Step_5.html b/...vaScript/javascript-basics-01/Step_5.html → ...pt/javascript-basics-01/step5/Step_5.html
@@ -8,7 +8,11 @@
         <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>
-        </form>
+            <input type="button" name="validate" value="validate" onclick="mult()">
+            <input type="text" id="txtresult" name="TextBox3">
+
+         </form>
+         <script src="step5.js" type="text/javascript"></script>  
+
     </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/step5/step5.js b/03_Exercises/03_JavaScript/javascript-basics-01/step5/step5.js
@@ -0,0 +1,11 @@
+function mult()
+{
+  var numOne, numTwo, product;
+  numOne = parseInt(document.getElementById("first_number").value);
+  numTwo = parseInt(document.getElementById("second_number").value);
+  product= numOne * numTwo;
+  document.getElementById("txtresult").value = product;
+
+
+}  
+
diff --git a/...vaScript/javascript-basics-01/Step_6.html → ...pt/javascript-basics-01/step6/Step_6.html b/...vaScript/javascript-basics-01/Step_6.html → ...pt/javascript-basics-01/step6/Step_6.html
@@ -8,7 +8,12 @@
         <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>
+            <input type="button" name="validate" value="validate" onclick="Reminder()">
+            <input type="text" id="txtresult" name="TextBox3">
+
+
         </form>
+        <script src="step6.js" type="text/javascript"></script>  
+
     </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/step6/step6.js b/03_Exercises/03_JavaScript/javascript-basics-01/step6/step6.js
@@ -0,0 +1,10 @@
+function Reminder()
+{
+  var numOne, numTwo, reminder;
+  numOne = parseInt(document.getElementById("first_number").value);
+  numTwo = parseInt(document.getElementById("second_number").value);
+  reminder= numOne % numTwo;
+  document.getElementById("txtresult").value = reminder;
+
+
+}  
diff --git a/...vaScript/javascript-basics-01/Step_8.html → ...pt/javascript-basics-01/step8/Step_8.html b/...vaScript/javascript-basics-01/Step_8.html → ...pt/javascript-basics-01/step8/Step_8.html
@@ -7,7 +7,11 @@
     <body>
         <form>
             <label for="age">your age : </label><input type="text" id="age" name="age"/><br/>
-            <button id="validate" name="validate">validate</button>
+            <input type="button" name="validate" value="validate" onclick="f8()">
+            <input type="text" id="txtresult" name="TextBox3">
+
         </form>
+        <script src="step8.js" type="text/javascript"></script>  
+
     </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-01/step8/step8.js b/03_Exercises/03_JavaScript/javascript-basics-01/step8/step8.js
@@ -0,0 +1,15 @@
+function f8()
+{
+  var age, res;
+   age= parseInt(document.getElementById("age").value);
+   if(age<=17)
+   {
+      res="you are under 18";
+   }
+   else{
+      res="you are over 18";
+   }
+   document.getElementById("txtresult").value = res;
+
+
+} 
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
@@ -6,5 +6,6 @@
   </head>
   <body>
       <img src="images/image1.jpg" id="image1" />
+      <script src="step1.js" type="text/javascript"></script> 
   </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-02/step 1/step1.js b/03_Exercises/03_JavaScript/javascript-basics-02/step 1/step1.js
@@ -0,0 +1,7 @@
+var element = document.querySelector('#image1');
+element.onmouseover=function(){
+    element.src="images/image1_2.jpg";
+}
+element.onmouseout=function(){
+    element.src="images/image1.jpg";
+}
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
@@ -8,5 +8,6 @@
   <form>
     <label for="name">Your name  : </label><input type="text" name="name" value="" id="name"/>
   </form>
+  <script src="step2.js" type="text/javascript"></script> 
 </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-02/step 2/step2.js b/03_Exercises/03_JavaScript/javascript-basics-02/step 2/step2.js
@@ -0,0 +1,4 @@
+var element = document.querySelector('input');
+element.onblur = function(){
+    alert("thank you for participating!");
+}
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
@@ -8,5 +8,7 @@
   <form>
     <label for="name">Your name  : </label><input type="text" name="name" value="" id="name"/>
   </form>
+  <div id="newtext"></div>
+  <script src="step3.js" type="text/javascript"></script> 
 </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-02/step 3/step3.js b/03_Exercises/03_JavaScript/javascript-basics-02/step 3/step3.js
@@ -0,0 +1,5 @@
+var element1 = document.querySelector('#newtext');
+var element2 = document.querySelector('input');
+element2.onchange = function(){
+    element1.innerHTML+=element2.value;
+}
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
@@ -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" name="button" onclick="fh()">Reset</button>
+    <script src="step4.js" type="text/javascript"></script> 
   </form>
 </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-02/step 4/step4.js b/03_Exercises/03_JavaScript/javascript-basics-02/step 4/step4.js
@@ -0,0 +1,10 @@
+function fh(){
+    let res=prompt("you want to rest");
+    if(res=="yes")
+    {
+        document.getElementById('name').value = '';
+        document.getElementById('surname').value = '';
+        document.getElementById('city').value = '';
+    }
+
+}
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
@@ -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  onmouseover="myfunction()" src="images/image1.jpg" id="image1" />
+      <img  onmouseover="myfunction()"src="images/image2.jpg" id="image2" />
+      <img  onmouseover="myfunction()"src="images/image3.jpg" id="image3" />
+      <img  onmouseover="myfunction()"src="images/image4.jpg" id="image4" />
+      <img  onmouseover="myfunction()"src="images/image5.jpg" id="image5" />
     </div>
+    <script src="step5.js" type="text/javascript"></script> 
   </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-02/step 5/step5.js b/03_Exercises/03_JavaScript/javascript-basics-02/step 5/step5.js
@@ -0,0 +1,8 @@
+ function myfunction(){
+      document.getElementById("image1").src="./images/image1_2.jpg";
+      document.getElementById("image2").src="./images/image2_2.jpg";
+      document.getElementById("image3").src="./images/image3_2.jpg";
+      document.getElementById("image4").src="./images/image4_2.jpg";
+      document.getElementById("image5").src="./images/image5_2.jpg";
+
+}
diff --git a/03_Exercises/03_JavaScript/javascript-basics-02/step 6/index.html b/03_Exercises/03_JavaScript/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 onmouseover="f1()" onmouseout="f2()" src="images/image1.jpg" id="image1" />
+      <img onmouseover="f1()" onmouseout="f2()" src="images/image2.jpg" id="image2" />
+      <img onmouseover="f1()" onmouseout="f2()" src="images/image3.jpg" id="image3" />
+      <img onmouseover="f1()" onmouseout="f2()" src="images/image4.jpg" id="image4" />
+      <img onmouseover="f1()" onmouseout="f2()" src="images/image5.jpg" id="image5" />
+      <script src="step6.js" type="text/javascript"></script>
   </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-02/step 6/step6.js b/03_Exercises/03_JavaScript/javascript-basics-02/step 6/step6.js
@@ -0,0 +1,16 @@
+function f1(){
+    document.getElementById("image1").src="./images/image1_2.jpg";
+    document.getElementById("image2").src="./images/image2_2.jpg";
+    document.getElementById("image3").src="./images/image3_2.jpg";
+    document.getElementById("image4").src="./images/image4_2.jpg";
+    document.getElementById("image5").src="./images/image5_2.jpg";
+
+}
+function f2(){
+    document.getElementById("image1").src="./images/image1.jpg";
+    document.getElementById("image2").src="./images/image2.jpg";
+    document.getElementById("image3").src="./images/image3.jpg";
+    document.getElementById("image4").src="./images/image4.jpg";
+    document.getElementById("image5").src="./images/image5.jpg";
+
+}
diff --git a/03_Exercises/03_JavaScript/javascript-basics-03/step 1/index.html b/03_Exercises/03_JavaScript/javascript-basics-03/step 1/index.html
@@ -5,6 +5,8 @@
     <title>Step 1</title>
   </head>
   <body>
-      <img src="images/image1.jpg" id="image1"/>
+      <img src="images/image1.jpg" id="image1" onmouseover="f1()"/>
+      <script src="step1.js" type="text/javascript"></script>
   </body>
+
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-03/step 1/step1.js b/03_Exercises/03_JavaScript/javascript-basics-03/step 1/step1.js
@@ -0,0 +1,4 @@
+function f1(){
+    document.getElementById("image1").style.border = "3px solid red";
+}
+
diff --git a/03_Exercises/03_JavaScript/javascript-basics-03/step 2/index.html b/03_Exercises/03_JavaScript/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" onclick="fn(1)">Show</a>
+<a href="#" id="hide" onclick="fn(0)">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="step2.js" type="text/javascript"></script>
 </body>
 </html>
diff --git a/03_Exercises/03_JavaScript/javascript-basics-03/step 2/step2.js b/03_Exercises/03_JavaScript/javascript-basics-03/step 2/step2.js
@@ -0,0 +1,12 @@
+function fn(a)
+{
+
+    if(a==1)
+    {
+       document.getElementById("texte").style.display="block";
+    }
+    else{
+        document.getElementById("texte").style.display="none";
+    }
+
+}
diff --git a/03_Exercises/03_JavaScript/javascript-basics-03/step 3/index.html b/03_Exercises/03_JavaScript/javascript-basics-03/step 3/index.html
@@ -10,9 +10,11 @@
   <p>Tara, originellement nommée Antarctica puis Seamaster, est une goélette française destinée à la fois à l'exploration et à la défense de l'environnement. Dans le cadre de l'Année polaire internationale, en 2007-2008, ce voilier est utilisé en Arctique par l'expédition Tara Arctic dans le but de faire des relevés permettant de mieux comprendre les changements climatiques qui s'opèrent en Arctique. En 2009, dans le cadre de l'expédition Tara Oceans, Tara parcourt les mers et les océans dans une circumnavigation de trois ans afin d'étudier le piégeage des molécules de gaz carbonique (CO2) par les micro-organismes marins comme le plancton. En avril 2016, une nouvelle expédition est montée Tara Pacific dont l'objectif est de comprendre le corail, menacé par des facteurs humains et climatiques1.</p>
   </div>
   <div>
-  <div class="color green" ></div>
-  <div class="color red" ></div>
-  <div class="color blue" ></div>
+  <div class="color green" onclick="fn(1)" ></div>
+  <div class="color red" onclick="fn(2)"></div>
+  <div class="color blue" onclick="fn(3)" ></div>
 </div>
+<script src="step3.js"></script>
 </body>
 </html>
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,5 +6,6 @@ @@
       </head>
       <body>
           <img src="images/image1.jpg" id="image1" />
+          <script src="step1.js" type="text/javascript"></script>
       </body>
     </html>