Create edit.html

Author: kRxZykRxZy

src/Wiki/edit.html

@@ -0,0 +1,131 @@
+<style>
+  /* Container Styling */
+  .form-container {
+    background-color: #ffcccc;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 500px;
+    margin-bottom: 30px;
+    text-align: center;
+  }
+
+  /* Input and Textarea Styling */
+  input, textarea {
+    width: 100%;
+    padding: 15px;
+    margin-bottom: 15px;
+    border-radius: 8px;
+    border: 2px solid #e60000;
+    font-size: 1rem;
+    outline: none;
+    transition: all 0.3s ease-in-out;
+  }
+
+  /* Focus Effect for Input and Textarea */
+  input:focus, textarea:focus {
+    border-color: #ff4d4d;
+    box-shadow: 0 0 5px rgba(255, 77, 77, 0.5);
+  }
+
+  /* Textarea Height Adjustment */
+  textarea {
+    height: 150px;
+    resize: vertical;
+  }
+
+  /* Button Styling */
+  button {
+    background-color: #e60000;
+    color: white;
+    padding: 12px 20px;
+    font-size: 1rem;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+
+  /* Hover effect for the button */
+  button:hover {
+    background-color: #ff4d4d;
+  }
+
+  /* Mobile Responsive Styling */
+  @media (max-width: 768px) {
+    .form-container {
+      width: 90%;
+      padding: 20px;
+    }
+
+    input, textarea {
+      font-size: 0.9rem;
+      padding: 12px;
+    }
+  }
+</style>
+
+<div class="form-container">
+  <form id="createWikiForm" onsubmit="return done(event)">
+    <input type="text" id="wikiTitle" placeholder="Title" required>
+    <textarea id="wikiContent" placeholder="Content" required></textarea>
+    <button type="submit">Done</button>
+  </form>
+</div>
+
+<script>
+  const backendUrl = 'https://thejsurlback.onrender.com/api';
+      const res = await fetch(`${backendUrl}/wikis`);
+    const data = await res.json();
+    
+    const id = data.findIndex(wiki => wiki.id === paramValue);
+    if (id === -1) {
+      alert('Wiki not found!');
+      return;
+    }
+    // Get URL parameters using URLSearchParams
+  const urlParams = new URLSearchParams(window.location.search);
+  const paramValue = urlParams.get('edit');
+
+    document.getElementById('wikiTitle').textContent = paramValue;
+    document.getElemantById('wikiContent').textContent = data.id.content
+
+  async function done(event) {
+    event.preventDefault(); // Prevent default form submission behavior
+
+    const res = await fetch(`${backendUrl}/wikis`);
+    const data = await res.json();
+    
+    const id = data.findIndex(wiki => wiki.id === paramValue);
+    if (id === -1) {
+      alert('Wiki not found!');
+      return;
+    }
+    
+    const wikiTitle = document.getElementById('wikiTitle').value;
+    const wikiContent = document.getElementById('wikiContent').value;
+    
+    const newTitle = prompt('New title:', wikiTitle);
+    const newContent = prompt('New content:', wikiContent);
+    const username = localStorage.getItem('username');
+
+    if (newTitle && newContent) {
+      const response = await fetch(`${backendUrl}/wikis/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: newTitle,
+          content: newContent,
+          owner: username,
+        }),
+      });
+
+      if (response.ok) {
+        alert('Wiki updated successfully!');
+      } else {
+        alert('Failed to update the wiki.');
+      }
+    }
+  }
+</script>