Basically, the purpose of using javascript here is to make the process of putting the title, post date, and some information from a post into an area using one line of code. The first step towards being able to do this is correctly sectioning and labeling posts so that you can correctly grab each part later on.
As usual, whatever class or id name I give an element, you can give your something else, so long as you’re consistent when you start writing the javascript. In my case, I created a new php file that I named post01.php, and put it in a new folder inside of the /xampp/htdocs directory that all of my other files were in. In that file I first created a <div> with the class post. Inside of that I created three elements; a link element linking to itself and with the classes “postTitle gold-text”, a paragraph with class “date”, and another <div> with class “postContent”. Inside of that “postContent” <div> I just put whatever actual information is within the post.
Next I added some styling to each of these new id’s created. Gotta keep everything looking nice. For the “post” class I set height: 230px, width: 540px, padding-bottom: 10px, and border-bottom: 1px dotted white. As with the sidebar list I also added a :last-child styling of border-bottom: none to the “post” class.
Lastly, I gave styling to the last three classes, “postTitle”, “date”, and “postContent”. For “postTitle” you can set the font-family and font-size to whatever you want. The options I found most important were padding-left: 8px, line-height: 40px, and text-decoration: none. For “date” I set padding-left: 8px, and line-height: 0px. You can set color to whatever you would like. For “postContent” I set padding-left: 20px. Again, you can set the font-family, font-size, and color to what you would like.
You can create any number of posts with this method.
Next time we’ll move on to the javascript needed to put these posts onto a page.
Code Adventures 