Skip to content

Commit 523feb6

Browse files
kRxZykRxZykRxZykRxZy
authored
Update Wiki.html
1 parent c7343c4 commit 523feb6

File tree

1 file changed

+97
-45
lines changed

1 file changed

+97
-45
lines changed

‎Wiki/Wiki.html‎

Lines changed: 97 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,108 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
4-
<title>Global Wiki</title>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Advanced JSON Wiki</title>
57
<style>
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;
8+
body { font-family: Arial, sans-serif; margin: 40px; }
9+
#content { border: 1px solid #ccc; padding: 20px; min-height: 200px; }
10+
textarea { width: 100%; height: 100px; }
11+
button { margin-top: 10px; padding: 10px; }
12+
input, textarea { margin-bottom: 10px; }
13+
</style>
14+
</head>
15+
<body>
16+
<h1>Advanced JSON Wiki</h1>
17+
<label for="page">Page:</label>
18+
<input type="text" id="page" placeholder="Enter page name" oninput="loadPage()">
19+
20+
<div id="content"></div>
21+
22+
<h2>Edit Page</h2>
23+
<textarea id="editor" placeholder="Edit content here..."></textarea>
24+
<button onclick="savePage()">Save Page</button>
25+
<button onclick="deletePage()">Delete Page</button>
26+
<button onclick="createNewPage()">Create New Page</button>
27+
28+
<script>
29+
const apiUrl = 'https://jsonplaceholder.typicode.com/posts'; // Public API endpoint for testing
30+
let wikiData = {};
31+
32+
// Fetch mock JSON data from the API
33+
async function fetchJSON() {
34+
const response = await fetch(apiUrl);
35+
if (response.ok) {
36+
const data = await response.json();
37+
wikiData = data.reduce((acc, item) => {
38+
acc[item.title] = item.body;
39+
return acc;
40+
}, {});
41+
loadPage();
42+
} else {
43+
console.error('Error fetching JSON data:', response.statusText);
44+
}
1445
}
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);
46+
47+
// Load page content from the mock wikiData
48+
function loadPage() {
49+
const page = document.getElementById('page').value;
50+
const content = wikiData[page] || "This page does not exist. You can create it.";
51+
document.getElementById('content').innerText = content;
52+
document.getElementById('editor').value = wikiData[page] || '';
2253
}
23-
.page h3 {
24-
color: #333;
54+
55+
// Save or update a page in the wikiData (simulate saving to API)
56+
async function savePage() {
57+
const page = document.getElementById('page').value;
58+
const content = document.getElementById('editor').value;
59+
if (page) {
60+
wikiData[page] = content;
61+
await updateAPI();
62+
loadPage();
63+
alert(`Page "${page}" saved!`);
64+
} else {
65+
alert('Please enter a page name.');
66+
}
2567
}
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-
margin-right: 5px;
68+
69+
// Simulate deleting a page from the wikiData (simulate API request)
70+
async function deletePage() {
71+
const page = document.getElementById('page').value;
72+
if (page && wikiData[page]) {
73+
delete wikiData[page];
74+
await updateAPI();
75+
loadPage();
76+
alert(`Page "${page}" deleted!`);
77+
} else {
78+
alert('Page does not exist or is not selected.');
79+
}
3680
}
37-
.button:hover {
38-
background-color: #45a049;
81+
82+
// Create a new page in the wikiData and simulate saving to API
83+
async function createNewPage() {
84+
const page = prompt("Enter the name of the new page:");
85+
if (page && !wikiData[page]) {
86+
wikiData[page] = "This is a new page.";
87+
await updateAPI();
88+
loadPage();
89+
alert(`New page "${page}" created!`);
90+
} else {
91+
alert('Page already exists or invalid name.');
92+
}
3993
}
40-
.edit-area {
41-
width: 100%;
42-
height: 100px;
43-
margin-top: 10px;
44-
padding: 10px;
45-
font-size: 16px;
46-
border: 1px solid #ccc;
47-
border-radius: 5px;
94+
95+
// Simulate updating the API (mock API call for save/delete operations)
96+
async function updateAPI() {
97+
// In a real API, you'd send a PUT or PATCH request to update the server.
98+
console.log('Updated wiki data:', wikiData);
99+
// Example mock API call, which will log data, but won't actually save it.
48100
}
49-
</style>
50-
</head>
51-
<body>
52-
<h1>Global Wiki</h1>
53-
<div id="wiki"></div>
54-
<script src="https://cdn.jsdelivr.net/npm/wikijs@latest/dist/wiki.min.js"></script>
101+
102+
// Load the initial page when the page loads
103+
window.onload = () => {
104+
fetchJSON();
105+
};
106+
</script>
55107
</body>
56108
</html>

0 commit comments

Comments
 (0)