First App

Here's a full, exhaustive beginner-friendly lesson that explains how to build a simple app using HTML, CSS, and JavaScript with a button that fetches data from an API and a hamburger menu for navigation.

Build a Simple App Using HTML, CSS & JS

Lesson Overview

In this lesson, we will:

Create a button in HTML that, when clicked, fetches trivia data from an API and displays it on the screen.
Style the button with CSS to make it visually appealing.
Use JavaScript to fetch and display data when the button is clicked.
Build a hamburger menu that appears when clicked and disappears when closed.

By the end of this lesson, you will understand:

How to create and style a button.
How to fetch data from an external API using JavaScript.
How to manipulate the DOM (Document Object Model) to display the fetched data.
How to create a responsive hamburger menu.

Step 1: Setting Up the Project

Before we start coding, we need to set up a project folder and files.

📁 Folder & File Structure

simple-app/
│── index.html
│── style.css
└── script.js

1️⃣ Create a Project Folder

Open VS Code (or any text editor).
Open your terminal and run:
```
mkdir simple-app
cd simple-app
```
Inside simple-app, create the three necessary files:
```
touch index.html style.css script.js
```

Step 2: Writing the HTML

Let's create a simple webpage structure with:

A button to fetch and display data.
A section where the fetched data will be displayed.
A hamburger menu for navigation.

📜 Code: `index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple API App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Hamburger Menu -->
    <nav>
        <input type="checkbox" id="menu-toggle">
        <label for="menu-toggle" class="menu-icon">&#9776;</label>
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

    <!-- Button to fetch API Data -->
    <div class="container">
        <h1>Trivia API Fetcher</h1>
        <button id="fetchData">Get Trivia Question</button>
        <div id="result"></div>
    </div>

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

Explanation

Hamburger Menu
- We use a checkbox (input) that will be checked when the menu is open.
- The label (label) with a menu-icon represents the ☰ (hamburger icon).
- The unordered list (ul.menu) contains the navigation links.
Button
- The button (button) triggers the API call when clicked.
- The div (#result) will display the fetched trivia question.

Step 3: Styling the Page

Now, let's style our webpage using CSS.

📜 Code: `style.css`

/* Reset default styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #f4f4f4;
}

/* Container for the main content */
.container {
    margin-top: 50px;
}

/* Style the button */
button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 5px;
}

button:hover {
    background-color: #0056b3;
}

/* Style the API result */
#result {
    margin-top: 20px;
    font-size: 18px;
    color: #333;
    padding: 10px;
    background: white;
    display: inline-block;
    border-radius: 5px;
}

/* ----- HAMBURGER MENU STYLES ----- */
nav {
    position: relative;
    background: #333;
    padding: 10px;
    text-align: left;
}

/* Hide the checkbox */
#menu-toggle {
    display: none;
}

/* Style the menu icon */
.menu-icon {
    font-size: 30px;
    cursor: pointer;
    color: white;
    padding: 10px;
    display: block;
}

/* Style the menu */
.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #333;
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    display: none;
}

/* Show the menu when checkbox is checked */
#menu-toggle:checked ~ .menu {
    display: block;
}

/* Menu items */
.menu li {
    padding: 10px;
    text-align: center;
}

.menu li a {
    color: white;
    text-decoration: none;
    display: block;
}

Explanation

The button is styled with hover effects and rounded corners.
The result div has padding and a background to make it readable.
The hamburger menu:
- The checkbox is hidden.
- When checked, the menu appears.
- The menu has a dark background and white text.

Step 4: Writing JavaScript to Fetch API Data

Now, we need to fetch data from an API and display it when the button is clicked.

📜 Code: `script.js`

document.getElementById("fetchData").addEventListener("click", () => {
    fetch("https://jservice.io/api/random") // Trivia API
        .then(response => response.json()) // Convert response to JSON
        .then(data => {
            const question = data[0].question; // Extract question
            document.getElementById("result").innerText = `Trivia: ${question}`;
        })
        .catch(error => {
            console.error("Error fetching data:", error);
            document.getElementById("result").innerText = "Failed to load trivia.";
        });
});

Explanation

Add an event listener to the button (fetchData).
Fetch trivia data from the API (https://jservice.io/api/random).
Extract the trivia question from the response.
Display the question in the #result div.
Handle errors by displaying a message if the API fails.

Step 5: Testing the App

Open index.html in your browser.
Click the "Get Trivia Question" button.
See a random trivia question appear on the screen.
Click the ☰ hamburger menu to open the navigation.
Click outside the menu to close it.

Step 6: Deploying the App

Upload to GitHub & Enable GitHub Pages

Initialize Git:

git init
git add .
git commit -m "Initial commit - Simple API App"

Push to GitHub:

git remote add origin https://github.com/YOUR_GITHUB_USERNAME/simple-app.git
git push -u origin main

Enable GitHub Pages:
- Go to GitHub Repository > Settings > Pages.
- Set Branch to main and click Save.
- Your app is now live at:
```
https://your-github-username.github.io/simple-app/
```

Final Summary

✅ Created a button to fetch trivia data
✅ Styled the button and page using CSS
✅ Used JavaScript to fetch and display data
✅ Built a hamburger menu
✅ Deployed the app to GitHub Pages

🎉 You’ve built your first interactive web app in your local machine! 🚀

First App

Build a Simple App Using HTML, CSS & JS

Lesson Overview

Step 1: Setting Up the Project

📁 Folder & File Structure

1️⃣ Create a Project Folder

Step 2: Writing the HTML

📜 Code: index.html

Explanation

Step 3: Styling the Page

📜 Code: style.css

Explanation

Step 4: Writing JavaScript to Fetch API Data

📜 Code: script.js

Explanation

Step 5: Testing the App

Step 6: Deploying the App

Upload to GitHub & Enable GitHub Pages

Final Summary

📜 Code: `index.html`

📜 Code: `style.css`

📜 Code: `script.js`