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:

javascript

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

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:

javascript

Paste the following CSS code into style.css:

css

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

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

---

Step 4: Create the FastAPI Backend

Install FastAPI and Uvicorn by running:

javascript

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

javascript

Paste the following code into main.py:

python

Start the server with:

javascript

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:

javascript

Paste the following JavaScript code into app.js:

javascript

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

html

---

Step 6: Run and Test the Full App

1. Start your FastAPI backend:

javascript

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.