Skip to content

Latest commit

 

History

History
115 lines (75 loc) · 3.51 KB

README.md

File metadata and controls

115 lines (75 loc) · 3.51 KB

PyjamaHR Assignment

Getting Started

This document guides you through setting up and running the project.

Prerequisites

Ensure you have the following installed:

Installation

  1. Clone the repository:

    git clone https://github.com/deepak14ri/PyjamaHR-Assignment.git
cd PyjamaHR-Assignment

  2. Install dependencies:

    npm install
# or
yarn install

  3. Start development server:

    npm run dev
# or
yarn dev

    This initiates the Vite development server and opens your application in the default web browser.

Previews

1

image

2

image

About the CreateArea Component

The CreateArea component in this project offers a user interface for creating and managing notes. It includes functionalities like image uploads and background color customization.

Features and Functionalities

Note Interface:

  • Defines the structure of a note with properties like:
    • title: The note's title.
    • content: The note's content.
    • pinned: Boolean indicating if the note is pinned.
    • image: URL or base64 encoded string of the image.
    • backgroundColor: The background color of the note.

State Management:

  • Utilizes useState to manage the component's local state:
    • note: Object representing the current note being edited or created.
    • isExpanded: Boolean indicating whether the note input area is expanded.
    • isEditModalOpen: Boolean indicating whether the edit modal is open.
    • currentNoteIndex: Index of the note currently being edited.

Redux Integration:

  • Employs useDispatch to dispatch actions to the Redux store.
  • Utilizes useSelector to select notes from the store.

Handle Change:

  • Updates the note state when the title or content input fields are modified.

Handle Expanded:

  • Expands the note input area upon clicking the textarea.

Submit Button:

  • Manages the submission of a note:
    • Dispatches an addNote action to add the new note to the Redux store.
    • Resets the note state and collapses the input area after submission.

Handle Image Change:

  • Processes the uploaded image file:
    • Reads the file using a FileReader and updates the note state with the image data.

Handle Background Color Change:

  • Updates the note state with the chosen background color.

Handle Edit Save:

  • Saves the edited note:
    • Updates the note state with the new values while preserving the pinned state.
    • Dispatches an updateNote action to update the note in the Redux store.
    • Resets the currentNoteIndex and closes the edit modal after saving.

Form and Input Elements:

  • Renders the form with input fields for title and content:
    • Displays the image if it exists.
    • Provides file input for image upload and color input for background color selection.

CSS Classes:

  • Applies CSS classes for styling the form and input elements:
    • Ensures that the image width is limited to 200px with auto height for maintaining aspect ratio.