Scribd
Upload
19 views3 pages

Firebase

Uploaded by

gregoryhouseisthebest
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
19 views3 pages

Firebase

Uploaded by

gregoryhouseisthebest
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 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