Build Your Own Motivation Machine

In this tutorial, we will create a web application that displays random motivational quotes when a button is clicked. This project will teach you how to work with HTML, CSS, JavaScript, and a Python FastAPI backend in a beginner-friendly, step-by-step approach.

Step 1: Set Up the Project Folder

Create a folder named motivation-machine anywhere on your computer. This folder will contain all your files:


motivation-machine/

Inside this folder, we will create all our project files.

---

Step 2: Create the HTML Structure

Create a new file named index.html inside your project folder and paste the following code:

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Motivation Machine</title>
</head>
<body>
    <h1>The Motivation Machine</h1>
    <button id="motivateBtn">Give me motivation!</button>
    <div id="quoteBox">Your quote will appear here...</div></body>
</html>

This is the basic structure of your webpage. You now have a heading, a button, and a box where the quotes will appear.

Open the page in your browser to see it. It will be functional but unstyled.

---

Step 3: Add CSS Styling

Create a new file named style.css in the same folder. Your folder now looks like:


motivation-machine/
 ├── index.html
 └── style.css

Paste the following CSS code into style.css:

css
body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 40px;
    background: #f4f4f4;
}
button {
    padding: 15px 30px;
    font-size: 18px;
    cursor: pointer;
    margin-top: 20px;
}#quoteBox {
    margin-top: 40px;
    padding: 20px;
    font-size: 24px;
    background: white;
    border-radius: 10px;
    min-height: 50px;
}

Next, link this CSS file in your HTML. Open index.html and add the following line inside the <head> section, below the <title> tag:

html
<link rel="stylesheet" href="style.css">

Save and refresh your page. The styles should now be applied.

---

Step 4: Create the FastAPI Backend

Install FastAPI and Uvicorn by running:


pip install fastapi uvicorn

Create a new file named main.py in your project folder:


motivation-machine/
 ├── index.html
 ├── style.css
 └── main.py

Paste the following code into main.py:

python
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
import random
app = FastAPI()
origins = ["*"]
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
quotes = [
    "إضحك الدنيا تضحكلك",
    "إلي خلق ما يضيّع",
    "يْمين البكّوش في صِدْرو",
    "Oumourek f Chengerwenger"
]@app.get("/quote")
def get_quote():
    return {"quote": random.choice(quotes)}

Start the server with:


uvicorn main:app --reload --port 8000

Open your browser at http://localhost:8000/quote to test. You should see a JSON response with a random quote. The FastAPI docs are available at http://localhost:8000/docs.

---

Step 5: Add JavaScript for Interactivity

Create a new file named app.js in the project folder:


motivation-machine/
 ├── index.html
 ├── style.css
 ├── app.js
 └── main.py

Paste the following JavaScript code into app.js:

javascript
document.getElementById("motivateBtn").addEventListener("click", async () => {
    // Show loading text before fetching
    document.getElementById("quoteBox").textContent = "Loading...";
    // Fetch quote from backend
    const response = await fetch("http://localhost:8000/quote");
    const data = await response.json();    // Display quote
    document.getElementById("quoteBox").textContent = data.quote; 
});

Link this script in your HTML file, right before the closing </body> tag:

html
<script src="app.js"></script>

---

Step 6: Run and Test the Full App

1. Start your FastAPI backend:


uvicorn main:app --reload --port 8000

2. Open index.html using a local server (e.g., VSCode Live Server).

3. Click the "Give me motivation!" button. You should see random quotes appear in the box.

---

Step 7: Optional Enhancements

Add more quotes to the list.
Add a loading animation or fade-in effect.
Style the button or background for a better user experience.
Add a dark mode toggle.

---

With this project, you now understand:

HTML structure
CSS styling
JavaScript DOM manipulation
Fetch API and async/await
Backend API with FastAPI
Connecting front-end and back-end

This is a complete beginner-friendly full-stack web project.