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

JavaScript
1

Tell us what’s happening:

Not sure what I’m doing wrong. I am trying to create a phone img like in the example and I cannot for the life of me center the form (label and user input) inside the phone screen.

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">
    <link rel="stylesheet" href="styles.css">
    <title>Telephone Number Validator</title>
  </head>
  <body>
    <h1>Telephone Number Validator</h1>
    <div class="main">
      <div class="phone-container">
        <div class="phone-background">
          <div class="phone-camera"></div>
          <div class="phone-screen">
            <form>
              <label class="label" for="user-input">Enter a Number:</label>
              <input type="tel" id="user-input" name="phone">
              <button type="button" id="check-btn">Check</button>
              <button type="button" id="clear-btn">Clear</button>
            </form>
            <div id="results-div"></div>
          </div>
        </div>
      </div>
      <script src="script.js"></script>
    </div>
  </body>
</html>

/* file: script.js */


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

html, body {
  background-color: #3b3b4f;
}

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

h1 {
  color: white;
  font-family: tahoma, sans-serif;
  text-align: center;
  margin: 15px;
}

.phone-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

.phone-background {
  position: relative;
  height: 425px;
  width: 200px;
  background-color: black;
  border-radius: 20px;
}

.phone-camera {
  position: absolute;
  background-color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  left: 45%;
  top: 5px;
  margin: auto;
}

.phone-screen {
  background-color: #e0e0e0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 30px 20px;
  height: 30%;
  width: 80%;
}

.form {
  height: 100%;
} 

.label {
  text-align: center;
  align-items: center;
}

#results-div {
  background-color: #e0e0e0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* margin: 30px 20px; */
  height: 50%;
  width: 80%;
}
![Screenshot 2025-06-16 at 9.44.56 PM|502x499](upload://1qKQTjOAXaC19urp8wjyiZw92As.png)

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15

Challenge Information:

Build a Telephone Number Validator Project - Build a Telephone Number Validator
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-struc

Screenshot 2025-06-16 at 9.44.56 PM
Screenshot 2025-06-16 at 9.44.56 PM1680×1670 107 KB

tures-v8/build-a-telephone-number-validator-project/build-a-telephone-number-validator

2

I figured it out. It was b/c the form , label, and button were all display inline.

This fixed it:
label,
input,
button {
display: block;
text-align: center;
margin: 0 auto;
}