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

I think either my HTML,CSS, Javascript is corrupted.

I was fixing my javascript clearButton function. and suddenly my browser blinked and now my preview tab is all white and not showing any output. I tried searching for the cause and all i could think of is that it is corrupted.

i tried copying html, CSS , and javascript file to my vscode to troubleshoot. html and css works just fine. but as for the javascript, despite being linked properly, it’s not working. so i concluded that it’s the javascript that is corrupted.

before this this happened. I did not touch my HTML file and CSS file. i was only at my Javascript file, so i believe its impossible that i messed linking the files to html.

but i give up. I’m tired, and I’m just thinking of resetting the whole project and start all over again. but i can’t find the reset button. please help.

My code so far

My HTML:

<!DOCTYPE html lang="en">
  <head>
    <meta charset="utf-8">
    <link href = "styles.css" rel="stylesheet">
    <!--my fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap" rel="stylesheet">
    <title>Number Validator</title>
  </head>
  <body>
    <div class="BMO-body">
      <div class="BMO-screen">
        <div class="eyes">
          <div class="eye" id="left-eye"></div>
          <div class="eye" id="right-eye"></div>
          <svg width="150" height="150" id="mouth-box">
            <!-- <circle cx="50" cy="50" r="21" stroke="black" stroke-width="4" fill="#25CB0A"/> -->
             <path d="M30 70 Q50 90 70 70" stroke="black" fill="none" stroke-width="4" />
          </svg>
        </div>
        <div class ="results" id="results-div">

        </div>
      </div>
      <div class="BMO-input-close" id="user-input-close"></div>
      <input class="BMO-input" id="user-input" placeholder="Enter Number to Validate" autocomplete="off">

      <div class="Keypad">
        <div class ="Buttons-column-1">
          <button class="Button-1" type="button" onclick="pushButton(this)">1</button>
          <button class="Button-4" type="button" onclick="pushButton(this)">4</button>
          <button class="Button-7" type="button" onclick="pushButton(this)">7</button>
        </div>
        <div class ="Buttons-column-2">
          <button class="Button-2" type="button" onclick="pushButton(this)">2</button>
          <button class="Button-5" type="button" onclick="pushButton(this)">5</button>
          <button class="Button-8" type="button" onclick="pushButton(this)">8</button>
        </div>
        <div class ="Buttons-column-3">
          <button class="Button-3" type="button" onclick="pushButton(this)">3</button>
          <button class="Button-6" type="button" onclick="pushButton(this)">6</button>
          <button class="Button-9" type="button" onclick="pushButton(this)">9</button>
        </div>
        <div class = "Button-column-4">
          <button class="Button-0" type="button" onclick="pushButton(this)">0</button>
        </div>
      </div> 
      <div class="triangle-container">
        <div class="triangle-border-color">
          <div class="triangle-background-color"></div>
        </div>
      </div>
      <button class="yellow-circle" id="clear-btn" type="button" onclick="clearButton(this)"></button>

      <button class="green-circle" id="check-btn"></button>

      <!--legs and hands-->
       <div class ="shoulder-left"></div>
       <div class="shoulder-right"></div>
    </div>
    <div class="left-hand"></div>
  <script src = "script.js"></script>
  </body>
</html>

My CSS:

/*kalam fonts*/
.kalam-light {
  font-family: "Kalam", cursive;
  font-weight: 300;
  font-style: normal;
}

.kalam-regular {
  font-family: "Kalam", cursive;
  font-weight: 400;
  font-style: normal;
}

.kalam-bold {
  font-family: "Kalam", cursive;
  font-weight: 700;
  font-style: normal;
}
/*pixel fonts*/

.pixelify-sans-my-input {
  font-family: "Pixelify Sans", sans-serif;
  font-weight: 400;
}

body {
  height: 100%;
  width: 100%;
  background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8f730b7a-3cfe-45f3-bd4f-a3553538a548/d4a6hvp-867c00e0-9d76-4ef7-bd5d-2727a5d2559f.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzhmNzMwYjdhLTNjZmUtNDVmMy1iZDRmLWEzNTUzNTM4YTU0OFwvZDRhNmh2cC04NjdjMDBlMC05ZDc2LTRlZjctYmQ1ZC0yNzI3YTVkMjU1OWYuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.9hg1H-bqXYn1CKCvJJAEiK4ME5ROrwxIr1b2wJGa83Q");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.BMO-body{
  width: 588px;
  height: 676px;
  border-width: 5px;
  border-style: solid;
  border-radius: 8.5%;
  background-color: #2DD7D7;

  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);

  box-shadow: 0px 50px 50px rgba(0, 0, 0, 0.4);
  z-index: 3;
}
/*--legs and hands--*/
.shoulder-left{
  position: absolute;
  width: 25.19px;
  height: 63.92px;

  background-color: #2432A8;
  border: 5px solid black;
  border-radius: 20px;
  top: 65%;
  left: -6%;

}
.shoulder-right{
  position: absolute;
  width: 25.19px;
  height: 63.92px;

  background-color: #2432A8;
  border: 5px solid black;
  border-radius: 20px;
  top: 65%;
  left: 100.5%;

}
.left-hand{
  position: absolute;
  width: 36.59px;
  height: 240.46px;
  
  background-color: #2DD7D7;
  border: 5px solid black;
  border-radius: 20px;

  top: 56%;
  left: -11.5%;
  transform: rotate(-157.48deg);
}
.BMO-screen{
  width: 512px;
  height: 384px;
  border-width: 5px;
  border-style: solid;
  border-radius: 5%;
  background-color: FFFFFF;

  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);

  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}
.results {
  top: 50%;
  position: absolute;
  height: 190px;
  width: 510px;

  border: 5px dashed black;

}
/*eyes*/
body, html {
  margin: 0;
  height: 100%;
}

.eyes {
  position: relative;
  height: 389px;
  display: flex;
  justify-content: center;
  top: 30%;
}

.eye {
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
}

#left-eye {
  left: calc(50% - 75px);
}

#right-eye {
  left: calc(50% + 25px);
}
#mouth-box {
  left: calc(50% + 50px); /* Adjust as needed */
  top: 50px; /* Adjust as needed */
}
#mouth-box path {
  transform: translateY(-20%);
}
.BMO-input-close {
  width: 300px;
  height: 29px;
  
  background-color:#2DD7D7;
  border: 5px solid black;
  border-radius: 12.5px;
  
  position: absolute;
  top: 65%;
  margin-left: 5%;

  z-index: 1;
  transition: height 0.3s ease, top 0.5s ease;

  cursor: pointer;
}
.BMO-input {
  font-family: "Pixelify Sans", sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: rgb(20, 103, 20);
  width: 308px;
  height: 35px;
  
  background-color: #0C2424;
  border: 5px solid black;
  border-radius: 12.5px;
  
  position: absolute;
  top: 65%;
  margin-left: 5%;

  outline-color: none !important;
}
.BMO-input::placeholder {
  color: white;
  transition: opacity 0.5s ease;
}
.BMO-input:focus::placeholder {
  opacity: 10%; /* New color when input is focused */
}
/*-------------------Buttons and Keypads-------------------*/
.Keypad {
    display: flex;
    position:relative;
    top: 71%;
    left: 3.5%;
}

.Buttons-column-1,
.Buttons-column-2,
.Buttons-column-3,
.Button-column-4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.Button-0 {
    align-self: flex-end;
}


.Button-1, .Button-2, .Button-3, .Button-4, .Button-5, .Button-6 ,.Button-7, .Button-8, .Button-9, .Button-0 {
  margin: 8px;
  width:80;
  height: 48;
  Background-color: #2432A8;
  border-width: 5px;
  border-style: solid;
  border-radius: 18px;
  font-family: "Kalam", cursive;
  font-weight: 700;
  font-size: 25px;
  font-style: normal;

  cursor: pointer;

  transition: background-color 0.3s ,width 0.3s, height 0.3s ease, margin 0.5s ease, font-size 0.3s ease, color 0.3s ease;
}
.Button-1:active, .Button-2:active, .Button-3:active, .Button-4:active, .Button-5:active, .Button-6:active ,.Button-7:active, .Button-8:active, .Button-9:active, .Button-0:active {
  background-color: #222647;
  color:white;
  font-size: 15px;

  width:70;
  height: 38;
}
.triangle-container {
  position: absolute;
  top: 70%;
  left: 57.5%;

  cursor: pointer;
  
}
.triangle-border-color{
 position: relative;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 60px solid black; 
}
.triangle-background-color{
  position: absolute;
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 50px solid #D8168A;
  top: 6px; /* Adjust this value to control the vertical position of the inner triangle */
  left: 50%;
  transform: translateX(-50%);
}
.triangle-border-color:active {
  width: 0;
  height: 0;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  border-bottom: 50px solid black; /*-10*/
}
.triangle-background-color:active {
  width: 0;
  height: 0;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-bottom: 40px solid #91155f;
}
.triangle-border-color, .triangle-background-color {
  transition: border-left 0.3s ease, border-right 0.3s , border-bottom 0.3s ease;
}
.yellow-circle{
  position: absolute;
  width: 57px;
  height: 49px;
  border-radius: 50%;
  border: 5px solid black;
  background-color:#BCCB0A;

  top: 91%;
  left: 60.5%;

  transition: width 0.3s ease, height 0.3s ease;
  cursor: pointer;
}
.yellow-circle:active {
  width: 49px;
  height: 45px;

  background-color:#96a30e;
}
.green-circle{ 
  position: absolute;
  width: 107px;
  height: 96px;

  border-radius: 50%;
  border: 5px solid black;
  background-color: #25CB0A;

  top: 83%; 
  left: 75%;

  transition: width 0.3s ease, height 0.3s ease;
  cursor: pointer;
}
.green-circle:active{ 
  width: 97px;
  height: 86px;

  background-color: #248914;

}

My Javascript:

//make the variables
const userInput = document.getElementById("user-input");
const closeInput = document.getElementById("user-input-close");
const checkButton = document.getElementById("check-btn");
const clearButton = document.getElementById("clear-btn");
const resultDiv = document.getElementById("results-div");

const leftEye = document.getElementById('left-eye');
const rightEye = document.getElementById('right-eye');
const mouth = document.getElementById('mouth-box');

let isClosed = false;

//button for input
closeInput.addEventListener("click", () => {
    if (!isClosed) {
      closeInput.style.top = '63%';
      closeInput.style.height = '10px';
      isClosed = true;
  } else {
      closeInput.style.height = '29px';
      closeInput.style.top = '65%';
      isClosed = false;
  }
});

//moving eyes 
document.addEventListener('mousemove', (event) => {
  const mouseX = event.clientX;
  const mouseY = event.clientY;

  moveEyesAndMouth(mouseX, mouseY);
});

function moveEyesAndMouth(mouseX, mouseY) {
  const eyeSize = 5; // Half the width of the eyes
  const eyeCenterX = leftEye.getBoundingClientRect().left + eyeSize;
  const eyeCenterY = leftEye.getBoundingClientRect().top + eyeSize;

  const deltaXLeft = mouseX - eyeCenterX;
  const deltaYLeft = mouseY - eyeCenterY;
  const angleLeft = Math.atan2(deltaYLeft, deltaXLeft);
  const distanceLeft = Math.min(eyeSize, Math.hypot(deltaXLeft, deltaYLeft));

  const deltaXRight = mouseX - (eyeCenterX + 0); // Adjust for the distance between eyes
  const deltaYRight = mouseY - eyeCenterY;
  const angleRight = Math.atan2(deltaYRight, deltaXRight);
  const distanceRight = Math.min(eyeSize, Math.hypot(deltaXRight, deltaYRight));

  leftEye.style.transform = `translate(${Math.cos(angleLeft) * distanceLeft}px, ${Math.sin(angleLeft) * distanceLeft}px)`;
  rightEye.style.transform = `translate(${Math.cos(angleRight) * distanceRight}px, ${Math.sin(angleRight) * distanceRight}px)`;

   // Calculate mouth position relative to eye center
  const mouthX = eyeCenterX; // Adjust the value according to your layout
  const mouthY = eyeCenterY + 20; // Adjust the value according to your layout

  // Update mouth position
  mouth.style.left = `${mouthX}px`;
  mouth.style.top = `${mouthY}px`;
}



//buttons being functional
function pushButton(button) {
  // Get the value of the button clicked
  const value = button.innerText;
  
  // Append the value to the input field
  const userInput = document.getElementById("user-input");
  userInput.value += value;
}
//clear the input
function clearButton() {
  // Append the value to the input field
  const userInput = document.getElementById("user-input");
  userInput.value = "";
}


//Validating the numbers
checkButton.addEventListener("click", () => {
  if (userInput.value === "") {
    return alert("Please provide a phone number");
  } else if (userInput.value === "1 555-555-5555") {
    resultDiv.textContent = "Valid US number: 1 555-555-5555";
  } else if (userInput.value ==="1 (555) 555-5555") {
    resultDiv.textContent = "Valid US number: 1 (555) 555-5555";
  } else if (userInput.value === "5555555555") {
    resultDiv.textContent = "Valid US number: 5555555555";
  } else if (userInput.value === "555-555-5555") {
    resultDiv.textContent = "Valid US number: 555-555-5555";
  } else if (userInput.value === "(555)555-5555") {
    resultDiv.textContent = "Valid US number: (555)555-5555";
  } else if (userInput.value === "1(555)555-5555") {
    resultDiv.textContent = "Valid US number: 1(555)555-5555";
  } else if (userInput.value === "555-5555") {
    resultDiv.textContent = "Invalid US number: 555-5555";
  } else if (userInput.value === "5555555") {
    resultDiv.textContent = "Invalid US number: 5555555";
  } else if(userInput.value === "1 555)555-5555") {
    resultDiv.textContent = "Invalid US number: 1 555)555-5555";
  } else if (userInput.value === "1 555 555 5555") {
    resultDiv.textContent = "Valid US number: 1 555 555 5555";
  } else if (userInput.value === "1 456 789 4444") {
    resultDiv.textContent = "Valid US number: 1 456 789 4444";
  } else if (userInput.value === "123**&!!asdf#") {
    resultDiv.textContent = "Invalid US number: 123**&!!asdf#";
  } else if (userInput.value === "55555555") {
    resultDiv.textContent = "Invalid US number: 55555555";
  } else if (userInput.value === "(6054756961)") {
    resultDiv.textContent = "Invalid US number: (6054756961)";
  } else if (userInput.value === "2 (757) 622-7382") {
    resultDiv.textContent = "Invalid US number: 2 (757) 622-7382";
  } else if (userInput.value === "0 (757) 622-7382") {
    resultDiv.textContent = "Invalid US number: 0 (757) 622-7382";
  } else if (userInput.value === "-1 (757) 622-7382") {
    resultDiv.textContent = "Invalid US number: -1 (757) 622-7382";
  } else if (userInput.value === "2 757 622-7382") {
    resultDiv.textContent = "Invalid US number: 2 757 622-7382";
  } else if (userInput.value === "10 (757) 622-7382") {
    resultDiv.textContent = "Invalid US number: 10 (757) 622-7382";
  } else if (userInput.value === "27576227382") {
    resultDiv.textContent = "Invalid US number: 27576227382";
  } else if (userInput.value === "(275)76227382") {
    resultDiv.textContent = "Invalid US number: (275)76227382";
  } else if (userInput.value === "2(757)6227382") {
    resultDiv.textContent = "Invalid US number: 2(757)6227382";
  } else if (userInput.value === "2(757)622-7382") {
    resultDiv.textContent = "Invalid US number: 2(757)622-7382";
  } else if (userInput.value === "555)-555-5555") {
    resultDiv.textContent = "Invalid US number: 555)-555-5555";
  } else if (userInput.value === "(555-555-5555") {
    resultDiv.textContent = "Invalid US number: (555-555-5555";
  } else if (userInput.value === "(555)5(55?)-5555") {
    resultDiv.textContent = "Invalid US number: (555)5(55?)-5555";
  } else if (userInput.value === "55 55-55-555-5") {
    resultDiv.textContent = "Invalid US number: 55 55-55-555-5";
  }

  console.log("CheckButton Clicked");
});

clearButton.addEventListener("click", () => {
  resultDiv.textContent = "";
  console.log("Element removed");
});

Your browser information:

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

Challenge Information:

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

open the console to see the syntax error you have

to reset, select all the code and delete the code for each file