Build an Emoji Reactor - Step 9

JavaScript
1

Tell us what’s happening:

Hello, I need help getting this to pass, I believe that I have done everything asked of the assignment, thanks.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Emoji Reactor</title>
  <link rel="stylesheet" href="./styles.css" />
</head>
<body>
  <main>

    <h1 class="title">How are you feeling today?</h1>

    <p class="description">
      Click on the buttons below to rate your emotions.
    </p>
    <div class="btn-container">
      <button id="happy-btn" class="emoji-btn" aria-label="Happy face emoji">
        <span role="img" aria-hidden="true">😊</span>
        <span class="count">0/10</span>
      </button>
    </div>
  </main>
  <script src="./script.js"></script>
</body>
</html>

/* file: styles.css */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --light-grey: #efefef;
  --white: #ffffff;
  --very-dark-blue: #0a0a23;
  --light-purple: #a78bfa;
  --very-light-purple: #c4b5fd;
  --purple: #8b5cf6;
}

body {
  background-color: var(--very-dark-blue);
  color: var(--light-grey);
  font-family: sans-serif;
}

main {
  text-align: center;
  padding: 10px;
}

.btn-container,
button {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.btn-container {
  flex-direction: column;
}

.emoji-btn {
  width: 70%;
  cursor: pointer;
  color: var(--white);
  background-color: var(--light-purple);
  background-image: linear-gradient(
    to bottom,
    var(--very-light-purple),
    var(--light-purple)
  );
  border: 3px solid var(--purple);
  border-radius: 8px;
  padding: 10px;
  font-size: 1.5rem;
  margin: 10px 0;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

@media (min-width: 768px) {
  .emoji-btn {
    width: 30%;
  }
}

.emoji-btn:hover {
  background-color: var(--purple);
  background-image: none;
}

.title {
  margin-top: 15px;
  font-size: 2rem;
}

.description {
  font-size: 1.4rem;
  margin: 20px 0;
}

/* file: script.js */

// User Editable Region

const happyBtn = document.querySelector("#happy-btn");

happyBtn.addEventListener("click", () => {
  const countEl = happyBtn.querySelector(".count");
  
   let countString = countEl.textContent.split('/')[0];
   
   const currCount = Number(countString);
   

   console.log(currCount)
   console.log(`Current count: ` + currCount);
   console.log("Type of currCount:", typeof currCount);
})



// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Challenge Information:

Build an Emoji Reactor - Step 9

2

Welcome back to the forum @

You only need one console log.

Check the spacing in the console.

The instructions ask you to use a specific format.

Happy coding

3

Thanks!

I use the console.log() quite often to get a better understanding of what is happening “behind the scenes” and check the values/outputs of certain functions that are not always clear to me.

I tried this instead ```console.log(“Current count:”, currCount);``` and this passed the test, but why doesn’t ```console.log(`Current count: ` + currCount);``` pass the test as well, it seems to log the same thing…

4

it’s not the same thing tho, in one case you are printing one string, in the other you are printing one string and one number

in one case you are giving one argument to console.log, in the other you are giving two arguments

1 Like
5

Ok, thanks, so the comma represents a separation between parameter 1 “Current count:” and parameter 2 currCount…

1 Like