Excuse Generator

Projects Portfolio Project: Mixed Messages
#1

I made a program who get you some excuse when you needed, the program works fine but the excuses … try your own risk .lol

I enjoyed make this project, was my first project who I put all html/css and js together, maybe my function can be more short and directly but this way I found easy and just works, I apreciatte if someone tell me if has a better way to do this.
It took me 2 days to complete the challenge and I’m happy with it, I thought it was going to be almost impossible for me and I kept avoiding it so as not to get frustrated, but here I am.

Here is the code, feel free to tell any feedback, I’ll love it!

repo : GitHub - ReginaGuermandi/MixedMessages
site on : Mixed Messages

Happy Coding!! :grinning:

1 Like
#2

Hey!

Some tips:

  1. Add a function to get a random element from a given array. So your excuses.intro[Math.floor(Math.random()*excuses.intro.length)] code would be something like randomItem(excuses.intro). Less code, more readability.
  2. Name your variables according to their purpose. Your *Index variables don’t contain indexes, they contain strings.
  3. Also you can use loops or map with join to create a message like
const parts = ['intro', 'scapegoat', 'delay']; // in order within the message
const message = parts.map((part) => randomItem(excuses[part])).join(' ');

This way you will use little code for any number of message parts.

  1. Strange thing in the code is the return of the assignment result from the randomExcuse function. Since you are using a simple button, there is no need to return any value. And e.preventDefault() is not needed in this case.

Good job!

2 Likes
#3

Hi there!

So, just to see if I’m following, I create a function for randomize through the array like randomItem(), and then create another function excuseGenerator() and call the randomItem() in every array, this time with a better variable name and less code, then put all together with map and join?

About the strange thing, I thought every function should return something and the e.preventDefault() I saw in a tutorial :sweat_smile:

Thanks for the feedback, I going work through this tips and come back later.

#4

I’ll leave here the before and after for those who would like to compare, maybe it can help in some way.

BEFORE :

const button = document.querySelector("#excuse-button");
const excuse = document.querySelector("#excuse");

const excuses = {
    intro: ["I can't come", "Forgive my absence,", "This is going to sound crazy but,", "Get this :", "I can't go because", "I know you're going to hate me but,", "I was minding my own business and boom!", "I feel terrible but,", "I regretfully cannot attend,", "This is going to sound like and excuse but," ],
    scapegoat: ["my nephew", "the ghost of Michael Jackson", "the Pope", "my ex", "a high school marching band", "Dan Rather", "a sad clown", "the kid from Harry Potter", "a professional cricket team", "my Tinder date"],
    delay: ["just ■■■■ the bed.", "died in front of me.", "won't stop telling me knock knock jokes.", "is having a nervous breakdown.", "gave me syphilis.", "poured lemonade in my gas tank.", "stabbed me.", "found my box of human teeth.", "stole my shoes.", "posted my nudes on Instagram." ]
};

// Select a random index of each array and put them together
const randomExcuse = (e) => {
    e.preventDefault();
    let introIndex = excuses.intro[Math.floor(Math.random()*excuses.intro.length)];
    let escapeIndex = excuses.scapegoat[Math.floor(Math.random()*excuses.scapegoat.length)];
    let delayIndex = excuses.delay[Math.floor(Math.random()*excuses.delay.length)];    
        return excuse.innerHTML = `${introIndex} ${escapeIndex} ${delayIndex}`;
};

button.onclick = randomExcuse;

AFTER :

const button = document.querySelector("#excuse-button");
const excuse = document.querySelector("#excuse");

const excuses = {
    intro: ["I can't come", "Forgive my absence,", "This is going to sound crazy but,", "Get this :", "I can't go because", "I know you're going to hate me but,", "I was minding my own business and boom!", "I feel terrible but,", "I regretfully cannot attend,", "This is going to sound like and excuse but," ],
    scapegoat: ["my nephew", "the ghost of Michael Jackson", "the Pope", "my ex", "a high school marching band", "Danny DeVito", "a sad clown", "the kid from Harry Potter", "a professional cricket team", "my Tinder date"],
    delay: ["just ■■■■ the bed.", "died in front of me.", "won't stop telling me knock knock jokes.", "is having a nervous breakdown.", "gave me syphilis.", "poured lemonade in my gas tank.", "stabbed me.", "found my box of human teeth.", "stole my shoes.", "posted my nudes on Instagram." ]
};

// Get a random string of an array.
const randomElement = (arr) => {
    let random = arr[Math.floor(Math.random() * arr.length)];
        return random;
};

// Get a String of each array and put a together
const randomExcuse = () => {
    const parts = ['intro', 'scapegoat', 'delay']; 
    const message = parts.map((part) => randomElement(excuses[part])).join(' ');
        excuse.innerHTML = message;
};

button.onclick = randomExcuse;
#5

Hey!

Great job!

One more thing: you can just return the result of arr[Math.floor(Math.random() * arr.length)] without using a variable. And since it’s a one-line function, you can use the arrow function without return: const randomElement = arr => arr[Math.floor(Math.random() * arr.length)];. For more information about arrow functions, see Arrow function expressions - JavaScript | MDN.

1 Like
#6

Nice to know, slowly I’ll adapt to do this way and make my code more clean, I appreciate your help!! :smile: