"Silly story generator" assessment

foxjumper · October 21, 2019, 2:40am

Hello,
Thank you for all the fantastic information and guides published on MDN.
Here is my code for the exercise. Any feedback would be greatly appreciated.
Thank you in advance!

Index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <title>Silly story generator</title>

    <style>
    body {
      font-family: helvetica, sans-serif;
      width: 350px;
    }
    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>
  </head>

  <body>
    <div>
      <label for="customname">Enter custom name:</label>
      <input id="customname" type="text" placeholder="">
    </div>
    <div>
      <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>
      <button class="randomize">Generate random story</button>
    </div>
    <!-- Thanks a lot to Willy Aguirre for his help with the code for this assessment -->
    <p class="story"></p>
    <script src="main.js"></script>



  </body>
</html>

Main.js

let customName = document.getElementById('customname');
let randomize = document.querySelector('.randomize');
let story = document.querySelector('.story');

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

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 = ['spontaneously combusted', 'melted into a puddle on the sidewalk', 'turned into a slug and crawled away'];

randomize.addEventListener('click', result);

function result() {
  let newStory = storyText;
  let xItem = randomValueFromArray(insertX);
  let yItem = randomValueFromArray(insertY);
  let zItem = randomValueFromArray(insertZ);

  while (newStory.indexOf(':insert') > -1) {
    newStory = newStory.replace(':insertx:', xItem);
    newStory = newStory.replace(':inserty:', yItem);
    newStory = newStory.replace(':insertz:', zItem);
  }



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

  }

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

  }

  story.textContent = newStory ;
  story.style.visibility = 'visible';
}

yogeshdhengle145 · October 31, 2019, 12:46pm

Hi I’ve just completed the Silly story generator on the javascript first steps, can someone please assess my code:

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)];
}

let newStory = ‘’;

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 = [‘spontaneously combusted’,‘melted into a puddle on the sidewalk’,‘turned into a slug and crawled away’];

randomize.addEventListener(‘click’, result);

//Generate silly story
function result() {
let newStory = storyText;
if(customName.value !== ‘’) {
var name = customName.value;
newStory = newStory.replace(‘Bob’,name);
}

if(document.getElementById(“uk”).checked) {
var weight = Math.round(300/14);
var temperature = Math.round((94-32)*5/9);
newStory = newStory.replace(‘300 pounds’,weight+’ stone’);
newStory = newStory.replace(‘94 fahrenheit’,temperature+’ centigrade’);
}

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

story.textContent = newStory;

story.style.visibility = ‘visible’;
}

chrisdavidmills · November 4, 2019, 7:55pm

Hi @foxjumper!

Sorry for taking so long to reply. I have tested your code, and it looks to be working perfectly. I say well done!

chrisdavidmills · November 4, 2019, 7:59pm

Hello there @yogeshdhengle145! I have tested your code too, and I am pleased to say that it also worked perfectly! Well done.

yogeshdhengle145 · November 5, 2019, 6:58am

Hi,
Thank you for your reply and for checking the code

lsyh1210 · November 6, 2019, 2:29am

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 ";
let storyTextCn = “外边有34度，:insertx: 出去遛弯。当走到 :inserty: 时小伙伴们都惊呆了，他 :insertz: 了。李雷全程目睹但他并没有慌，因为 :insertx: 是一个270斤的胖子，天气又辣么热”;
let insertX = [‘Willy the Goblin’, ‘Big Daddy’, ‘Father Christmas’];
let insertY = [‘the soup kitchen’, ‘Disneyland’, ‘the White House’];
let insertZ = [‘spontaneously combusted’, ‘melted into a puddle on the sidewalk’, ‘turned into a slug and crawled away’];
randomize.addEventListener(‘click’, result);

function result() {

var newStory = storyText;
var newStoryCn = storyTextCn;
var xItem = randomValueFromArray(insertX);
var yItem = randomValueFromArray(insertY);
var zItem = randomValueFromArray(insertZ);

newStory = newStory.replace(’:insertx:’, xItem);
newStory = newStory.replace(’:inserty:’, yItem);
newStory = newStory.replace(’:insertz:’, zItem);
if (newStory.indexOf(’:insertx:’) !== -1) {
newStory = newStory.replace(’:insertx:’, xItem);
}else{
}

newStoryCn = newStoryCn.replace(’:insertx:’, xItem);
newStoryCn = newStoryCn.replace(’:inserty:’, yItem);
newStoryCn = newStoryCn.replace(’:insertz:’, zItem);
if (newStoryCn.indexOf(’:insertx:’) !== -1) {
newStoryCn = newStoryCn.replace(’:insertx:’, xItem);
}else{
}

if(customName.value !== ‘’) {
var name = customName.value;
newStory = newStory.replace(‘Bob’, name);
newStoryCn = newStoryCn.replace(‘李雷’, name);
}

if(document.getElementById(“uk”).checked) {
var weight = Math.round(300 * 0.071429);
var temperature = Math.round(94 / 17.2222);
newStory = newStory.replace(‘94 fahrenheit’, weight+’ stone’);
newStory = newStory.replace(‘300 pounds’, temperature+’ centigrade’);
story.textContent = newStory
} if (document.getElementById(“cn”).checked){
story.textContent = newStoryCn
}
else{
story.textContent = newStory ;
}
}

if my code has any bugs, let me know

chrisdavidmills · November 6, 2019, 3:35pm

Hi @lsyh1210, thanks for sending in your code!

Did you post all of it? It looks like you haven’t defined the randomize variable, so it doesn’t work.

lsyh1210 · November 7, 2019, 2:26am

try the entire code

document.getElementById(‘cn’).onclick = () => {
document.title = ‘笑话生成器’;
document.getElementById(‘lbl-customname’).textContent = ‘请输入自定义的名字：’;
document.getElementById(‘lbl-cn’).textContent = ‘中国’;
document.getElementById(‘lbl-us’).textContent = ‘美国’;
document.getElementById(‘lbl-uk’).textContent = ‘英国’;
document.getElementById(‘customname’).placeholder = ‘李雷’;
document.querySelector(’.randomize’).textContent = ‘随机生成笑话’;
};

document.getElementById(‘us’).onclick =
document.getElementById(‘uk’).onclick = () => {
document.title = ‘Silly story generator’;
document.getElementById(‘lbl-customname’).textContent = ‘Enter custom name:’;
document.getElementById(‘lbl-cn’).textContent = ‘CN’;
document.getElementById(‘lbl-us’).textContent = ‘US’;
document.getElementById(‘lbl-uk’).textContent = ‘UK’;
document.getElementById(‘customname’).placeholder = ‘Bob’;
document.querySelector(’.randomize’).textContent = ‘Generate random story’;
};

const customName = document.getElementById(‘customname’);
const randomize = document.querySelector(’.randomize’);
const story = document.querySelector(’.story’);

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

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 ";
let storyTextCn = “外边有34度，:insertx: 出去遛弯。当走到 :inserty: 时小伙伴们都惊呆了，他 :insertz: 了。李雷全程目睹但他并没有慌，因为 :insertx: 是一个270斤的胖子，天气又辣么热”;
let insertX = [‘Willy the Goblin’, ‘Big Daddy’, ‘Father Christmas’];
let insertY = [‘the soup kitchen’, ‘Disneyland’, ‘the White House’];
let insertZ = [‘spontaneously combusted’, ‘melted into a puddle on the sidewalk’, ‘turned into a slug and crawled away’];
randomize.addEventListener(‘click’, result);

function result() {

var newStory = storyText;
var newStoryCn = storyTextCn;
var xItem = randomValueFromArray(insertX);
var yItem = randomValueFromArray(insertY);
var zItem = randomValueFromArray(insertZ);

newStory = newStory.replace(’:insertx:’, xItem);
newStory = newStory.replace(’:inserty:’, yItem);
newStory = newStory.replace(’:insertz:’, zItem);
if (newStory.indexOf(’:insertx:’) !== -1) {
newStory = newStory.replace(’:insertx:’, xItem);
}else{
}

newStoryCn = newStoryCn.replace(’:insertx:’, xItem);
newStoryCn = newStoryCn.replace(’:inserty:’, yItem);
newStoryCn = newStoryCn.replace(’:insertz:’, zItem);
if (newStoryCn.indexOf(’:insertx:’) !== -1) {
newStoryCn = newStoryCn.replace(’:insertx:’, xItem);
}else{
}

if(customName.value !== ‘’) {
var name = customName.value;
newStory = newStory.replace(‘Bob’, name);
newStoryCn = newStoryCn.replace(‘李雷’, name);
}

if(document.getElementById(“uk”).checked) {
var weight = Math.round(300 * 0.071429);
var temperature = Math.round(94 / 17.2222);
newStory = newStory.replace(‘94 fahrenheit’, weight+’ stone’);
newStory = newStory.replace(‘300 pounds’, temperature+’ centigrade’);
story.textContent = newStory ;
} if (document.getElementById(“cn”).checked){
story.textContent = newStoryCn ;
}
else{
story.textContent = newStory ;
}
}

chrisdavidmills · November 7, 2019, 11:00am

@lsyh1210 can you send me your HTML as well? You seem to be referencing a lot more HTML features than the original version.

lsyh1210 · November 8, 2019, 12:59am

here you go:

笑话生成器

请输入自定义的名字：

中国美国英国

随机生成笑话

----- and CSS script —
p {
background-color:lightsalmon ;
}

lsyh1210 · November 8, 2019, 1:15am

that is wired… I copy-paste my HTML here but it disappeared…!

anyway, attached is the screenshot of the HTML. The language I use when learning is Chinese so there are jokes in Chinese and probably the HTML is different than the English version?

jokeHTML|690x434

chrisdavidmills · November 8, 2019, 9:39am

It is because when you paste raw HTML into discourse, it actually runs the HTML rather than showing the code. The ways round this are to:

Put the code online in a place like GitHub or CodePen and paste the link to it here.
Put your code between two rows of three backticks (`), as shown below.

```

your code here

```

lsyh1210 · November 9, 2019, 6:35pm

Gotcha!


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <title>笑话生成器</title>
    <link rel="stylesheet" href="styles/joke.css">
    <script src="joke.js" defer></script>
  </head>

  <body>
    <div>
      <label for="customname" id="lbl-customname">请输入自定义的名字：</label>
      <input id="customname" type="text" placeholder="李雷">
    </div>
    <div>
      <label for="cn" id="lbl-cn">中国</label><input id="cn" type="radio" name="country" value="cn" checked>
      <label for="us" id="lbl-us">美国</label><input id="us" type="radio" name="country" value="us">
      <label for="uk" id="lbl-uk">英国</label><input id="uk" type="radio" name="country" value="uk">
  </div>
  <div>
      <button class="randomize">随机生成笑话</button>
  </div>

  <p class="story"></p>
  <script src="scripts/joke.js"></script>
    
</body>
</html>

chrisdavidmills · November 11, 2019, 8:02am

@lsyh1210 great, thanks, now I can test it.

It is working perfect, well done!

And I love the extra Chinese option!

lsyh1210 · November 11, 2019, 1:33pm

：）

chrisdavidmills via Mozilla Discourse notifications@discourse.mozilla.org于2019年11月11日周一03:05写道：

B.S_Budniok · November 20, 2019, 4:29pm

Hi everyone,
I will share my code with you.
If you have any comments about him, please comment.
Have fun.

//////////////////////////////////////////////////////////////////////

// 1. 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)];
}

// 2. 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: weights 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 = ['spontaneously combusted',
              'melted into a puddle on the sidewalk',
              'turned into a slug and crawled away'];

// 3. 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:/g, randomValueFromArray(insertX));
newStory = newStory.replace(':inserty:', randomValueFromArray(insertY));
newStory = newStory.replace(':insertz:', randomValueFromArray(insertZ));

  if(customName.value !== '') {
    var name = customName.value;
    newStory = newStory.replace('Bob', customName.value);
  }
  
  if(document.getElementById("uk").checked) {
    var weight = Math.round(300 / 1.40000) + ' stone';
    var temperature =  Math.round((94 - 32) / 1.800000) + ' centigrade';
    newStory = newStory.replace('300 pounds',  Math.round(300 / 14.00000) + ' stone');
    newStory = newStory.replace('94 fahrenheit', Math.round((94 - 32) / 1.800000) + ' centigrade');
  }
  

  story.textContent = newStory;
  story.style.visibility = 'visible';
}

chrisdavidmills · November 21, 2019, 10:30am

Hi there @B.S_Budniok, and thanks for sending your code in!

I’ve tested this, and it seems to work perfectly; it does everything it’s supposed to do, and runs fine.

Well done on some great work.

mbrasseau · December 9, 2019, 3:59am

I have completed this assessment and my code is working perfectly. I really enjoyed this module.

One thing I noticed by reading all of these posts… I did not know that we could stack functions/methods(?) on top of one another. Like so,

newStory = newStory.replace().replace().replace();

When is this allowed and when is it not?

chrisdavidmills · December 9, 2019, 6:42am

@mbrasseau cool, glad you enjoyed it!

Generally chaining method calls together works when the previous method call has a return value that can have the next method call can be called on. So in the above chain, replace() works on strings; it wouldn’t work if one of the items in the chain returned a number, for example.

Bumidu_yasith · December 24, 2019, 5:21pm

const customName = document.getElementById('customname');

const randomize = document.querySelector('.randomize');

const story = document.querySelector('.story');

function randomValueFromArray(array){

  const random = Math.floor(Math.random()*array.length);

  return array[random];

}

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 = ['spontaneously combusted','melted into a puddle on the sidewalk','turned into a slug and crawled away'];

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 !== '') {

    const name = customName.value;

    newStory = newStory.replace('Bob',name);

  }

  if(document.getElementById("uk").checked) {

    const weight = Math.round(300*0.0714286) + ' stone';

    const temperature =  Math.round((94-32) * 5 / 9) + ' centigrade';

    newStory = newStory.replace('94 fahrenheit',temperature);

    newStory = newStory.replace('300 pounds',weight);

  }

  story.textContent = newStory;

  story.style.visibility = 'visible';

}

why this
“Cannot read property ‘addEventListener’ of null”