Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/aniraannu/personal-blog-page

Challenge 4: Web API's : Personal Blog
https://github.com/aniraannu/personal-blog-page

Last synced: about 1 month ago
JSON representation

Challenge 4: Web API's : Personal Blog

Awesome Lists containing this project

README

        

# Personal Blog

The application includes a two-page website where users will input and view blog posts.

## Description

The application includes a two-page website where users will input and view blog posts.It includes a content form for the user to input their blog post details like username, title and the content. The page dynamically renders blog posts, it also has a light/dark mode toggle which helps user to switch between dark and light modes. The Return button in the blog page allows the user to navigate to the form page easily. The blog enteries from the form page are stored into the localStorage and dynamically rendered to the blog page when user submits the the form.

## Getting Started
Your file structure should look like the following:

```md
my-blog
├── assets
│ ├── css
│ │ ├── blog.css
│ │ ├── form.css
│ │ └── styles.css
│ └── js
│ ├── blog.js
│ ├── form.js
│ └── logic.js
├── index.html
├── blog.html
└── README.md
```
The following animation demonstrates the application functionality:

![A user adds a blog through a form, then the post appears on the following page.](./Assets/images/100-web-apis-challenge-demo.gif)

### Dependencies

* none

### Installing

* Application is deployed using GitHub Pages.

### Executing program

* User can directly go to the GitHUb page using the below link: https://aniraannu.github.io/Personal-Blog-Page/

## Help

none

## Authors

Anira Raveendran
[@aniraannu](https://github.com/aniraannu)

## Version History
* 0.1
* Initial Release

## License

None

## Acknowledgments

Inspiration, code snippets, etc.
* [Font Awesome](https://kit.fontawesome.com/ba420aa2e1.js)
* [dbader](https://github.com/dbader/readme-template)
* [Web fonts](https://www.onlinewebfonts.com/icon)