Social Media Platform using TypeScript.
Create a vibrant social media platform using TypeScript. Learn how to implement user profiles, posts, likes, comments, and a news feed using frontend elements and TypeScript coding techniques.
Key Steps:
- Design the user profile and post creation sections.
- Implement TypeScript code to manage user profiles, posts, and interactions.
- Create functionality for users to create posts, like, and comment on posts.
- Display user profiles, posts, and the news feed dynamically.
- Apply CSS styles for an engaging and interactive social media platform.
HTML CODE - (INDEX.HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Social Media Platform</title>
</head>
<body>
<header>
<h1>Welcome to the Social Media Platform</h1>
</header>
<main>
<div class="user-profile">
<h2>Your Name</h2>
<input type="text" id="username-input" placeholder="Username">
<button id="create-profile-btn">Create Profile</button>
</div>
<div class="post-creation">
<h2>Create Your Post</h2>
<textarea id="post-content-input" placeholder="Write your post"></textarea>
<button id="create-post-btn">Create Post</button>
</div>
<output class="news-feed" id="news-feed"></output>
</main>
<script src="script.js"></script>
</body>
</html>
CSS CODING - (STYLE.CSS)
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
}
header {
background-color: #68affc;
color: rgb(255, 241, 241);
padding: 20px;
}
.user-profile, .post-creation {
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 20px;
}
.user-profile input, .post-creation textarea {
padding: 5px;
width: 70%;
margin-right: 10px;
}
.user-profile button, .post-creation button {
padding: 5px 10px;
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
}
.news-feed {
text-align: center;
}
.post {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
text-align: center;
}
.like-btn, .comment-btn {
padding: 5px 10px;
background-color: #ffc107;
color: black;
border: none;
cursor: pointer;
margin-right: 5px;
}
TYPESCRIPT CODING - (Script.ts)
const usernameInput = document.getElementById("username-input");
const createProfileButton = document.getElementById("create-profile-btn");
const postContentInput = document.getElementById("post-content-input");
const createPostButton = document.getElementById("create-post-btn");
const newsFeed = document.getElementById("news-feed");
let currentUser: { username: string, posts: string[] } | null = null;
createProfileButton.addEventListener("click", () => {
const username = usernameInput.value;
if (username) {
currentUser = { username, posts: [] };
displayUserProfile();
displayNewsFeed();
usernameInput.value = "";
}
});
createPostButton.addEventListener("click", () => {
if (currentUser) {
const postContent = postContentInput.value;
if (postContent) {
currentUser.posts.push(postContent);
displayNewsFeed();
postContentInput.value = "";
}
}
});
function displayUserProfile() {
if (currentUser) {
usernameInput.disabled = true;
createProfileButton.disabled = true;
createPostButton.disabled = false;
postContentInput.disabled = false;
}
}
function displayNewsFeed() {
if (currentUser) {
newsFeed.innerHTML = "";
currentUser.posts.forEach((post) => {
const postElement = document.createElement("div");
postElement.classList.add("post");
postElement.innerHTML = `
<p>${currentUser.username}</p>
<p>${post}</p>
<button class="like-btn">Like</button>
<button class="comment-btn">Comment</button>
`;
newsFeed.appendChild(postElement);
});
}
}
newsFeed.addEventListener("click", (event) => {
const target = event.target as HTMLButtonElement;
if (target.className === "like-btn") {
// Implement like functionality
} else if (target.className === "comment-btn") {
// Implement comment functionality
}
});
displayUserProfile();
Check out these code snippets to start your own social media platform using TypeScript and HTML/CSS. They're like the building blocks that you can modify and add onto to create a complete app. You can even add cool stuff like user logins, likes, comments, profiles, and more!
0 Comments