Let’s create a CSS and Data Website Like reddit!

Creating a simple Reddit-like website with HTML, CSS, and a bit of JavaScript for data interaction can be fun! Below is a basic example that demonstrates how you might structure such a site.

Step 1: HTML Structure

Create an index.html file:

#html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Reddit Clone</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Simple Reddit Clone</h1>
        <input type="text" id="postTitle" placeholder="Post Title">
        <textarea id="postContent" placeholder="Post Content"></textarea>
        <button id="submitPost">Submit</button>
    </header>

    <main>
        <h2>Posts</h2>
        <div id="postsContainer"></div>
    </main>

    <footer>
        <p>&copy; 2024 Simple Reddit Clone</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

Step 2: CSS Styles

Create a styles.css file:

#css
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

header {
    background-color: #ff4500;
    color: white;
    padding: 20px;
    text-align: center;
}

input, textarea {
    width: 90%;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px 20px;
    background-color: #008CBA;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #005f6b;
}

main {
    padding: 20px;
}

.post {
    background: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 10px 0;
    padding: 15px;
}

footer {
    text-align: center;
    padding: 10px;
    background-color: #e0e0e0;
}

Step 3: JavaScript Functionality

Create a script.js file:

#javescript
document.getElementById('submitPost').addEventListener('click', function() {
    const title = document.getElementById('postTitle').value;
    const content = document.getElementById('postContent').value;

    if (title && content) {
        const post = document.createElement('div');
        post.classList.add('post');
        
        post.innerHTML = `<h3>${title}</h3><p>${content}</p>`;
        
        document.getElementById('postsContainer').appendChild(post);
        
        // Clear the input fields
        document.getElementById('postTitle').value = '';
        document.getElementById('postContent').value = '';
    } else {
        alert('Please fill in both fields!');
    }
});

This is how We can make it!

This simple application allows users to create posts with a title and content. When the “Submit” button is clicked, the post is displayed below.

Next Steps

Add more features: Implement upvoting/downvoting, comments, or a backend to store posts.
Improve styling: Customize the CSS to match your design preferences.
Use a framework: Consider using a front-end framework like React or Vue.js for a more dynamic experience.

Feel free to expand on this and make it your own! If you have questions or need more features, let me know!

Reducing Bugs with Coding Filters in Complex Applications!

Coding filters can help reduce bugs by simplifying complex application logic. When developers use filters to isolate specific tasks, they decrease the likelihood of errors caused by unhandled conditions or improper data handling. This leads to more stable applications with fewer issues.

Author

Ayesha Malik

View all posts