FaceBuilder 🧑‍💻

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.

Table of Contents

• Introduction
• Technologies Used
• Features
• Screenshots
• Demo

Introduction

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.

Features

Drag and Drop

• Users can easily drag and drop different facial organs onto the main face canvas.

Facial Organs Categories

• Facial organs are categorized into eyes, brows, nose, and lips for convenient organization.

Touch Device Support

• The application supports touch devices, allowing users on mobile and tablets to enjoy the same drag-and-drop functionality.

Screenshots

hitpaw-1694221253990.webm

Technologies Used

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.

Demo

To view the website, you can visit the live website:FaceBuilder