coditechOld · karamgaby · May 22, 2017 · May 22, 2017 · May 22, 2017 · May 22, 2017
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+# Created by .ignore support plugin (hsz.mobi)
+/.idea
+/Base6/node_modules
diff --git a/Base1/Step_1.html b/Base1/Step_1.html
@@ -5,5 +5,9 @@
         <meta charset="UTF-8">
     </head>
     <body>
+    <script>
+        const name = "Gaby";
+        alert(name);
+    </script>
     </body>
 </html>
diff --git a/Base1/Step_2.html b/Base1/Step_2.html
@@ -1,9 +1,15 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Step 2</title>
-        <meta charset="UTF-8">
-    </head>
-    <body>
-    </body>
+<head>
+    <title>Step 2</title>
+    <meta charset="UTF-8">
+</head>
+<body>
+<script>
+    const name = "Gaby";
+    const surname = "Karam";
+    const city = "Bkeshtay";
+    alert("Name: " + name + "\nLastName: "+surname+"\nCity: "+ city);
+</script>
+</body>
 </html>
diff --git a/Base1/Step_3.html b/Base1/Step_3.html
@@ -5,5 +5,14 @@
         <meta charset="UTF-8">
     </head>
     <body>
+    <script>
+        var person = "";
+        while (person=== "" || person === null ){
+            person = prompt("Please enter your name", "Jad");
+
+        }
+        alert("Hellom "+ person);
+
+    </script>
     </body>
 </html>
diff --git a/Base1/Step_4.html b/Base1/Step_4.html
@@ -11,5 +11,17 @@
             <label for="city">city : </label><input type="text" name="city" id="city"/>
             <button  name="validate" id="validate">Validate</button>
         </form>
+
+        <script>
+            const name = document.getElementById("name");
+            const surname = document.getElementById("surname");
+            const city = document.getElementById("city");
+            const validate = document.getElementById("validate");
+
+            validate.addEventListener('click', function () {
+                alert("Name: " + name.value + "\nLastName: "+surname.value +"\nCity: "+ city.value );
+
+            })
+        </script>
     </body>
 </html>
diff --git a/Base1/Step_5.html b/Base1/Step_5.html
@@ -10,5 +10,16 @@
             <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>
+
+        <script>
+            const first_number = document.getElementById("first_number");
+            const second_number = document.getElementById("second_number");
+            const validate = document.getElementById("validate");
+
+            validate.addEventListener('click', function () {
+               alert("The Result is " + parseInt(first_number.value)* parseInt(second_number.value));
+            })
+
+        </script>
     </body>
 </html>
diff --git a/Base1/Step_6.html b/Base1/Step_6.html
@@ -10,5 +10,6 @@
             <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>
+        <script src="./step6.js"></script>
     </body>
 </html>
diff --git a/Base1/Step_7.html b/Base1/Step_7.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Step 7</title>
-        <meta charset="UTF-8">
-    </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>
-        </form>
-    </body>
+<head>
+    <title>Step 7</title>
+    <meta charset="UTF-8">
+</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>
+</form>
+<script src="./step7.js"></script>
+
+</body>
 </html>
diff --git a/Base1/Step_8.html b/Base1/Step_8.html
@@ -9,5 +9,27 @@
             <label for="age">your age : </label><input type="text" id="age" name="age"/><br/>
             <button id="validate" name="validate">validate</button>
         </form>
+
+        <script>
+            /**
+             * Created by gabykaram on 5/22/17.
+             */
+            const age = document.getElementById("age");
+
+            const validate = document.getElementById("validate");
+
+            validate.addEventListener('click', function () {
+               if(age.value > 18){
+                   alert("You are over 18");
+               }else if(parseInt(age.value) === 18){
+                   alert("You are  18");
+
+               }else {
+                   alert("You are under 18");
+
+               }
+            });
+
+        </script>
     </body>
 </html>
diff --git a/Base1/step6.js b/Base1/step6.js
@@ -0,0 +1,10 @@
+/**
+ * Created by gabykaram on 5/22/17.
+ */
+const first_number = document.getElementById("first_number");
+const second_number = document.getElementById("second_number");
+const validate = document.getElementById("validate");
+
+validate.addEventListener('click', function () {
+    alert("The Result is " + parseInt(first_number.value)%parseInt(second_number.value));
+});
diff --git a/Base1/step7.js b/Base1/step7.js
@@ -0,0 +1,11 @@
+/**
+ * Created by gabykaram on 5/22/17.
+ */
+const shoe_size = document.getElementById("shoe_size");
+const year = document.getElementById("year");
+const validate = document.getElementById("validate");
+
+validate.addEventListener('click', function () {
+    const result = ((((parseInt(shoe_size.value) *2)+5)*50)/parseInt(year.value) )+ 1766 ;
+    alert("The Result is " + result);
+});
diff --git a/Base2/step 1/index.html b/Base2/step 1/index.html
@@ -1,10 +1,28 @@
-<!DOCTYPE html>
 <html>
-  <head>
+<head>
     <meta charset="utf-8">
     <title>Step 1</title>
-  </head>
-  <body>
-      <img src="images/image1.jpg" id="image1" />
-  </body>
-</html>
+</head>
+<body>
+<img src="images/image1.jpg" id="image1"/>
+</body>
+<script type="text/javascript">
+
+    alert('ss');
+    let img1 = document.querySelector('#image1');
+    const changeImageIn = function () {
+alert('hi 1 ');
+        img1.src = 'images/image1_2.jpg';
+
+    };
+    function changeImageOut() {
+        alert('hi 2 ');
+
+        img1.src = 'images/image1.jpg';
+    }
+    img1.addEventListener("mouseover", changeImageIn);
+    img1.addEventListener("mouseout", changeImageOut);
+
+
+</script>
+</html>
diff --git a/Base2/step 1/script.js b/Base2/step 1/script.js
@@ -0,0 +1,12 @@
+/**
+ * Created by gabykaram on 5/22/17.
+ */
+document.addEventListener('DOMContentLoaded', function () {
+    const image1 = document.querySelector('#image1');
+    image1.addEventListener('mouseover', function () {
+        image1.src = "images/image1_2.jpg";
+    });
+    image1.addEventListener('mouseout', function () {
+        image1.src = "images/image1.jpg";
+    })
+});
diff --git a/Base2/step 2/index.html b/Base2/step 2/index.html
@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <meta charset="utf-8">
-  <title>Step 2</title>
+    <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>
+<form>
+    <label for="name">Your name : </label><input type="text" name="name" value="" id="name"/>
+</form>
+<script src="script.js"></script>
 </body>
 </html>
diff --git a/Base2/step 2/script.js b/Base2/step 2/script.js
@@ -0,0 +1,9 @@
+/**
+ * Created by gabykaram on 5/22/17.
+ */
+
+const name = document.getElementById('name');
+
+name.addEventListener('blur',function () {
+   alert('thank you for participating!');
+});
diff --git a/Base2/step 3/index.html b/Base2/step 3/index.html
@@ -5,8 +5,18 @@
   <title>Step 3</title>
 </head>
 <body>
+<div id="div" style="color: #f24971; background-color:black ">
+
+</div>
   <form>
     <label for="name">Your name  : </label><input type="text" name="name" value="" id="name"/>
   </form>
+  <script>
+    const name = document.getElementById('name');
+    const div  = document.getElementById('div');
+    name.addEventListener('change', function () {
+        div.innerHTML = name.value;
+    });
+  </script>
 </body>
 </html>
diff --git a/Base2/step 4/index.html b/Base2/step 4/index.html
@@ -1,15 +1,34 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <meta charset="utf-8">
-  <title>Step 4</title>
+    <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" />
+<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>
+</form>
+
+<script>
+    const button = document.getElementsByName("button");
+    const name = document.getElementById("name");
+    const surname = document.getElementById("surname");
+    const city = document.getElementById("city");
+
+    var i;
+    for (i = 0; i < button.length; i++) {
+        button[i].addEventListener('click', function () {
+            if (confirm('Are you sure you want to reset all field\'s?')) {
+                name.value = "";
+                surname.value = "";
+                city.value = "";
+
+            }
+        });
+    }
+</script>
 </body>
 </html>
diff --git a/Base2/step 5/index.html b/Base2/step 5/index.html
@@ -12,5 +12,10 @@
       <img src="images/image4.jpg" id="image4" />
       <img src="images/image5.jpg" id="image5" />
     </div>
+
+
+    <script src="script.js">
+
+    </script>
   </body>
 </html>
diff --git a/Base2/step 5/script.js b/Base2/step 5/script.js
@@ -0,0 +1,24 @@
+/**
+ * Created by gabykaram on 5/22/17.
+ */
+const imgs = document.getElementsByTagName("img");
+
+
+var i;
+for (i = 0; i < imgs.length; i++) {
+    imgs[i].addEventListener('mouseover', function () {
+        var previousSrc = this.src;
+        previousSrc = previousSrc.replace(/^.*[\\\/]/, '');
+        previousSrc =previousSrc.slice(0,-4);
+
+        this.src = "images/"+ previousSrc + "_2.jpg";
+
+    });
+    imgs[i].addEventListener('mouseout', function () {
+        var previousSrc = this.src;
+        previousSrc = previousSrc.replace(/^.*[\\\/]/, '');
+        previousSrc =previousSrc.slice(0,-6);
+        this.src = "images/"+ previousSrc + ".jpg";
+
+    });
+}
diff --git a/Base2/step 6/index.html b/Base2/step 6/index.html
@@ -11,4 +11,5 @@
       <img src="images/image4.jpg" id="image4" />
       <img src="images/image5.jpg" id="image5" />
   </body>
+  <script src="script.js"></script>
 </html>
diff --git a/Base2/step 6/script.js b/Base2/step 6/script.js
@@ -0,0 +1,24 @@
+/**
+ * Created by gabykaram on 5/22/17.
+ */
+const imgs = document.getElementsByTagName("img");
+
+
+var i;
+for (i = 0; i < imgs.length; i++) {
+    imgs[i].addEventListener('mouseover', function () {
+        var previousSrc = this.src;
+        previousSrc = previousSrc.replace(/^.*[\\\/]/, '');
+        previousSrc =previousSrc.slice(0,-4);
+
+        this.src = "images/"+ previousSrc + "_2.jpg";
+
+    });
+    imgs[i].addEventListener('mouseout', function () {
+        var previousSrc = this.src;
+        previousSrc = previousSrc.replace(/^.*[\\\/]/, '');
+        previousSrc =previousSrc.slice(0,-6);
+        this.src = "images/"+ previousSrc + ".jpg";
+
+    });
+}
diff --git a/Base3/step 1/index.html b/Base3/step 1/index.html
@@ -3,8 +3,15 @@
   <head>
     <meta charset="utf-8">
     <title>Step 1</title>
+      <style>
+          .border {
+              border: 2px solid red;
+          }
+      </style>
   </head>
   <body>
       <img src="images/image1.jpg" id="image1"/>
+
+      <script src="script.js"></script>
   </body>
 </html>