Code Display

Advanced Workflow Management App (Python)

import tkinter as tk
from tkinter import messagebox
from tkinter import filedialog
import json

# Dictionary to store workflows and tasks
workflows = {}

# Function to add a workflow
def add_workflow():
    workflow_name = workflow_entry.get()
    if workflow_name:
        workflow_listbox.insert(tk.END, workflow_name)
        workflows[workflow_name] = []
        workflow_entry.delete(0, tk.END)
    else:
        messagebox.showwarning("Warning", "Please enter a workflow name.")

# Function to add a task to selected workflow
def add_task():
    selected_workflow = workflow_listbox.get(tk.ACTIVE)
    task_name = task_entry.get()
    if task_name:
        task_listbox.insert(tk.END, task_name)
        workflows[selected_workflow].append(task_name)
        task_entry.delete(0, tk.END)
    else:
        messagebox.showwarning("Warning", "Please enter a task name.")

# Function to delete selected task
def delete_task():
    selected_task = task_listbox.get(tk.ACTIVE)
    selected_workflow = workflow_listbox.get(tk.ACTIVE)
    workflows[selected_workflow].remove(selected_task)
    task_listbox.delete(tk.ACTIVE)

# Function to delete selected workflow
def delete_workflow():
    selected_workflow = workflow_listbox.get(tk.ACTIVE)
    del workflows[selected_workflow]
    workflow_listbox.delete(tk.ACTIVE)
    task_listbox.delete(0, tk.END)

# Function to update task listbox when a different workflow is selected
def update_task_listbox(*args):
    selected_workflow = workflow_listbox.get(tk.ACTIVE)
    task_listbox.delete(0, tk.END)
    task_list = workflows[selected_workflow]
    for task in task_list:
        task_listbox.insert(tk.END, task)

# Function to save current session to a JSON file
def save_session():
    filename = tk.filedialog.asksaveasfilename(defaultextension=".json", filetypes=[("JSON Files", "*.json")])
    if filename:
        with open(filename, "w") as file:
            json.dump(workflows, file)
            messagebox.showinfo("Info", "Session saved successfully.")

# Function to open a saved session from a JSON file
def open_session():
    filename = tk.filedialog.askopenfilename(filetypes=[("JSON Files", "*.json")])
    if filename:
        with open(filename, "r") as file:
            loaded_workflows = json.load(file)
            workflow_listbox.delete(0, tk.END)
            task_listbox.delete(0, tk.END)
            workflows.clear()
            for workflow, tasks in loaded_workflows.items():
                workflow_listbox.insert(tk.END, workflow)
                workflows[workflow] = tasks
            messagebox.showinfo("Info", "Session opened successfully.")

# Create main window
root = tk.Tk()
root.title("Workflow Management Tool")

# Create workflow section
workflow_frame = tk.Frame(root)
workflow_frame.pack(side=tk.LEFT, padx=10, pady=10)

workflow_label = tk.Label(workflow_frame, text="Workflows", font=("Helvetica", 16))
workflow_label.pack()

workflow_listbox = tk.Listbox(workflow_frame, font=("Helvetica", 12), height=10)
workflow_listbox.pack(fill=tk.BOTH, expand=True)

workflow_entry = tk.Entry(workflow_frame, font=("Helvetica", 12))
workflow_entry.pack(pady=5)

add_workflow_button = tk.Button(workflow_frame, text="Add Workflow", command=add_workflow)
add_workflow_button.pack()

delete_workflow_button = tk.Button(workflow_frame, text="Delete Workflow", command=delete_workflow)
delete_workflow_button.pack()

# Create task section
# Create task section
task_frame = tk.Frame(root)
task_frame.pack(side=tk.LEFT, padx=10, pady=10)

task_label = tk.Label(task_frame, text="Tasks", font=("Helvetica", 16))
task_label.pack()

task_listbox = tk.Listbox(task_frame, font=("Helvetica", 12), height=10)
task_listbox.pack(fill=tk.BOTH, expand=True)

task_entry = tk.Entry(task_frame, font=("Helvetica", 12))
task_entry.pack(pady=5)

add_task_button = tk.Button(task_frame, text="Add Task", command=add_task)
add_task_button.pack()

delete_task_button = tk.Button(task_frame, text="Delete Task", command=delete_task)
delete_task_button.pack()

# Configure workflow listbox to update task listbox
workflow_listbox.bind("<<ListboxSelect>>", update_task_listbox)

# Create file menu
menu_bar = tk.Menu(root)
root.config(menu=menu_bar)

file_menu = tk.Menu(menu_bar)
menu_bar.add_cascade(label="File", menu=file_menu)
file_menu.add_command(label="Save Session", command=save_session)
file_menu.add_command(label="Open Session", command=open_session)

root.mainloop()

Simple Workflow Management App (HTML)

<!DOCTYPE html>
<html>
<head>
  <title>Workflow Management</title>
  <style>
    /* Add your custom styles here */
  </style>
</head>
<body>
  <h1>Workflow Management</h1>
  <div>
    <h2>Workflows</h2>
    <ul id="workflowList">
      
    </ul>
    <form id="workflowForm">
      <input type="text" id="workflowName" placeholder="Enter Workflow Name">
      <button type="submit">Create Workflow</button>
    </form>
  </div>
  <div>
    <h2>Tasks</h2>
    <ul id="taskList">
      
    </ul>
    <form id="taskForm">
      <input type="text" id="taskName" placeholder="Enter Task Name">
      <select id="workflowSelect">
        <option value="">Select Workflow</option>
        
      </select>
      <button type="submit">Add Task</button>
    </form>
  </div>

// Create a workflow
    document.getElementById('workflowForm').addEventListener('submit', (event) => {
      event.preventDefault();
      const workflowNameInput = document.getElementById('workflowName');
      const workflowName = workflowNameInput.value;
      if (workflowName) {
        const workflowId = new Date().getTime().toString();
        workflows.push({ id: workflowId, name: workflowName });
        workflowNameInput.value = '';
        renderWorkflowList();
      }
    });

// Render the workflow list
    function renderWorkflowList() {
      const workflowList = document.getElementById('workflowList');
      workflowList.innerHTML = '';
      workflows.forEach((workflow) => {
        const workflowItem = document.createElement('li');
        workflowItem.textContent = workflow.name;
        workflowItem.dataset.id = workflow.id;
        workflowList.appendChild(workflowItem);
      });
      renderWorkflowOptions();
    }

// Render the workflow options in the task form
    function renderWorkflowOptions() {
      const workflowSelect = document.getElementById('workflowSelect');
      workflowSelect.innerHTML = '';
      workflows.forEach((workflow) => {
        const workflowOption = document.createElement('option');
        workflowOption.value = workflow.id;
        workflowOption.textContent = workflow.name;
        workflowSelect.appendChild(workflowOption);
      });
    }

// Add a task
    document.getElementById('taskForm').addEventListener('submit', (event) => {
      event.preventDefault();
      const taskNameInput = document.getElementById('taskName');
      const taskName = taskNameInput.value;
      const workflowId = document.getElementById('workflowSelect').value;
      if (taskName && workflowId) {
        const taskId = new Date().getTime().toString();
        tasks.push({ id: taskId, name: taskName, workflowId: workflowId });
        taskNameInput.value = '';
        renderTaskList();
      }
    });

// Render the task list
function renderTaskList() {
  const taskList = document.getElementById('taskList');
  taskList.innerHTML = '';
  tasks.forEach((task) => {
    const taskItem = document.createElement('li');
    taskItem.textContent = task.name;
    taskItem.dataset.id = task.id;
    taskList.appendChild(taskItem);
  });
}

// Update the workflow options in the task form when the workflow list changes
document.getElementById('workflowList').addEventListener('click', (event) => {
  if (event.target.matches('li')) {
    const workflowId = event.target.dataset.id;
    document.getElementById('workflowSelect').value = workflowId;
  }
});
// Delete a task
document.getElementById('taskList').addEventListener('click', (event) => {
  if (event.target.matches('li')) {
    const taskId = event.target.dataset.id;
    tasks = tasks.filter((task) => task.id !== taskId);
    renderTaskList();
  }
});

// Delete a workflow
document.getElementById('workflowList').addEventListener('click', (event) => {
  if (event.target.matches('li')) {
    const workflowId = event.target.dataset.id;
    workflows = workflows.filter((workflow) => workflow.id !== workflowId);
    tasks = tasks.filter((task) => task.workflowId !== workflowId);
    renderWorkflowList();
    renderTaskList();
  }
});

</script>
</body>
</html>

Instant Messenger App/Website (index.html)

index.html and main.js are required. Scroll in this box to get both codes.

<!DOCTYPE html>
<html>
<head>
    <title>Instant Messenger</title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        /* Style for message container to appear at the bottom */
        #message-container {
            overflow-y: auto;
            max-height: 300px;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center">Instant Messenger</h1>
        <form id="message-form">
            <div class="form-group">
                <input type="text" class="form-control" id="name-input" placeholder="Your name">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="message-input" placeholder="Type your message...">
            </div>
            <button type="submit" class="btn btn-primary">Send</button>
        </form>
        <div class="card mt-5">
            <div class="card-body" id="message-container"></div>
        </div>
    </div>

<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>
    <script src="main.js"></script>
</body>
</html>

Instant Messenger App/Website (main.js)

// Firebase configuration
const firebaseConfig = {
  apiKey: "APIKEY",
  authDomain: "AUTHDOMAIN",
  databaseURL: "DATABASEURL",
  projectId: "PROJECTID",
  storageBucket: "STORAGEBUCKET",
  messagingSenderId: "MESSAGINGSENDERID",
  appId: "APPID"
};

firebase.initializeApp(firebaseConfig);
const db = firebase.database();
const messageContainer = document.getElementById('message-container');
const messageForm = document.getElementById('message-form');
const nameInput = document.getElementById('name-input');
const messageInput = document.getElementById('message-input');

messageForm.addEventListener('submit', sendMessage);

function sendMessage(event) {
  event.preventDefault();

const name = nameInput.value;
  const message = messageInput.value;

if (!name || !message) {
    return;
  }

db.ref('messages').push().set({
    name: name,
    message: message,
    timestamp: firebase.database.ServerValue.TIMESTAMP // Add timestamp to each message
  });

messageInput.value = '';
}

db.ref('messages').orderByChild('timestamp').on('child_added', snapshot => { // Order messages by timestamp
  const message = snapshot.val();
  const messageElement = document.createElement('div');
  messageElement.className = 'alert alert-info mb-2';
  messageElement.textContent = `${message.name}: ${message.message}`;
  messageContainer.insertBefore(messageElement, messageContainer.firstChild); // Add new messages at the top
});

Login Page (index.html)

index.html, app.js, style.css, and page2.html are required. Scroll in this box to get all codes.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Login and Signup (index.html)</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form id="loginForm">
            <h1>Login</h1>
            <input type="email" id="loginEmail" placeholder="Email" required>
            <input type="password" id="loginPassword" placeholder="Password" required>
            <button type="submit">Sign In</button>
            <p>Don't have an account? <a id="signupLink">Sign up</a></p>
        </form>
        <form id="signupForm">
            <h1>Sign Up</h1>
            <input type="email" id="signupEmail" placeholder="Email" required>
            <input type="password" id="signupPassword" placeholder="Password" required>
            <button type="submit">Sign Up</button>
            <p>Already have an account? <a id="loginLink">Sign in</a></p>
        </form>
    </div>
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
    <script src="app.js"></script>
</body>
</html>

app.js

// Initialize Firebase
var config = {
  apiKey: "APIKEY",
  authDomain: "AUTHDOMAIN",
  projectId: "PROJECTID",
  storageBucket: "STORAGEBUCKET",
  messagingSenderId: "MESSAGINGSENDERID",
  appId: "APPID",
};
firebase.initializeApp(config);

// Login form submission
document.getElementById("loginForm").addEventListener("submit", function(event) {
    event.preventDefault();
    var email = document.getElementById("loginEmail").value;
    var password = document.getElementById("loginPassword").value;

// Call Firebase signInWithEmailAndPassword method to sign in the user
    firebase.auth().signInWithEmailAndPassword(email, password)
        .then(function() {
            // Redirect to page2.html upon successful login
            window.location.href = "page2.html";
        })
        .catch(function(error) {
            // Handle login error
            console.error(error);
            alert("Failed to sign in. Please try again.");
        });
});

// Signup form submission
document.getElementById("signupForm").addEventListener("submit", function(event) {
    event.preventDefault();
    var email = document.getElementById("signupEmail").value;
    var password = document.getElementById("signupPassword").value;

// Call Firebase createUserWithEmailAndPassword method to create a new user
    firebase.auth().createUserWithEmailAndPassword(email, password)
        .then(function() {
            // Redirect to page2.html upon successful signup
            window.location.href = "page2.html";
        })
        .catch(function(error) {
            // Handle signup error
            console.error(error);
            alert("Failed to sign up. Please try again.");
        });
});

// Toggle between login and signup forms
document.getElementById("signupLink").addEventListener("click", function(event) {
    event.preventDefault();
    document.getElementById("loginForm").style.display = "none";
    document.getElementById("signupForm").style.display = "block";
});

document.getElementById("loginLink").addEventListener("click", function(event) {
    event.preventDefault();
    document.getElementById("signupForm").style.display = "none";
    document.getElementById("loginForm").style.display = "block";
});

style.css

/* Reset default styles */
body, form, input, button {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Container styles */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f0f0f0;
}

/* Form styles */
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}

/* Input styles */
input {
    margin-top: 10px;
    padding: 10px;
    border: none;
    border-radius: 3px;
    width: 100%;
}

/* Button styles */
button {
    margin-top: 10px;
    padding: 10px;
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
}

/* Link styles */
a {
    color: #007bff;
    text-decoration: none;
    cursor: pointer;
}

/* Hide/show styles for sign-up form */
#signupForm {
    display: none;
}

page2.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Page Name</title>
    <style>
        /* Reset some default styles */
        body,
        form,
        input,
        button {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

/* Set up basic layout */
        body {
            background-color: #fafafa;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

header {
            text-align: center;
            margin-bottom: 40px;
        }

main {
            max-width: 600px;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
        }

footer {
            text-align: center;
            margin-top: auto;
            margin-bottom: 10px;
        }

/* Hero section */
        #hero {
            text-align: center;
            margin-bottom: 40px;
        }

#hero h2 {
            font-size: 24px;
            margin-bottom: 10px;
        }

#hero p {
            font-size: 16px;
            margin-bottom: 30px;
            color: #777;
        }

#getStartedButton {
            display: inline-block;
            padding: 12px 24px;
            background-color: #ff9800;
            color: #fff;
            text-decoration: none;
            font-size: 16px;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }

#getStartedButton:hover {
            background-color: #f57c00;
        }

/* Signup and login form section */
        #signupForm,
        #loginForm {
            margin-top: 40px;
            text-align: center;
        }

form {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

input[type="email"],
        input[type="password"] {
            margin-bottom: 10px;
            padding: 10px;
            width: 100%;
            max-width: 300px;
            border: none;
            border-radius: 4px;
            background-color: #f5f5f5;
        }

button[type="submit"] {
            display: inline-block;
            padding: 12px 24px;
            background-color: #2196f3;
            color: #fff;
            text-decoration: none;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

button[type="submit"]:hover {
            background-color: #1976d2;
        }

p {
            font-size: 14px;
            color: #777;
            margin-top: 10px;
        }

#loginLink {
            color: #2196f3;
            text-decoration: none;
            cursor: pointer;
        }

</style>
</head>

<body>
    <header>
        <h1>Coffee Connect</h1>
        <p>Connect with coffee enthusiasts around the world!</p>
    </header>
    <main>
        <section id="hero">
            <h2>Join the Coffee Community</h2>
            <p>Discover, connect, and share your love for coffee with like-minded individuals from all over the world.</p>
            <a href="#signupForm" id="getStartedButton">Get Started</a>
        </section>
        <section id="signupForm">
            <h2>Sign up for Free</h2>
            <form>
                <input type="email" placeholder="Email" required>
                <input type="password" placeholder="Password" required>
                <button type="submit">Sign up</button>
                <p>Already have an account? <a href="#loginForm" id="loginLink">Log in</a></p>
            </form>
        </section>
        <section id="loginForm">
            <h2>Log in to Your Account</h2>
            <form>
                <input type="email" placeholder="Email" required>
                <input type="password" placeholder="Password" required>
                <button type="submit">Log in</button>
                <p>Don't have an account yet? <a href="#signupForm" id="signupLink">Sign up</a></p>
            </form>
        </section>
    </main>
    <footer>
        <p>© copyright stuff</p>
    </footer>
</body>
</html>

Chatbot App (Python)

Two options, with or without UI. Scroll in this box to get the code(s).

Without UI

import os
import openai

# Function to read all text files from the "documents" folder
def read_documents(folder_path):
    documents = []
    for filename in os.listdir(folder_path):
        if filename.endswith(".txt"):
            file_path = os.path.join(folder_path, filename)
            with open(file_path, "r") as file:
                documents.append(file.read())
    return documents

# Function to interact with the GPT-3.5 API and get chatbot responses
def get_chatbot_response(question, documents):
    prompt = f"Question: {question}\nDocuments: {documents}\nAnswer:"
    response = openai.Completion.create(
        engine="text-davinci-003",  # Use the GPT-3.5 engine
        prompt=prompt,
        max_tokens=150,  # Adjust the length of the response as needed
        api_key="API-KEY-HERE",  # Replace with your actual API key
    )
    return response['choices'][0]['text']

# Main function to run the chatbot
def main():
    documents_folder = "documents"
    documents = read_documents(documents_folder)

print("Chatbot: Hi! I'm your chatbot assistant. How can I help you?")
    while True:
        user_input = input("User: ")
        if user_input.lower() in ["exit", "quit", "bye"]:
            print("Chatbot: Goodbye!")
            break
        answer = get_chatbot_response(user_input, documents)
        print("Chatbot:", answer)

if __name__ == "__main__":
    main()

With UI

import os
import openai
import tkinter as tk
from tkinter import messagebox

# Function to handle the user's input and get chatbot response
def handle_user_input(user_input, documents):
    question = user_input.get().strip()
    if question:
        answer = get_chatbot_response(question, documents)
        messagebox.showinfo("Chatbot", f"Chatbot: {answer}")
        user_input.delete(0, tk.END)

# Function to create the chatbot GUI
def create_gui(documents):
    root = tk.Tk()
    root.title("Chatbot")

chat_label = tk.Label(root, text="Chatbot: Hi! I'm your chatbot assistant. How can I help you?")
    chat_label.pack(pady=10)

user_input = tk.Entry(root, width=50)
    user_input.pack(pady=10)
    user_input.focus()

submit_button = tk.Button(root, text="Send", command=lambda: handle_user_input(user_input, documents))
    submit_button.pack(pady=10)

root.mainloop()

# Main function to run the chatbot
def main():
    documents_folder = "documents"
    documents = read_documents(documents_folder)

create_gui(documents)

if __name__ == "__main__":
    main()

Social/Sharing Site (HTML)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Coffee Connect</title>
    <style>
        /* Add your custom CSS styles here */
		 body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            padding: 0;
        }
		    header {
        background-color: #00695C;
        color: #fff;
        padding: 20px;
        text-align: center;
    }

h1 {
        margin: 0;
    }

main {
        padding: 20px;
        max-width: 800px;
        margin: 0 auto;
    }

section {
        margin-bottom: 40px;
    }

h2 {
        margin-top: 0;
    }

form {
        display: grid;
        gap: 10px;
    }

label,
    input,
    button {
        width: 100%;
        padding: 10px;
    }

label {
        font-weight: bold;
    }

button {
        background-color: #00695C;
        color: #fff;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s ease-in-out;
    }

button:hover {
        background-color: #004D40;
    }

ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

li {
        background-color: #fff;
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

h3 {
        margin-top: 0;
    }

img {
        max-width: 100%;
        height: auto;
        margin-top: 10px;
    }

</style>

</style>
</head>

<body>
    <header>
        <h1>Coffee Connect</h1>
    </header>
    <main>
        <section>
            <h2>Upload a Coffee Item</h2>
            <form id="coffeeForm">
                <label for="coffeeName">Coffee Name</label>
                <input type="text" id="coffeeName" required>
                <label for="brand">Brand</label>
                <input type="text" id="brand" required>
                <label for="roast">Roast</label>
                <input type="text" id="roast" required>
                <label for="image">Image</label>
                <input type="file" id="image" accept="image/*" required>
                <button type="submit">Upload</button>
            </form>
        </section>
        <section>
            <h2>Recent Coffee Items</h2>
            <ul id="coffeeList"></ul>
        </section>
    </main>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-database.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>
    <script>
        // Replace with your Firebase configuration
        const firebaseConfig = {
  apiKey: "API KEY",
  authDomain: "AUTHDOMAIN",
  projectId: "PROJECTID",
  storageBucket: "STORAGEBUCKET",
  messagingSenderId: "MESSAGESENDEERID",
  appId: "APP ID",
        };

// Initialize Firebase
        firebase.initializeApp(firebaseConfig);

// Get a reference to the Firebase database
        const database = firebase.database();
        const storage = firebase.storage();

// Get references to the HTML elements
        const coffeeForm = document.getElementById('coffeeForm');
        const coffeeList = document.getElementById('coffeeList');

// Upload form submission
        coffeeForm.addEventListener('submit', (e) => {
            e.preventDefault();

// Get form values
            const coffeeName = document.getElementById('coffeeName').value;
            const brand = document.getElementById('brand').value;
            const roast = document.getElementById('roast').value;
            const image = document.getElementById('image').files[0];

// Upload image to Firebase storage
            const storageRef = storage.ref(`coffeeImages/${image.name}`);
            const uploadTask = storageRef.put(image);

uploadTask.on('state_changed', (snapshot) => {
                // Handle upload progress
                const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                console.log(`Upload progress: ${progress}%`);
            }, (error) => {
                console.error(error);
            }, () => {
                // Image upload complete
                uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
                    // Save coffee data to database
                    const coffeeData = {
                        coffeeName: coffeeName,
                        brand: brand,
                        roast: roast,
                        image: downloadURL
                    };
                    const newCoffeeRef = database.ref('coffeeItems').push();
                    newCoffeeRef.set(coffeeData).then(() => {
                        console.log('Coffee item uploaded successfully');
                        // Reset form
                        coffeeForm.reset();
                    }).catch((error) => {
                        console.error(error);
                    });
                }).catch((error) => {
                    console.error(error);
                });
            });
        });

// Load recent coffee items from database
        const coffeeItemsRef = database.ref('coffeeItems');
        coffeeItemsRef.on('child_added', (snapshot) => {
            const coffeeData = snapshot.val();
            const coffeeItem = `
                <li>
                    <h3>${coffeeData.coffeeName}</h3>
                    <p><strong>Brand:</strong> ${coffeeData.brand}</p>
                    <p><strong>Roast:</strong> ${coffeeData.roast}</p>
                    <img src="${coffeeData.image}" alt="${coffeeData.coffeeName}">
                </li>
            `;
            coffeeList.insertAdjacentHTML('beforeend', coffeeItem);
        });

</script>
</body>

</html>

Image Resizer (Python)

import tkinter as tk
from tkinter import filedialog
from PIL import Image

# Function to open file explorer dialog and get selected file path
def browse_file():
    file_path = filedialog.askopenfilename()
    entry_file_path.delete(0, tk.END)
    entry_file_path.insert(tk.END, file_path)

# Function to resize and save image
def resize_image():
    file_path = entry_file_path.get()
    width = entry_width.get()
    height = entry_height.get()

try:
        # Open the image
        img = Image.open(file_path)

# Resize the image
        img = img.resize((int(width), int(height)))

# Save the resized image with "COPY" added to the filename
        new_file_path = file_path.replace(".","_COPY.")
        img.save(new_file_path)
        tk.messagebox.showinfo("Success", "Image resized and saved successfully as COPY.")
    except Exception as e:
        tk.messagebox.showerror("Error", str(e))

# Create main window
root = tk.Tk()
root.title("Image Resizer")

# Create file path entry
entry_file_path = tk.Entry(root, width=60)
entry_file_path.grid(row=0, column=0, columnspan=2, padx=10, pady=10)

# Create browse button
btn_browse = tk.Button(root, text="Browse", command=browse_file)
btn_browse.grid(row=0, column=2, padx=10, pady=10)

# Create width entry
label_width = tk.Label(root, text="Width:")
label_width.grid(row=1, column=0, padx=10, pady=10)
entry_width = tk.Entry(root, width=20)
entry_width.grid(row=1, column=1, padx=10, pady=10)

# Create height entry
label_height = tk.Label(root, text="Height:")
label_height.grid(row=2, column=0, padx=10, pady=10)
entry_height = tk.Entry(root, width=20)
entry_height.grid(row=2, column=1, padx=10, pady=10)

# Create resize button
btn_resize = tk.Button(root, text="Resize and Save", command=resize_image)
btn_resize.grid(row=3, column=0, columnspan=2, padx=10, pady=10)

# Start main loop
root.mainloop()

Simple Workflow Management App (Python)

import tkinter as tk
from tkinter import messagebox

# Dictionary to store workflows and tasks
workflows = {}

# Create main window
root = tk.Tk()
root.title("Workflow Management Tool")

# Create workflow section
workflow_frame = tk.Frame(root)
workflow_frame.pack(side=tk.LEFT, padx=10, pady=10)

workflow_label = tk.Label(workflow_frame, text="Workflows", font=("Helvetica", 16))
workflow_label.pack()

workflow_listbox = tk.Listbox(workflow_frame, font=("Helvetica", 12), height=10)
workflow_listbox.pack(fill=tk.BOTH, expand=True)

workflow_entry = tk.Entry(workflow_frame, font=("Helvetica", 12))
workflow_entry.pack(pady=5)

add_workflow_button = tk.Button(workflow_frame, text="Add Workflow", command=add_workflow)
add_workflow_button.pack()

delete_workflow_button = tk.Button(workflow_frame, text="Delete Workflow", command=delete_workflow)
delete_workflow_button.pack()

# Create task section
task_frame = tk.Frame(root)
task_frame.pack(side=tk.LEFT, padx=10, pady=10)

task_label = tk.Label(task_frame, text="Tasks", font=("Helvetica", 16))
task_label.pack()

task_listbox = tk.Listbox(task_frame, font=("Helvetica", 12), height=10)
task_listbox.pack(fill=tk.BOTH, expand=True)

task_entry = tk.Entry(task_frame, font=("Helvetica", 12))
task_entry.pack(pady=5)

add_task_button = tk.Button(task_frame, text="Add Task", command=add_task)
add_task_button.pack()

delete_task_button = tk.Button(task_frame, text="Delete Task", command=delete_task)
delete_task_button.pack()

# Bind the event to update task listbox when a different workflow is selected
workflow_listbox.bind("<<ListboxSelect>>", update_task_listbox)

root.mainloop()

Calculator App (Python)

import tkinter as tk

# Create a function to append a number or symbol to the current expression
def append_to_expression(value):
    current_expression = expression_label["text"]
    current_expression += value
    expression_label["text"] = current_expression

# Create a function to clear the current expression
def clear_expression():
    expression_label["text"] = ""

# Create a function to calculate the result
def calculate_result():
    try:
        current_expression = expression_label["text"]
        result = eval(current_expression)
        expression_label["text"] = str(result)
    except:
        expression_label["text"] = "Error"

# Create the main window
root = tk.Tk()
root.title("Calculator")

# Create a label to display the current expression
expression_label = tk.Label(root, text="", font=("Arial", 24), anchor="e")
expression_label.grid(row=0, column=0, columnspan=4)

# Create buttons for numbers and symbols
buttons = [
    "7", "8", "9", "/",
    "4", "5", "6", "*",
    "1", "2", "3", "-",
    "0", ".", "=", "+"
]

for i, button in enumerate(buttons):
    row = i // 4 + 1
    column = i % 4
    btn = tk.Button(root, text=button, font=("Arial", 20), command=lambda value=button: append_to_expression(value))
    btn.grid(row=row, column=column)
    
# Create a button to clear the expression
clear_btn = tk.Button(root, text="C", font=("Arial", 20), command=clear_expression)
clear_btn.grid(row=5, column=0)

# Create a button to calculate the result
calculate_btn = tk.Button(root, text="=", font=("Arial", 20), command=calculate_result)
calculate_btn.grid(row=5, column=2, columnspan=2)

# Start the main loop
root.mainloop()

Basic Maze Game (Python)

import pygame
import pygame.image
from pygame.locals import *
from tkinter import Tk
from tkinter.filedialog import askopenfilename
from tkinter.messagebox import showinfo

# Initialize Pygame
pygame.init()

# Set up screen dimensions
screen_width = 640
screen_height = 480

# Set up display
screen = pygame.display.set_mode((screen_width, screen_height))
pygame.display.set_caption("Image Resizer")

# Function to display file explorer dialogue
def open_file_dialogue():
    Tk().withdraw()
    filename = askopenfilename()
    return filename

# Function to resize image
def resize_image(image_path, size):
    image = pygame.image.load(image_path)
    image = pygame.transform.scale(image, size)
    return image

# Get image file path using file explorer dialogue
image_file_path = open_file_dialogue()

# Resize selected image to 50x50 pixels
resized_image = resize_image(image_file_path, (50, 50))

# Set up clock to control frame rate
clock = pygame.time.Clock()

# Set up game variables
player_x = 0
player_y = 0
finish_x = screen_width - 50
finish_y = screen_height - 50
wall_width = 100
wall_height = 50
wall_x1 = screen_width/2 - wall_width/2
wall_y1 = screen_height/2 - wall_height/2
wall_x2 = 0  # Set x-coordinate for the new wall
wall_y2 = screen_height/4  # Set y-coordinate for the new wall
wall_x3 = 500  # Set x-coordinate for the new wall
wall_y3 = 100  # Set y-coordinate for the new wall

# Run game loop
running = True
while running:
    for event in pygame.event.get():
        if event.type == QUIT:
            running = False

# Get keys currently being pressed
    keys = pygame.key.get_pressed()

# Update player position based on arrow key inputs
    if keys[K_LEFT]:
        if player_x > 0:
            player_x -= 5
    if keys[K_RIGHT]:
        if player_x < screen_width - 50:
            player_x += 5
    if keys[K_UP]:
        if player_y > 0:
            player_y -= 5
    if keys[K_DOWN]:
        if player_y < screen_height - 50:
            player_y += 5

# Check for collision with walls
    if player_x + 50 > wall_x1 and player_x < wall_x1 + wall_width and player_y + 50 > wall_y1 and player_y < wall_y1 + wall_height:
        # Collision occurred with wall 1, move player back to previous position
        if keys[K_LEFT]:
            player_x += 5
        if keys[K_RIGHT]:
            player_x -= 5
        if keys[K_UP]:
            player_y += 5
        if keys[K_DOWN]:
            player_y -= 5

if player_x + 50 > wall_x2 and player_x < wall_x2 + wall_width and player_y + 50 > wall_y2 and player_y < wall_y2 + wall_height:
        # Collision occurred with wall 2, move player back to previous position
        if keys[K_LEFT]:
            player_x += 5
        if keys[K_RIGHT]:
            player_x -= 5
        if keys[K_UP]:
            player_y += 5
        if keys[K_DOWN]:
            player_y -= 5

if player_x + 50 > wall_x3 and player_x < wall_x3 + wall_width and player_y + 50 > wall_y3 and player_y < wall_y3 + wall_height:
        # Collision occurred with wall 2, move player back to previous position
        if keys[K_LEFT]:
            player_x += 5
        if keys[K_RIGHT]:
            player_x -= 5
        if keys[K_UP]:
            player_y += 5
        if keys[K_DOWN]:
            player_y -= 5

# Check for collision with finish line
    if player_x == finish_x and player_y == finish_y:
        # Player reached the finish line, end the game and display winner pop-up message
        running = False
        showinfo("Winner", "Congratulations! You reached the finish line!")

# Update screen
    screen.fill((255, 255, 255))  # Fill the screen with white color
    screen.blit(resized_image, (player_x, player_y))  # Draw the resized image at player's position
    pygame.draw.rect(screen, (0, 0, 0), pygame.Rect(wall_x1, wall_y1, wall_width, wall_height))  # Draw wall 1
    pygame.draw.rect(screen, (0, 0, 0), pygame.Rect(wall_x2, wall_y2, wall_width, wall_height))  # Draw wall 2
    pygame.draw.rect(screen, (0, 0, 0), pygame.Rect(wall_x3, wall_y3, wall_width, wall_height))  # Draw wall 3
    pygame.draw.rect(screen, (255, 0, 0), pygame.Rect(finish_x, finish_y, 50, 50))  # Draw finish line
    pygame.display.flip()  # Update the display

# Control frame rate
    clock.tick(60)

# Quit Pygame
pygame.quit()

Calculator App (HTML)

<!DOCTYPE html>
<html>
<head>
  <title>Calculator</title>
  <style>
    .calculator {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

.input-field {
      width: 100%;
      height: 50px;
      font-size: 18px;
      text-align: right;
      margin-bottom: 10px;
    }

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

.grid-item {
      width: 100%;
      height: 50px;
      font-size: 18px;
      text-align: center;
      background-color: #f0f0f0;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

.grid-item:hover {
      background-color: #d3d3d3;
    }

.eval {
      background-color: #ffcc00;
      color: #fff;
    }

.eval:hover {
      background-color: #f0b400;
    }

.operator {
      background-color: #0099ff;
      color: #fff;
    }

.operator:hover {
      background-color: #0077cc;
    }
  </style>
</head>
<body>
  <div class="calculator">
    <input type="text" id="inputField" class="input-field" readonly>
    <div class="grid-container">
      <button class="grid-item" onclick="appendToInput('1')">1</button>
      <button class="grid-item" onclick="appendToInput('2')">2</button>
      <button class="grid-item" onclick="appendToInput('3')">3</button>
      <button class="grid-item operator" onclick="appendToInput('*')">*</button>
      <button class="grid-item" onclick="appendToInput('4')">4</button>
      <button class="grid-item" onclick="appendToInput('5')">5</button>
      <button class="grid-item" onclick="appendToInput('6')">6</button>
      <button class="grid-item operator" onclick="appendToInput('/')">/</button>
      <button class="grid-item" onclick="appendToInput('7')">7</button>
      <button class="grid-item" onclick="appendToInput('8')">8</button>
      <button class="grid-item" onclick="appendToInput('9')">9</button>
      <button class="grid-item operator" onclick="appendToInput('+')">+</button>
      <button class="grid-item" onclick="appendToInput('.')">.</button>
      <button class="grid-item" onclick="appendToInput('0')">0</button>
      <button class="grid-item" onclick="appendToInput('()')">()</button>
      <button class="grid-item operator" onclick="appendToInput('-')">-</button>
      <button class="grid-item operator" onclick="clearInput()">C</button>
      <button class="grid-item eval" onclick="evaluateExpression()">=</button>
    </div>
  </div>
<script>
    function appendToInput(value) {
      document.getElementById('inputField').value += value;
    }

function clearInput() {
      document.getElementById('inputField').value = '';
    }

function evaluateExpression() {
      let inputField = document.getElementById('inputField');
      let expression = inputField.value;
      let result;

try {
        result = eval(expression);
        if (isNaN(result)) {
          inputField.value = 'Error';
        } else {
          inputField.value = result;
        }
      } catch (error) {
        inputField.value = 'Error';
      }
    }
</script>
</body>
</html>

Source Code Library

Advanced Workflow Management App (Python)

Simple Workflow Management App (HTML)

Instant Messenger App/Website (index.html)

index.html and main.js are required. Scroll in this box to get both codes.

Instant Messenger App/Website (main.js)

Login Page (index.html)

index.html, app.js, style.css, and page2.html are required. Scroll in this box to get all codes.

app.js

style.css

page2.html

Chatbot App (Python)

Two options, with or without UI. Scroll in this box to get the code(s).

Without UI

With UI

Social/Sharing Site (HTML)

Image Resizer (Python)

Simple Workflow Management App (Python)

Calculator App (Python)

Basic Maze Game (Python)

Calculator App (HTML)