JavaScript: Building Your Blog with JavaScript and NodeJS

August 01, 2021

JavaScript: Building Your Blog with JavaScript and NodeJS

We are building our own blog today, which has 2 sides of the coin solved. Every application has 2 sides of the coin: the frontend application and the server side which is the REST API, which has all of the logic. We'll build a small REST API using NodeJS. We're learning how to be a full-stack developer that way.

You can change the profile image, and change a lot of profile stuff, and a bunch of articles (you can have the articles as anything you want. The articles want you to hover over them, giving a very nice user experience. Going to a blog changes the profile image that has a blog, a date, and a content. We can also submit and we have new blog posts that way. This is amazing, and it functions well and shows the process of building an application. We create an API and store corresponding data in that manner.

Software requirements document is key to being a highly valuable developer, and allows to see high level and low level. Ask "do you agree with the requirements document"?

The requirements document has Goals, User Stories, User, Flow, Business Requirements, and Technical Requirements. We make a copy and copy it to a Google Drive folder.

GOALS:

1. Create a blog application to be able to share and stories and knowledge with others.

TASK: Complete 3rd user story for being able to add new post.

USER STORIES:

1. As a Viewer, I want to see a list of blog posts, so that I can see the blogs and topics for me to choose.

2. I can also CLICK on individual blogs to see them on their full entirety. View an individual blog post so that I can read all of the content of the blog post.

3. As the user, I should be able to add a new post to the blog so that I can easily add content to my blog.

USER FLOW

BUSINESS REQUIREMENTS

Pages

Home Page
Individual Blog Post Page
New Post Page

Home Page

Display use profile image
Display list of blogs with Title, Date, Content
Limit the blog text to a certain height

Individual Blog Post Page

Show the cover image, title, content, added date
Allow the user to go back to the home page

New Post Page

Allow a user to fill in title, content, cover image
Store the added date

TECHNICAL REQUIREMENTS:

Front end using JavaScript
Back End using NodeJS

REST API

Database

JSON

API Endpoints

Get List of Blog Posts

api/posts

Get Individual Blog

api/posts/:post_id

Post Blog Post

API/posts

Let's create a wireframe. There is a picture with date, footer, date, header, back button, etc. We have the title and then the date then the content and the footer as well.

The plus button on the bottom goes to the new post page. It should be on the bottom left of the first diagram.

There are 2 project we have to work on, which is the blog app and the blog API. There's a lot to do, meaning that there's a lot to learn here which I can download links as zip as a result and download things as git clone. Do Git Clone (link) to clone the blog app,.

Next we get the link for the Blog API and clone the api as well and install NodeJS. Copy these into the right corresponding directories. I then open the exercise portion and new window and open up both the exercise folder for both the API and the app. You won't be able to run the API until you get the endpoint, though. Liver server extension is also needed for Visual Studio Code. IP works on http://127.0.0.1:5500/ which is where the blog website is hosted on.

Here's the html files:

post.html:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</header>

</div>

<p>Made with ❤️ by Christopher Chu</p>

</footer>

</div>

</body>

</html>

index.html:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

new-post.html:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Let's add a new blog post!

</div>

</header>

</div>

<form>

<div>

<label>Choose Image</label>

</div>

<button id="form-post-submit" type="button" onclick="submitNewPost()">Submit</button>

</form>

</div>

<p>Made with ❤️ by Christopher Chu </p>

</footer>

</div>

</body>

</html>

I can use the power of CSS flexbox to build anything on the web. CSS Flexbox is a way to lay out items in a website in terms of in rows and columns, allowing us to structure things so much easier and so much more efficiently than what we had in the past, but now we can just do justify-content: center. It's something that's useful and very important for knowledge as a developer.

In the flexbox, I have a parent and certain children items, so then displaying flex, all the children within the parent are now going to behave in the flexbox manner, align next to each other spreading the entire width of the div.

We also have flex-wrap seeing if things wrap to second line. Justify-content asks how you want things to be spaced out. There's so many options. Align-items allows us to vertically align things.

Aligh-items is super appreciated since it allows us to vertically align things (before we had to use different css things). Check out the website. You can also order the item and then flex shows how important an element is, you can align many items individually, etc. This is a good run on flexbox:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/, or this link.

I can change the style at the bottom right of the page.

Display:flex helps align the div from one from the other. Justify-Content: center helps to align these DIVS at the center. I can set height:30px and then vertically align with align-items: center. You can also space things out with justify-content: space-around or justify-content: space-between. You can also align things in a column by setting flex-direction to column.

Here's the --

style.css:

body {

margin: 0;

font-family: Arial, Helvetica, sans-serif;

}

.post-link {

text-decoration: none;

}

footer {

min-height: 100px;

background-color: #eaecee70;

color: #929eaa;

display: flex;

justify-content: center;

align-items: center;

margin-top: 40px;

font-size: 14px;

}

post.css:

/* ADD styling for all of the divs in post.html to match */

#individual-post-title {

}

#individual-post-date {

}

#individual-post-content {

}

new-post.css:

form > * {

display: block;

margin-top: 16px;

font-size: 18px;

}

#form-post-title {

width: 300px;

}

#form-post-title, #form-post-content {

border: 1px solid #ced4da;

padding: 8px;

border-radius: 5px;

color: #495057;

}

#form-post-content {

width: 100%;

min-width: 100%;

max-width: 100%;

min-height: 300px;

}

#form-post-submit {

background-color: #004186;

border-color: #004186;

color: white;

padding: .375rem .75rem;

border-radius: 3px;

cursor: pointer;

transition: all 0.2s ease-in-out;

}

#form-post-submit:hover {

background-color: #002349;

}

index.js:

const API_URL = "http://localhost:3000/api/posts";

const API_BASE_URL = "http://localhost:3000/";

window.onload = () => {

getPosts();

}

const getPosts = () => {

}

const buildPosts = (blogPosts) => {

}

new-post.js:

/**

* TODO: Finish submitNewPost function to submit form data to the API

const API_URL = "http://localhost:3000/api/posts";

const submitNewPost = () => {

// HINT: Use FormData to store data to send over

// HINT: Redirect the user to home page after successful submission

}

post.js:

/**

* TODO (Together): Create getPostIdParam to get the id of the post to use in the request later

* TODO: Complete getPost function to get post data from API

* TODO: Complete buildPost function to fill in the post data in the post.html file using ids

const API_URL = "http://localhost:3000/api/posts/";

const API_BASE_URL = "http://localhost:3000/";

window.onload = () => {

getPost();

}

const getPost = () => {

// CODE GOES HERE

}

const buildPost = (data) => {

// HINT: Convert the date number to a Date string

}

I can render random colors, this way, I know what I'm working with. Use the border-radius property to make a circle smaller. We can make images smaller with the attribute background-size. The attribute background-size:cover; helps to cover the image.

Margin is space from the div up, and padding is space from the div down. The general rule for padding is from the 8px to 16px mark. Align-items help to align things from the center vertically. For div to be in the center, we NEED to create a container div. Width: 100% means that the width is 100% of the div.

To overlay the box with a tinted image, you need to draw another div box at the same location. :before and :after helps to make a piece of content before and after content. Absolute depends on the word relative to. You want to see top left right and bottom relative to. Set the parent to relative and the child to absolute in this retrospective.

>* targets anything in an area (header > * targets anything inside of a header).

Next we want to make the blog post html and css. We need to create a structure where we have both a border and an image. The website unsplash is a website with a lot of free images. You can set sont-wieght to "bold" to make text bold in css.

To center horizontally, we need to say align-items. Background-position is to center an image. Set a transparency percentage will create a tint. Header::before inserts some text before the content of an item. ::after will add the content after the particular item. We can then set the content with CSS.

If I have an absolute position, and have top, bottom, left, and right, and bet a background color, then the div will cover the entire page. The parent relative container is the body container for absolute. If we change the header to position relative then we can see the child is absolute with relation to that parent HEADER.

The function rgba in the header can set a particular transparency to an element. We can also set the z index of a header to see if items are visible. header > * targets anything within the header and setting a z index of one sets items visible because everything else is z index of 0. However, we can set the z index to -1 for the index. Unsplash gives you a lot of free images.

The flex-basis CSS property sets the initial main size of a flex item.

'overflow: hidden will get images to flow within the div container. The margin for h4 margin : 0 will get rid of the space between he h4 div and the next div. You comment in css the way you do in Javascript.

You do Lorem Ipsum if you want to try to test things out. There is also a line-height element and a max-height element that will cut off the rest of the div. If you wan to hid overflow just do overflow: hidden; to limit to about 3 lines.

Search This Blog

Chris Chu's Notes

JavaScript: Building Your Blog with JavaScript and NodeJS

Comments

Post a Comment

Popular Posts

Leetcode: Path with Minimum Effort

AutoEncoders