"Silly story generator" assessment

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”

krasnovdanial · December 25, 2019, 12:57pm

Hello my teacher, @chrisdavidmills I don’t know, what is problem at my code?

chrisdavidmills · December 30, 2019, 11:44am

Hi there @Bumidu_yasith!

I tried out your code in my example, and it worked fine.

If you are getting the error “Cannot read property ‘addEventListener’ of null”, then it must relate to this line:

randomize.addEventListener('click', result);

It is saying that randomize has a value of null, which means it isn’t being set properly. We are setting the value of randomize in this line:

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

which should select and store a reference to the following button inside the HTML:

<button class="randomize">Generate random story</button>

does your random story button have class="randomize" included on it?

chrisdavidmills · December 30, 2019, 11:50am

Hi there @krasnovdanial, hope you are well.

This is a pretty easy fix. When you run your app and open the devtools, the JS console gives an error of “Loading failed for the with source “https://chartreuse-monkey.glitch.me/JS/script.js””, which indicates that you are simply pointing at the wrong location for the script.

Removing JS/ will cause the script to load correctly.

After that you’ve got a couple of errors in your JS to fix, and it should work. Again, look at the error messages in the DevTools JS console to help you.