geroalexander · pamelakaylin · Jan 6, 2021 · Jan 6, 2021
diff --git a/AddressBook/index.html b/AddressBook/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Address Book</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+
+    <h1>My Address Book</h1>
+
+  <div class="div-left">
+    <div class="search-div">
+      <input id="search" type="text" class="search-contact form-control" placeholder="Search Contact">
+      <br>
+      <button class ="btn-outline-dark" id="btn-search" type="submit" value="submit">Search</button>
+      <button class ="btn-outline-dark" id="btn-back" type="submit" value="submit">Back</button>
+    </div>
+    <br>
+
+    <br>
+    <div class="add-div">
+
+      <form id="contact-form">
+        <input id = "first" type="text" class="firstNameArr form-control" placeholder="First Name">  <br>
+        <input id = "last" type="text" class="lastNameArr form-control" placeholder="Last Name">  <br>
+        <input id = "address" type="text" class="addressArr form-control" placeholder="Address">  <br>
+        <input id = "number" type="text" class="phoneNumberArr form-control" placeholder="Phone Number">
+      </form>
+      <br>
+      <button class ="btn-outline-dark" id="btn-add" type="submit" value="submit">Add</button>
+      <br>
+
+
+      <p id="error">Make sure there are no spaces in your name!</p>
+      </div>
+
+  </div>
+
+    <div class="div-right">
+      <div class="infos">
+        <p id="infoSearch"></p>
+    </div>
+
+    <div class="contact-div">
+      <p id="listed"></p>
+
+      <table id="contact-item">
+        <tr>
+          <th id="flName"></th>
+          <td id="deleteCell"><button class ="btn-outline-dark btn-delete" id="first-btn" type="submit" value="submit">Delete</button></td>
+        </tr>
+        <tr>
+          <td id="addressName"></td>
+        </tr>
+        <tr>
+          <td id="numberName"></td>
+        </tr>
+        <br>
+      </table>
+
+    </div>
+  </div>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="main.js" charset="utf-8"></script>
+  </body>
+
+</html>
diff --git a/AddressBook/main.js b/AddressBook/main.js
@@ -0,0 +1,213 @@
+let firstNameArr = [];
+let lastNameArr = [];
+let addressArr = [];
+let phoneNumberArr = [];
+
+function listContacts()
+{
+  $("#listed").html("");
+
+  for (let i = 0; i < firstNameArr.length; i++)
+  {
+
+    var newContact = $("#contact-item").clone().attr('id',"#table"+i);
+    newContact.find("#flName").attr('id', "flName"+i).html(firstNameArr[i]+" "+lastNameArr[i]);
+    newContact.find("#addressName").attr('id', "addressName"+i).html(addressArr[i]);
+    newContact.find("#numberName").attr('id', "numberName"+i).html(phoneNumberArr[i]);
+    newContact.find("#first-btn").attr('id', i);
+
+    newContact.appendTo("#listed");
+  }
+}
+
+function addContact(first, last, address, phone)
+{
+  if (first !== "" && last !== "" && address !== "" && phone !=="")
+  {
+
+    if (phone.match(/^[+-0123456789]+$/) === null)
+    {
+      $("#error").html("Phone number can only contain symbols -+ and numbers 0-9.");
+    }
+    else if (first.includes(" ") || last.includes(" "))
+    {
+      $("#error").html("Names cannot contain spaces!");
+    }
+    else
+    {
+      //----------------first-name-------------------\\
+      let inputFirst = first.split(' ')
+      let modInputFullFirst = []
+      for (let i = 0; i < inputFirst.length; i++)
+      {
+        let modInputFirst = inputFirst[i].charAt(0).toUpperCase();
+        let modInputRest = inputFirst[i].toLowerCase().slice(1);
+
+        modInputFullFirst.push(modInputFirst + modInputRest);
+      }
+          firstNameArr.push(modInputFullFirst.join(' ')); //pushed first name
+
+      //------------------last-name------------------\\
+      let inputLast = last.split(' ')
+      let modInputFullLast = []
+      for (let i = 0; i < inputLast.length; i++)
+      {
+        let modInputLast = inputLast[i].charAt(0).toUpperCase();
+        let modInputRest = inputLast[i].toLowerCase().slice(1);
+
+        modInputFullLast.push(modInputLast + modInputRest);
+      }
+          lastNameArr.push(modInputFullLast.join(' ')); //pushed last name
+
+          addressArr.push(address.toUpperCase());   // pushed address
+          phoneNumberArr.push(phone);   // pushed phone
+
+      $("#error").html("Contact added!");
+
+      $("#first").val("");
+      $("#last").val("");
+      $("#address").val("");
+      $("#number").val("");
+    }
+  }
+  else
+  {
+    $("#error").html("Please fill in all contact fields!");
+  }
+}
+
+function searchContact(nameSearch)
+{
+  $("#infoSearch").html("");
+  let searched = 0;
+  if (nameSearch === "")
+  {
+    $("#error").html("Please enter a valid contact.");
+  }
+  else
+  {
+    let inputSearch = nameSearch.split(' ')
+    let modInputFullSearch = [] // ['Gero']  --> gero kassing
+    for (let i = 0; i < inputSearch.length; i++)
+    {
+      let modInputFirst = inputSearch[i].charAt(0).toUpperCase();
+      let modInputRest = inputSearch[i].toLowerCase().slice(1);
+
+      modInputFullSearch.push(modInputFirst + modInputRest)
+    }
+
+    for (let i = 0; i < firstNameArr.length ; i++)
+    {
+        if (firstNameArr[i] === modInputFullSearch[0] && lastNameArr[i] === modInputFullSearch[1])
+        {
+          $(".infos").show();
+          $(".contact-div").hide();
+
+          var searchContact = $("#contact-item").clone().attr('id',"#table"+i);
+          searchContact.find("#flName").attr('id', "flName"+i).html(firstNameArr[i]+" "+lastNameArr[i]);
+          searchContact.find("#addressName").attr('id', "addressName"+i).html(addressArr[i]);
+          searchContact.find("#numberName").attr('id', "numberName"+i).html(phoneNumberArr[i]);
+
+          searchContact.appendTo("#infoSearch");
+
+          searched++;
+          $("#search").val("");
+        }
+        else if (firstNameArr[i] === modInputFullSearch[0] && modInputFullSearch.length === 1)
+        {
+          $(".infos").show();
+          $(".contact-div").hide();
+
+          var searchContact = $("#contact-item").clone().attr('id',"#table"+i);
+          searchContact.find("#flName").attr('id', "flName"+i).html(firstNameArr[i]+" "+lastNameArr[i]);
+          searchContact.find("#addressName").attr('id', "addressName"+i).html(addressArr[i]);
+          searchContact.find("#numberName").attr('id', "numberName"+i).html(phoneNumberArr[i]);
+
+          searchContact.appendTo("#infoSearch");
+
+          searched++;
+          $("#search").val("");
+        }
+        else if (lastNameArr[i] === modInputFullSearch[0] && modInputFullSearch.length === 1)
+        {
+          $(".infos").show();
+          $(".contact-div").hide();
+
+          var searchContact = $("#contact-item").clone().attr('id',"#table"+i);
+          searchContact.find("#flName").attr('id', "flName"+i).html(firstNameArr[i]+" "+lastNameArr[i]);
+          searchContact.find("#addressName").attr('id', "addressName"+i).html(addressArr[i]);
+          searchContact.find("#numberName").attr('id', "numberName"+i).html(phoneNumberArr[i]);
+
+          searchContact.appendTo("#infoSearch");
+
+          searched++;
+          $("#search").val("");
+        }
+    }
+
+    if (searched === 0)
+    {
+      $("#error").html("No contact with that name was found!");
+    }
+  }
+}
+
+function deleteContact(nameDelete) // Gero Kassing
+{
+  let i = nameDelete;
+
+  firstNameArr.splice(i, 1);
+  lastNameArr.splice(i, 1);
+  addressArr.splice(i, 1);
+  phoneNumberArr.splice(i,1);
+
+  $("table#table"+i).remove();
+}
+
+// JQUERY -----------------------------------------
+
+$(document).ready(function()
+{
+  // add contact
+    $("#btn-add").on("click", function()
+  {
+    $(".infos").hide();
+    $(".contact-div").show();
+    let first = $("#first").val();
+    let last = $("#last").val();
+    let address = $("#address").val();
+    let number = $("#number").val();
+
+    addContact(first, last, address, number);
+    listContacts();
+
+  });
+
+  // delete contact listed
+    $("#listed").on("click", "#deleteCell", function()
+  {
+    $(".infos").hide();
+    $(".contact-div").show();
+    let nameDelete = $(this).children("button").attr('id');
+    deleteContact(nameDelete);
+    listContacts();
+
+  });
+
+  // search contact
+    $("#btn-search").on("click", function()
+  {
+    $("#btn-back").show();
+    let nameSearch = $("#search").val();
+    searchContact(nameSearch);
+
+  });
+
+  // back button
+    $("#btn-back").on("click", function()
+  {
+    $(".infos").hide();
+    $(".contact-div").show();
+  });
+
+});
diff --git a/AddressBook/styles.css b/AddressBook/styles.css
@@ -0,0 +1,95 @@
+body {
+  background-color: #FFC300 ;
+}
+
+h1 {
+  text-align: center;
+  font-family: Copperplate;
+  font-size: 50px;
+  font-style: italic;
+  background-color: #00C3EA ;
+  padding: 10px;
+
+}
+
+p {
+  padding-top: 3%;
+}
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  margin-top: 15px
+}
+
+.infos {
+  display: none;
+  text-align: left;
+  padding-left: 10%;
+  padding-top:  4%;
+  color: red;
+}
+
+.book {
+  height: 400px;
+}
+
+.search-div {
+  text-align: left;
+  margin-left: 10%;
+  padding-right: 15%;
+}
+
+.delete-div {
+  text-align: left;
+  margin-left: 10%;
+  padding-right: 15%;
+}
+
+.add-div {
+  text-align: left;
+  margin-left: 10%;
+  padding-right: 15%;
+}
+
+.div-left {
+  display: inline-block;
+  width: 50%;
+  padding-left: 10%;
+  margin-top: 1%;
+}
+
+.contact-div {
+  text-align: left;
+  padding-left: 10%;
+  padding-top:  4%;
+
+}
+
+.div-right {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 1%;
+  height: 540px;
+  width: 450px;
+  background-image: url("https://i.pinimg.com/originals/8a/f9/4a/8af94acf5e43ebc202b578be4f51dc82.png");
+  overflow: auto;
+}
+
+
+
+#first-btn {
+  display: none;
+}
+
+#error {
+  color: red;
+}
+
+#btn-back {
+  display: none;
+}
+
+#deleteCell {
+  padding-left: 50px;
+}
diff --git a/hi.md b/hi.md