jQuery_contactCard/contactCard.html at master · kenkoolio/jQuery_contactCard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Contact Cards</title>
    <meta name="description" content="Contact Cards">
    <link rel="stylesheet" type="text/css" href="contactCard.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>

      function infoString(){
        var string =
          '<div class="contactCardClass"><h2 class="cardName">' + $('#firstName').val() + ' ' + $('#lastName').val() + '</h2><span class="infoSpan"><p class="cardDescription">' + $('#description').val()+ '</p></span><p class="clickHere">Click for description!</p></div>' ;
        return string;
      };

      function createContact(){
        $('#contactCardDiv').append(infoString)
      };

      function toggleDescription(){
        $('#contactCardDiv').on('click','.contactCardClass',function(){
          $(this).children().children('.cardDescription').toggle();
        });
      };

      function toggleName(){
        $('#contactCardDiv').on('click','.contactCardClass', function(){
          $(this).children('h2, .clickHere').toggle();
        });
      };


      $(function(){

        $('#form').submit(function(){

          createContact();

          return false;
        });

        toggleDescription();
        toggleName();

      }); //close jQuery


    </script>
  </head>
  <body>
    <div id="container">
      <div id="userForm">
        <form id="form">
          <label for="firstName">First Name:
            <input id="firstName" type="text" name="First_Name" placeholder="First Name">
          </label>

          <label for="lastName">Last Name:
            <input id="lastName" type="text" name="Last_Name" placeholder="Last Name">
          </label>

          <label for="description">Description:
          <textarea id="description" name="Description" placeholder="Enter Description"></textarea>
          </label>

          <label for="submit">
            <input id="submit" type="submit" value="Add User">
          </label>
        </form>
      </div><!-- userForm -->

      <div id="contactCardDiv">

      </div><!-- contactCard-->
    </div><!-- container -->
  </body>
</html>