just plaintext for now since i want to explain the process! just so you know, this does require *some* html & css, but once you do it once, you won't have to do it again! this is a tutorial for repeating a simple chunk of code with custom inputs each time, managed by an array! this is the code that i use on my art page, and it makes it a lot easier to edit the order of the pieces and cuts down on copy & pasted text ^_^
step 1: the html and css
what we're going to do is first make the thing that we want to repeat. i'll be doing just a simple mini blog, which will scroll within a predetermined height & width div ^_^ so lets set that up and set up one entry! please check out inspect element to see the code for this & the styling ^_^
post template!
today
this is the template post!
now, we're going to be converting this into javascript ^_^ once you have the code it's pretty easy i swear!
first, we'll need a script tag; this lives in the body of your site, generally at the bottom! once we've got that, now we need an array that's going to hold all the post information, i'll call mine posts. this is going to be a nested array, the first layer is each post, then the next layer is the info for each post! you'll want to make an entry for every bit of info you want to change, so i'll be adding a title, date, background color, and body. here's my finished array!
var posts = [
["post template!", "today", "this is the template post!", "lightgray"],
];
now we'll need to loop through this array so we can make this work for all the posts, not just one ^_^ so get a for loop in there like this!
var posts = [
["post template!", "today", "this is the template post!", "lightgray"],
];
for (let i = 0; i < posts.length; i++) {
}
ok now it's time for the fun part, adding the html in there! let's start with the div. the basic setup looks like this, and once you see how we do the other elements, you'll see there's a clear pattern!
var posts = [
["post template!", "today", "this is the template post!", "lightgray"],
];
for (let i = 0; i < posts.length; i++) {
var post = document.createElement("div");
post.className = "post";
post.id = i;
post.style.backgroundColor = posts[i][3];
document.getElementById("posts").appendChild(post);
}
some things to look out for - arrays start at 0, so because our element we want to use for the background color is 4th, we write 3! also, for this one, we need to set an id because this is our main post container, and we want to put things inside this post container after, so if we don't give it an id, we can't select it well O_O;
i'll blast through the rest of the additions rq so you can see examples of how to do other stuff, with notes afterward :o)
var posts = [
["my first array post!", "the future...", "i'm typing this in an array! we made it! you can also use html in here so go wild!", "pink"],
];
for (let i = 0; i < posts.length; i++) {
var post = document.createElement("div");
post.className = "post";
post.id = i;
post.style.backgroundColor = posts[i][3];
document.getElementById("posts").appendChild(post);
var title = document.createElement("p");
title.innerText = posts[i][0];
document.getElementById("h" + i).appendChild(title);
var date = document.createElement("p");
date.innerText = posts[i][1];
document.getElementById("h" + i).appendChild(date);
var body = document.createElement("p");
body.innerHTML = posts[i][2];
document.getElementById(i).appendChild(body);
}
phew, looks like a lot... but it's pretty much the same from element to element! some little tricks i've done: when making the header, we can't set the id to i because the post's id is already i, so you can add a string designator + i to circumvent that! then we just need to make sure we append to the h0 instead of 0. in the body, i used innerHTML instead of innerText to enable html usage in that area!
aaaand that's it! :o) now you never have to touch the javascript again, you can just keep adding entries to the array and they'll add right in! if you want to make it so they toggle or so posts pop up into a miniwindow or something you can totally do all that ^_^ as long as you write the code & styling once, this array will handle new entries of whatever you set up in it! have fun out there ^u^
ps. just because i saw this on cohost, this might be of interest to people! https://www.mkelly.me/phantomake/