scrimba
Code with AI
Build with Firebase
Compliment generator – part 2
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Compliment generator – part 2
AboutCommentsNotes
Compliment generator – part 2
Expand for more info
index.js
run
preview
console
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.20.0/firebase-app.js"
import { getDatabase, ref, push, get } from "https://www.gstatic.com/firebasejs/9.20.0/firebase-database.js"

// Firebase configuration
const firebaseConfig = {
databaseURL: process.env.KUDOS_DB
}
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);
const complimentsRef = ref(database, "compliments");

// Select page elements
const generateButton = document.getElementById('generateButton');
const complimentDisplay = document.getElementById('compliment-display');
const complimentForm = document.getElementById('complimentForm');
const complimentInput = document.getElementById('complimentInput');

// Function to show/hide the submission form
toggleFormButton.addEventListener('click', () => {
complimentForm.classList.toggle('hidden');
complimentForm.classList.contains('hidden') ? toggleFormButton.textContent = 'Add Kudos' : toggleFormButton.textContent = 'Hide Form';
});

/** Challenge: Submit kudos
- Use the provided prompt to program the form to add compliments to the database.
**/

// Function to handle form submission
complimentForm.addEventListener('submit', (e) => {
e.preventDefault(); // Prevent the default form submission behavior

const newCompliment = complimentInput.value.trim(); // Get the value from the input field and trim any leading/trailing whitespace

if (newCompliment !== '') {
// Check if the input is not empty
push(complimentsRef, newCompliment) // Push the new compliment to the Firebase database
.then(() => {
complimentInput.value = ''; // Clear the input field
complimentForm.classList.add('hidden'); // Hide the form after submission
toggleFormButton.textContent = 'Add Kudos'; // Update the button text
})
.catch((error) => {
console.error('Error adding compliment:', error);
});
}
});
Console
/index.html?
-5:31