GPT

Frontend Implementation

Blog App .error { color: red; margin-bottom: 1rem; } .form { margin-bottom: 2rem; } .form input { margin-right: 0.5rem; } .list { list-style: none; padding: 0; } .list-item { margin-bottom: 1rem;

Prompt text

Original English text. Replace placeholders with your own details.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Blog App</title>
 <style>
 .error {
 color: red;
 margin-bottom: 1rem;
 }

 .form {
 margin-bottom: 2rem;
 }

 .form input {
 margin-right: 0.5rem;
 }

 .list {
 list-style: none;
 padding: 0;
 }

 .list-item {
 margin-bottom: 1rem;
 padding: 1rem;
 border: 1px solid #eee;
 border-radius: 4px;
 }

 .list-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 1rem;
 }

 .list-actions button {
 margin-left: 0.5rem;
 }

 .meta {
 color: #666;
 font-size: 0.9rem;
 margin-top: 1rem;
 }
 </style>
</head>
<body>
 <div id="app">
 <h1>Blog App</h1>

 <section id="users">
 <h2>Users</h2>
 <div id="userError" class="error" style="display: none;"></div>

 <form id="userForm" class="form">
 <input type="email" name="email" placeholder="Email" required>
 <input type="text" name="name" placeholder="Name">
 <button type="submit">Add User</button>
 </form>

 <ul id="userList" class="list"></ul>
 </section>

 <section id="posts">
 <h2>Posts</h2>
 <div id="postError" class="error" style="display: none;"></div>

 <form id="postForm" class="form">
 <input type="text" name="title" placeholder="Title" required>
 <input type="text" name="content" placeholder="Content">
 <input type="number" name="authorId" placeholder="Author ID" required>
 <button type="submit">Add Post</button>
 </form>

 <ul id="postList" class="list"></ul>
 </section>
 </div>

 <script>
 const API_URL = 'http://localhost:3000/api'

 // Users
 async function loadUsers() {
 try {
 const response = await fetch(`${API_URL}/users`)
 const users = await response.json()
 const userList = document.getElementById('userList')
 userList.innerHTML = users.map(user => `
 <li class="list-item">
 <div class="list-header">
 <span>${user.name} (${user.email})</span>
 <div class="list-actions">
 <button onclick="deleteUser(${user.id})">Delete</button>
 </div>
 </div>
 </li>
 `).join('')
 } catch (error) {
 showError('userError', 'Failed to load users')
 }
 }

 async function createUser(event) {
 event.preventDefault()
 const form = event.target
 const data = {
 email: form.email.value,
 name: form.name.value
 }

 try {
 const response = await fetch(`${API_URL}/users`, {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json'
 },
 body: JSON.stringify(data)
 })

 if (!response.ok) throw new Error('Failed to create user')

 form.reset()
 loadUsers()
 } catch (error) {
 showError('userError', 'Failed to create user')
 }
 }

 async function deleteUser(id) {
 try {
 const response = await fetch(`${API_URL}/users/${id}`, {
 method: 'DELETE'
 })

 if (!response.ok) throw new Error('Failed to delete user')

 loadUsers()
 } catch (error) {
 showError('userError', `Failed to delete user ${id}`)
 }
 }

 // Posts
 async function loadPosts() {
 try {
 const response = await fetch(`${API_URL}/posts`)
 const posts = await response.json()
 const postList = document.getElementById('postList')
 postList.innerHTML = posts.map(post => `
 <li class="list-item">
 <div class="list-header">
 <h3>${post.title}</h3>
 <div class="list-actions">
 <button onclick="togglePublish(${post.id}, ${!post.published})">
 ${post.published ? 'Unpublish' : 'Publish'}
 </button>
 <button onclick="deletePost(${post.id})">Delete</button>
 </div>
 </div>
 <p>${post.content}</p>
 <p class="meta">By: ${post.author.name}</p>
 </li>
 `).join('')
 } catch (error) {
 showError('postError', 'Failed to load posts')
 }
 }

 async function createPost(event) {
 event.preventDefault()
 const form = event.target
 const data = {
 title: form.title.value,
 content: form.content.value,
 authorId: parseInt(form.authorId.value)
 }

 try {
 const response = await fetch(`${API_URL}/posts`, {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json'
 },
 body: JSON.stringify(data)
 })

 if (!response.ok) throw new Error('Failed to create post')

 form.reset()
 loadPosts()
 } catch (error) {
 showError('postError', 'Failed to create post')
 }
 }

 async function togglePublish(id, published) {
 try {
 const response = await fetch(`${API_URL}/posts/${id}`, {
 method: 'PUT',
 headers: {
 'Content-Type': 'application/json'
 },
 body: JSON.stringify({ published })
 })

 if (!response.ok) throw new Error('Failed to update post')

 loadPosts()
 } catch (error) {
 showError('postError', `Failed to update post ${id}`)
 }
 }

 async function deletePost(id) {
 try {
 const response = await fetch(`${API_URL}/posts/${id}`, {
 method: 'DELETE'
 })

 if (!response.ok) throw new Error('Failed to delete post')

 loadPosts()
 } catch (error) {
 showError('postError', `Failed to delete post ${id}`)
 }
 }

 function showError(elementId, message) {
 const element = document.getElementById(elementId)
 element.textContent = message
 element.style.display = 'block'
 setTimeout(() => {
 element.style.display = 'none'
 }, 3000)
 }

 // Event listeners
 document.getElementById('userForm').addEventListener('submit', createUser)
 document.getElementById('postForm').addEventListener('submit', createPost)

 // Initial load
 loadUsers()
 loadPosts()
 </script>
</body>
</html>

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →