Add files via upload

TheBIMsider · Apr 22, 2024 · 1f24c08 · 1f24c08
1 parent f7da0d5
commit 1f24c08
Show file tree

Hide file tree

Showing 4 changed files with 302 additions and 0 deletions.
diff --git a/p3p2/index.html b/p3p2/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>GIF Gala RSVP</title>
+  <link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file -->
+  <script src="script.js" type="module" defer></script> <!-- Link to your JavaScript file -->
+</head>
+<body>
+  <header>
+    <h1>You're Invited to the GIF Gala: Where Memes Come to Life!</h1>
+    <h2>2/21/24</h2>
+  </header>
+
+  <main>
+    <section>
+      <h3>About the GIF Gala</h3>
+      <p>The GIF Gala is a vibrant and festive event where guests dress up as their favorite GIFs or memes. Join us for a night of laughter, creativity, and unforgettable moments as we bring internet culture to life!</p>
+    </section>
+
+    <div id="confirmation-message"></div>
+
+    <section>
+      <h3>RSVP</h3>
+      <form id="rsvp-form">
+        <label for="email">Email:</label>
+        <input type="email" id="email" required>
+
+        <label for="attendance">Attendance:</label>
+        <select id="attendance" required>
+          <option value="" disabled selected>Select an option</option>
+          <option value="yes">Yes, I'll be there!</option>
+          <option value="no">Sorry, I can't make it.</option>
+        </select>
+
+        <!-- New message field (initially hidden) -->
+        <div id="message-field" style="display: none;">
+          <label for="message">Message:</label>
+          <input type="text" id="message" required>
+        </div>
+        <button type="submit">Submit</button>
+      </form>
+    </section>
+
+
+    <button id="show-list" class="btn">Show Messages</button>
+    <ul class="messages">
+
+    </ul> 
+  </main>
+</body>
+</html>
diff --git a/p3p2/p3p2_prompts.txt b/p3p2/p3p2_prompts.txt
@@ -0,0 +1,11 @@
+### Firebase
+Please evaluate the JavaScript code for my Interactive Event Invite project:
+
+```
+```
+
+Your task is to add the Firebase Realtime Database to this project.
+* Save only the submitted message to the database if attendance === 'yes'.
+* All of the latest messages data needs to appear as list items in the messages list.
+
+Add detailed comments to help me understand the new Firebase code.
diff --git a/p3p2/script.js b/p3p2/script.js
@@ -0,0 +1,82 @@
+// Firebase imports
+import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js";
+import { getDatabase, ref, push, onValue } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-database.js";
+
+// Initialize Firebase app with your settings
+const appSettings = {
+  databaseURL: "https://gif-gala-da640-default-rtdb.firebaseio.com/"
+}
+const app = initializeApp(appSettings);
+const database = getDatabase(app);
+const messagesInDB = ref(database, "messages");
+
+// Get DOM elements
+const rsvpForm = document.getElementById('rsvp-form');
+const email = document.getElementById('email');
+const confirmationMessage = document.getElementById('confirmation-message');
+const showList = document.getElementById('show-list');
+const messageList = document.querySelector(".messages");
+const attendanceDropdown = document.getElementById('attendance');
+const messageField = document.getElementById('message-field');
+const body = document.body;
+
+// Event listener for attendance dropdown change
+attendanceDropdown.addEventListener('change', (event) => {
+  if (event.target.value === 'yes') {
+    messageField.style.display = 'block';
+  } else {
+    messageField.style.display = 'none';
+  }
+});
+
+// Event listener for form submission
+rsvpForm.addEventListener('submit', (event) => {
+  event.preventDefault();
+
+  const attendance = document.getElementById('attendance').value;
+  const message = document.getElementById('message').value;
+
+  if (attendance === 'yes') {
+    confirmationMessage.innerHTML = `🎉 Party on! We look forward to seeing you at the GIF Gala!`;
+    body.style.backgroundImage = 'url("https://media.giphy.com/media/l2JHPB58MjfV8W3K0/giphy.gif")';
+
+    // Save message to Firebase only if attendance is 'yes'
+    if (message.trim() !== '') {
+      push(messagesInDB, {
+        message: message,
+        timestamp: new Date().toISOString()
+      });
+    }
+  } else if (attendance === 'no') {
+    confirmationMessage.innerHTML = '😔 We will miss you at the GIF Gala!';
+    body.style.backgroundImage = 'url("https://media.giphy.com/media/JER2en0ZRiGUE/giphy.gif")';
+  }
+
+  confirmationMessage.style.display = 'block';
+  rsvpForm.reset();
+});
+
+// Event listener to show/hide messages
+showList.addEventListener('click', showMessages);
+
+function showMessages() {
+  if (messageList.style.display === 'none') {
+    messageList.style.display = 'flex';
+    showList.textContent = 'Hide Messages';
+  } else {
+    messageList.style.display = 'none';
+    showList.textContent = 'Show Messages';
+  }
+}
+
+// Function to display messages from Firebase
+onValue(messagesInDB, (snapshot) => {
+  messageList.innerHTML = ''; // Clear existing messages
+
+  snapshot.forEach((childSnapshot) => {
+    const messageData = childSnapshot.val();
+    const messageItem = document.createElement('li');
+    messageItem.textContent = `${messageData.message} - ${new Date(messageData.timestamp).toLocaleString()}`;
+    messageList.appendChild(messageItem);
+  });
+});
diff --git a/p3p2/styles.css b/p3p2/styles.css
@@ -0,0 +1,156 @@
+/* Reset default styles */
+body, h1, h2, h3, p, label, input, select, button {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f1f1f1;
+  color: #333;
+  line-height: 1.5;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  min-height: 100vh;
+}
+
+header {
+  background-color: #f07167;
+  text-align: center;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 24px;
+  color: white;
+  margin-bottom: 10px;
+}
+
+h2 {
+  font-size: 18px;
+  color: white;
+}
+
+main {
+  max-width: 600px;
+  margin: 20px auto;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background-color: rgba(255, 255, 255, 0.75);
+}
+
+h3 {
+  color: #00afb9;   
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+p {
+  margin-bottom: 20px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+input[type="email"],
+input,
+select {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #fff;
+  font-size: 16px;
+  margin-bottom: 18px;
+}
+
+button[type="submit"], .btn {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  background-color: #00afb9;
+  border: none;
+  border-radius: 4px;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.btn {
+  color: white;
+  margin-top: 12px;
+  background-color: #f07167;
+}
+
+#confirmation-message {
+  display: none;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 10px;
+  background-color: #f9f9f9;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 16px;
+}
+
+.messages {
+  display: none;
+  flex-wrap: wrap; /* Allow items to wrap */
+  align-items: flex-start; /* Align items to the start vertically */
+  list-style-type: none; /* Remove default list styling */
+  padding: 0; /* Remove default padding */
+  gap: 8px;
+}
+
+.messages li {
+  flex-grow: 1;
+  text-align: center;
+  padding: 5px 10px; /* Add padding for better readability */
+  border: 1px solid #ddd; /* Optional: Add a border for each item */
+  border-radius: 4px; /* Optional: Round the corners */
+  background-color: #f9f9f9; /* Optional: Add a background color */
+}
+
+/* Responsive styles */
+@media screen and (max-width: 600px) {
+  main {
+    margin: 10px;
+    padding: 10px;
+  }
+
+  h1 {
+    font-size: 20px;
+  }
+
+  h2 {
+    font-size: 16px;
+  }
+
+  h3 {
+    font-size: 18px;
+  }
+
+  p {
+    font-size: 14px;
+  }
+
+  input[type="email"],
+  select {
+    font-size: 14px;
+  }
+
+  button[type="submit"] {
+    font-size: 14px;
+  }
+
+  #confirmation-message {
+    font-size: 14px;
+  }
+}