Projects with Code

				
					import tkinter as tk
from tkinter import filedialog, messagebox

# Initialize the main application window
app = tk.Tk()
app.title("Modern Text Editor")
app.geometry("800x600")

# Set modern styles
app.configure(bg="#2c3e50")
font_style = ("Helvetica", 14)
text_bg = "#ecf0f1"
text_fg = "#2c3e50"

# Text widget for content editing
text_area = tk.Text(app, wrap=tk.WORD, font=font_style, bg=text_bg, fg=text_fg, undo=True)
text_area.pack(expand=1, fill=tk.BOTH, padx=10, pady=10)

# Current file path
current_file = None

# Functions
def new_file():
    global current_file
    current_file = None
    text_area.delete(1.0, tk.END)
    app.title("New File - Modern Text Editor")

def open_file():
    global current_file
    file_path = filedialog.askopenfilename(filetypes=[("Text Files", "*.txt"), ("All Files", "*.*")])
    if file_path:
        try:
            with open(file_path, "r") as file:
                content = file.read()
            text_area.delete(1.0, tk.END)
            text_area.insert(tk.END, content)
            current_file = file_path
            app.title(f"{file_path} - Modern Text Editor")
        except Exception as e:
            messagebox.showerror("Error", f"Could not open file: {e}")

def save_file():
    global current_file
    if current_file:
        try:
            with open(current_file, "w") as file:
                file.write(text_area.get(1.0, tk.END))
            messagebox.showinfo("Success", "File saved successfully!")
        except Exception as e:
            messagebox.showerror("Error", f"Could not save file: {e}")
    else:
        save_as_file()

def save_as_file():
    global current_file
    file_path = filedialog.asksaveasfilename(defaultextension=".txt", filetypes=[("Text Files", "*.txt"), ("All Files", "*.*")])
    if file_path:
        try:
            with open(file_path, "w") as file:
                file.write(text_area.get(1.0, tk.END))
            current_file = file_path
            app.title(f"{file_path} - Modern Text Editor")
            messagebox.showinfo("Success", "File saved successfully!")
        except Exception as e:
            messagebox.showerror("Error", f"Could not save file: {e}")

def exit_app():
    if messagebox.askyesno("Exit", "Do you want to save changes before exiting?"):
        save_file()
    app.destroy()

# Menu bar
menu_bar = tk.Menu(app, bg="#34495e", fg="#ecf0f1", activebackground="#16a085", activeforeground="white")

# File menu
file_menu = tk.Menu(menu_bar, tearoff=0, bg="#34495e", fg="white", activebackground="#16a085", activeforeground="white")
file_menu.add_command(label="New", command=new_file)
file_menu.add_command(label="Open", command=open_file)
file_menu.add_command(label="Save", command=save_file)
file_menu.add_command(label="Save As", command=save_as_file)
file_menu.add_separator()
file_menu.add_command(label="Exit", command=exit_app)
menu_bar.add_cascade(label="File", menu=file_menu)

# Edit menu
edit_menu = tk.Menu(menu_bar, tearoff=0, bg="#34495e", fg="white", activebackground="#16a085", activeforeground="white")
edit_menu.add_command(label="Undo", command=text_area.edit_undo)
edit_menu.add_command(label="Redo", command=text_area.edit_redo)
edit_menu.add_separator()
edit_menu.add_command(label="Cut", command=lambda: app.focus_get().event_generate("<<Cut>>"))
edit_menu.add_command(label="Copy", command=lambda: app.focus_get().event_generate("<<Copy>>"))
edit_menu.add_command(label="Paste", command=lambda: app.focus_get().event_generate("<<Paste>>"))
menu_bar.add_cascade(label="Edit", menu=edit_menu)

# Add menu bar to the application
app.config(menu=menu_bar)

# Run the application
app.mainloop()

				
			
				
					    <div class="button-container">
        <button class="btn bounce" style="background-color: #FF5733;">Button 1</button>
        <button class="btn rotate" style="background-color: #33FF57;">Button 2</button>
        <button class="btn slide" style="background-color: #3357FF;">Button 3</button>
        <button class="btn fade" style="background-color: #FF33A1;">Button 4</button>
        <button class="btn zoom" style="background-color: #FF9F33;">Button 5</button>
        <button class="btn pulse" style="background-color: #33FFE0;">Button 6</button>
        <button class="btn swing" style="background-color: #FF333F;">Button 7</button>
        <button class="btn flip" style="background-color: #33C7FF;">Button 8</button>
        <button class="btn jump" style="background-color: #57FF33;">Button 9</button>
        <button class="btn shake" style="background-color: #6B33FF;">Button 10</button>
        <button class="btn expand" style="background-color: #FFA833;">Button 11</button>
        <button class="btn shrink" style="background-color: #FF33C1;">Button 12</button>
        <button class="btn spin" style="background-color: #AFFF33;">Button 13</button>
        <button class="btn wobble" style="background-color: #336BFF;">Button 14</button>
        <button class="btn vibrate" style="background-color: #FFD233;">Button 15</button>
        <button class="btn pop" style="background-color: #A1FF33;">Button 16</button>
        <button class="btn glow" style="background-color: #FF573A;">Button 17</button>
        <button class="btn rotateX" style="background-color: #33FF9F;">Button 18</button>
        <button class="btn rotateY" style="background-color: #338CFF;">Button 19</button>
        <button class="btn fadeInOut" style="background-color: #FF33C7;">Button 20</button>
        <button class="btn zoomInOut" style="background-color: #FF9933;">Button 21</button>
        <button class="btn bounceInOut" style="background-color: #33EFFF;">Button 22</button>
        <button class="btn slideInOut" style="background-color: #33FF57;">Button 23</button>
        <button class="btn flipInOut" style="background-color: #FF5733;">Button 24</button>
        <button class="btn jumpInOut" style="background-color: #5733FF;">Button 25</button>
        <button class="btn pulseInOut" style="background-color: #FF33D6;">Button 26</button>
        <button class="btn popInOut" style="background-color: #D6FF33;">Button 27</button>
        <button class="btn wobbleInOut" style="background-color: #33FF33;">Button 28</button>
        <button class="btn vibrateInOut" style="background-color: #FF33B2;">Button 29</button>
        <button class="btn expandInOut" style="background-color: #33FFA5;">Button 30</button>
        <button class="btn shrinkInOut" style="background-color: #33FFEC;">Button 31</button>
    </div>
				
			
				
					.button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.btn {
    padding: 15px 30px;
    margin: 10px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 5px;
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2), 0 6px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    transform: perspective(500px) translateZ(0);
    cursor: pointer;
}

.btn:hover {
    transform: perspective(500px) translateZ(20px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4), 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Animations */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

@keyframes fade {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes zoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.2); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes swing {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(15deg); }
}

@keyframes flip {
    0% { transform: rotateX(0deg); }
    100% { transform: rotateX(360deg); }
}

@keyframes jump {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes expand {
    0% { transform: scale(1); }
    100% { transform: scale(1.5); }
}

@keyframes shrink {
    0% { transform: scale(1); }
    100% { transform: scale(0.5); }
}

@keyframes spin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes wobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    75% { transform: rotate(-10deg); }
}

@keyframes vibrate {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
}

@keyframes pop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

@keyframes glow {
    0% { box-shadow: 0 0 10px white; }
    100% { box-shadow: 0 0 30px white; }
}

@keyframes rotateX {
    0% { transform: rotateX(0deg); }
    100% { transform: rotateX(360deg); }
}

@keyframes rotateY {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* Button-specific animations */
.bounce:hover { animation: bounce 0.5s ease infinite; }
.rotate:hover { animation: rotate 1s linear infinite; }
.slide:hover { animation: slide 1s ease; }
.fade:hover { animation: fade 1s ease; }
.zoom:hover { animation: zoom 0.5s ease; }
.pulse:hover { animation: pulse 1s ease infinite; }
.swing:hover { animation: swing 0.5s ease infinite; }
.flip:hover { animation: flip 1s ease infinite; }
.jump:hover { animation: jump 0.5s ease infinite; }
.shake:hover { animation: shake 0.5s ease infinite; }
.expand:hover { animation: expand 0.5s ease; }
.shrink:hover { animation: shrink 0.5s ease; }
.spin:hover { animation: spin 1s ease infinite; }
.wobble:hover { animation: wobble 1s ease infinite; }
.vibrate:hover { animation: vibrate 0.5s ease infinite; }
.pop:hover { animation: pop 0.5s ease infinite; }
.glow:hover { animation: glow 1s ease infinite; }
.rotateX:hover { animation: rotateX 1s ease infinite; }
.rotateY:hover { animation: rotateY 1s ease infinite; }
				
			
				
					<div class="calculator">
        <input type="text" id="result" placeholder="0" readonly>
        <div class="row">
            <button class="btn">AC</button>
            <button class="btn">DEL</button>
            <button class="btn">%</button>
            <button class="btn">/</button>
        </div>
        <div class="row">
            <button class="btn">7</button>
            <button class="btn">8</button>
            <button class="btn">9</button>
            <button class="btn">*</button>
        </div>
        <div class="row">
            <button class="btn">4</button>
            <button class="btn">5</button>
            <button class="btn">6</button>
            <button class="btn">-</button>
        </div>
        <div class="row">
            <button class="btn">1</button>
            <button class="btn">2</button>
            <button class="btn">3</button>
            <button class="btn">+</button>
        </div>
        <div class="row">
            <button class="btn">00</button>
            <button class="btn">0</button>
            <button class="btn">.</button>
            <button class="btn">=</button>
        </div>
    </div>
    </div>
				
			
				
					<style>
        body {
            width: 100%;
            height: 100%;
            background-image: url(https://images.unsplash.com/photo-1726853550443-20b90f727b9b?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .calculator {
            border: 2px solid #000;
            width: 225px;
            height: 370px;
            position: absolute;
            padding: 15px 20px 0px 20px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
            border-radius: 10px;
            background-color: #0000004d;
        }

        .calculator input {
            width: 100%;
            height: 80px;
            text-align: end;
            background-color: #000000b9;
            border: none;
            border-radius: 5px;
            color: orangered;
            font-size: 26px;
            font-weight: 600;
            margin-bottom: 20px;
        }

        input:hover {
            border: none;
        }

        .row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-top: 10px;
        }

        button {
            font-size: 24px;
            padding: 5px 10px;
            cursor: pointer;
            background-color: #13131398;
            border: none;
            box-shadow: 0px 0px 3px rgb(36, 36, 36);
            border-radius: 8px;
            color: #fff;
            font-weight: 500;
        }

        button:hover {
            color: orange;
            background-color: #000000bd;
        }
    </style>
    
				
			
				
					    <script>
        var display = document.querySelector("input")
        var buttons = document.querySelectorAll(".btn")

        var buttonArray = Array.from(buttons);

        let string = ''


        buttonArray.forEach(btn => {
            btn.addEventListener("click", (e) => {
                display.value = string;

                if (e.target.innerHTML == 'DEL') {
                    string = string.substring(0, string.length - 1);
                    display.value = string;
                } else if (e.target.innerHTML == 'AC') {
                    string = '';
                    display.value = string;
                } else if (e.target.innerHTML == '=') {
                    string = eval(string)
                    display.value = string;
                }
                else {
                    string += e.target.innerHTML;
                    display.value = string;
                }

                console.log(e.target.innerHTML)
            })
        })

    </script>