DragNdrop

Introduction

Team Name: Lesssgooo

Team Members:

• Poorvi Badaya
• Sourabh Buckal
• Tushar Goyal

Problem Solved:

DEV01

Topic: Drag and drop elements to create a website

Building a website is quite fun but at times it might get frustrating and take up a lot of time. Instead, an application which allows us to build a website just by dragging and dropping elements would be much more efficient and user friendly than coding each and every part of the website (Similar to Wix). Also people with no prior knowledge of web development could also build a website. Develop a solution through which a person can create a website just by dragging and dropping elements.

Proposed Method

Created a web application using vanilla JavaScript from scratch without the use of any external library or APIs.

Layout and Components: HTML, CSS & Bootstrap

ToolBox and EditBox: HTML & CSS

Functionality: Vanilla JS

Work Done and Results

• Created individual HTML components
• Rendering those components by drag and drop
  • NavBar
  • Text Box
  • Card
  • Image
  • Buttons
  • Footer
• The position of components can be changed by dragging
• Text can be edited
• Component properties can also be edited (Text colour, background colour and font size)
• With one click window can be cleared

ScreenShots

Initial Interface

Final Interface

Video Illustration

https://drive.google.com/file/d/1H64tb54hdnKr4JrESd0MUov0JcCHWmSB/view

Conclusion

While using the web application, DragNdrop, listed requirements are fulfilled

• The user can add basic components like buttons, cards, navbar, footer, text-area, images, etc. just by dragging and dropping the component
• The user can determine the text colour, background colour, size and position of the added component
• The user can determine the font features like font colour and font size

Now a person with no exposure to web development or coding will be able to create amazing websites with just one click.