firebase-tutorial/index.html at master · KChan440/firebase-tutorial · 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!--Beginning of most all HTML files-->
<!DOCTYPE HTML>
<html>


<!--The following code is necessary to import essential libraries-->
<head>
  <!--THIS IS JUST FOR A PRETTY FONT -->
  <link href='http://fonts.googleapis.com/css?family=Sintony:400,700' rel='stylesheet' type='text/css'>

  <!--THIS IS NEEDED TO IMPORT FIREBASE LIBRARIES -->

  <!--THIS IS NEEDED TO IMPORT JQUERY LIBRARIES -->
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
  <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-app.js"></script>

<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-functions.js"></script>

</head>
<!-- ##################################################################################-->


<!-- The following line are creating the visible components of the to-do-list website.-->

<body>                                   <!--body = the central portion of our to-do-list website-->
<div id="banner">                        <!--div = defines a section of the document-->
  <h1>CS196 To-Do List</h1>              <!--h1 = making a header line-->
  <div>
    <label>Name?:</label>                <!--label = the label that precedes the next HTML tag-->
    <input type='text' id='name'>        <!--input = an empty text box-->
    <label>Activity?:</label>
    <input type='text' id='activity'>
  </div>
  <ul id='example-messages'></ul>        <!--ul = An unordered list-->
</div>
<!-- ##################################################################################-->


<!-- The following are JUST FOR MAKING THE WEBSITE PRETTY.  NOT ENTIRELY NECESSARY -->
<style>                                 /* style = the beginning of CSS code */

  body{                                 /* body = creates CSS that applies to the entire body of the HTML page */
    background-color: #000;
  }

  #banner                               /* #banner = this references the banner id we created on line 24 */
  {
    width:500px;
    height:200px;
    text-align:center;
    background-repeat:no-repeat;
    border-radius:5px;
    margin:90px auto auto;
    padding:80px 0;
    font-family:Arial, sans-serif;
    text-shadow:2px 0 15px #292929;
    letter-spacing:4px;
    text-decoration:none;
    color:#DDD;
  }

  #example-messages{                   /* #example-messages = this references the example-messages id we created on line 32 */
    background-color: #808090;
    text-align: left;
  }
</style>
<!-- ##################################################################################-->


<!-- The following is the code that actually matters.  This is the Javascript that pushes and gets information to our database -->
<script>
  // Set the configuration for your app
  // TODO: Replace with your project's config object
    var config = {
    apiKey: "AIzaSyAy6lkYcrgn9pXo-UiR2unYLwJQ3yRgxcY",
    authDomain: "senpainoticeme-aee81.firebaseapp.com",
    databaseURL: "https://senpainoticeme-aee81.firebaseio.com",
    projectId: "senpainoticeme-aee81",
    storageBucket: "senpainoticeme-aee81.appspot.com",
    messagingSenderId: "375050601706"
  };
  firebase.initializeApp(config);

  // Get a reference to the database service
  var databaseLink = firebase.database().ref().child('responses');

  // Creates a variable called databaseLink that links to our database.
//  var databaseLink = new Firebase('https://senpainoticeme-aee81.firebaseio.com/');
  // Create javascript variables that link our previous HTML IDs.  Remember, we can't use regular HTML inside a script tag, so we need to use JQuery to reference any previous HTML.  A $ means we are using JQuery
  var messageField = $('#activity');
  var nameField = $('#name');
  var messageList = $('#example-messages');


  // If the enter key is pressed, push the values in the text boxes to our database.
  messageField.keypress(function (e) {
    if (e.keyCode == 13) {                            //13 is the enter key's keycode

      if (messageField.val() == ""){                  //Ensure that an activity was entered.
        alert("Please fill in your activity");
      }else{
        //push data to firebase and then clear the text box
        databaseLink.push({name:nameField.val(), text:messageField.val()});
        messageField.val('');
      }
    }
  });//end of keypress function


  // Retrieve information from our database to update the to-do list.
  databaseLink.limitToLast(100).on('child_added', function (snapshot) {
    //GET DATA
    var data = snapshot.val();

      //If there was no inputted name, return Random 196 student, else return the name that was typed.
      if (data.name == ""){
        var name = "Random 196 student: ";
      }else{
        var name = data.name + ": ";
      }
      var activity = data.text;

      //Convert the data we received from our database into tagged HTML objects.
      var messageElement = $("<p>"); //p = new paragraph
      var nameElement = $("<strong class='example-chat-name'></strong>");
      nameElement.text(name);
      messageElement.text(activity).prepend(nameElement);

      //Update HTML with entries from the database.
      messageList.append(messageElement);

      //SCROLL TO BOTTOM OF MESSAGE LIST
      messageList[0].scrollTop = messageList[0].scrollHeight;
  });
</script>
</body>
</html>