Skip to content

barlakshan/NoteApp-Vue.js-HTML-CSS

Repository files navigation

Vue.js Notes App

A simple notes application built using Vue.js.

Description

The Vue.js Notes App is a project for Vue.js practice, offering a platform to experiment with Vue.js features like reactivity and component-based architecture. Users can create, view, and manage notes with unique background colors, making it an ideal environment for learning Vue.js fundamentals in a practical setting.

First UI

with notes UI

how to add new notes UI

notes UI

Features

  • Add new notes with a minimum of 10 characters
  • View all added notes with their creation dates
  • Each note has a unique background color generated randomly
  • Responsive design for various screen sizes

Installation

To run this application locally, follow these steps:

  1. Clone the repository to your local machine:

git clone https://github.com/yourusername/vue-notes-app.git

  1. Navigate to the project directory:

cd vue-notes-app

  1. Install dependencies using npm:

npm install

  1. Start the development server:

    npm run dev

  2. Open your web browser and visit http://localhost:3000 to view the application.

Usage

  1. Click on the '+' button in the header to add a new note.
  2. Enter the text content for your note (minimum 10 characters).
  3. Click on the 'Add Note' button to add the note.
  4. Click on the 'Close' button or outside the modal to cancel adding a note.
  5. View all added notes below the header.

Dependencies

This project uses the following dependencies:

Vue.js Vue Router (if applicable) Other dependencies...

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published