Add files via upload

chioma827 · Aug 7, 2024 · 8464a4a · 8464a4a
1 parent d4e3c44
commit 8464a4a
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>  
+<html lang="en">  
+<head>  
+    <meta charset="UTF-8">  
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
+    <title>Interactive Storytelling Platform</title>  
+    <link rel="stylesheet" href="styles.css">  
+</head>  
+<body>  
+    <div id="app">  
+        <h1>Interactive Storytelling Platform</h1>  
+        <div id="story-list"></div>  
+        <form id="story-form">  
+            <input type="text" id="title" placeholder="Story Title" required>  
+            <textarea id="content" placeholder="Write your story..." required></textarea>  
+            <button type="submit">Save Story</button>  
+        </form>  
+    </div>  
+    <script src="script.js"></script>  
+</body>  
+</html>  
diff --git a/scripts.js b/scripts.js
@@ -0,0 +1,41 @@
+const storyList = document.getElementById('story-list');  
+const storyForm = document.getElementById('story-form');  
+
+// Fetch Stories  
+const fetchStories = async () => {  
+    const response = await fetch('http://localhost:5000/api/stories');  
+    const stories = await response.json();  
+    renderStories(stories);  
+}  
+
+// Render Stories  
+const renderStories = (stories) => {  
+    storyList.innerHTML = '';  
+    stories.forEach(story => {  
+        const storyElement = document.createElement('div');  
+        storyElement.innerHTML = `<h2>${story.title}</h2><p>${story.content}</p>`;  
+        storyList.appendChild(storyElement);  
+    });  
+}  
+
+// Handle Story Submission  
+storyForm.addEventListener('submit', async (e) => {  
+    e.preventDefault();  
+    const title = document.getElementById('title').value;  
+    const content = document.getElementById('content').value;  
+
+    await fetch('http://localhost:5000/api/stories', {  
+        method: 'POST',  
+        headers: {  
+            'Content-Type': 'application/json'  
+        },  
+        body: JSON.stringify({ title, content })  
+    });  
+
+    document.getElementById('title').value = '';  
+    document.getElementById('content').value = '';  
+    fetchStories();  
+});  
+
+// Initial Fetch  
+fetchStories();  
diff --git a/styles.css b/styles.css
@@ -0,0 +1,31 @@
+body {  
+    font-family: Arial, sans-serif;  
+    margin: 20px;  
+}  
+
+#app {  
+    max-width: 600px;  
+    margin: auto;  
+}  
+
+form {  
+    margin-top: 20px;  
+}  
+
+input[type="text"], textarea {  
+    width: 100%;  
+    padding: 10px;  
+    margin: 5px 0;  
+}  
+
+button {  
+    padding: 10px 15px;  
+    background-color: #007BFF;  
+    color: white;  
+    border: none;  
+    cursor: pointer;  
+}  
+
+button:hover {  
+    background-color: #0056b3;  
+}