Scribd
Upload
12 views8 pages

Harsh HTML

Uploaded by

Harsh Choudhary
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
12 views8 pages

Harsh HTML

Uploaded by

Harsh Choudhary
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
You are on page 1/ 8

A Project Report

SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENT FOR THE

AWARD OF THE DEGREE OF

BACHELOR OF ENGINEERING

(Computer Science & Engineering)

JULY – AUGUST , 2024

SUBMITTED BY:

NAME :Harsh Choudhary

UNIVERSITY UID : 22/NR/UT/CS002

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING


INDUS INTERNATIONAL UNIVERSITY BATHU IIU , BATHU UNA (HP)

1
RANDOM STORY GENERATE GAME

2
CANDIDATE'S DECLARATION
I hereby declare that the project titled “Random Story
Generator" ismy own work, and I have completed it under
the guidance andsupervision of My Mentors at Indus
International University. Theproject has been developed
as part of my Bachelor’s Of Computer
Science program, and all the work presented in this
project is originaland has not been copied from any
external sources without propercitations.
I further affirm that all the data, research, and findings
used in thisreport are authentic to the best of my
knowledge. Any assistancereceived in the preparation of
this report has been dulyacknowledged. I also confirm that
this project has not been submitted
for any other degree or academic qualification.
This work was completed between [start date] and [end
date], and Iam solely responsible for the content
presented here.

Signature: Harsh Choudhary


Date: 11/12/2024

3
Project: Random Story Generator

Objective:
Tocreate a web-based application that generates random,
short stories by combining elements from pre-defined
arrays.

Functionality:

1. User Interface:
o A simple, user-friendly interface with a clear heading.

o A prominent "Generate Story" button.

o A paragraph element to display the generated story.

2. Story Generation:
o Three arrays: beginnings, middles, and ends, each

containing a list of story segments.

o A JavaScript function triggered by the button click:

o Randomly selects one element from each array using


the Math.random) function.

o Concatenates the selected elements into a


complete story.

4
o Updates the paragraph element to display the
generated story.

Enhancements

1. Customization:
o Allow users to input their own story segments.

o Provide a form for users to add or modify elements in

the arrays.

2. Story Length:
o Implement options for generating stories of different

lengths (short, medium, long).


o Adjust the number of elements selected from each

array based on the chosen length.

4. Story Structure:
o Experiment with different story structures (e.g., linear,

branching, cyclical).
o Implement algorithms to generate stories with varying

plot twists and resolutions.

5. Visual Appeal:
o Customize the appearance of the generated stories

(e.g., font, color, formatting).

5
o Add animations or visual effects to enhance the user
experience.

6. User Feedback:
o Incorporate a feedback mechanism (e.g., rating

system, comments).
o Use user feedback to improve the story generation

algorithm and content.

Additional Considerations:

o Error Handling: Implement error handling to prevent


unexpected behavior, such as empty arrays or invalid
user input.

o Accessibility: Ensure the application is accessible to


users with disabilities by following web accessibility
guidelines (e.g., using appropriate HTML semantics,
providing alternative text for images).

o Performance:Optimize the JavaScript code to


minimize page load times and ensure smooth story
generation.

o Cross-Browser Compatibility: Test the application


on different browsers to ensure consistent behavior.
Code
6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Story Generator</title>
<link rel="stylesheet" href="sample.css">
<style>
/* Inline styles for quick demonstration, you can move these to sample.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
button {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007BFF;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
#story {
margin-top: 20px;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<h1>Random Story Generator</h1>
<button id="generateButton">Generate Story</button>
<p id="story"></p>
</div>

<script>

7
document.getElementById('generateButton').addEventListener('click', function() {
const beginnings = ['Once upon a time', 'In a galaxy far, far away', 'In an ancient land'];
const middles = ['there lived a mighty dragon', 'a hero was born', 'an adventure began'];
const ends = ['and they all lived happily ever after.', 'which changed the world forever.',
'marking the area as legendary.'];

const randomBeginning = beginnings[Math.floor(Math.random() * beginnings.length)];


const randomMiddle = middles[Math.floor(Math.random() * middles.length)];
const randomEnd = ends[Math.floor(Math.random() * ends.length)];

const story = `${randomBeginning}, ${randomMiddle}, ${randomEnd}`;


document.getElementById('story').innerText = story;
});
</script>
</body>
</html>

Output:

You might also like