How to create a simple post like facebook without using a database and stack it together, With only HTML, CSS, & JS?

Question

Greetings, I need some help again. I am creating a simple webproject and I want to share it with my friends.

I just want to know, It's possible right?

---

"How can I post something after I type something on the textbox and stack it together with different boxes like facebook"

Using these document.getElementById(id) & innerHTML and other answers you provided down there.

I know how to post it with only one but I want to make it just like these.

// For example, I create a post and the text I typed is posted now.

// Now, I want to stack it together with different boxes/divisions like facebook without using a database.

// and The new post I typed is now at the top of the box I posted before and so on.

and ofcourse after i close the website all the post are automatically gone.

' You can create your own different answer's too, If you want to, Just to make this kind of thing, related to what i asked.

---

Thank you in advance to all of you guys, To those who answer and help me and also to the one who tries to solve it to have an answer to my question.

After it's solved I hope this can be helped too to anyone out there (viewers) and It can also be used to your projects too.

Answer 1

Here is how I would achieve this.

Step 1

First, I would create a json file as kind of a faux database.

This could look something like:

[
  {
    "posts": [
      {
        "user": "Some User",
        "date": "dd-mm-yyyy-hh-mm-ss",
        "text": "The content of the post"
      }
    ]
  }
]

It's really up to you how much info you want in this "database" but the more you have, the more robust it can be going forward.

Step 2

Import your json file. I used the function from this thread for the example.

var json = (function() {
  var json = null;
  $.ajax({
    'async': false,
    'global': false,
    'url': "/content.json",
    'dataType': "json",
    'success': function(data) {
      json = data;
    }
  });
  return json;
})();

Step 3

Create a Angular-style system in vanilla JS. Something like:

let postElem = document.querySelector('.post-box');

for(var i = 0; i < json.length; i ++) {
  let newPost = postElem.cloneNode(true);
  newPost.innerText = json[i];
  document.querySelector('.postlist').appendChild(newPost);
}
postElem.remove();

This example just takes a given template element from the HTML, duplicates it for every "post", gives it content, put's it into the page, and deletes the template.

Step 4

Build your HTML Scaffolding. Something like:

<form>
  <input type="text" name="post" placeholder="What's on your mind?">
  <input type="submit">
</form>

<div class="postlist">
  <div class="post-box"><p class="post-text"></p></div>
</div>

Step 5

Lastly, write a js function that pushes your post to the json file on submit.

Hopefully this helps or gives you a direction to go.

Here is a working prototype:

postList = []

document.querySelector('#add-post').addEventListener('submit', function(e) {
  //keep the submit button from redirecting the page
  e.preventDefault();
  //check that post is not empty
  if (e.target.querySelector('.post-content').value != "") {
    //add post to the post array
    let newPost = {"text": e.target.querySelector('.post-content').value, "drawn": false}
    postList.push(newPost);
    //reset the input field
    e.target.querySelector('.post-content').value = "";
    //run the post redraw script
    createPosts();
  } else {
    alert("Please enter text to post! ?");
  }
});

//create posts
function createPosts() {
  //loop through the whole post array
  for(var i = 0; i < postList.length; i ++) {
    //if the 'drawn' attribute of the post object is false (meaning it has not yet been drawn), draw the post at the top of the list
    if (postList[i].drawn == false) {
      //create a new post element
      let newPost = document.createElement('div');
      newPost.className = "post";
      //set it text from the post array
      newPost.innerText = postList[i].text;
      //insert it at the top of the container
      document.querySelector('#post-list').insertBefore(newPost, document.querySelector('#post-list').firstChild);
      //set it to drawn so it is not redrawn later
      postList[i].drawn = true;
    }
  }
}

#post-list {
  width: calc(100vw - 64px);
  margin: 48px auto;
}

.post {
  width: 100%;
  padding: 8px 24px;
  border: 1px solid #ABABAB;
  border-radius: 16px;
}

<form id="add-post">
  <input type="text" name="text" class="post-content" autocomplete="off" placeholder="What's on your mind?" required><input type="submit">
</form>

<div id="post-list">
  <div class="post">Test Post</div>
</div>