title: Creating simple blog with Firebase
body: <p>So for school i must create just a simple blog with two pages, one to create a new post, and one to display posts, using firebase online storage to store the posts. The trouble is im new to this and find it very confusing to know what to do and how to do it. here is my first page so far for creating new post:</p>
  
  <pre><code>    &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
      &lt;script type='text/javascript' src='https://cdn.firebase.com/v0/firebase.js'&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
      &lt;title&gt;Create New Post.&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="blog"&gt;&lt;h1&gt;My Blog&lt;/h1&gt;&lt;/div&gt;
      &lt;hr&gt;
      &lt;div class="title"&gt;&lt;h2&gt;Create New Post&lt;/h2&gt;&lt;/div&gt;
      &lt;form&gt;
          &lt;div class="post-title"&gt;
              &lt;input type="text" placeholder="Post Title"&gt;
          &lt;/div&gt;
          &lt;div class="post-content"&gt;
              &lt;textarea type="text" placeholder="Post Content"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;button type="submit" class="submit"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
      &lt;a href="posts.html"&gt;View Posts.&lt;/a&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>And here is the page for viewing posts:</p>
  
  <pre><code>    &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
      &lt;script type='text/javascript' src='https://cdn.firebase.com/v0/firebase.js'&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
      &lt;title&gt;Posts.&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="blog"&gt;&lt;h1&gt;My Blog&lt;/h1&gt;&lt;/div&gt;
      &lt;hr&gt;
      &lt;div class="title"&gt;&lt;h1&gt;Welcome to my blog!&lt;/h1&gt;&lt;/div&gt;
  
      &lt;div class="result"&gt;
          &lt;h4 class="post-title"&gt;Paragraph 1&lt;/h4&gt;
              &lt;p class="post-content"&gt;Welcome to my test blog. This is a paragraph.&lt;/p&gt;
      &lt;/div&gt;
  
          &lt;a href="create.html"&gt;Create new post!&lt;/a&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>I have created a Firebase with currently two structures 'Content' with value of null and 'Title' with a value of null. What i need to accomplish is when i click submit button on the text box on the create post page, the title and content of that box will replace the value of 'null' in the firebase. I then need on the read post page for the new values of 'Title' and 'Content' to be read and displayed.</p>
  
  <p>I have also made a JS file (just the starting of it to help me think) called writeTo.js with the content of:</p>
  
  <pre><code>    var url = "https://blog-posts.firebaseio.com/";
      var firebaseRef = new Firebase(url);
  
      firebaseRef.child('Title').set(title);
      firebaseRef.child('Content').set(content);
  </code></pre>
  
  <p>This is probably something quite simple but im new to this and it is making my head hurt thinking about it!  I do not wish for you to simply do all the work for me, but i really do need some help with this. Could you please give clear precise answers as to what you would recommend to do in order, what pieces of code to use/research and anything else you think would help. Regards.</p>