diff --git a/css/styles.css b/css/styles.css index d8688b7..db5b882 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,169 +1,125 @@ -/* Basic styling for body */ body { - font-family: Arial, sans-serif; - background-color: #2e2e2e; /* Dark background */ - color: #f4f4f4; /* Light text color */ - margin: 0; - padding: 0; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - } - - .container { - width: 100%; - max-width: 800px; - background: #333; /* Slightly lighter dark background */ - padding: 20px; - border-radius: 10px; - box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); - display: flex; - flex-direction: column; - height: 90vh; /* Full height minus some margin */ - box-sizing: border-box; - } - - h1 { - text-align: center; - color: #fff; - margin-bottom: 20px; - } - - /* Toggle switch styles */ - .toggle-container { - display: flex; - align-items: center; - margin: 10px 0; - } - - .switch { - position: relative; - display: inline-block; - width: 60px; - height: 34px; - margin-right: 10px; - } - - .switch input { - opacity: 0; - width: 0; - height: 0; - } - - .slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #555; - transition: .4s; - border-radius: 34px; - } - - .slider:before { - position: absolute; - content: ""; - height: 26px; - width: 26px; - border-radius: 50%; - left: 4px; - bottom: 4px; - background-color: white; - transition: .4s; - } - - input:checked + .slider { - background-color: #007BFF; - } - - input:checked + .slider:before { - transform: translateX(26px); - } - - #toggleLabel { - font-size: 16px; - color: #fff; - } - - /* Styling for message display */ - .messages-container { - flex: 1; /* Take up remaining space */ - overflow-y: auto; - margin-bottom: 20px; /* Space for form */ - padding-right: 10px; /* Padding to prevent content overlap */ - } - - .message { - background-color: #444; - border: 1px solid #555; - padding: 15px; - margin-bottom: 10px; - border-radius: 8px; - position: relative; - } - - .message p { - margin: 0; - color: #f4f4f4; - } - - .upvotes { - font-weight: bold; - color: #ffeb3b; /* Yellow color for upvotes */ - } - - .upvoteBtn { - background-color: #007BFF; - border: none; - padding: 6px 12px; - cursor: pointer; - border-radius: 5px; - color: #fff; - font-size: 14px; - position: absolute; - right: 10px; - bottom: 10px; - } - - .message-form { - display: flex; - flex-direction: column; - position: sticky; - bottom: 0; - background: #333; - padding: 10px; - box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.3); - border-top: 1px solid #555; - } - - textarea { - width: 100%; - height: 100px; - padding: 10px; - border: none; - border-radius: 8px; - box-sizing: border-box; - margin-bottom: 10px; - background-color: #555; - color: #f4f4f4; - resize: none; - } - - textarea::placeholder { - color: #888; - } - - .message-form button { - align-self: flex-end; - background-color: #007BFF; - border: none; - color: #fff; - padding: 10px 20px; - border-radius: 5px; - cursor: pointer; - font-size: 16px; - } - \ No newline at end of file + font-family: Arial, sans-serif; + background-color: #121212; + color: #ffffff; + margin: 0; + padding: 0; +} + +.container { + width: 90%; + max-width: 800px; + margin: 0 auto; + padding: 20px; +} + +h1 { + text-align: center; +} + +.message-form { + display: flex; + flex-direction: column; +} + +textarea { + padding: 10px; + margin-bottom: 10px; + border: 1px solid #444; + border-radius: 5px; + background-color: #222; + color: #fff; + width: 100%; +} + +button { + padding: 10px; + border: none; + border-radius: 5px; + background-color: #007bff; + color: #fff; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +.messages-container { + margin-top: 20px; +} + +.message { + background-color: #333; + padding: 15px; + margin-bottom: 10px; + border-radius: 5px; +} + +.message p { + margin: 0; +} + +.upvote { + background-color: #28a745; + border: none; + padding: 5px; + border-radius: 5px; + color: #fff; + cursor: pointer; +} + +.upvote:hover { + background-color: #218838; +} + +.toggle-container { + display: flex; + align-items: center; + margin-bottom: 20px; +} + +.switch { + position: relative; + display: inline-block; + width: 34px; + height: 20px; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + transition: .4s; + border-radius: 20px; +} + +.slider:before { + position: absolute; + content: ""; + height: 12px; + width: 12px; + border-radius: 50%; + left: 4px; + bottom: 4px; + background-color: white; + transition: .4s; +} + +input:checked + .slider { + background-color: #007bff; +} + +input:checked + .slider:before { + transform: translateX(14px); +} diff --git a/index.html b/index.html index 732ffea..4610794 100644 --- a/index.html +++ b/index.html @@ -32,6 +32,7 @@

Anonymous Message Board

+ diff --git a/js/app.js b/js/app.js index 0dfd335..7f52821 100644 --- a/js/app.js +++ b/js/app.js @@ -1,94 +1,75 @@ -// Initialize Firebase +// Your Firebase configuration const firebaseConfig = { - apiKey: "AIzaSyAcyNJq5x-HRsaBewFcfe0cix96fEgDcfY", - authDomain: "goanonymous-8126e.firebaseapp.com", - projectId: "goanonymous-8126e", - storageBucket: "goanonymous-8126e.appspot.com", - messagingSenderId: "334767869045", - appId: "1:334767869045:web:cb64e9d39c577df87fbc3c", - measurementId: "G-WLEFD6NJF2" - }; - - // Initialize Firebase - firebase.initializeApp(firebaseConfig); - const db = firebase.firestore(); - - // Handle form submission - document.getElementById('messageForm').addEventListener('submit', async (e) => { - e.preventDefault(); - const messageInput = document.getElementById('messageInput').value; - if (messageInput.trim() === '') return; - - await db.collection('messages').add({ - text: messageInput, - timestamp: firebase.firestore.FieldValue.serverTimestamp(), - upvotes: 0 + apiKey: "your-public-api-key", + authDomain: "your-project.firebaseapp.com", + projectId: "your-project-id", + storageBucket: "your-project.appspot.com", + messagingSenderId: "your-messaging-sender-id", + appId: "your-app-id", + measurementId: "your-measurement-id" +}; + +// Initialize Firebase +import { initializeApp } from "firebase/app"; +import { getAnalytics } from "firebase/analytics"; +import { getFirestore, collection, addDoc, onSnapshot, orderBy, query, doc, getDoc, updateDoc } from "firebase/firestore"; + +const app = initializeApp(firebaseConfig); +const analytics = getAnalytics(app); +const db = getFirestore(app); + +const messagesContainer = document.getElementById('messagesContainer'); +const messageForm = document.getElementById('messageForm'); +const messageInput = document.getElementById('messageInput'); +const toggleSort = document.getElementById('toggleSort'); +const toggleLabel = document.getElementById('toggleLabel'); + +let sortByLatest = true; + +messageForm.addEventListener('submit', async (e) => { + e.preventDefault(); + const messageText = messageInput.value; + if (messageText) { + await addDoc(collection(db, 'messages'), { + text: messageText, + upvotes: 0, + timestamp: new Date() }); - - document.getElementById('messageInput').value = ''; - loadMessages(); - }); - - // Load and display messages - async function loadMessages() { - const messagesContainer = document.getElementById('messagesContainer'); - messagesContainer.innerHTML = ''; - - let q; - if (sortByLatest) { - q = db.collection('messages').orderBy('timestamp', 'desc').limit(50); - } else { - q = db.collection('messages').orderBy('upvotes', 'desc').limit(50); - } - - try { - const querySnapshot = await q.get(); - querySnapshot.forEach((doc) => { - const messageData = doc.data(); - const messageElement = document.createElement('div'); - messageElement.classList.add('message'); - messageElement.innerHTML = ` -

${messageData.text}

- ${messageData.upvotes} Upvotes - - `; - messagesContainer.appendChild(messageElement); - }); - } catch (error) { - console.error('Error fetching messages:', error); - } + messageInput.value = ''; } - - // Handle upvote button clicks - document.getElementById('messagesContainer').addEventListener('click', async (e) => { - if (e.target.classList.contains('upvoteBtn')) { - const messageId = e.target.getAttribute('data-id'); - const messageRef = db.collection('messages').doc(messageId); - try { - // Update the upvote count in Firestore - await messageRef.update({ - upvotes: firebase.firestore.FieldValue.increment(1) - }); - - // Refresh the messages list to reflect the updated upvotes - loadMessages(); - } catch (error) { - console.error('Error updating upvotes:', error); - } - } - }); - - // Initialize sorting - let sortByLatest = true; - - document.addEventListener('DOMContentLoaded', () => { - loadMessages(); - - // Toggle switch event listener - document.getElementById('toggleSort').addEventListener('change', () => { - sortByLatest = !sortByLatest; - document.getElementById('toggleLabel').textContent = `Sort by: ${sortByLatest ? 'Latest' : 'Most Upvoted'}`; - loadMessages(); +}); + +const fetchMessages = async () => { + const q = query(collection(db, 'messages'), orderBy(sortByLatest ? 'timestamp' : 'upvotes', sortByLatest ? 'desc' : 'desc')); + onSnapshot(q, (snapshot) => { + messagesContainer.innerHTML = ''; + snapshot.forEach(doc => { + const data = doc.data(); + const messageDiv = document.createElement('div'); + messageDiv.classList.add('message'); + messageDiv.innerHTML = ` +

${data.text}

+ + `; + messagesContainer.appendChild(messageDiv); }); }); - \ No newline at end of file +}; + +fetchMessages(); + +messagesContainer.addEventListener('click', async (e) => { + if (e.target.classList.contains('upvote')) { + const id = e.target.getAttribute('data-id'); + const messageRef = doc(db, 'messages', id); + const docSnap = await getDoc(messageRef); + const newUpvotes = docSnap.data().upvotes + 1; + await updateDoc(messageRef, { upvotes: newUpvotes }); + } +}); + +toggleSort.addEventListener('change', () => { + sortByLatest = !sortByLatest; + toggleLabel.textContent = `Sort by: ${sortByLatest ? 'Latest' : 'Most Upvoted'}`; + fetchMessages(); +});