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>
