This React application allows users to select and view pages. It utilizes Vite for development, React for the frontend, and jQuery for a popup message. The application enables users to select individual pages or all pages and view the selected pages in a different view.
- Page Selection: Choose individual pages or select all pages using checkboxes.
- View Selected Pages: Navigate to a page that displays the selected pages.
- Popup Instructions: A jQuery-based popup appears on page load, providing user instructions.
To set up and run the project locally, follow these instructions:
Ensure you have Node.js and npm installed on your machine.
-
Clone the Repository:
git clone https://github.com/Saurabhrajput1234/Ellty-assignment.git cd Ellty-assignment
-
Install Dependencies:
npm install
-
Start the Development Server:
npm run dev
Open your browser and navigate to
http://localhost:3000
to view the application.
-
Selecting Pages:
- On the home page, use the checkboxes next to each page title to select or deselect pages.
- Use the "All pages" checkbox to select or deselect all pages at once.
-
Viewing Selected Pages:
- Click the "Done" button to navigate to a view that displays the pages you selected.
-
Popup Instructions:
- A popup will appear for 2 seconds when the page loads, giving you initial instructions on how to use the application.
- File:
src/components/pageSelector/PageSelector.js
- Description: Allows users to select pages. Manages page selection state and displays a jQuery popup on page load.
CSS: src/components/pageSelector/pageSelector.css
- File:
src/components/selectedPages/SelectedPages.js
- Description: Displays the content of the pages that were selected by the user.
CSS: src/components/selectedPages/selectedPages.css
- React: A JavaScript library for building user interfaces.
- React Router: Provides navigation and routing for the React application.
- jQuery: Used for DOM manipulation and creating the popup.