oprince · sabinayh · Jan 3, 2022
diff --git a/Ex/2/Ex2_start.html b/Ex/2/Ex2_start.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="css/Ex2_start.css">
+    <script type = "text/javascript" src = "./js/Ex2_start.js"></script>
+    <title>Student details</title>
+  </head>
+  <body dir="rtl" onload="initiateForm()">
+    <div>
+      <p>פרטי סטודנט</p>
+    </div>    
+    <form onSubmit="return saveStudent()">
+      <ul>
+         <li>
+           <label for="fname">שם פרטי:</label>
+           <input type="text" id="fname" name="first_name" required>
+         </li>
+         <li>
+            <label for="lname">שם משפחה:</label>
+            <input type="text" id="lname" name="last_name" required>
+          </li>
+          <li>
+           <label for="mail">Email:</label>
+           <input type="email" id="mail" name="student_email" required>
+         </li>
+         <li>
+           <label for="msg">הודעה:</label>
+           <textarea id="msg" name="student_message"></textarea>
+         </li>
+         <li class="button">
+            <button type="submit">שמור</button>            
+          </li>         
+        </ul>
+    </form>  
+    <div>
+       <ul>
+          <li>
+            <button onclick = "getStudentFromLocalStorage()">איחזור</button>
+          </li>
+       </ul>      
+    </div>      
+  </body>
+</html>
diff --git a/Ex/2/README.md b/Ex/2/README.md
@@ -0,0 +1,20 @@
+# Excersize 2
+
+## Add the following fields and validations:
+- Birth date
+  - Required
+  - Maximum value = today – 18 years
+  - Minimum value = today – 90 years
+- Education years
+  - Required
+  - Value should be higher than <student age> – 5
+- Kids number
+  - Optional
+
+If education years value is not valid:
+
+- Display red error message under education years field.
+- Change the education years field background color
+
+
+![image](https://user-images.githubusercontent.com/12232897/142916844-d1ca0cf6-11d8-4cab-adda-ae3c2469ba4a.png)
diff --git a/Ex/2/css/Ex2_start.css b/Ex/2/css/Ex2_start.css
@@ -0,0 +1,93 @@
+div{
+  /* Center the form on the page */
+  margin: 0 auto;
+  width: 450px;
+  /* Form outline */
+  padding: 1em;
+}
+
+div.emsg{
+  color: #c12020; 
+  font-weight: bold; 
+  padding: 0;
+  height: 1em;
+}
+
+form {
+    /* Center the form on the page */
+    margin: 0 auto;
+    width: 450px;
+    /* Form outline */
+    padding: 1em;
+    border: 1px solid #CCC;
+    border-radius: 1em;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  form li + li {
+    margin-top: 1em;
+  }
+
+  label {
+    /* Uniform size & alignment */
+    display: inline-block;
+    width: 100px;
+    text-align: right;
+  }
+
+  input,
+  textarea {
+    /* To make sure that all text fields have the same font settings
+       By default, textareas have a monospace font */
+    font: 1em sans-serif;
+
+    /* Uniform text field size */
+    width: 300px;
+    box-sizing: border-box;
+
+    /* Match form field borders */
+    border: 1px solid #999;
+  }
+
+  input:focus,
+  textarea:focus {
+    /* Additional highlight for focused elements */
+    border-color: #000;
+  }
+
+  input.init { 
+    border: 1px solid #0faa3d; 
+  }
+
+  input.empty { 
+    background: #afc2e94d; 
+  }
+
+  input.err { 
+    background: #ffe6ee; 
+    border: 1px solid #b1395f; 
+  }
+
+  textarea {
+    /* Align multiline text fields with their labels */
+    vertical-align: top;
+
+    /* Provide space to type some text */
+    height: 5em;
+  }
+
+  .button {
+    /* Align buttons with the text fields */
+    padding-left: 90px; /* same size as the label elements */
+  }
+
+  button {
+    /* This extra margin represent roughly the same space as the space
+       between the labels and their text fields */
+    margin-left: .5em;
+  }
diff --git a/Ex/2/js/Ex2_start.js b/Ex/2/js/Ex2_start.js
@@ -0,0 +1,67 @@
+function saveStudent(){
+      let student = {
+        fname: document.getElementById('fname').value,
+        lname: document.getElementById('lname').value,
+        mail: document.getElementById('mail').value,
+        msg: document.getElementById('msg').value
+    }
+    window.localStorage.setItem("student",JSON.stringify(student)); 
+    alert(`The following studen details were saved successfully:\n ${JSON.stringify(student, undefined, 2 )}`);
+}
+
+function getStudentFromLocalStorage(){
+  let studentStr = window.localStorage.getItem("student");
+  if (studentStr != null){
+    console.log(studentStr);
+    let studentObj = JSON.parse(studentStr);
+    document.getElementById('fname').value = studentObj.fname;
+    document.getElementById('lname').value = studentObj.lname;
+    document.getElementById('mail').value = studentObj.mail;
+    document.getElementById('msg').value = studentObj.msg;
+
+    setTimeout(function(){ 
+      document.getElementById('fname').value = "";
+      document.getElementById('lname').value = "";
+      document.getElementById('mail').value = "";
+      document.getElementById('msg').value = "";  
+      window.localStorage.removeItem("student");
+    }, 5000);
+
+  }
+
+}
+
+function validateEducation(){
+  let birthDate = new Date(document.getElementById('birthDate').value);
+  // diff_ms = now (in ms since 1970) - birthday (in ms since 1970)
+  // diff_ms = age in ms  
+  var diff_ms = Date.now() - birthDate.getTime();
+  var age_dt = new Date(diff_ms); 
+
+  let age = Math.abs(age_dt.getUTCFullYear() - 1970);
+  console.log("age = " + age);
+}
+
+function initiateForm(){
+    //Limit maximum birth date to be 18 years ago
+    var today = new Date();
+    var dd = today.getDate();
+    var mm = today.getMonth() + 1; //January is 0!
+    var yyyy = today.getFullYear() - 18;
+
+    if (dd < 10) {
+      dd = '0' + dd;
+    }
+
+    if (mm < 10) {
+      mm = '0' + mm;
+    } 
+
+    maxBirthDate = yyyy + '-' + mm + '-' + dd;
+    console.log("Maximum birth date is: " + maxBirthDate); 
+
+    //document.getElementById('fname').setAttribute("class","empty");
+    //document.getElementById('fname').classList.add("empty");
+    //document.getElementById('fname').style.setProperty("background", "#b1395f");
+    //document.getElementById('fname').style.background = "#afc2e94d";
+}
diff --git a/Ex/2021-11-25/Ex2_solution.html b/Ex/2021-11-25/Ex2_solution.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="css/Ex2_solution.css">
+    <script type = "text/javascript" src = "./js/Ex2_solution.js"></script>
+    <title>Student details</title>
+  </head>
+  <body dir="rtl" onload="initiateForm()">
+    <div>
+      <p>פרטי סטודנט</p>
+    </div>    
+    <form onSubmit="return saveStudent()">
+      <ul>
+         <li>
+           <label for="fname">שם פרטי:</label>
+           <input type="text" id="fname" name="first_name" required>
+         </li>
+         <li>
+            <label for="lname">שם משפחה:</label>
+            <input type="text" id="lname" name="last_name" required>
+          </li>
+          <li>
+            <label for="birthDate">תאריך לידה:</label>
+            <input type="date" min="1921-01-02" id="birthDate" name="birthDate" required>
+          </li>
+          <li>
+            <label for="education">שנות לימוד:</label>
+            <input type="number" min=0 onfocusout="validateEducation()" onfocusin="cleanError()" id="education" name="education" required>
+            <div id="ceducation" class="emsg"></div>
+          </li>
+          <li>
+            <label for="kids">מספר ילדים:</label>
+            <input type="number" min=0 id="kids" name="kids">
+          </li>
+          <li>
+           <label for="mail">Email:</label>
+           <input type="email" id="mail" name="student_email" required>
+         </li>
+         <li>
+           <label for="msg">הודעה:</label>
+           <textarea id="msg" name="student_message"></textarea>
+         </li>
+         <li class="button">
+            <button type="submit">שמור</button>            
+          </li>         
+        </ul>
+    </form>  
+    <div>
+       <ul>
+          <li>
+            <button onclick = "getStudentFromLocalStorage()">איחזור</button>
+          </li>
+       </ul>      
+    </div>      
+  </body>
+</html>
diff --git a/Ex/2021-11-25/README.md b/Ex/2021-11-25/README.md
@@ -0,0 +1,20 @@
+# JBFullStack29
+
+# Excersize 2 2021-11-25
+
+- Change the education field validation you have created at exercise 2 to run at onSubmit event handler.
+- Keep the save button disabled until all required form controls are valid. Use onChange event handler for required input fields. 
+
+
+# Excersize 4 2021-11-25
+
+Change [document.html](document.html):
+
+Create a button that will show the content of all `<h2>` elements
+
+
+# Excersize 5 2021-11-25
+
+Change [element.html](element.html):
+
+In function getChildrenOf() add the details of all children, not only direct children.