https://github.com/chrisnajman/journal-with-local-storage-v2

A simple journal that stores entries in local storage. Entries can be edited or deleted. V2 adds image uploading to a journal entry.
https://github.com/chrisnajman/journal-with-local-storage-v2

html-css-javascript localstorage

Last synced: 15 days ago
JSON representation

A simple journal that stores entries in local storage. Entries can be edited or deleted. V2 adds image uploading to a journal entry.

• Host: GitHub
• URL: https://github.com/chrisnajman/journal-with-local-storage-v2
• Owner: chrisnajman
• License: mit
• Created: 2023-01-22T18:48:23.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-13T12:57:12.000Z (about 1 year ago)
• Last Synced: 2024-11-21T00:52:28.762Z (3 months ago)
• Topics: html-css-javascript, localstorage
• Language: JavaScript
• Homepage:
• Size: 701 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Journal with Local Storage V2

Use your browser as a journal (entries can only be viewed locally).

V2 now has an image upload facility.

**Note**

- Images must be stored in the `images` folder.

  - Image functionality will only work locally (therefore, no Git Page).

## Features

- **Create an entry**:

  - Add date (optional)

  - add heading (required)

  - add image (optional) **NEW**

    - remove image before publishing

  - add text (required).

    - Show error messages if required fields not filled.

  - Publish: saves to local storage, or

  - cancel.

- **Edit an entry**:

  - heading,

  - image,

  - text.

    - Save to local storage.

- **Delete an entry**:

  - deletes from local storage.

## HTML

- `template` used for journal entry item.

- `contenteditable` used for entry editing.

## Javascript

- ES6 (no transpilation to ES5)

- Unique local storage key, `JOURNAL_IMAGE_ENTRIES-LIST-entries`:

  - If journal entries are deleted, no other local storage will be affected.

## CSS

- `grid` used for page layout.

- `flexbox` used for element layout.

- `CSS variables` used for common properties.

## Testing

- Tested on:

  - Windows 10

    - Chrome

    - Firefox

    - Microsoft Edge

## Acknowledgements

- The code is an extended version of [Journal with Local Storage](https://github.com/chrisnajman/journal-with-local-storage).