Skip to content

Latest commit

 

History

History
78 lines (54 loc) · 3.18 KB

README.md

File metadata and controls

78 lines (54 loc) · 3.18 KB
Raw

Upload Challenge

Welcome to the Upload Challenge! This challenge is designed to test and enhance your skills in handling file uploads using HTML, CSS, and JavaScript.

Challenge Description

The challenge involves creating a file upload interface where users can drag and drop files or select files using a file input. Upon selecting or dropping a file, the interface should display the filename and simulate an upload process when the user clicks an "Upload" button. The interface should provide visual feedback such as syncing and completion indicators.

Purpose

The purpose of this challenge is to practice and demonstrate proficiency in:

  • Implementing drag and drop functionality in web applications.
  • Handling file selection and display of file information dynamically.
  • Simulating an upload process with visual indicators using CSS animations and JavaScript.

Features

  • Drag and drop file upload.
  • File selection using a file input.
  • Displaying the selected file name.
  • Simulated upload process with syncing and completion animations.

Prerequisites

To participate in this challenge, you should have a basic understanding of:

  • HTML5 for markup.
  • CSS3 for styling, including animations.
  • JavaScript for DOM manipulation and event handling.

Challenge Structure

The challenge structure involves:

  • HTML: Structure the file upload interface with necessary elements.
  • CSS: Style the interface to provide a visually appealing and functional design.
  • JavaScript: Implement the logic for handling file uploads, animations, and interactions.

Installation

There's no specific installation required for this challenge as it runs directly in the browser. Simply clone or download the repository from the GitHub link provided and open the index.html file in your preferred web browser.

Preview

You can view a live demo of the challenge on CodePen.

Screenshot

Preview

Contributing

Contributions to improve the code or add new features are welcome! Follow these steps to contribute:

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature/your-feature-name).
  3. Make your changes.
  4. Test your changes thoroughly.
  5. Commit your changes (git commit -am 'Add new feature').
  6. Push to the branch (git push origin feature/your-feature-name).
  7. Create a new Pull Request.

Please ensure your code follows the existing coding style and practices.

Credits

Credits for the design inspiration go to 100 Days CSS Challenge - Day 15.

Author

This challenge was created by Yashi Singh.