Instagram Video Downloader AI Prompt

 

Create an Instagram Video Downloader in HTML with All Advanced Features

Objective:
Build a responsive and fully functional Instagram Video Downloader using HTML, CSS, and JavaScript. The web app should allow users to input any Instagram post URL (reels, videos, or IGTV), fetch video details, and provide downloadable links in various formats.

🧰 Core Features:

  1. Instagram URL Input

    • Input field for the Instagram video/reel URL

    • Real-time URL validation

    • Show clear error messages for invalid links

  2. Fetch Video Information

    • On submit, fetch available video data from an API (or mock the data if backend is unavailable)

    • Display the video preview, title, thumbnail, uploader (if possible)

  3. Download Options

    • List all available resolutions (360p, 720p, 1080p)

    • Option to download video only, audio only, or video + audio combined

    • Direct download buttons for each option

  4. User Interface

    • Clean, responsive design using HTML/CSS

    • Mobile and desktop friendly

    • Use modern UI/UX features: loading spinners, animated transitions, tooltips, hover effects

⚙️ Advanced Features:

  • ✅ Dark Mode Toggle

  • ✅ Drag and Drop Support for URL input

  • ✅ Clipboard Button to copy/download links

  • ✅ Recent Download History (stored via localStorage)

  • ✅ Keyboard Accessibility (Tab/Enter navigation)

  • ✅ Progress Bar or Loader Animation while fetching video data

  • ✅ Error Handling with user-friendly messages

  • ✅ Download All button to get all formats in a ZIP (optional advanced)

📦 Technical Requirements:

  • Use pure HTML, CSS, and JavaScript (no frameworks unless necessary)

  • Backend API can be mocked with static JSON if actual scraping/fetching is unavailable

  • Use async/await for clean asynchronous code

  • Write modular and reusable JS functions

  • Ensure all code is secure, sanitized, and follows best practices

🎁 Bonus:

  • Add support for private video download via login/session (if feasible)

  • Show a preview player (in-browser) before downloading

  • Provide analytics on number of downloads or popular formats (optional)

💡 This downloader should look professional, feel smooth, and be optimized for both novice and advanced users. The end result should work seamlessly as a tool that can be hosted on a static site or easily integrated into a larger project.

Comments

Post a Comment

Popular posts from this blog

Advanced Bandwidth Calculator AI Promt

  Advanced Bandwidth Calculator (HTML + JavaScript) Objective: Create a responsive and user-friendly Bandwidth Calculator using HTML, CSS, and JavaScript. The tool should allow users to calculate the required internet bandwidth based on various parameters and support both download and upload bandwidth estimations. Core Features: User Input Fields: Number of users/devices Average usage per user/device (Light, Moderate, Heavy) Type of usage (Streaming, Browsing, Gaming, Video Calls, Downloads, Cloud Work) Hours of usage per day Desired connection quality (Basic, Good, Excellent) Advanced Functionalities: Real-time bandwidth calculation Recommended bandwidth per usage type Dynamic result visualization (chart/graph) Display estimated total bandwidth in Mbps/Gbps Upload vs Download bandwidth split Suggestions for ISP plans based on the result Option to switch between metric (Mbps) and imperial (MBps) units Responsive Design: Mobile...
Read more

TikTok Video Downloader AI Promt

  Build a TikTok Video Downloader in HTML with All Advanced Features Objective: Develop a fully functional and visually appealing TikTok Video Downloader web app using HTML, CSS, and JavaScript. The application should allow users to download TikTok videos by pasting the video URL, with advanced options like no-watermark downloads, format selection, and a smooth user interface. 🚀 Core Functionality Requirements: URL Input Field Clean input form to paste TikTok video URLs Validate that the input is a proper TikTok link Instant feedback on URL validity (green checkmark or red warning) Fetch & Display Video Details Use a backend API (or mock JSON) to fetch video metadata Display: Video thumbnail/preview Creator username Video caption Duration or date posted Download Options Multiple video quality choices (480p, 720p, 1080p) Toggle for “No Watermark” vs “With Watermark” Audio-only download option (MP3 or M4A) Download bu...
Read more

Pregnancy Calculator Tools Creator AI Prompt

  Prompt: Create a Pregnancy Calculator in HTML with advanced features, including: User Inputs: Last Menstrual Period (LMP): A date input field where the user can enter the first day of their last period. Cycle Length (in days): A number input field where the user can specify the average length of their menstrual cycle. Cycle Regularity: A dropdown menu for selecting whether their cycle is regular, irregular, or unknown. Pregnancy Symptoms: A set of checkboxes or a dropdown menu where the user can select common pregnancy symptoms (optional). Date Calculations: Estimated Due Date (EDD): Calculate the estimated due date based on the input LMP and cycle length. Use the standard method of adding 280 days to the LMP (or adjust for cycle length). Ovulation Date: Based on the cycle length, estimate the ovulation date (usually 14 days before the EDD). Current Pregnancy Week: Show the current week of pregnancy based on today's date compared to the LMP. ...
Read more