Mixed Messages - Portfolio Project: "What should I do tonight?"

Hi everyone!
I’m here to share with you my version of Mixed Messages and if you want to leave a feedback I’ll be glad to read it! :smiling_face_with_three_hearts:
It took me some hours to complete it and it was pretty funny to do.

1 Like

Nice one! Thank you for sharing it :slightly_smiling_face:

If you allow me to be pedantic. I noted a couple of minor things. And one major issue.

1. Missing closing bracket (“}”)

Line 21 in tonight.css is missing a closing bracket

#answer {
  font-size: 2rem;
  background-color: bisque;
  padding: 5px;

Recommended fix

#answer {
  font-size: 2rem;
  background-color: bisque;
  padding: 5px;
}

2. Unnecessary body attribute

Line 4 in tonight.css has body {display:block}. The default display of the body element is block. So no need to specify it in the stylesheet.

body {
  background-color: cadetblue;
  text-align: center;
  display: block;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin-top: 10rem;
}

Recommended fix

body {
  background-color: cadetblue;
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin-top: 10rem;
}

3. Redundant spaces

Line 9 in tonight.html has <button id= "ask">Tell me, please!</button> The space between id= and the first " may cause problems in certain cases

<button id= "ask">Tell me, please!</button>

Recommended fix

<button id="ask">Tell me, please!</button>

4. Redundant spaces

Line 10 in tonight.html has <p id= "answer"></p> The space between id= and the first " may cause problems in certain cases

Recommended fix

<p id="answer"></p>

5. Semi-mix of double/single quotation marks

Line 13 in tonight.html has <script>. It might be good to decide to use double quotation marks (") or single quotation marks (') and not mix it up. Because it can lead to misunderstandings and errors in larger projects. But note that in some cases you need to mix them. For an example document.querySelector("input[type='text']")

Recommended correction
(all the content of the <script> tag)

<script>
//object with activities and sub-activities
const activities = {
  "Whatch a movie": {
    service: ["Netflix", "Prime Video", "Disney+"],
    titles: ["Pulp Fiction", "The Godfather", "Inception", "Interstellar", "Kill Bill", "Bigfish", "Eternal Sunshin of the Spotless Mind"]
  },
  "Play a videogame": {
    service: ["PC", "PlayStation", "Xbox"],
    titles: ["Red Dead Redemption 2", "Fortnite", "The Legend of Zelda: Breath of the Wild", "Call of Duty", "Genshin Impact", "Subnautica"]
  },
  "Call a friend": {
    service: ["Phone", "Skype", "Discord"],
    titles: ["John", "Alex", "Thomas", "Paul", "Jude", "Glenn", "Polly"]
  }
};

function casualAnswer() {
  //call activity
  let selectActivity = Object.keys(activities)[Math.floor(Math.random() * Object.keys(activities).length)];
  let randActivity = activities[selectActivity];
  //call service
  let randService = randActivity.service[Math.floor(Math.random() * randActivity.service.length)];
  //call titles
  let randTitle = randActivity.titles[Math.floor(Math.random() * randActivity.titles.length)];
  //creation random message
  return `Tonight you should ${selectActivity} on ${randService}: ${randTitle}.`
};

//show message
const askQuest = document.getElementById("ask");
const ansRand = document.getElementById("answer");
askQuest.addEventListener("click", function() {
  let randMessage = casualAnswer();
  ansRand.textContent = randMessage;
});
</script>

Final result

Complete code with all fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Please Tell Me</title>
<style>
body {
background-color:#5f9ea0;
text-align:center;
font-family:Verdana,Geneva,Tahoma,sans-serif;
margin-top:10rem
}

h1 {
font-size:3rem
}

button {
padding:8px;
font-size:1.8rem;
background-color:#ff1493;
border-radius:8px;
color:#f5f5f5
}

#answer {
font-size:2rem;
background-color:#ffe4c4;
padding:5px
}
</style>
</head>
<body>

<h1>What should I do tonight?</h1>
<button id="ask">Tell me, please!</button>
<p id="answer"></p>

<script>
//object with activities and sub-activities
const activities = {
  "Whatch a movie": {
    service: ["Netflix", "Prime Video", "Disney+"],
    titles: ["Pulp Fiction", "The Godfather", "Inception", "Interstellar", "Kill Bill", "Bigfish", "Eternal Sunshin of the Spotless Mind"]
  },
  "Play a videogame": {
    service: ["PC", "PlayStation", "Xbox"],
    titles: ["Red Dead Redemption 2", "Fortnite", "The Legend of Zelda: Breath of the Wild", "Call of Duty", "Genshin Impact", "Subnautica"]
  },
  "Call a friend": {
    service: ["Phone", "Skype", "Discord"],
    titles: ["John", "Alex", "Thomas", "Paul", "Jude", "Glenn", "Polly"]
  }
};

function casualAnswer() {
  //call activity
  let selectActivity = Object.keys(activities)[Math.floor(Math.random() * Object.keys(activities).length)];
  let randActivity = activities[selectActivity];
  //call service
  let randService = randActivity.service[Math.floor(Math.random() * randActivity.service.length)];
  //call titles
  let randTitle = randActivity.titles[Math.floor(Math.random() * randActivity.titles.length)];
  //creation random message
  return `Tonight you should ${selectActivity} on ${randService}: ${randTitle}.`
};

//show message
const askQuest = document.getElementById("ask");
const ansRand = document.getElementById("answer");
askQuest.addEventListener("click", function() {
  let randMessage = casualAnswer();
  ansRand.textContent = randMessage;
});
</script>

</body>
</html>
Complete code with all fixed. PLUS EXTRA FEATURES

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Please Tell Me</title>
<style>
html {
box-sizing:border-box
}

*,:after,:before {
box-sizing:inherit
}

body {
background-color:#5f9ea0;
text-align:center;
font-family:Verdana,Geneva,Tahoma,sans-serif;
margin-top:10rem
}

h1 {
font-size:3rem
}

button {
padding:8px;
font-size:1.8rem;
background-color:#ff1493;
border-radius:8px;
color:#f5f5f5
}

#answer {
font-size:2rem;
background-color:#ffe4c4;
padding:5px;
transition:opacity .2s ease
}

#answer:empty {
visibility:hidden;
opacity:0
}

@media (prefers-reduced-motion:reduce) {
#answer {
transition:none
}
}
</style>
</head>
<body>

<h1>What should I do tonight?</h1>
<button id="ask">Tell me, please!</button>
<p id="answer"></p>

<script>
//object with activities and sub-activities
const activities = {
  "Whatch a movie": {
    service: ["Netflix", "Prime Video", "Disney+"],
    titles: ["Pulp Fiction", "The Godfather", "Inception", "Interstellar", "Kill Bill", "Bigfish", "Eternal Sunshin of the Spotless Mind"]
  },
  "Play a videogame": {
    service: ["PC", "PlayStation", "Xbox"],
    titles: ["Red Dead Redemption 2", "Fortnite", "The Legend of Zelda: Breath of the Wild", "Call of Duty", "Genshin Impact", "Subnautica"]
  },
  "Call a friend": {
    service: ["Phone", "Skype", "Discord"],
    titles: ["John", "Alex", "Thomas", "Paul", "Jude", "Glenn", "Polly"]
  }
};

function casualAnswer() {
  //call activity
  let selectActivity = Object.keys(activities)[Math.floor(Math.random() * Object.keys(activities).length)];
  let randActivity = activities[selectActivity];
  //call service
  let randService = randActivity.service[Math.floor(Math.random() * randActivity.service.length)];
  //call titles
  let randTitle = randActivity.titles[Math.floor(Math.random() * randActivity.titles.length)];
  //creation random message
  return `Tonight you should ${selectActivity} on ${randService}: ${randTitle}.`
};

//show message
const askQuest = document.getElementById("ask");
const ansRand = document.getElementById("answer");
askQuest.addEventListener("click", function() {
  let randMessage = casualAnswer();
  ansRand.textContent = randMessage;
});
</script>

</body>
</html>

  • Added language attribute to the <html> tag (<html lang="en">)
  • Added <meta charset="utf-8">
  • Added <meta name="viewport" content="width=device-width, initial-scale=1">
  • Added box-sizing: border-box to the CSS
  • Added :empty Pseudo-class in the CSS to hide the #answer element when it has no content. So, it looks better (otherwise a line is visible).
  • Added transition in the CSS for the #answer element, so it makes for a smooth transition when it appears
  • Added prefers-reduced-motion in the CSS for users that prefers less motions (you can read more about this here)

I could not add a Codebyte, it just gave me errors. So i made a pen, on CodePen you can watch if you want to. It has the same code. https://codepen.io/Tcip/pen/YzmYyzm

Have a nice weekend! :upside_down_face: