Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@bjamre13
bjamre13 authored Jul 25, 2024
0 parents commit ae7e2da
Show file tree
Hide file tree
Showing 2 changed files with 222 additions and 0 deletions.
100 changes: 100 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" />
<!-- icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous" />
<!-- bootstrap cdn -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
<!-- our stylesheet -->
<link rel="stylesheet" href="style.css">
<title>Blog App</title>
</head>

<body onload="loadData()">
<!--Navbar Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Add New Blog Post</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="blog-form">
<div class="mb-3">
<label for="imageurl" class="form-label">Image URL</label>
<input type="url" class="form-control" id="imageurl" placeholder="https://images.hello.com/hello.png">
</div>
<div class="mb-3">
<label for="title" class="form-label">Title</label>
<input type="text" class="form-control" id="title" placeholder="Artificial Intelligence">
</div>
<div class="mb-3">
<label for="type" class="form-label">Type</label>
<input type="text" class="form-control" id="type" placeholder="AI">
</div>
<div class="mb-3">
<label for="description" class="form-label">Description</label>
<textarea rows="4" class="form-control" id="description"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="saveChanges()">Save Changes</button>
</div>
</div>
</div>
</div>

<!-- Card Modal -->
<div class="modal fade" id="showblog" tabindex="-1" aria-labelledby="showBlogLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body blog__modal__body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-light bg-light shadow-sm">
<div class="container-fluid">
<a class="navbar-brand fw-bold text-primary" href="#">Blog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
</ul>
<button type="button" class="btn btn-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
<i class="fas fa-plus"></i> Add New
</button>
</div>
</div>
</nav>

<div class="container">
<section>
<div class="row blog__container mt-5 mb-3"></div>
</section>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>

</html>
122 changes: 122 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
// Function to save changes (add or edit a blog post)
function saveChanges() {
const imageUrl = document.getElementById('imageurl').value;
const title = document.getElementById('title').value;
const type = document.getElementById('type').value;
const description = document.getElementById('description').value;

if (title && description) {
const blogPosts = JSON.parse(localStorage.getItem('blogPosts')) || [];
const blogPost = {
id: Date.now().toString(),
imageUrl,
title,
type,
description
};
blogPosts.push(blogPost);
localStorage.setItem('blogPosts', JSON.stringify(blogPosts));
loadData();
clearForm();
} else {
alert('Title and Description are required!');
}
}

// Function to load blog posts
function loadData() {
const blogPosts = JSON.parse(localStorage.getItem('blogPosts')) || [];
const blogContainer = document.querySelector('.blog__container');
blogContainer.innerHTML = '';

blogPosts.forEach(post => {
const blogCard = `
<div class="col-md-4 mb-3">
<div class="card">
<img src="${post.imageUrl}" class="card-img-top" alt="${post.title}">
<div class="card-body">
<h5 class="card-title">${post.title}</h5>
<p class="card-text">${post.description}</p>
<button class="btn btn-primary" onclick="viewBlog('${post.id}')">View</button>
<button class="btn btn-secondary" onclick="editBlog('${post.id}')">Edit</button>
<button class="btn btn-danger" onclick="deleteBlog('${post.id}')">Delete</button>
</div>
</div>
</div>
`;
blogContainer.innerHTML += blogCard;
});
}

// Function to view a blog post
function viewBlog(id) {
const blogPosts = JSON.parse(localStorage.getItem('blogPosts')) || [];
const post = blogPosts.find(post => post.id === id);
const blogModalBody = document.querySelector('.blog__modal__body');
blogModalBody.innerHTML = `
<img src="${post.imageUrl}" class="img-fluid mb-3" alt="${post.title}">
<h5>${post.title}</h5>
<p>${post.description}</p>
`;
const showBlogModal = new bootstrap.Modal(document.getElementById('showblog'));
showBlogModal.show();
}

// Function to edit a blog post
function editBlog(id) {
const blogPosts = JSON.parse(localStorage.getItem('blogPosts')) || [];
const post = blogPosts.find(post => post.id === id);
document.getElementById('imageurl').value = post.imageUrl;
document.getElementById('title').value = post.title;
document.getElementById('type').value = post.type;
document.getElementById('description').value = post.description;

// Remove the old saveChanges function
document.querySelector('.modal-footer .btn-primary').onclick = null;
document.querySelector('.modal-footer .btn-primary').setAttribute('onclick', `saveEditedChanges('${post.id}')`);

const addBlogModal = new bootstrap.Modal(document.getElementById('staticBackdrop'));
addBlogModal.show();
}

// Function to save edited blog post
function saveEditedChanges(id) {
const imageUrl = document.getElementById('imageurl').value;
const title = document.getElementById('title').value;
const type = document.getElementById('type').value;
const description = document.getElementById('description').value;

if (title && description) {
let blogPosts = JSON.parse(localStorage.getItem('blogPosts')) || [];
blogPosts = blogPosts.map(post => {
if (post.id === id) {
return { id, imageUrl, title, type, description };
}
return post;
});
localStorage.setItem('blogPosts', JSON.stringify(blogPosts));
loadData();
clearForm();
} else {
alert('Title and Description are required!');
}
}

// Function to delete a blog post
function deleteBlog(id) {
let blogPosts = JSON.parse(localStorage.getItem('blogPosts')) || [];
blogPosts = blogPosts.filter(post => post.id !== id);
localStorage.setItem('blogPosts', JSON.stringify(blogPosts));
loadData();
}

// Function to clear the form
function clearForm() {
document.getElementById('imageurl').value = '';
document.getElementById('title').value = '';
document.getElementById('type').value = '';
document.getElementById('description').value = '';

// Reset the saveChanges function
document.querySelector('.modal-footer .btn-primary').onclick = saveChanges;
}

0 comments on commit ae7e2da

Please sign in to comment.