SILLY STORY GENERATOR USING JAVASCRIPT

Demo👀

How Do You Make A Silly Story Generator 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">
    <style>
    body {
      font-family: helvetica, sans-serif;
     
    }
    label {
      font-weight: bold;
    }
    div {
      padding-bottom: 20px;
    }
    input[type="text"] {
      padding: 5px;
      width: 150px;
    }
    p {
      background: #FFC125;
      color: #5E2612;
      padding: 10px;
      visibility: hidden;
    }
    </style>

3rd Step:-

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

HTML Code :-

 
 <div class="d-flex justify-content-center ">
      <div class="bg-danger p-3">
        <div class="d-flex justify-content-center ">
      <div class="form-group">
        <label for="customname">Enter custom name:</label><br>
        <input id="customname" type="text" placeholder="Enter Name... " class="form-control">
      </div>
</div>
<div class="d-flex justify-content-center ">
      <div class="bg-primary p-3 text-light">
        <label for="us">US</label><input id="us" type="radio" name="ukus" value="us" checked>
        <label for="uk">UK</label><input id="uk" type="radio" name="ukus" value="uk">
      </div>
</div>
<div class="d-flex justify-content-center">
      <div>
        <button class="randomize  btn btn-info">Generate random story</button>
      </div>
</div>
<div class="d-flex justify-content-center">
      <div class="col-4 col-md-6 col-lg-4 ">
        <p class="story">
</p>
</div>
</div>
</div>
</div>

4th Step:-

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

Javascript Code:-

 
<script type="text/javascript">
     //Complete variable and function definitions
var customName = document.getElementById('customname');
var randomize = document.querySelector('.randomize');
var story = document.querySelector('.story');

function randomValueFromArray(array){
  return array[Math.floor(Math.random()*array.length)];
}

//Raw Text Strings

let storyText ='It was 94 fahrenheit outside, so :insertx: went for a walk. When they got to :inserty:, they stared in horror for a few moments, then :insertz:. Bob saw the whole thing, but was not surprised — :insertx: weighs 300 pounds, and it was a hot day.';
let insertX = ['Willy the Goblin','Big Daddy','Father Christmas'];
let insertY = ['the soup kitchen','Disneyland','the White House'];
let insertZ =['sponteneously combusted','melted into a puddle on the sidewalk','turned into a slug and crawled away'];



//EVENT LISTENER AND PARTIAL FUNCTION DEFINITION
randomize.addEventListener('click', result);

function result() {
  let newStory = storyText;
  let xItem = randomValueFromArray(insertX);
  let yItem = randomValueFromArray(insertY);
  let zItem = randomValueFromArray(insertZ);
  newStory = newStory.replace(':insertx:',xItem);
  newStory = newStory.replace(':insertx:',xItem);
  newStory = newStory.replace(':inserty:',yItem);
  newStory = newStory.replace(':insertz:',zItem);


  if(customName.value !== '') {
    var name = customName.value;4
    newStory = newStory.replace('Bob', name);

  }

  if(document.getElementById("uk").checked) {
    var weight = Math.round(300/14) + ' stone';
    var temperature =  Math.round((94-32)*(5/9)) + ' centigrade';
    storyText.replace('94 fahrenheit0',temperature);
    storyText.replace('300 pounds', weight);

  }

  story.textContent = newStory;
  story.style.visibility = 'visible';
}
     </script>

1Add

SILLY STORY GENERATOR USING JAVASCRIPT

Demo👀

How Do You Make A Silly Story Generator Using JavaScript!

Post a Comment

1 Comments

Followers

Followers

Popular Posts

Best 40+ javascript projects for beginners With Source Code

DATE OF BIRTH | Age Calculator Using JavaScript | Beginner

EMPLOYEE MANAGEMENT SYSTEM USING JAVASCRIPT

1Add

SILLY STORY GENERATOR USING JAVASCRIPT

Demo👀

How Do You Make A Silly Story Generator Using JavaScript!

You may like these posts

Post a Comment

1 Comments

Followers

Followers

Social Plugin

Popular Posts

Best 40+ javascript projects for beginners With Source Code

DATE OF BIRTH | Age Calculator Using JavaScript | Beginner

EMPLOYEE MANAGEMENT SYSTEM USING JAVASCRIPT