-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathweb 2 stories.html
155 lines (135 loc) · 3.85 KB
/
web 2 stories.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Write and share stories about history, fiction, or anything you love.">
<title>Stories Hub</title>
<link rel="stylesheet" href="style.css">
<style type="text/css" id="dcoder_stylesheet">/* General Styles */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: white;
color: black;
}
/* Header */
header {
background-color: #006400;
color: white;
padding: 20px;
text-align: center;
}
header h1 {
margin: 0;
}
header nav a {
color: white;
margin: 0 15px;
text-decoration: none;
}
header nav a:hover {
text-decoration: underline;
}
/* Sections */
.section {
padding: 20px;
margin: 20px auto;
max-width: 800px;
border: 2px solid black;
border-radius: 8px;
background-color: #f4f4f4;
}
/* Form */
form {
display: flex;
flex-direction: column;
}
form label {
font-weight: bold;
margin: 10px 0 5px;
}
form input, form textarea {
padding: 10px;
margin-bottom: 20px;
border: 1px solid black;
border-radius: 5px;
}
form button {
padding: 10px;
background-color: #006400;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
form button:hover {
background-color: #004b2e;
}
/* Stories */
#storyList .story {
padding: 15px;
border-bottom: 1px solid #ccc;
}
#storyList .story h3 {
margin: 0;
color: #006400;
}
#storyList .story p {
margin: 5px 0;
}</style></head>
<body>
<header>
<h1>Stories Hub</h1>
<nav> <a href="#add-story">Add a Story</a> <a href="#stories">Read Stories</a>
</nav>
</header>
<main>
<section id="add-story" class="section">
<h2>Add Your Story</h2>
<form id="storyForm"> <label for="title">Title</label>
<input type="text" id="title" name="title" placeholder="Story Title" required> <label for="author">Author</label>
<input type="text" id="author" name="author" placeholder="Your Name" required> <label for="content">Content</label> <textarea id="content" name="content" placeholder="Write your story here..." rows="10" required></textarea> <button type="submit">Submit Story</button>
</form>
</section>
<section id="stories" class="section">
<h2>Read Stories</h2>
<div id="storyList">
<article class="story">
<h3>The Rise and Glory of the Maurya Empire</h3>
<p><strong>Author:</strong> Anonymous</p>
<p> The Maurya Empire, one of the greatest dynasties in Indian history, rose to power in the 4th century BCE, reshaping the political, cultural, and spiritual landscape of the subcontinent... </p>
</article>
</div>
</section>
</main>
<footer>
<p>© 2025 Stories Hub. All rights reserved.</p>
</footer>
<script src="script.js"></script>
<script type="text/javascript" id="dcoder_script">// DOM Elements
const storyForm = document.getElementById('storyForm');
const storyList = document.getElementById('storyList');
// Handle Story Form Submission
storyForm.addEventListener('submit', function (e) {
e.preventDefault();
// Get form values
const title = document.getElementById('title').value;
const author = document.getElementById('author').value;
const content = document.getElementById('content').value;
// Create a new story element
const newStory = document.createElement('article');
newStory.classList.add('story');
// Add story details
newStory.innerHTML = `
<h3>${title}</h3>
<p><strong>Author:</strong> ${author}</p>
<p>${content}</p>
`;
// Append the new story to the story list
storyList.appendChild(newStory);
// Clear form fields
storyForm.reset();
});</script></body></html>