Skip to content

Commit

Permalink
deploy
Browse files Browse the repository at this point in the history
  • Loading branch information
AdarshSahani003 committed Sep 6, 2024
1 parent e8cc389 commit 33c0851
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 97 deletions.
77 changes: 38 additions & 39 deletions css/styles.css
Original file line number Diff line number Diff line change
@@ -1,16 +1,24 @@
body {
font-family: Arial, sans-serif;
background-color: #121212;
color: #ffffff;
background-color: #2c2c2c;
color: white;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
}

.container {
width: 90%;
max-width: 800px;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
max-width: 600px;
margin: 0 auto;
height: 100%;
padding: 20px;
box-sizing: border-box;
}

h1 {
Expand All @@ -22,68 +30,59 @@ h1 {
flex-direction: column;
}

textarea {
#messageInput {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #444;
border: none;
border-radius: 5px;
background-color: #222;
color: #fff;
width: 100%;
resize: none;
}

button {
padding: 10px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
background-color: #5a5a5a;
color: white;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
background-color: #3c3c3c;
}

.messages-container {
flex-grow: 1;
overflow-y: auto;
margin-top: 20px;
}

.message {
background-color: #333;
background-color: #444;
padding: 15px;
margin-bottom: 10px;
border-radius: 5px;
margin-bottom: 10px;
}

.message p {
margin: 0;
}

.upvote {
background-color: #28a745;
.upvote-btn {
background-color: #888;
color: white;
border: none;
padding: 5px;
border-radius: 5px;
color: #fff;
cursor: pointer;
border-radius: 5px;
}

.upvote:hover {
background-color: #218838;
}

.toggle-container {
display: flex;
align-items: center;
margin-bottom: 20px;
.upvote-btn:hover {
background-color: #666;
}

/* Styling for the toggle button */
.switch {
position: relative;
display: inline-block;
width: 34px;
height: 20px;
width: 60px;
height: 34px;
}

.switch input {
Expand All @@ -101,25 +100,25 @@ button:hover {
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 20px;
border-radius: 34px;
}

.slider:before {
position: absolute;
content: "";
height: 12px;
width: 12px;
border-radius: 50%;
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}

input:checked + .slider {
background-color: #007bff;
background-color: #5a5a5a;
}

input:checked + .slider:before {
transform: translateX(14px);
transform: translateX(26px);
}
7 changes: 3 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,11 @@ <h1>Anonymous Message Board</h1>
</form>
</div>

<!-- Firebase SDKs -->
<!-- Firebase SDKs via CDN -->
<script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-analytics.js"></script>

<!-- Your app script -->
<script type="module" src="js/app.js"></script>
<!-- Your custom script -->
<script src="js/app.js"></script>
</body>
</html>
117 changes: 63 additions & 54 deletions js/app.js
Original file line number Diff line number Diff line change
@@ -1,75 +1,84 @@
// Your Firebase configuration
// Firebase Configuration (restricted key)
const firebaseConfig = {
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"
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
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore, collection, addDoc, onSnapshot, orderBy, query, doc, getDoc, updateDoc } from "firebase/firestore";
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore(app);

const messagesContainer = document.getElementById('messagesContainer');
// DOM Elements
const messageForm = document.getElementById('messageForm');
const messageInput = document.getElementById('messageInput');
const messagesContainer = document.getElementById('messagesContainer');
const toggleSort = document.getElementById('toggleSort');
const toggleLabel = document.getElementById('toggleLabel');

let sortByLatest = true;
let sortByLatest = true; // Default sorting by latest

// Add a new message
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()
});
messageInput.value = '';
}
});
if (messageText.trim() === '') return;

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 = `
<p>${data.text}</p>
<button class="upvote" data-id="${doc.id}">Upvote (${data.upvotes})</button>
`;
messagesContainer.appendChild(messageDiv);
});
// Add message to Firestore
await db.collection('messages').add({
text: messageText,
upvotes: 0,
timestamp: firebase.firestore.FieldValue.serverTimestamp()
});
};

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 });
}
messageInput.value = '';
fetchMessages(); // Refresh messages
});

// Toggle between Latest and Most Upvoted
toggleSort.addEventListener('change', () => {
sortByLatest = !sortByLatest;
toggleLabel.textContent = `Sort by: ${sortByLatest ? 'Latest' : 'Most Upvoted'}`;
fetchMessages();
});

// Fetch and display messages
async function fetchMessages() {
let query = db.collection('messages');
if (sortByLatest) {
query = query.orderBy('timestamp', 'desc');
} else {
query = query.orderBy('upvotes', 'desc');
}

const snapshot = await query.get();
messagesContainer.innerHTML = ''; // Clear previous messages

snapshot.forEach(doc => {
const message = doc.data();
const messageElement = document.createElement('div');
messageElement.classList.add('message');
messageElement.innerHTML = `
<p>${message.text}</p>
<button class="upvote-btn" data-id="${doc.id}">Upvote (${message.upvotes})</button>
`;
messagesContainer.appendChild(messageElement);
});

// Attach upvote event listeners
document.querySelectorAll('.upvote-btn').forEach(btn => {
btn.addEventListener('click', async (e) => {
const id = e.target.getAttribute('data-id');
const messageRef = db.collection('messages').doc(id);
const message = await messageRef.get();
const newUpvotes = (message.data().upvotes || 0) + 1;
await messageRef.update({ upvotes: newUpvotes });
fetchMessages(); // Refresh after upvoting
});
});
}

// Initial fetch
fetchMessages();

0 comments on commit 33c0851

Please sign in to comment.