Skip to content

Commit de0184e

Browse files
kRxZykRxZykRxZykRxZy
authored
Update edit.html
1 parent 04d8306 commit de0184e

File tree

1 file changed

+165
-121
lines changed

1 file changed

+165
-121
lines changed

‎src/Wiki/edit.html

Lines changed: 165 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,131 +1,175 @@
1-
<style>
2-
/* Container Styling */
3-
.form-container {
4-
background-color: #ffcccc;
5-
padding: 30px;
6-
border-radius: 10px;
7-
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
8-
width: 100%;
9-
max-width: 500px;
10-
margin-bottom: 30px;
11-
text-align: center;
12-
}
13-
14-
/* Input and Textarea Styling */
15-
input, textarea {
16-
width: 100%;
17-
padding: 15px;
18-
margin-bottom: 15px;
19-
border-radius: 8px;
20-
border: 2px solid #e60000;
21-
font-size: 1rem;
22-
outline: none;
23-
transition: all 0.3s ease-in-out;
24-
}
25-
26-
/* Focus Effect for Input and Textarea */
27-
input:focus, textarea:focus {
28-
border-color: #ff4d4d;
29-
box-shadow: 0 0 5px rgba(255, 77, 77, 0.5);
30-
}
31-
32-
/* Textarea Height Adjustment */
33-
textarea {
34-
height: 150px;
35-
resize: vertical;
36-
}
37-
38-
/* Button Styling */
39-
button {
40-
background-color: #e60000;
41-
color: white;
42-
padding: 12px 20px;
43-
font-size: 1rem;
44-
border: none;
45-
border-radius: 8px;
46-
cursor: pointer;
47-
transition: background-color 0.3s;
48-
}
49-
50-
/* Hover effect for the button */
51-
button:hover {
52-
background-color: #ff4d4d;
53-
}
54-
55-
/* Mobile Responsive Styling */
56-
@media (max-width: 768px) {
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Edit Scratch Coding Hut Wiki</title>
7+
<style>
8+
/* Similar styles as in the main page */
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
15+
body {
16+
font-family:
17+
font-family: 'Arial', sans-serif;
18+
background: #fff4f4;
19+
color: #333;
20+
padding: 40px;
21+
display: flex;
22+
flex-direction: column;
23+
align-items: center;
24+
text-align: center;
25+
}
26+
27+
h1 {
28+
font-size: 3rem;
29+
color: #ff4d4d;
30+
margin-bottom: 30px;
31+
font-weight: bold;
32+
}
33+
5734
.form-container {
58-
width: 90%;
59-
padding: 20px;
35+
background-color: #ffcccc;
36+
padding: 30px;
37+
border-radius: 10px;
38+
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
39+
width: 100%;
40+
max-width: 500px;
41+
margin-bottom: 30px;
42+
}
43+
44+
.form-container h2 {
45+
font-size: 1.5rem;
46+
color: #e60000;
47+
margin-bottom: 20px;
6048
}
6149

6250
input, textarea {
63-
font-size: 0.9rem;
64-
padding: 12px;
51+
width: 100%;
52+
padding: 15px;
53+
margin-bottom: 15px;
54+
border-radius: 8px;
55+
border: 2px solid #e60000;
56+
font-size: 1rem;
57+
outline: none;
6558
}
66-
}
67-
</style>
68-
69-
<div class="form-container">
70-
<form id="createWikiForm" onsubmit="return done(event)">
71-
<input type="text" id="wikiTitle" placeholder="Title" required>
72-
<textarea id="wikiContent" placeholder="Content" required></textarea>
73-
<button type="submit">Done</button>
74-
</form>
75-
</div>
76-
77-
<script>
78-
const backendUrl = 'https://thejsurlback.onrender.com/api';
79-
const res = await fetch(`${backendUrl}/wikis`);
80-
const data = await res.json();
81-
82-
const id = data.findIndex(wiki => wiki.id === paramValue);
83-
if (id === -1) {
84-
alert('Wiki not found!');
85-
return;
59+
60+
input:focus, textarea:focus {
61+
border-color: #ff4d4d;
62+
box-shadow: 0 0 5px rgba(255, 77, 77, 0.5);
8663
}
87-
// Get URL parameters using URLSearchParams
88-
const urlParams = new URLSearchParams(window.location.search);
89-
const paramValue = urlParams.get('edit');
90-
91-
document.getElementById('wikiTitle').textContent = paramValue;
92-
document.getElemantById('wikiContent').textContent = data.id.content
93-
94-
async function done(event) {
95-
event.preventDefault(); // Prevent default form submission behavior
96-
97-
const res = await fetch(`${backendUrl}/wikis`);
98-
const data = await res.json();
99-
100-
const id = data.findIndex(wiki => wiki.id === paramValue);
101-
if (id === -1) {
102-
alert('Wiki not found!');
103-
return;
64+
65+
button {
66+
background-color: #ff4d4d;
67+
color: white;
68+
padding: 15px 30px;
69+
border: none;
70+
border-radius: 8px;
71+
cursor: pointer;
72+
font-size: 1.1rem;
73+
transition: background-color 0.3s ease;
10474
}
105-
106-
const wikiTitle = document.getElementById('wikiTitle').value;
107-
const wikiContent = document.getElementById('wikiContent').value;
108-
109-
const newTitle = prompt('New title:', wikiTitle);
110-
const newContent = prompt('New content:', wikiContent);
111-
const username = localStorage.getItem('username');
112-
113-
if (newTitle && newContent) {
114-
const response = await fetch(`${backendUrl}/wikis/${id}`, {
115-
method: 'PUT',
116-
headers: { 'Content-Type': 'application/json' },
117-
body: JSON.stringify({
118-
title: newTitle,
119-
content: newContent,
120-
owner: username,
121-
}),
122-
});
12375

124-
if (response.ok) {
125-
alert('Wiki updated successfully!');
126-
} else {
127-
alert('Failed to update the wiki.');
76+
button:hover {
77+
background-color: #ff1a1a;
78+
}
79+
80+
/* Mobile Responsive Styling */
81+
@media (max-width: 768px) {
82+
.form-container {
83+
width: 90%;
84+
padding: 20px;
85+
}
86+
87+
h1 {
88+
font-size: 2.5rem;
89+
}
90+
91+
button {
92+
font-size: 1rem;
93+
padding: 12px 25px;
12894
}
12995
}
130-
}
131-
</script>
96+
</style>
97+
</head>
98+
<body>
99+
<h1>Edit Scratch Coding Hut Wiki</h1>
100+
101+
<div class="form-container">
102+
<h2>Edit Wiki Post</h2>
103+
<form id="editWikiForm">
104+
<input type="text" id="wikiTitle" placeholder="Title" required>
105+
<textarea id="wikiContent" placeholder="Content" required></textarea>
106+
<button type="submit">Save Changes</button>
107+
</form>
108+
</div>
109+
110+
<script>
111+
document.addEventListener('DOMContentLoaded', () => {
112+
const backendUrl = 'https://thejsurlback.onrender.com/api';
113+
const editWikiForm = document.getElementById('editWikiForm');
114+
const wikiTitleInput = document.getElementById('wikiTitle');
115+
const wikiContentInput = document.getElementById('wikiContent');
116+
const urlParams = new URLSearchParams(window.location.search);
117+
const wikiTitle = urlParams.get('edit');
118+
119+
if (!wikiTitle) {
120+
alert('No wiki title provided to edit.');
121+
window.location.href = 'index.html';
122+
return;
123+
}
124+
125+
// Fetch the wiki to edit
126+
const fetchWiki = async () => {
127+
const response = await fetch(`${backendUrl}/wikis`);
128+
const wikis = await response.json();
129+
const wiki = wikis.find(w => w.title === wikiTitle);
130+
131+
if (!wiki) {
132+
alert('Wiki not found!');
133+
window.location.href = 'index.html';
134+
} else {
135+
wikiTitleInput.value = wiki.title;
136+
wikiContentInput.value = wiki.content;
137+
}
138+
};
139+
140+
// Save edited wiki
141+
editWikiForm.addEventListener('submit', async (e) => {
142+
e.preventDefault();
143+
const updatedTitle = wikiTitleInput.value;
144+
const updatedContent = wikiContentInput.value;
145+
const username = localStorage.getItem('username');
146+
147+
if (!username) {
148+
alert('You must be logged in to edit a wiki. Go to https://scratch-coding-hut.netlify.app/account to log in.');
149+
return;
150+
}
151+
152+
const response = await fetch(`${backendUrl}/wikis`, {
153+
method: 'PUT',
154+
headers: { 'Content-Type': 'application/json' },
155+
body: JSON.stringify({
156+
title: updatedTitle,
157+
content: updatedContent,
158+
owner: username
159+
})
160+
});
161+
162+
if (response.ok) {
163+
alert('Wiki updated successfully!');
164+
window.location.href = 'index.html'; // Redirect back to the main page after saving
165+
} else {
166+
alert('Failed to update wiki!');
167+
}
168+
});
169+
170+
// Initialize the page with the wiki data
171+
fetchWiki();
172+
});
173+
</script>
174+
</body>
175+
</html>

0 commit comments

Comments
 (0)