Skip to content

Latest commit

 

History

History
43 lines (30 loc) · 2.1 KB

README.md

File metadata and controls

43 lines (30 loc) · 2.1 KB
Raw

Whiteboard App

The Whiteboard App is a web application that allows users to draw and add text on a virtual whiteboard. It supports features such as changing brush size, changing colors, clearing the whiteboard, and toggling a text mode for adding text to the canvas.

Features

  • Drawing Lines: Users can draw lines on the canvas by clicking and dragging the mouse.
  • Brush Size: Users can change the size of the brush by adjusting a range input.
  • Color Selection: Users can select different colors for drawing lines or adding text.
  • Clearing the Whiteboard: Users can clear the entire canvas with a single click.
  • Text Mode: Users can toggle a text mode that allows them to add text to the canvas by clicking on it.

Technologies Used

  • HTML5: Provides the structure and layout of the web application.
  • CSS: Used for styling the elements and user interface.
  • JavaScript: Implements the functionality of the Whiteboard App.
  • Socket.IO: Enables real-time communication between the client and server for collaborative drawing.
  • Express.js: A minimal and flexible web application framework for handling server-side logic.

Getting Started

  1. Clone the repository: git clone https://github.com/your-username/whiteboard-app.git
  2. Navigate to the project directory: cd whiteboard-main
  3. Install the dependencies: npm install
  4. Start the server: npm run start
  5. Open your web browser and visit http://localhost:8080 to access the Whiteboard App.

Usage

  • Drawing Lines: Click and drag the mouse on the canvas to draw lines.
  • Brush Size: Adjust the brush size by moving the range input slider.
  • Color Selection: Click on the color fields or use the color picker to select a color.
  • Clearing the Whiteboard: Click the "Clear" button to clear the entire canvas.
  • Text Mode: Click the "Text" button to enter text mode. Click on the canvas to add text.

Contributing

Contributions are welcome! If you find any issues or want to add new features, feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more information.