Blog App

A basic application where user can add, edit and delete a blog as well as view other blogs and make changes in them - Take a look

Description

Application uses LocalStorage, the localStorage object stores data with no expiration date. The data will not be deleted when the browser is closed, and will be available when the user comes again.

Stacks Used

• HTML
• CSS
• Bootstrap - A CSS Framework
• JavaScript -> LocalStorage
• Awesomeness - Strictly for the love of coding :-)

Use of Project

To understand the concept of the localstorage, how localstorage persist the data, even the tab is closed or user refersh the page.

How I used local storage

let globalStore = [];

// --------------------------------------------------
const loadData = () => {
  // access localstorage
  // localStorage.getItem("blog") ===  localStorage.blog
  const getInitialData = localStorage.blog; // if null, then
  if (!getInitialData) return;

  // convert stringified-object to object
  const { cards } = JSON.parse(getInitialData);

  // map around the array to generate HTML card and inject it to DOM
  cards.map((blogObject) => {
    const createNewBlog = newCard(blogObject);
    blogContainer.insertAdjacentHTML("beforeend", createNewBlog);
    globalStore.push(blogObject);
  });
};

And to update the local storage:

const updateLocalStorage = () => {
  localStorage.setItem(
    "blog",
    JSON.stringify({
      cards: globalStore,
    })
  );
};

Screenshots

Click on the Add New, UI looks like:

Click on the Open Blog, UI looks like:

Contribution

Contributions are highly welcome. Feel free to fork, clone, make pull requests, report issues etc.

Acknowledgments

• To anyone who is reading this... You're awesome!

That being said

To the Front... to the Back... End to End... cut no slack. Making ends meet. lol