Posts

Showing posts with the label Web Development

Auto Dark Mode Scheduler | Switch Between Light & Dark Automatically | FuzzuTech Project

Image
  Demo : Click Video ðŸ‘‡ðŸ‘‡ðŸ‘‡ 🧩 Key Features: Automatically switches theme based on local time Fully responsive and lightweight Clean UI with modern design Dark mode between 7PM–7AM Light mode during day hours Code : <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1" />     <title>Auto Dark Mode Scheduler</title>     <style>         /* Base Styles */         body {             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;             background-color: #f0f0f0;             color: #222;             transition: background-color 0.8s ease, color 0.8s ease;             margin: 0;   ...
Post a Comment
Read more

How to Make Your Python Web Scraper More Efficient | Learn Web Scraping in 2025

Image
Demo : Click Video ðŸ‘‡ðŸ‘‡ðŸ‘‡ Code : import tkinter as tk from tkinter import ttk from tkinter import messagebox import requests from bs4 import BeautifulSoup # Function to scrape the data def web_scraper():     url = url_entry.get()     if not url:         messagebox.showerror("Input Error", "Please enter a URL!")         return     try:         response = requests.get(url)         soup = BeautifulSoup(response.text, 'html.parser')         # Extracting the title         title = soup.title.string if soup.title else "No title found"         title_label.config(text=f"Page Title: {title}")         # Extracting all anchor tags (links)         links = soup.find_all('a')         links_text = ""         for link in links:       ...
Post a Comment
Read more

🔥 Responsive Card Grid Using Flexbox | Modern UI Design with Hover Effect

Image
Demo : Click Video ðŸ‘‡ðŸ‘‡ðŸ‘‡ 🎯 Features: ✅ Fully responsive on all devices 📱💻 ✅ Smooth hover effect for a modern look 🔥 ✅ Perfect for portfolios, blogs, and product showcases Code : 📂 Folder Structure: /responsive-card-grid   │── index.html   │── style.css   HTML : <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Responsive Card Grid with Flexbox</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <div class="card-container">         <div class="card">             <img src="https://via.placeholder.com/300" alt="Card Image">             <h2>Card Title 1</h2>             <p>...
Post a Comment
Read more

👉 Modern Eye Password Toggle UI using HTML, CSS & JavaScript | Stylish Login Form

Image
Demo : Click Video ðŸ‘‡ðŸ‘‡ðŸ‘‡ Features: ✅ Modern UI (Glassmorphism effect) ✅ Eye Icon Toggle (Show/Hide Password) ✅ Fully Responsive ✅ Smooth Animations Code : 📂 Folder Structure: /password-toggle-form     ├── index.html     ├── style.css     ├── script.js   🔹 index.html <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Login Form with Eye Toggle</title>     <link rel="stylesheet" href="style.css">     <script defer src="script.js"></script>     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> </head> <body>     <div class="login-container">         <h2>Login</h2>       ...
Post a Comment
Read more

Modern Web App using HTMX (No JavaScript Required!)

Image
Demo : Click Video ðŸ‘‡ðŸ‘‡ðŸ‘‡ HTMX + PHP: Modern Web App (No JavaScript Needed!) 📂 Folder Structure : /modern-htmx-app │── index .html │── style.css │── script.js (Minimal) │── server .php Code : 1️⃣ index.html (Main Web Page) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTMX Web App</title> <link rel="stylesheet" href="style.css"> <script src="https://unpkg.com/htmx.org@1.9.5"></script> </head> <body> <div class="container"> <h2>HTMX Web App - No JavaScript Required!</h2> <!-- Input Form --> <form id="dataForm" hx-post="server.php" hx-target="#response" hx-swap="innerHTML"> <input type="text" ...
Post a Comment
Read more