"Silly story generator" assessment

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.

krasnovdanial · January 11, 2020, 7:05pm

Hi there @chrisdavidmills, yes i’m well.
Please tell me, since I study everything on my own, I have problems with checking the site for adaptability and structure, some questions arise. Is it possible to throw off here, maybe you will have time? And I also wanted to ask after what points it is worth going to freelance, after what skills learned here? Is it worth all your messages to go to freelance already? Thank you very much for the great feedback.

chrisdavidmills · January 13, 2020, 9:25am

Is it possible to throw off here, maybe you will have time?

I’m not 100% sure what you mean, but it sounds like you are asking me if i’d answer some more questions. I am always happy to help people, as long as I have the time. You can always ask me, but I might not have time, so let’s see how it goes!

And I also wanted to ask after what points it is worth going to freelance, after what skills learned here? Is it worth all your messages to go to freelance already?

So you are asking if you should try being a freelancer, with the knowledge you currently have? I can’t really answer that question for you.