Build an Emoji Reactor - Step 9

JavaScript
1

Tell us what’s happening:

i can’t pass the test although i see good results ?!! could anyone help

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 currCount = +countEl.textContent.split('/')[0];
  if(currCount < 10) {
    currCount++
    countEl.textContent = currCount + '/10'

  }
  console.log(`Current count: ` + currCount + '/10');
}) 
 


// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Challenge Information:

Build an Emoji Reactor - Step 9

2

You are doing more than this step is asking for.

Hit the Reset button and then only declare the currCount variable as you did and log it exactly as described in the instructions. Don’t add any other code at this step.

4

i donno i still don’t get it , did i succeed follow your instructions here ?

const happyBtn = document.querySelector("#happy-btn");
let currCount = +document.querySelector(".count").textContent.split('/')[0];

happyBtn.addEventListener("click", () => {
  const countEl = happyBtn.querySelector(".count");
  console.log(countEl.textContent);
})
console.log("Current count: " + currCount + '/10')
5

. You should log the current count as a number.
2. You should log the current count as a number in a way that works for the various possible values.
iam sure i log the value as a number because when i testtypeof it in the console i found it 'number'

6

stop a moment , read what you are asked to log, you are logging a string, and it is not what you are asked to log

7

Log the current count in this format: console.log("Current count:", currCount) .

8

are you doing that? 

9

i tried but you and someone told me to todo something else i dunno how

10

i tried but failed *

11

I don’t know what something else you are referring to

12

you need to use that exact line, you don’t need to overthink this

13

this is what he adviced me to do

14

I don’t see how you did that either, you are not logging the variable exactly as described

15

i tried various ways when i fail i try to add something or remove something not only one time try before i ask i try and when i reach despair mode i move to ask

16

please use the exact line you are given to use

use it inside the event listener, as you can’t get the value outside of it

1 Like
17

something good the first line of failed tests removed

18

here i logged it inside the event listener as u advised me

const happyBtn = document.querySelector("#happy-btn");
let currCount = +document.querySelector(".count").textContent.split('/')[0];

happyBtn.addEventListener("click", () => {
  const countEl = happyBtn.querySelector(".count");
  console.log("Current count:", currCount)
})
19

why is this up here? you still need to work inside the event listener

this needs to work even when the button changes value

20

oh my bad now i passed but could you explain more about that
you mean in global scope it’s value will be different than when it’s in function scope right ?

21

if you put something in the global scope it gets the value when the app loads. If it’s inside the event listener it gets the value when the button is clicked. If the button changes value while the app executes, which one do you want?

2 Likes