Scribd
Upload
13 views4 pages

Coding

This document is an HTML template for a 'Story Writer' web application. It includes a user interface with a textarea for story ideas, a dropdown for selecting word count, and a button to generate a story. The JavaScript function generates a placeholder story based on the user's input after a brief delay.

Uploaded by

GANGADHARA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views4 pages

Coding

This document is an HTML template for a 'Story Writer' web application. It includes a user interface with a textarea for story ideas, a dropdown for selecting word count, and a button to generate a story. The JavaScript function generates a placeholder story based on the user's input after a brief delay.

Uploaded by

GANGADHARA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Story Writer</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #ffe4e1;

color: #444;

text-align: center;

padding: 20px;

.container {

max-width: 600px;

margin: auto;

background: white;

padding: 20px;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

button {

background-color: #ff7eb3;

color: white;

border: none;

padding: 10px 15px;

cursor: pointer;
border-radius: 5px;

font-size: 16px;

button:hover {

background-color: #ff4d94;

textarea {

width: 100%;

height: 100px;

padding: 10px;

border-radius: 5px;

border: 1px solid #ddd;

select {

padding: 5px;

border-radius: 5px;

</style>

</head>

<body>

<div class="container">

<h2>Story Writer</h2>

<label for="storyIdea">Enter a story idea:</label><br>

<textarea id="storyIdea" placeholder="Write your story idea


here..."></textarea><br><br>

<label for="wordCount">Choose word length:</label>

<select id="wordCount">
<option value="200">200-500 (Short)</option>

<option value="800">800-1000 (Medium)</option>

<option value="1500">1500-1900 (Long)</option>

</select><br><br>

<button onclick="generateStory()">Generate Story</button>

<h3>Generated Story:</h3>

<p id="outputStory">Your story will appear here...</p>

</div>

<script>

function generateStory() {

let idea = document.getElementById("storyIdea").value;

let length = document.getElementById("wordCount").value;

let output = document.getElementById("outputStory");

if (idea.trim() === "") {

output.innerHTML = "Please enter a story idea!";

return;

output.innerHTML = "Generating story about '" + idea + "' with " + length + "
words...";

setTimeout(() => {

output.innerHTML = "Once upon a time, " + idea + "... (Generated Story here)";

}, 2000);
}

</script>

</body>

</html>

You might also like