Skip to content

Commit f16c804

Browse files
kRxZykRxZykRxZykRxZy
authored
Update Wiki.html
1 parent 85a4567 commit f16c804

File tree

1 file changed

+154
-42
lines changed

1 file changed

+154
-42
lines changed

‎Wiki/Wiki.html

Lines changed: 154 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -3,79 +3,191 @@
33
<head>
44
<title>Global Wiki</title>
55
<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; }
6+
body {
7+
font-family: Arial, sans-serif;
8+
margin: 40px;
9+
background-color: #f4f7f6;
10+
}
11+
h1 {
12+
text-align: center;
13+
color: #4CAF50;
14+
}
15+
.page {
16+
border: 1px solid #ccc;
17+
padding: 15px;
18+
margin-bottom: 10px;
19+
background-color: #ffffff;
20+
border-radius: 8px;
21+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
22+
}
23+
.page h3 {
24+
color: #333;
25+
}
26+
.button {
27+
background-color: #4CAF50;
28+
color: white;
29+
padding: 10px 20px;
30+
border: none;
31+
cursor: pointer;
32+
border-radius: 5px;
33+
font-size: 16px;
34+
transition: background-color 0.3s;
35+
}
36+
.button:hover {
37+
background-color: #45a049;
38+
}
39+
.form-container {
40+
display: none;
41+
margin-top: 20px;
42+
background-color: #ffffff;
43+
border: 1px solid #ccc;
44+
border-radius: 8px;
45+
padding: 20px;
46+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
47+
}
48+
.form-container input,
49+
.form-container textarea {
50+
width: 100%;
51+
padding: 10px;
52+
margin-top: 10px;
53+
border: 1px solid #ccc;
54+
border-radius: 5px;
55+
font-size: 16px;
56+
}
57+
.form-container textarea {
58+
height: 150px;
59+
}
60+
.form-container button {
61+
background-color: #2196F3;
62+
color: white;
63+
padding: 10px 20px;
64+
border: none;
65+
cursor: pointer;
66+
border-radius: 5px;
67+
font-size: 16px;
68+
margin-top: 10px;
69+
}
70+
.form-container button:hover {
71+
background-color: #1976D2;
72+
}
1173
</style>
1274
</head>
1375
<body>
1476
<h1>Global Wiki</h1>
1577
<div id="wiki"></div>
1678

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>
79+
<button class="button" onclick="toggleForm()">Create New Wiki Page</button>
80+
81+
<div class="form-container" id="form-container">
82+
<h2>Create New Page</h2>
83+
<input id="new-title" placeholder="Page Title" /><br>
84+
<textarea id="new-content" placeholder="Page Content"></textarea><br>
85+
<button onclick="addPage()">Add Page</button>
86+
</div>
2187

2288
<script>
23-
const JSON_BIN_URL = 'https://api.jsonbin.io/v3/b/67c73ab2acd3cb34a8f4f304/latest';
89+
const JSON_BIN_URL = 'https://api.jsonbin.io/v3/b/67c73db1e41b4d34e4a0bfb1/latest;
2490

91+
// Function to toggle visibility of the form
92+
function toggleForm() {
93+
const formContainer = document.getElementById('form-container');
94+
formContainer.style.display = formContainer.style.display === 'none' || formContainer.style.display === '' ? 'block' : 'none';
95+
}
96+
97+
// Fetch and display the wiki pages
2598
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('');
99+
try {
100+
const res = await fetch(JSON_BIN_URL);
101+
if (!res.ok) {
102+
throw new Error(`Failed to fetch wiki pages: ${res.status}`);
103+
}
104+
const data = await res.json();
105+
const pages = data.record;
106+
document.getElementById('wiki').innerHTML = pages.map((page, index) => `
107+
<div class="page">
108+
<h3>${page.title}</h3>
109+
<p>${page.content}</p>
110+
<button class="button" onclick="editPage(${index})">Edit</button>
111+
<button class="button" onclick="deletePage(${index})">Delete</button>
112+
</div>
113+
`).join('');
114+
} catch (error) {
115+
console.error('Error fetching wiki:', error);
116+
}
37117
}
38118

119+
// Update the wiki after adding/editing/deleting pages
39120
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();
121+
try {
122+
const res = await fetch(JSON_BIN_URL, {
123+
method: 'PUT',
124+
headers: {
125+
'Content-Type': 'application/json',
126+
},
127+
body: JSON.stringify({ record: pages })
128+
});
129+
if (!res.ok) {
130+
throw new Error(`Failed to update wiki: ${res.status}`);
131+
}
132+
fetchWiki(); // Reload the wiki after the update
133+
} catch (error) {
134+
console.error('Error updating wiki:', error);
135+
}
46136
}
47137

138+
// Add a new page to the wiki
48139
async function addPage() {
49140
const title = document.getElementById('new-title').value;
50141
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);
142+
143+
if (!title || !content) {
144+
alert('Title and content cannot be empty.');
145+
return;
146+
}
147+
148+
try {
149+
const res = await fetch(JSON_BIN_URL);
150+
const data = await res.json();
151+
const pages = data.record;
152+
pages.push({ title, content });
153+
updateWiki(pages); // Update the wiki with the new page
154+
} catch (error) {
155+
console.error('Error adding page:', error);
156+
}
56157
}
57158

159+
// Edit an existing page
58160
async function editPage(index) {
59161
const newContent = prompt('Edit page content:');
60162
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);
163+
try {
164+
const res = await fetch(JSON_BIN_URL);
165+
const data = await res.json();
166+
const pages = data.record;
167+
pages[index].content = newContent;
168+
updateWiki(pages); // Update the wiki with the edited page
169+
} catch (error) {
170+
console.error('Error editing page:', error);
171+
}
66172
}
67173
}
68174

175+
// Delete a page from the wiki
69176
async function deletePage(index) {
70177
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);
178+
try {
179+
const res = await fetch(JSON_BIN_URL);
180+
const data = await res.json();
181+
const pages = data.record;
182+
pages.splice(index, 1); // Remove the page from the array
183+
updateWiki(pages); // Update the wiki with the remaining pages
184+
} catch (error) {
185+
console.error('Error deleting page:', error);
186+
}
76187
}
77188
}
78189

190+
// Fetch the wiki when the page loads
79191
fetchWiki();
80192
</script>
81193
</body>

0 commit comments

Comments
 (0)