STORY TELLER USING JAVASCRIPT

Demo👀

How Do You Make A Story Teller Using JavaScript!

1st Step:-

First you open your HTML Editor like - Notepad++,Subline Text,Brackets, etc.

Then start program use Html, Css, Javascript.

2nd Step:-

Copy the CSS code and then Paste your HTML Editor into <head> here </head> section.

CSS Code :-

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

3rd Step:-

Copy the html code and then Paste your HTML Editor into <body> here </body> section.

HTML Code :-

 
  <h1 class="text-center text-primary">
STORY TELLER USING JAVASCRIPT</h1>
<p align="center">
Fill-in each of the following empty fields using your own personal data
and then click on "Write Story." </p>
<div class="d-flex justify-content-center">
  <div>
    <form class="form-group">
  <div align="center" class="bg-info">
    <center>
    <table class="table table-sm">
<tr>
      <td ALIGN="RIGHT">First Name:</td>
      <td><input TYPE="text" NAME="firstName" SIZE="15" class="form-control"></td>
      <td></td>
      <td ALIGN="RIGHT">Something to Hide Behind:</td>
      <td><input TYPE="text" NAME="plant" SIZE="15" class="form-control"></td>
    </tr>
<tr>
      <td ALIGN="RIGHT">Last Name:</td>
      <td><input TYPE="text" NAME="lastName" SIZE="15" class="form-control"></td>
      <td></td>
      <td ALIGN="RIGHT">Friend's First Name:</td>
      <td><input TYPE="text" NAME="friend" SIZE="15" class="form-control"></td>
    </tr>
<tr>
      <td ALIGN="RIGHT">Male or Female:</td>
      <td><input TYPE="text" NAME="gender" SIZE="15" class="form-control"></td>
      <td></td>
      <td ALIGN="RIGHT">A Piece of Furniture:</td>
      <td><input TYPE="text" NAME="furn" SIZE="15" class="form-control"></td>
    </tr>
<tr>
      <td ALIGN="RIGHT">Age:</td>
      <td><input TYPE="text" NAME="age" SIZE="15" class="form-control"></td>
      <td></td>
      <td ALIGN="RIGHT">A word expressing Anger:</td>
      <td><input TYPE="text" NAME="cuss" SIZE="15" class="form-control"></td>
    </tr>
<tr>
      <td ALIGN="RIGHT">Mother's First Name:</td>
      <td><input TYPE="text" NAME="mom" SIZE="15" class="form-control"></td>
      <td></td>
      <td ALIGN="RIGHT">Your Favorite Beverage:</td>
      <td><input TYPE="text" NAME="drink" SIZE="15" class="form-control"></td>
    </tr>
<tr>
      <td ALIGN="RIGHT">Your Favorite Color:</td>
      <td><input TYPE="text" NAME="color" SIZE="15" class="form-control"></td>
      <td></td>
      <td ALIGN="RIGHT">A Room in Your House:</td>
      <td><input TYPE="text" NAME="room" SIZE="15" class="form-control"></td>
    </tr>
<tr>
      <td ALIGN="RIGHT">Your City:</td>
      <td><input TYPE="text" NAME="city" SIZE="15" class="form-control"></td>
      <td></td>
      <td ALIGN="RIGHT">Your Favorite Hobby:</td>
      <td><input TYPE="text" NAME="hobby" SIZE="15" class="form-control"></td>
    </tr>
<tr>
      <td ALIGN="RIGHT">Your State:</td>
      <td><input TYPE="text" NAME="state" SIZE="15" class="form-control"></td>
      <td></td>
      <td ALIGN="RIGHT">Your Father's Name:</td>
      <td><input TYPE="text" NAME="dad" SIZE="15" class="form-control"></td>
    </tr>
<tr>
      <td ALIGN="RIGHT">Type of animal:</td>
      <td><input TYPE="text" NAME="animal" SIZE="15" class="form-control"></td>
      <td></td>
      <td ALIGN="RIGHT">Your Favorite Store:</td>
      <td><input TYPE="text" NAME="store" SIZE="15" class="form-control"></td>
    </tr>
<tr>
      <td ALIGN="RIGHT">Favorite TV Show:</td>
      <td><input TYPE="text" NAME="tv" SIZE="15" class="form-control"></td>
      <td></td>
      <td ALIGN="RIGHT">Word to Describe Someone's Rear-End:</td>
      <td><input TYPE="text" NAME="butt" SIZE="15" class="form-control"></td>
    </tr>
</table>
</center>
</div>
<div class="bg-secondary p-1">
  <div align="center">
    <center>
      <p>
<input TYPE="button" VALUE="Write Story"ONCLICK="compute(this.form)" class="btn btn-success">
        <input TYPE="button" VALUE="Erase Story"ONCLICK="ClearForm(this.form)" class="btn btn-danger">
        <input TYPE="button" VALUE="Erase Data"ONCLICK="ClearData(this.form)" class="btn btn-warning">
        </p>
</center>
</div>
<div align="center">
    <center>
      <p>
<input TYPE="text" NAME="title" SIZE="64" class="form-control"><input TYPE="button" VALUE="Copy Story" onclick="myFunction1()" class=" btn-sm btn-primary "> <br>
        <textarea COLS="60" ROWS="6" name="story" wrap="virtual" id="Inputtxt1">

4th Step:-

Copy the JavaScript code and then Paste your HTML editor into the upper </body>.

Javascript Code:-

 
<script LANGUAGE="JavaScript">

<!--- hide from old browsers --->

function jumpBox(list) {
   location.href = list.options[list.selectedIndex].value
   }

 function myFunction1() {
             var copyTxt = document.getElementById("Inputtxt1");
             copyTxt.select();
             document.execCommand("copy");
            }

function compute(form)  {
    form.title.value = ("''A SHORT STORY,'' by " + form.firstName.value + " " + form.lastName.value);
    if(form.gender.value == "Male" || form.gender.value == "male") {var boyGirl = "boy"} else {var boyGirl = "girl"};
    if(form.gender.value == "Male" || form.gender.value == "male") {var heShe = "he"} else {var heShe = "she"};
    if(form.gender.value == "Male" || form.gender.value == "male") {var hisHer = "his"} else {var hisHer = "her"};
    if(form.gender.value == "Male" || form.gender.value == "male") {var himHer = "him"} else {var himHer = "her"};
    
    var pet = form.color.value + " " + form.animal.value

form.story.value = ("Once upon a time there was a young " + boyGirl + " named " + form.firstName.value + ".  " + form.firstName.value + " was " + form.age.value + " years old and lived in " + form.city.value + ", " + form.state.value + ".  While walking home from school one day, a " + pet + " jumped out from behind a " + form.plant.value + " and tackled " + form.firstName.value + " to the ground.  But just when " + heShe + " was about to let out a scream for help, " + form.firstName.value + " realized that the " + pet + " was only licking " + hisHer + " face, not trying to bite it off.  At that moment, " + form.firstName.value + " decided to keep the " + pet + " as a pet.  And on the way home " + heShe + " decided to name " + hisHer + " pet " + pet + " ''" + form.friend.value + ".''  When " + form.firstName.value + " and " + hisHer + " new pet finally got home, guess who was standing on the front porch?  That's right, it was " + form.firstName.value + "'s mother, " + form.mom.value + ".  And boy was she surprised to see a " + pet + " following " + form.firstName.value + " into the yard!  ''What in world is that?'' shouted " + form.mom.value + ".  ''It's a " + pet + ",'' answered " + form.firstName.value + ".  ''Dah, I can see that, " + form.firstName.value + ", but what on earth is it doing here?'' said " + form.mom.value + ".  ''It's my new pet!'' answered " + form.firstName.value +".  ''Oh you think so do you?'' remarked " + form.mom.value + ".  ''I wouldn't get your hopes up. You know how your father hates " + pet + "s.  But, well, I suppose you can keep him until your father comes home.''  And with that " + form.firstName.value + " grabbed " + form.friend.value + " by the scruff of the neck and led " + hisHer + " new pet into the house--even though " + heShe + " knew " + hisHer + " father was probably going to dissaprove.  Once in the house, " + form.firstName.value + " and " + form.friend.value + " played and played, that is until " + form.firstName.value + "'s favorite television show, ''"+ form.tv.value + ",'' started.  At that point " + form.firstName.value + " forgot all about " + form.friend.value + " having an unsupervised run of the house.  That is until half way through ''" + form.tv.value + ",'' when " + form.firstName.value + " was brought back to reality when " + heShe + " heard " + hisHer + " father shout, ''" + form.cuss.value + "!!  " + form.firstName.value + "! Get your " + form.butt.value + " in the " + form.room.value + "...NOW!!''  With that " + form.firstName.value + " rushed into the " + form.room.value + " to see what all the fuss was about.  When " + heShe + " entered the " + form.room.value + ", there stood " + hisHer + " father, " + form.dad.value + ", pointing toward the " + form.furn.value + ".  ''Will someone please explain that?'' asked " + hisHer + " father.  Then, as " + form.firstName.value + " followed " + hisHer + " father's finger to where it was pointing, " + heShe + " instantly knew what " + hisHer + " father was so upset about.  There, smack dab in the middle of the " + form.furn.value + ", was the biggest pile of " + form.animal.value + " doo-doo " + heShe + " had ever seen!  ''I don't EVEN want to know how that got there,'' said " + form.dad.value + ".  ''But you had better get it cleaned up now!  And you had better get rid of whatever it is that could have done such a thing!''  Well, knowing " + hisHer + " father as well as " + heShe + " did, " + form.firstName.value + " knew there was no sense even asking " + hisHer + " father if " + heShe + " could keep " + form.friend.value + " for a pet.  So without hesitation, " + form.firstName.value + " set out to find where " + form.friend.value + " was hiding.  After a few minutes of looking, " + form.firstName.value + " discovered " + form.friend.value + " crouched beneath the table that " + form.firstName.value + " did " + hisHer + " " + form.hobby.value + " on.  ''Come on, " + form.friend.value + ", it's time to find you a new home.  And hey, don't look at me that way, I'm not the one who did the dirty deed on the " + form.furn.value + "!'' scolded " + form.firstName.value + ".  ''Thanks to you I'll never get to have my own pet " + form.animal.value + "!!  And with that " + form.firstName.value + " led " + form.friend.value + " out of the house and down to the local " + form.store.value + ".  They had a pet section and " + form.firstName.value + " knew the owner would find " + form.friend.value + " a good home.  So after saying good-bye to " + form.friend.value + ", and thanking the owner of " + form.store.value + ", " + form.firstName.value + " walked backed home and attempted to dround " + hisHer + " sorrows by slamming down a half dozen " + form.drink.value + "s.  But " + form.firstName.value + "'s pitty party came to an abrupt end when " + hisHer + " father reminded " + himHer + " about the mess " + heShe + " had neglected to clean up.  And low and behold, midway through the clean-up, " + form.firstName.value + " suddenly became thankful that someone else was going to have to do it from now on.  The End.");

   
   } 

function ClearForm(form)  {
   form.story.value = "";
   form.title.value = "";
   }

function ClearData(form) {
   form.firstName.value = "";
   form.lastName.value = "";
   form.color.value = "";
   form.drink.value = "";
   form.city.value = "";
   form.state.value = "";
   form.mom.value = "";
   form.dad.value = "";
   form.animal.value = "";
   form.friend.value = "";
   form.store.value = "";
   form.furn.value = "";
   form.hobby.value = "";
   form.room.value = "";
   form.cuss.value = "";
   form.plant.value = "";
   form.age.value = "";
   form.gender.value = "";
   form.butt.value = "";
   form.tv.value = "";
   }

<!-- done hiding from old browsers -->
</script>

How To Download This Project

The first step you click on the ''Download Project'' button you will see a new popup, then click on again the ''Download'' button. Now your project will be downloaded.

1Add

STORY TELLER USING JAVASCRIPT | BEGINNER

Demo👀

How Do You Make A Story Teller Using JavaScript!

How To Download This Project

Project source Code

Related Project

Post a Comment

0 Comments

Followers

Followers

Popular Posts

DATE OF BIRTH | Age Calculator Using JavaScript | Beginner

Work Time Calculator Using JavaScript | Beginner

BINARY TO TEXT TRANSLATOR USING JAVASCRIPT | BEGINNER

1Add

STORY TELLER USING JAVASCRIPT | BEGINNER

Demo👀

How Do You Make A Story Teller Using JavaScript!

How To Download This Project

Project source Code

Story Teller Game Source Code

Related Project

You may like these posts

Post a Comment

0 Comments

Followers

Followers

Social Plugin

Popular Posts

DATE OF BIRTH | Age Calculator Using JavaScript | Beginner

Work Time Calculator Using JavaScript | Beginner

BINARY TO TEXT TRANSLATOR USING JAVASCRIPT | BEGINNER