365 Memories - Social Media
About this app
Join 365 Memories, a fun social media platform to share your daily memories, connect with friends, and engage with the community!
365 Memories - Social Media 365 Memories Add Memory
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>365 Memories - Social Media</title>
<meta name="description" content="Join 365 Memories, a fun social media platform to share your daily memories, connect with friends, and engage with the community!">
<meta name="keywords" content="Social Media, Memories, Connect, Share, Comments, Favorites, Groups, Follow Friends">
<!-- Libraries -->
<!-- jQuery (3.6.0) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS (5.3.3) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Bootstrap JS (5.3.3) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<!-- Font Awesome (6.6.0) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
let posts = [];
let users = [];
function renderPosts() {
$('#posts').empty();
posts.forEach((post, index) => {
$('#posts').append(`
<div class="post mb-3 border rounded p-3 bg-light shadow-sm">
<h5>${post.title}</h5>
<p>${post.content}</p>
<button class="btn btn-info" onclick="toggleFavourite(${index})">${post.isFavourite ? 'Favourite 💖' : 'Add to Favourite'}</button>
<button class="btn btn-secondary" onclick="toggleComments(${index})">Comments (${post.comments.length})</button>
<div class="comments d-none" id="comments-${index}">
<div class="mb-2">
<input type="text" id="comment-input-${index}" class="form-control" />
<button class="btn btn-success mt-2" onclick="addComment(${index})">Comment</button>
</div>
<ul class="list-unstyled">
${post.comments.map(comment => `<li>${comment}</li>`).join('')}
</ul>
</div>
</div>
`);
});
}
function addPost() {
let title = $('#post-title').val();
let content = $('#post-content').val();
posts.push({ title, content, comments: [], isFavourite: false });
$('#post-title').val('');
$('#post-content').val('');
renderPosts();
}
function toggleFavourite(index) {
posts[index].isFavourite = !posts[index].isFavourite;
renderPosts();
}
function toggleComments(index) {
$(`#comments-${index}`).toggleClass('d-none');
}
function addComment(index) {
let comment = $(`#comment-input-${index}`).val();
if (comment) {
posts[index].comments.push(comment);
$(`#comment-input-${index}`).val('');
renderPosts();
}
}
document.addEventListener("DOMContentLoaded", function() {
$('#add-post').click(addPost);
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
body {
background: linear-gradient(to bottom, #83a4d4, #b6fbff);
color: #333;
}
#main-container {
background: rgba(255, 255, 255, 0.8);
border-radius: 8px;
padding: 20px;
margin-top: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.btn {
transition: background-color 0.3s;
}
.btn:hover {
background-color: #007bff;
color: white;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1 class="text-center">365 Memories</h1>
<div class="mb-4">
<input type="text" id="post-title" class="form-control mb-2" placeholder="Post Title" />
<textarea id="post-content" class="form-control mb-2" placeholder="Write your memory..." rows="3"></textarea>
<button id="add-post" class="btn btn-primary">Add Memory</button>
</div>
<div id="posts" class="mt-4"></div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!