<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chirpspace 🦜</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f2f5; /* Light gray background */
}
header {
background: #3b5998; /* Facebook color */
color: #ffffff;
padding: 10px;
text-align: center;
}
header h1 {
display: inline;
margin: 0;
}
main {
padding: 20px;
max-width: 600px;
margin: auto;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
form {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
input, textarea {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background: #3b5998; /* Facebook button color */
color: #ffffff;
border: none;
padding: 10px;
cursor: pointer;
font-size: 16px;
border-radius: 4px;
}
#chirps {
margin-top: 20px;
}
.chirp {
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 10px;
background-color: #f1f1f1;
}
.reply-form {
display: none;
margin-top: 10px;
padding: 10px;
background-color: #e9ecef;
border-radius: 4px;
}
.error {
color: red;
}
.success {
color: green;
}
</style>
</head>
<body>
<header>
<h1>Chirpspace 🦜</h1>
</header>
<main>
<form id="chirp-form">
<input type="text" id="username" placeholder="Your Name" required>
<textarea id="content" placeholder="What's happening?" required></textarea>
<button type="submit">Chirp</button>
</form>
<p id="feedback" class="error"></p>
<div id="chirps"></div>
</main>
<script>
// Mock database (array) to store chirps
let chirps = [];
async function fetchChirps() {
const chirpsDiv = document.getElementById('chirps');
chirpsDiv.innerHTML = ''; // Clear previous chirps
chirps.forEach((chirp, index) => {
const chirpElement = document.createElement('div');
chirpElement.classList.add('chirp');
chirpElement.innerHTML = `
<strong>🦜 ${chirp.username}:</strong> ${chirp.content} <button onclick="likeChirp(${index})">👍 Like (${chirp.likes})</button> <button onclick="toggleReplyForm(${index})">💬 Reply</button>
<div class="reply-form" id="reply-form-${index}">
<input type="text" id="reply-username-${index}" placeholder="Your Name" required>
<textarea id="reply-content-${index}" placeholder="Reply..." required></textarea>
<button onclick="submitReply(${index})">Reply</button>
</div>
`;
// Add replies if any
if (chirp.replies && chirp.replies.length > 0) {
const repliesDiv = document.createElement('div');
chirp.replies.forEach(reply => {
const replyElement = document.createElement('p');
replyElement.innerHTML = `<strong>↳ ${reply.username}:</strong> ${reply.content}`;
repliesDiv.appendChild(replyElement);
});
chirpElement.appendChild(repliesDiv);
}
chirpsDiv.appendChild(chirpElement);
});
}
function likeChirp(index) {
chirps[index].likes++;
fetchChirps(); // Refresh chirps
}
function toggleReplyForm(index) {
const replyForm = document.getElementById(`reply-form-${index}`);
replyForm.style.display = replyForm.style.display === 'block' ? 'none' : 'block';
}
function submitReply(index) {
const replyUsername = document.getElementById(`reply-username-${index}`).value;
const replyContent = document.getElementById(`reply-content-${index}`).value;
// Simulate saving the reply
if (!chirps[index].replies) {
chirps[index].replies = [];
}
chirps[index].replies.push({ username: replyUsername, content: replyContent });
// Reset reply form
document.getElementById(`reply-username-${index}`).value = '';
document.getElementById(`reply-content-${index}`).value = '';
fetchChirps(); // Refresh chirps
}
document.getElementById('chirp-form').addEventListener('submit', function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const content = document.getElementById('content').value;
// Simulate saving to a mock database
chirps.push({ username, content, likes: 0, replies: [] });
const feedback = document.getElementById('feedback');
// Display success message
feedback.textContent = 'Chirp posted!';
feedback.className = 'success'; // Set class for success styling
fetchChirps(); // Refresh chirps
document.getElementById('chirp-form').reset(); // Clear the form
});
window.onload = fetchChirps; // Load chirps on page load
</script>
</body>
</html>
Its just using a mock database I would like to make this something more. If anyone knows of way to line up the input boxes better on the reply to posted chirps would be appreciated.
1 Like
I’d really like a Pic too
On line 132 of your code, in the toggleReplyForm() function, change the display from ‘none’ to ‘flex’, not from ‘none’ to ‘block’.
Consider some more detailed, precise styling, as many of the elements do look a bit clumsy.
Nice work. A very interesting project.
That is exactly it Nickrg.
1 Like
Great! Glad to hear the solution worked for you.