Muhammad Afnan Khadim's Projects
Our Image Sliding Gallery project brings creativity to life with a horizontal scroll layout for images. Using CSS animations, we've added a touch of elegance by smoothly scaling images on hover. Additionally, when the cursor hovers over an image, it reverts to its original color, creating a captivating visual effect.
Our Mini Calendar Project is a sleek tool for daily organization. It features a clean design with day, date, month, and year display, ensuring you stay informed and organized. Automatic updates keep information accurate, making it perfect for meetings, events, and general planning.
Our Interactive Music Player project enhances your website with a versatile music experience. Users can play multiple songs, control playback with play/pause, next, and back buttons, and view the song's progress with a dynamic progress bar. Additionally, a song playlist with interactive song selection makes music navigation seamless and enjoyable.
Our Notes App Project utilizes HTML, CSS, and JavaScript for streamlined productivity. With a minimalist design, users can easily add and remove notes with a single click. Local Storage ensures notes are always accessible, making it the ideal tool for staying organized and productive.
Our Popup Notification project adds a touch of interactivity to your website. When a user submits a form or performs a specific action, a popup notification will appear, providing feedback, alerts, or messages. We'll also incorporate CSS transitions to add smooth animations to the popup, enhancing the overall user experience.
Our Portfolio Website Header project elevates your website's design with engaging visuals and dynamic theme options. Using HTML and CSS, we'll add images with captivating hover effects. JavaScript comes into play for implementing a light mode and dark mode toggle, providing users with a personalized viewing experience.
Our Product Page Design project brings life to your ecommerce website with a well-crafted product presentation. Users can explore product images in a gallery, read detailed descriptions, and choose product variations seamlessly. JavaScript functionality allows for dynamic updates based on user selections, enhancing the overall shopping journey.
Our QR Code Generator Project, utilizing HTML, CSS, JavaScript, and API integration, offers a user-friendly interface for generating QR codes. With a single click, users input text or links, facilitating quick information sharing for personal or professional use, whether it's URLs, contact details, or event information.
Our Quiz Game project allows users to answer multiple-choice questions with feedback on their selections. Correct answers are highlighted in green, while incorrect answers are highlighted in red. Additionally, we've added a timer of 5 seconds for each question, enhancing the challenge and urgency of the quiz.
Our Quote Generator Project combines HTML, CSS, JavaScript, and an API to provide instant inspiration. With a clean interface, users generate new quotes with a click, listen to them, copy for personal use, or share on Twitter. With a vast repository of quotes, it's perfect for daily inspiration or moments of reflection.
Our Random Color Background Generator is a fun addition to web design, allowing users to change background colors with a click and view hex codes instantly for easy integration into projects. This project highlights JavaScript's versatility in crafting interactive web elements.
Our Random Password Generator empowers you to create strong passwords effortlessly. Simply click the "Generate Password" button to receive a new password each time. The generated passwords are random and secure, ensuring your accounts stay protected.
Our Background Removal Effect Project utilizes HTML, CSS, and JavaScript to create an engaging user experience. Through clever manipulation of two images, we craft an illusion where the background disappears as the cursor moves, leaving only the foreground elements visible. It captivates users with its interactive and immersive design.
Our project enhances password management with a convenient toggle for password visibility. Using an eye icon that dynamically changes, we create an intuitive and visually appealing experience. With CSS animations, users can securely manage passwords while maintaining control and convenience.
Our sign-in/sign-up app offers seamless registration, secure storage of user data in MongoDB, JWT-based authentication for data security, and personalized welcome pages. It features responsive design for all devices and real-time updates for enhanced user interaction. Join us in revolutionizing user authentication and personalized experiences!
Our Stopwatch project brings practicality to your website with a fully functional timer. Users can start, stop, and reset the stopwatch, making it versatile for various timing needs. JavaScript handles the timer functionality, while HTML and CSS create an intuitive and visually appealing stopwatch design.
Our Text-to-Speech Converter project revolutionizes communication by transforming text into spoken words. With JavaScript's SpeechSynthesis API, users can input text and choose from various voices to generate speech. This app enhances accessibility and adds a dynamic element to content consumption.
Our To-Do List App simplifies task management. Add, check, uncheck, and remove tasks effortlessly. Thanks to local storage integration, your tasks persist across sessions, ensuring you never lose track of your progress.
Our project delivers important messages stylishly without disrupting workflows. With a progress bar and CSS animations, users enjoy a seamless experience. Automatic dismissal ensures uninterrupted workflow.
Dive into the challenge with a dynamic ! Input a city name, and watch as your webpage transforms to display real-time weather information. This project encapsulates the synergy of HTML for structure, CSS for styling, JavaScript for interactivity, and a Weather API for live data.
The project streamlines website subscriptions: users input emails to subscribe, and data goes to Google Sheets for tracking. JavaScript manages form submissions and Google Sheets integration for efficiency.