Scribd
Upload
10 views5 pages

Chat Gpt20623

Uploaded by

subham.sourav19
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
10 views5 pages

Chat Gpt20623

Uploaded by

subham.sourav19
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<meta name=”viewport” content=”width=device-width, initial-


scale=1.0”>

<title>Blog Website</title>

<link rel=”stylesheet” href=”styles.css”>

</head>

<body>

<header>

<h1>My Blog</h1>

</header>

<main>

<section id=”blog-posts”>

<!—Blog posts will be dynamically added here →

</section>

<section id=”create-post”>

<h2>Create a New Post</h2>

<input type=”text” id=”post-title” placeholder=”Title”>

<textarea id=”post-content” placeholder=”Content”></textarea>

<button id=”submit-post”>Submit</button>

</section>

</main>

<script src=”script.js”></script>

</body>

</html>

Css
Body {

Font-family: Arial, sans-serif;

Margin: 0;

Padding: 0;

Header {

Background-color: #333;

Color: #fff;

Padding: 20px;

Text-align: center;

H1 {

Margin: 0;

Main {

Margin: 20px;

#create-post input,

#create-post textarea {

Display: block;

Margin-bottom: 10px;

Width: 100%;

#create-post button {

Background-color: #333;
Border: none;

Color: #fff;

Cursor: pointer;

Padding: 10px 20px;

#create-post button:hover {

Background-color: #555;

.post {

Background-color: #f9f9f9;

Border-radius: 5px;

Margin-bottom: 20px;

Padding: 20px;

.post h3 {

Margin-top: 0;

.post p {

Margin-bottom: 0;

Javascript

// Sample data for blog posts

Const posts = [

{ title: ‘First Post’, content: ‘This is my first blog post.’ },


{ title: ‘Second Post’, content: ‘This is my second blog post.’ }, ];

// Function to display all blog posts

Function displayPosts() {

Const blogPosts = document.getElementById(‘blog-posts’);

// Clear existing posts

blogPosts.innerHTML = ‘’;

// Create HTML for each post

Posts.forEach((post) => {

Const postElement = document.createElement(‘div’);

postElement.classList.add(‘post’);

const titleElement = document.createElement(‘h3’);

titleElement.innerText = post.title;

const contentElement = document.createElement(‘p’);

contentElement.innerText = post.content;

postElement.appendChild(titleElement);

postElement.appendChild(contentElement);

blogPosts.appendChild(postElement);

});

// Function to add a new blog post

Function addPost() {

Const titleInput = document.getElementById(‘post-title’);

Const contentInput = document.getElementById(‘post-content’); Const


newPost = {
Title: titleInput.value,

Content: contentInput.value,

};

// Add the new post to the array

Posts.push(newPost);

// Clear input fields

titleInput.value = ‘’;

contentInput.value = ‘’;

// Update the displayed posts

displayPosts();

// Display initial posts

displayPosts();

// Attach event listener to submit button

Const submit

You might also like