Scribd Logo
Upload

Welcome to Scribd!

  • Firebase

    Uploaded by

    gregoryhouseisthebest
    1 views3 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    1 views3 pages

    Firebase

    Uploaded by

    gregoryhouseisthebest

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 3

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Card Display</title>
    <style>
    /* General styles */
    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    }
    .container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    h1,
    h2 {
    text-align: center;
    }
    /* Form styles */
    #inputContainer {
    margin-bottom: 20px;
    }
    #cardContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    }
    .input-box {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    label {
    display: block;
    margin-bottom: 5px;
    }
    input[type="text"],
    textarea {
    width: calc(100% - 20px);
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    }
    button[type="submit"] {
    background-color: #4caf50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    }
    button[type="submit"]:hover {
    background-color: #45a049;
    }
    /* Card styles */
    .card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .card h3 {
    margin-top: 0;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <h1>Create a Card</h1>
    <div id="inputContainer" class="input-box">
    <form id="cardForm">
    <label for="title">Title:</label>
    <input type="text" id="title" name="title" required />
    <label for="description">Description:</label>
    <textarea id="description" name="description" required></textarea>
    <button type="submit">Submit</button>
    </form>
    </div>
    <h2>Cards</h2>
    <div id="cardContainer"></div>
    </div>

    <script>
    const databaseURL = "https://cards2-fa4f5-default-rtdb.firebaseio.com/";
    const cardsRef = "cards.json";

    // Listen for form submission


    const form = document.getElementById("cardForm");
    form.addEventListener("submit", (e) => {
    e.preventDefault();
    const title = document.getElementById("title").value;
    const description = document.getElementById("description").value;

    // Push the new card to the database


    fetch(`${databaseURL}${cardsRef}`, {
    method: "POST",
    body: JSON.stringify({ title, description }),
    })
    .then(() => {
    // Clear the form inputs
    document.getElementById("title").value = "";
    document.getElementById("description").value = "";
    fetchCards();
    })
    .catch((error) => console.error("Error:", error));
    });

    function fetchCards() {
    fetch(`${databaseURL}${cardsRef}`)
    .then((response) => response.json())
    .then((data) => {
    const cardContainer = document.getElementById("cardContainer");
    cardContainer.innerHTML = "";

    for (const key in data) {


    const cardData = data[key];
    const card = document.createElement("div");
    card.classList.add("card");
    card.innerHTML = `
    <h3>${cardData.title}</h3>
    <p>${cardData.description}</p>
    `;
    cardContainer.appendChild(card);
    }
    })
    .catch((error) => console.error("Error:", error));
    }

    // Fetch initial cards when the page loads


    fetchCards();
    </script>
    </body>
    </html>

    You might also like