https://github.com/yashi-singh-1/day-15-upload

Yes, you can actually drag and drop a file in there. But don't worry, the upload process is faked.
https://github.com/yashi-singh-1/day-15-upload

100daysofcss css css3 front-end front-end-challenge front-end-development frontend frontend-challenge frontend-development frontenddevelopemnt html html5 javascript javascript-vanilla

Last synced: 3 months ago
JSON representation

Yes, you can actually drag and drop a file in there. But don't worry, the upload process is faked.

• Host: GitHub
• URL: https://github.com/yashi-singh-1/day-15-upload
• Owner: Yashi-Singh-1
• Created: 2024-06-25T10:00:24.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-06-25T10:13:25.000Z (12 months ago)
• Last Synced: 2024-11-10T11:15:23.316Z (7 months ago)
• Topics: 100daysofcss, css, css3, front-end, front-end-challenge, front-end-development, frontend, frontend-challenge, frontend-development, frontenddevelopemnt, html, html5, javascript, javascript-vanilla
• Language: CSS
• Homepage:
• Size: 175 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
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](Preview.png)

  
Contributing


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

  


    
Fork the repository.

    
Create a new branch (git checkout -b feature/your-feature-name).

    
Make your changes.

    
Test your changes thoroughly.

    
Commit your changes (git commit -am 'Add new feature').

    
Push to the branch (git push origin feature/your-feature-name).

    
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.