"Silly Story Generator" - Assessement required

Hello, I would appreciate it if someone could take a look over my script for this assessment. Many Thanks, =)

[https://codepen.io/drgaud/pen/BaNzadO]

Here is the script, (my apologies for the comments, I find it helps me explain the code and learn it a bit better)

/**
*/

//Variables Defined here

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

var 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.”

var insertX = [“Willy the Goblin”, “Big Daddy”, “Father Christmas”];
var insertY = [“the Soup Kitchen”, “Disneyland”, “The White House”];
var insertZ = [“spontaneously combusted”,“melted into a puddle on the sidewalk”,“turned into a slug and crawled away”]

// Functions Defined here

function randomValueFromArray(array){
//This function returns a random entry from the array that is passed into it.
return array[Math.floor(Math.random()*array.length)];
}

// Event Listener

function result(){
//Setting the function variables
let newStory = storyText; //This grabs the Main String

//Getting a random entries from each for the Arrays
let xItem = randomValueFromArray(insertX);
let yItem = randomValueFromArray(insertY);
let zItem = randomValueFromArray(insertZ);

//Logic Conditions
if (customName.value !== “”){
//If Name Input is not empty, then do this:
let name = customName.value;//assigning the input value to the name
const replaceBob = /bob/gi;//This is the regex for the replacement of the word “Bob” from the string
newStory= newStory.replace(replaceBob, name); //This replaces the name bob in the string with the new text
}
if(document.getElementById(‘uk’).checked){
//If the UK Checkbox is selected then do this:
let weight = Math.round(300);
let temp = Math.round(94);

function convertor(temperature,weightPounds){
  let cent = Math.round(((temperature - 32) * 5/9)) + " Centigrade";//Converts the Temp from F to C
  temp = cent; //Sets the temp to centigrade 
  let stone = Math.round((weightPounds/14)) + " stones" // Converts the Weight from pounds to Stone
  weight = stone;//Sets the weight to stones
}
convertor(temp,weight);//This calls the function to convert the values as the function describes above
 //replacing the values in the story
const replaceFahrenheit = /94 fahrenheit/gi; //This is the regex for the replacing the Fahrenheit string
const replacePounds = /300 pounds/gi; //This is the regex for replacing the pounds string
newStory = newStory.replace(replaceFahrenheit, temp).replace(replacePounds, weight); //This updates the new values to the story.

}
//This is a regex expression for searching for the following terms:
const replaceX = /:insertx:/gi;
const replaceY = /:inserty:/gi;
const replaceZ = /:insertz:/gi;
newStory = newStory.replace(replaceX, xItem).replace(replaceY,yItem).replace(replaceZ, zItem); //Updating the story with the new placeholders
story.textContent = newStory; //This updates the text content by updating the DOM using the .textContent method
story.style.visibility = ‘visible’; //This changes the css property to visible, whereas default is set to hidden.

}
generate.addEventListener(‘click’, result); //This is the event listener on the click button to run the result function.

I really do appreciate your support.
=)

Hi there @drgaud, and thanks for sending in your code!

This looks really good — works nicely, provides the expected result. Well done on some great work!

I noticed that you dealt with some of the bits differently, like the weight/temp conversion code. You might be interested in seeing how we did it, so you can compare and contrast: https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-finished/main.js

Hi @chrisdavidmills , Thanks for your reply man I really appreciate your review.
Funnily enough, I though it might be easier as a function and so wrote one (plus I need the practice). My original source code, is littered with console.logs for testing the ‘everything’ as I went, which I found has helped. (I enjoy using console.table for looking at objects and arrays in the debugger, which I am still getting my head around.). I have to say comparing the two codes I think its probably more efficient placing the math’s in the variable and returning only that without having the additional ‘cost’ of having an nested function. I think the use of the regular expressions ( I havent studied this yet: I got it of an example from the mdn:string.replace page.) I had some difficulty getting the .replace(“string”,function) to work, but when I figured out how to do the regex thingie it worked a charm.
Plus your code is a whole lot cleaner. I have posted up my original source code on github https://github.com/DrGaud/MDN-learning/blob/master/SillyStoryGenerator%20-%20Copy/main.js for shits and giggles, hopefully it might help someone else.
I have to say, a big thank you for putting together a lot of the content that I am using to learn how to be a Web developer. If there is ever an opportunity to, I owe you a pint.
Many Thanks =)

It’s all good; I don’t necessarily think our way is better, in this case :wink:

I have to say, a big thank you for putting together a lot of the content that I am using to learn how to be a Web developer. If there is ever an opportunity to, I owe you a pint.

Sounds great :wink:

I am so glad you are finding our content helpful.