Welcome to the FaceBuilder project! In this project, I employ the DOM (Document Object Model) to dynamically create HTML elements.This interactive project allows you to craft faces by dragging and dropping facial organs such as eyes, brows, noses, and lips onto a central canvas.
Facial Organs Drag & Drop is a web application that allows users to create and arrange facial features such as eyes, brows, nose, and lips to form a complete face. Users can drag and drop different facial organs onto a central face canvas to customize their unique face design.
- Users can easily drag and drop different facial organs onto the main face canvas.
- Facial organs are categorized into eyes, brows, nose, and lips for convenient organization.
- The application supports touch devices, allowing users on mobile and tablets to enjoy the same drag-and-drop functionality.
hitpaw-1694221253990.webm
This project was built using the following technologies:
- HTML5: Used to structure the web page and create the initial layout.
- CSS3: Applied styles to enhance the visual appearance and layout of the project.
- JavaScript and DOM: Utilized JavaScript to dynamically create and manipulate HTML elements using the Document Object Model (DOM). This allowed for interactive features such as drag-and-drop functionality.
- SortableJS: Integrated SortableJS library to enable seamless drag-and-drop functionality for organizing facial organs and enhancing the user experience. SortableJS provides support for both desktop and touch devices, making it accessible across various platforms.
To view the website, you can visit the live website:FaceBuilder