|
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | +<head> |
| 4 | + <title>Global Wiki</title> |
| 5 | + <style> |
| 6 | + body { font-family: Arial, sans-serif; margin: 40px; } |
| 7 | + h1 { text-align: center; } |
| 8 | + .page { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; } |
| 9 | + textarea { width: 100%; height: 100px; } |
| 10 | + button { margin-top: 5px; } |
| 11 | + </style> |
| 12 | +</head> |
| 13 | +<body> |
| 14 | + <h1>Global Wiki</h1> |
| 15 | + <div id="wiki"></div> |
| 16 | + |
| 17 | + <h2>Create New Page</h2> |
| 18 | + <input id="new-title" placeholder="Page Title" /><br> |
| 19 | + <textarea id="new-content" placeholder="Page Content"></textarea><br> |
| 20 | + <button onclick="addPage()">Add Page</button> |
| 21 | + |
| 22 | + <script> |
| 23 | + const JSON_BIN_URL = 'https://api.jsonbin.io/v3/b/67c73ab2acd3cb34a8f4f304/latest'; |
| 24 | + |
| 25 | + async function fetchWiki() { |
| 26 | + const res = await fetch(JSON_BIN_URL); |
| 27 | + const data = await res.json(); |
| 28 | + const pages = data.record; |
| 29 | + document.getElementById('wiki').innerHTML = pages.map((page, index) => ` |
| 30 | + <div class="page"> |
| 31 | + <h3>${page.title}</h3> |
| 32 | + <p>${page.content}</p> |
| 33 | + <button onclick="editPage(${index})">Edit</button> |
| 34 | + <button onclick="deletePage(${index})">Delete</button> |
| 35 | + </div> |
| 36 | + `).join(''); |
| 37 | + } |
| 38 | + |
| 39 | + async function updateWiki(pages) { |
| 40 | + await fetch(JSON_BIN_URL, { |
| 41 | + method: 'PUT', |
| 42 | + headers: { 'Content-Type': 'application/json' }, |
| 43 | + body: JSON.stringify(pages) |
| 44 | + }); |
| 45 | + fetchWiki(); |
| 46 | + } |
| 47 | + |
| 48 | + async function addPage() { |
| 49 | + const title = document.getElementById('new-title').value; |
| 50 | + const content = document.getElementById('new-content').value; |
| 51 | + const res = await fetch(JSON_BIN_URL); |
| 52 | + const data = await res.json(); |
| 53 | + const pages = data.record; |
| 54 | + pages.push({ title, content }); |
| 55 | + updateWiki(pages); |
| 56 | + } |
| 57 | + |
| 58 | + async function editPage(index) { |
| 59 | + const newContent = prompt('Edit page content:'); |
| 60 | + if (newContent !== null) { |
| 61 | + const res = await fetch(JSON_BIN_URL); |
| 62 | + const data = await res.json(); |
| 63 | + const pages = data.record; |
| 64 | + pages[index].content = newContent; |
| 65 | + updateWiki(pages); |
| 66 | + } |
| 67 | + } |
| 68 | + |
| 69 | + async function deletePage(index) { |
| 70 | + if (confirm('Are you sure you want to delete this page?')) { |
| 71 | + const res = await fetch(JSON_BIN_URL); |
| 72 | + const data = await res.json(); |
| 73 | + const pages = data.record; |
| 74 | + pages.splice(index, 1); |
| 75 | + updateWiki(pages); |
| 76 | + } |
| 77 | + } |
| 78 | + |
| 79 | + fetchWiki(); |
| 80 | + </script> |
| 81 | +</body> |
| 82 | +</html> |
0 commit comments