added Contact Card

zaapen · zaapen · commit 2eda55e03f53 · 2017-09-25T20:55:59.000-07:00
diff --git a/Contact Card/Contact Card.zip b/Contact Card/Contact Card.zip
diff --git a/Contact Card/contactcard.html b/Contact Card/contactcard.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="contactcss.css">
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script type="text/javascript">
+      $(document).ready(function(){
+        $(".btn").click(function(){
+          var firstname = $("#firstname").val();
+          var lastname = $("#lastname").val();
+          var description = $("textarea").val();
+          $("#card").append(
+            "<div class='contactcard'><h2>" + firstname + " " + lastname + "</h2><p class='hide'>" + description + "</p><p class='here'>Click here for description</p></div>")
+        })
+        $(document).on("click", ".here", function(){
+          // var description = $("textarea").val();
+          // $(this).parent().html("<p class='here'>" + description + "</p>");
+          $(this).siblings("p").toggle();
+        })
+      })
+    </script>
+    <title></title>
+  </head>
+  <body>
+    <div id="container">
+      <div id="info">
+        <form class="names" action="index.html" method="post">
+          <div>
+            <label for="firstname">First name:</label>
+            <input id="firstname" type="text" name="firstname" value="">
+          </div>
+          <div>
+            <label for="lastname">Last name:</label>
+            <input id="lastname" type="text" name="lastname" value="">
+          </div>
+          <div class="description">
+            <p>Description:</p>
+            <textarea name="name" rows="8" cols="50"></textarea>
+          </div>
+          <button class="btn" type="button" name="button">Add User</button>
+        </form>
+      </div>
+      <div id="card">
+
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/Contact Card/contactcss.css b/Contact Card/contactcss.css
@@ -0,0 +1,47 @@
+*{
+  margin: 0px;
+  padding: 0px;
+}
+#container{
+  width: 970px;
+  margin: 0px auto;
+}
+#info{
+  width: 400px;
+  margin: 20px 10px;
+  display: inline-block;
+}
+label{
+  margin: 10px 0px;
+}
+input{
+  margin: 10px 0px;
+}
+.description{
+  margin: 30px 0px;
+}
+textarea{
+  margin: 10px 0px;
+}
+#card{
+  width: 350px;
+  margin: 20px 10px;
+  display: inline-block;
+  vertical-align: top;
+}
+.contactcard{
+  width: 325px;
+  height: 150px;
+  margin: 5px auto;
+  border: 1px solid black;
+  text-align: center;
+}
+.contactcard h2, p{
+  margin: 5px;
+}
+.here{
+  font-size: 14pt;
+}
+.hide{
+  display: none;
+}
