Assessment = Silly story generator

Link to the code: https://jsfiddle.net/madefromjames/znex4fgs/6/

@KBar @mikoMK I’ve tried countless possible ways to make “Bob” “fahrenheit” and “pounds” change whenever “uk” is checked but everything turns out void even with hours of research. I think there’s a lot to add since they’re in a block scope

Hi @madefromjames

Hints:

  • newStory itself should change with every replacement. You don’t need a replaced variable.
  • The replace() and replaceAll() methods return a new string that needs to be assigned.

I hope that gets you further. :slightly_smiling_face:

Michael

1 Like

Note: my code may not be the best and am open to contradiction and correction
hey i can help you with changing the weight and temperature and bob . i have tried to edit your code minimal. please note constant are only accessible in the
function defined in so the weight ,temperature and customname needed to be defined earlier at the beginning of the function(thats why the were not accessible since you only defined them in an if statement).
am pasting the code below : first add a new paragraph class ("storytext) to html and edit the other querySelectors to same classname as mine , i have commented out some of your code for your understanding. here is the .js file
:slight_smile:
const customName = document.getElementById(‘customname’);

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

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

const storyText = document.querySelector(’.storytext’);

const newStory = document.querySelector(’.newStory’);

function randomValueFromArray(array){

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

return array[random];

}

story.textContent = “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.”

const insertX = [“Willy the Goblin”, “Big Daddy”, “Father Christmas”];

const insertY = [“the soup kitchen”, “Disneyland”, “the White House”];

const insertZ = [“spontaneously combusted”, “melted into a puddle on the sidewalk”, “turned into a slug and crawled away”];

const xItem = randomValueFromArray(insertX);

const yItem = randomValueFromArray(insertY);

const zItem = randomValueFromArray(insertZ);

storyText.textContent = story.textContent.replaceAll(":insertx:", xItem).replaceAll(":inserty:", yItem).replaceAll(":insertz:", zItem);

randomize.addEventListener(‘click’, result);

function result() {

// .replaceAll("Bob", customName.value)

// .replaceAll('300 pounds', /* weight wont work. I need to add a specific value */)

// .replaceAll('94 fahrenheit', /* temperature wont work. I need to add a specific value */)

const name = customName.value;

if(customName.value !== '') {



// newStory.replaceAll("Bob", customName.value)



let weight, temperature;

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

 weight = Math.round(300) / 14 + " stones";

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

 newStory.textContent = storyText.textContent.replaceAll('Bob',name);

}

else{

    weight = Math.round(250) + 'kgs';

    temperature =  Math.round(67) + ' centigrade';

    newStory.textContent = storyText.textContent.replaceAll('300 pounds', weight).replaceAll('94 fahrenheit', temperature).replace("Bob", name);

//story.textContent = newStory;

// story.textContent = replaced;
}
newStory.style.visibility = ‘visible’;
}

}’

https://jsfiddle.net/a21bhzcy/1/

1 Like

@Blessedson @mikoMK Thanks for your feedback

Here’s the final code. https://jsfiddle.net/madefromjames/znex4fgs/7/

I was supposed to get everything right but "Bob" couldn’t change earlier but I used const newStory = storyText instead of var or let newStory = storyText. So that means I should be extra careful of knowing when to use const and let

1 Like

Great improvements!

Now everything works correctly. :medal_sports:

As a rule of thumb I suggest to generally use const and only use let when you know that the variable will change. var shouldn’t be used anymore. It was the only statement to define variables before const and let were introduced.

This rule helps against accidental manipulation of variables. For this exercise the only variable that needs to be defined with let is newStory as you correctly stated. All the other variables should be const.

1 Like

Nice, i also had some problem with understanding const but your code has helped me alot. :clap:

2 Likes