Build a Telephone Number Validator Project - Build a Telephone Number Validator

JavaScript
1

Tell us what’s happening:

Functionally and visually everything works properly, and is looking quite nice, but almost all of the user stories don’t check out. I’m running all the different tests and getting the exact result the project asks for, but technically it doesn’t recognize it as correct. What am I missing?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Telephone Number Validator</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
    />
    <link 
      rel="stylesheet" 
      href="styles.css" 
    />
  </head>
  <body>
    <main>
      <h1 id="title">Telephone Number Validator</h1>
      <div id="main-container">
       <p id="enter-number">Enter a Phone Number:</p>
        <input id="user-input" />
        <button id="check-btn">Check</button>
        <button id="clear-btn">Clear</button>
      </div>
      <div id="results-div">
      </div>
    </main>
    <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */
:root {
  --color1: #e0e1dd;
  --color2: #778da9;
  --color3: #415a77;
  --color4: #1b263b;
  --color5: #0d1b2a;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Mono', sans-serif;
  background-color: var(--color5);
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#main-container {
  background-color: var(--color2);
  width: 350px;
  height: 240px;
  border: 5px solid var(--color1);
  border-radius: 8px;
  padding: 15px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#title {
  font-size: 35px;
  color: var(--color1);
  text-transform: uppercase;
  margin: 20px 0 40px 0;
}

#enter-number {
  font-size: 20px;
  display: flex;
  justify-content: center;
  color: var(--color5);
}

#user-input {
  background-color: var(--color1);
  border: 1px solid var(--color3);
  border-radius: 8px;
  color: var(--color5);
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

#check-btn {
  font-size: 25px;
  cursor: pointer;
  border-radius: 8px;
  background-color: var(--color4);
  color: var(--color1);
}

#check-btn:hover {
  background-color: var(--color5);
  color: var(--color1);
}

#clear-btn {
  font-size: 25px;
  cursor: pointer;
  border-radius: 8px;
  background-color: var(--color4);
  color: var(--color1);
}

#clear-btn:hover {
  background-color: var(--color5);
  color: var(--color1);
}

#results-container {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 25px;
  display: flex;
  flex-direction: column;
  color: var(--color5);
  background-color: var(--color1);
  width: 350px;
  overflow: auto;
  max-height: 400px;
  border: 5px solid var(--color2);
  border-radius: 8px;
  padding: 10px;
  position: relative;
  gap: 30px;
  text-align: center;
}

.valid {
  color: green;
  font-weight: bold;
}

.invalid {
  color: red;
  font-weight: bold;
}

/* file: script.js */
const userInput = document.getElementById("user-input");
const checkBtn = document.getElementById("check-btn");
const clearBtn = document.getElementById("clear-btn");
const resultsDiv = document.getElementById("results-div");
let countResults = 0;

const isValid = (input) => {
    const phoneRegex = /^(\+?1[\s-]?)?(\(\d{3}\)|\d{3})[\s-]?\d{3}[\s-]?\d{4}$/;
    return phoneRegex.test(input) 
    ? `<p><span class="valid">Valid</span> US number:<br>${userInput.value}</p>` 
    : `<p><span class="invalid">Invalid</span> US number:<br>${userInput.value}</p>`;
};

checkBtn.addEventListener("click", () => {
  if (!userInput.value) {
    alert("Please provide a phone number");
    return;
  }
  countResults++;
  if (countResults === 1) {
    resultsDiv.innerHTML += `
    <span id="results-container">
      ${isValid(userInput.value)}
    </span>
    `
    userInput.value = "";
  } else {
      const resultsContainer = document.getElementById("results-container");
      resultsContainer.innerHTML += `
      ${isValid(userInput.value)}
      `
      userInput.value = "";
  }
});

clearBtn.addEventListener("click", () => {
  countResults = 0;
  resultsDiv.innerHTML = "";
  userInput.value = "";
})

Your browser information:

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

Challenge Information:

Build a Telephone Number Validator Project - Build a Telephone Number Validator

2

  1. The formatting isn’t correct. You have to replace the br element with a space.

  2. You need to clear the output between inputs, or just don’t concatenate += the output to the DOM content.

  3. The output should be added to the same DOM element every time (resultsDiv).

3

Thanks! That was it!