Modern Web App using HTMX (No JavaScript Required!)

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" name="username" placeholder="Enter your name" required>
            <button type="submit">Submit</button>
        </form>

        <!-- Response Area -->
        <div id="response"></div>
    </div>

</body>
</html>


2️⃣ style.css (Basic Styling)

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background: #f4f4f4;
    padding: 50px;
}
.container {
    max-width: 400px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
input {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
}
button {
    background: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}
button:hover {
    background: #218838;
}



3️⃣ server.php (Handles the Request)


<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = htmlspecialchars($_POST["username"]);
    echo "<h3>Welcome, $name!</h3>";
}
?>



4️⃣ script.js (Optional - Minimal JavaScript for Enhancements)


document.addEventListener("DOMContentLoaded", function () {
    console.log("HTMX Web App Loaded!");
});

Comments

Post a Comment

Popular posts from this blog

🚀 Simple Login & Registration System in Python Tkinter 📱

Image
   Demo : Click Video 👇👇👇 ✅ Features: ✔️ Simple Login UI 🖥️ ✔️ Secure User Authentication 🔒 ✔️ SQLite Database Integration 📂 ✔️ User Registration Form ✍️ Code : import tkinter as tk from tkinter import messagebox from tkinter import ttk import sqlite3 # Global variables root = tk.Tk() root.withdraw()  # Hide main root window login_window = None home_window = None settings_window = None planner_window = None # Database setup def create_db():     conn = sqlite3.connect('user_data.db')     c = conn.cursor()     c.execute('''CREATE TABLE IF NOT EXISTS users (username TEXT, password TEXT)''')     conn.commit()     conn.close() # User registration def register_user():     username = reg_username_entry.get()     password = reg_password_entry.get()     if username and password:         conn = sqlite3.connect('user_data.db')         c = conn.cursor...
Read more

🚀 Create a Python Screen Recorder with Audio (Complete Code)

Image
  Demo : Click Video 👇👇👇 📂 Folder Structure 📁 Python-Screen-Recorder     ├── 📄 screen_recorder.py  (Main Python Script)     ├── 🎵 audio.wav  (Recorded Audio)     ├── 🎥 screen_record.avi  (Recorded Video) Dependencies Install Karo: cmd => pip install opencv-python numpy pyautogui pyaudio Code : import cv2 import numpy as np import pyautogui import pyaudio import wave import threading import tkinter as tk from tkinter import filedialog # Set screen size screen_width, screen_height = pyautogui.size() frame_rate = 20 # Audio recording settings audio_format = pyaudio.paInt16 channels = 2 rate = 44100 chunk = 1024 audio_filename = "audio.wav" video_filename = "screen_record.avi" # Audio recording function def record_audio():     audio = pyaudio.PyAudio()     stream = audio.open(format=audio_format, channels=channels, rate=rate, input=True, frames_per_buffer=chunk)     frames = []     whil...
Read more

📡 Fuzzu Packet Sniffer – Python GUI for Real-Time IP Monitoring | Tkinter + Scapy

Image
  Demo : Click Video 👇👇👇 📝 Description: Explore the power of Python + Scapy in this sleek GUI app that sniffs packets live! Whether you're into network security or learning how to trace source/destination IPs, this hacker-style app gives you a stunning GUI interface with real-time output. Built with threading, styled with dark mode, and structured for maximum speed. Watch the Short video demo and grab the code from our next release. ✨ Features: Live Packet Sniffing with IP & Protocol Stylish Dark GUI with Tkinter Real-time TreeView display Beginner-friendly + Offline Tool Code : import tkinter as tk from tkinter import ttk, messagebox import threading from scapy.all import sniff, IP class PacketSnifferGUI:     def __init__(self, root):         self.root = root         self.root.title("📡 FuzzuTech Packet Sniffer")         self.root.geometry("600x500")         self.r...
Read more