Build a Real Time Counter - Build a Real Time Counter

JavaScript
1

Tell us what’s happening:

Not able to pass tests #2 and #3 even though i have a p tag with #char-count

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>Real Time Counter</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>

<body>
  <main class="main">
    <h1 class="heading"><span>Char Counter App</span></h1>
    <p class="desc">Enter some text below to see the the real time count of characters in the textbox</p>
    <textarea name="textbox" id="text-input" placeholder="Enter some text..."></textarea>
    <p id="char-count">Character Count: 0/50</p>
  </main>
  <script src="script.js"></script>
</body>
</html>

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

:root {
  font-size: 20px;
  --bg-clr: #0C7489;
  --txt-clr: #D7D9CE;
  --bx-shdw: #13505B;
}

body {
  min-height: 100vh;
  background-color: var(--bg-clr);
  color: var(--txt-clr);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.main {
  width: 80%;
  min-width: 700px;
  font-size: 1.5rem;
  padding: 20px 0 30px;
  border: 1.5rem double var(--txt-clr);
  border-radius: 0 40px;
  box-shadow: inset 1px 2px 10px 2px var(--bx-shdw);
}

.heading {
  text-align: center;
  margin: 2rem 0
}

.heading span {
  padding: 10px 20px;
  background-color: var(--txt-clr);
  color: var(--bg-clr);
  border-bottom: 10px solid var(--bx-shdw);
}

.desc {
  width: 80%;
  font-size: 1.1em;
  text-align: center;
  line-height: 1.5;
  margin: 1.5rem auto;
}

#text-input {
  display: block;
  width: 70%;
  aspect-ratio: 5/1.5;
  margin: auto;
  padding: 0.8rem;
  background-color: var(--txt-clr);
  outline: none;
  border: none;
  border-radius: 8px;
  font-size: 1.5rem;
}

#text-input:focus {
  border: 2px solid var(--bx-shdw);
  outline: none;
}

#char-count {
  text-align: center;
  margin-top: 1.2rem;
  font-weight: bold;
}

/* file: script.js */
    const textBox = document.querySelector("#text-input");
const result = document.querySelector("#char-count");

const handleInput = () => {
  const charCount = textBox.value.length;

  if(charCount > 50) {
    result.style.color = "red";
    textBox.value = textBox.value.slice(0, 50);
    return;
  }

  if(charCount === 50) {
    result.style.color = "red"
  }

  result.textContent = `Character Count: ${charCount}/50`;
};

textBox.addEventListener("input", handleInput);

Your browser information:

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

Challenge Information:

Build a Real Time Counter - Build a Real Time Counter

2

Try removing the p element above it that was not asked in the instructions.

1 Like
3

thankyou very much :))