+ Telephone Number Validator
+
+
+
+
+
+
+
+
+
+
+ +1 555-555-5555+ +Note that the area code is required. Also, if the country code is provided, you must confirm that the country code is `1`. + +**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. + +**User Stories:** + +1. You should have an `input` element with an `id` of `"user-input"`. +1. You should have a `button` element with an `id` of `"check-btn"`. +1. You should have a `button` element with an `id` of `"clear-btn"`. +1. You should have a `div`, `span` or `p` element with an `id` of `"results-div"`. +1. When you click on the `#check-btn` element without entering a value into the `#user-input` element, an alert should appear with the text `"Please provide a phone number"`. +1. When you click on the `#clear-btn` element, the content within the `#results-div` element should be removed. +1. When the `#user-input` element contains `1 555-555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Valid US number: 1 555-555-5555"`. +1. When the `#user-input` element contains `1 (555) 555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Valid US number: 1 (555) 555-5555"`. +1. When the `#user-input` element contains `5555555555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Valid US number: 5555555555"`. +1. When the `#user-input` element contains `555-555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Valid US number: 555-555-5555"`. +1. When the `#user-input` element contains `(555)555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Valid US number: (555)555-5555"`. +1. When the `#user-input` element contains `1(555)555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Valid US number: 1(555)555-5555"`. +1. When the `#user-input` element contains `555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 555-5555"`. +1. When the `#user-input` element contains `5555555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 5555555"`. +1. When the `#user-input` element contains `1 555)555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 1 555)555-5555"`. +1. When the `#user-input` element contains `1 555 555 5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Valid US number: 1 555 555 5555"`. +1. When the `#user-input` element contains `1 456 789 4444` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Valid US number: 1 456 789 4444"`. +1. When `#user-input` contains `123**&!!asdf#` and `#check-btn` is clicked, `#results-div` should contain the text `"Invalid US number: 123**&!!asdf#"`. +1. When the `#user-input` element contains `55555555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 55555555"`. +1. When the `#user-input` element contains `(6054756961)` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: (6054756961)"`. +1. When the `#user-input` element contains `2 (757) 622-7382` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 2 (757) 622-7382"`. +1. When the `#user-input` element contains `0 (757) 622-7382` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 0 (757) 622-7382"`. +1. When the `#user-input` element contains `-1 (757) 622-7382` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: -1 (757) 622-7382"`. +1. When the `#user-input` element contains `2 757 622-7382` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 2 757 622-7382"`. +1. When the `#user-input` element contains `10 (757) 622-7382` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 10 (757) 622-7382"`. +1. When the `#user-input` element contains `27576227382` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 27576227382"`. +1. When the `#user-input` element contains `(275)76227382` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: (275)76227382"`. +1. When the `#user-input` element contains `2(757)6227382` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 2(757)6227382"`. +1. When the `#user-input` element contains `2(757)622-7382` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 2(757)622-7382"`. +1. When the `#user-input` element contains `555)-555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 555)-555-5555"`. +1. When the `#user-input` element contains `(555-555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: (555-555-5555"`. +1. When `#user-input` contains `(555)5(55?)-5555` and `#check-btn` is clicked, `#results-div` should contain the text `"Invalid US number: (555)5(55?)-5555"`. +1. When the `#user-input` element contains `55 55-55-555-5` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 55 55-55-555-5"`. +1. When the `#user-input` element contains `11 555-555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 11 555-555-5555"`. + +# --hints-- + +You should have an `input` element with an `id` of `"user-input"`. + +```js +const el = document.getElementById('user-input'); +assert.strictEqual(el?.nodeName?.toLowerCase(), 'input'); +``` + +You should have a `button` element with an `id` of `"check-btn"`. + +```js +const el = document.getElementById('check-btn'); +assert.strictEqual(el?.nodeName?.toLowerCase(), 'button'); +``` + +You should have a `button` element with an `id` of `"clear-btn"`. + +```js +const el = document.getElementById('clear-btn'); +assert.strictEqual(el?.nodeName?.toLowerCase(), 'button'); +``` + +You should have a `div`, `span`, or `p` element with an `id` of `"results-div"`. + +```js +const el = document.getElementById('results-div'); +assert(['div', 'span', 'p'].includes(el?.nodeName?.toLowerCase())); +``` + +When you click on the `#check-btn` element without entering a value into the `#user-input` element, an alert should appear with the text `"Please provide a phone number"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +let alertMessage; +window.alert = (message) => alertMessage = message; // Override alert and store message + +userInput.value = ''; +checkBtn.click(); +assert.strictEqual(alertMessage.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'please provide a phone number'); +``` + +When you click on the `#clear-btn` element, the content within the `#results-div` element should be removed. + +```js +const resultsDiv = document.getElementById('results-div'); +const clearBtn = document.getElementById('clear-btn'); + +resultsDiv.innerHTML = `Testing testing 123 +Ladies and gentlemen, we are floating in space.`; +clearBtn.click(); +assert.isEmpty(resultsDiv.textContent); +``` + +When the `#user-input` element contains `1 555-555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Valid US number: 1 555-555-5555"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '1 555-555-5555'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'valid us number: 1 555-555-5555'); +``` + +When the `#user-input` element contains `1 (555) 555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Valid US number: 1 (555) 555-5555"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '1 (555) 555-5555'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'valid us number: 1 (555) 555-5555'); +``` + +When the `#user-input` element contains `5555555555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Valid US number: 5555555555"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '5555555555'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'valid us number: 5555555555'); +``` + +When the `#user-input` element contains `555-555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Valid US number: 555-555-5555"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '555-555-5555'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'valid us number: 555-555-5555'); +``` + +When the `#user-input` element contains `(555)555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Valid US number: (555)555-5555"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '(555)555-5555'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'valid us number: (555)555-5555'); +``` + +When the `#user-input` element contains `1(555)555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Valid US number: 1(555)555-5555"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '1(555)555-5555'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'valid us number: 1(555)555-5555'); +``` + +When the `#user-input` element contains `555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 555-5555"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '555-5555'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: 555-5555'); +``` + +When the `#user-input` element contains `5555555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 5555555"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '5555555'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: 5555555'); +``` + +When the `#user-input` element contains `1 555)555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 1 555)555-5555"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '1 555)555-5555'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: 1 555)555-5555'); +``` + +When the `#user-input` element contains `1 555 555 5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Valid US number: 1 555 555 5555"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '1 555 555 5555'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'valid us number: 1 555 555 5555'); +``` + +When the `#user-input` element contains `1 456 789 4444` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Valid US number: 1 456 789 4444"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '1 456 789 4444'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'valid us number: 1 456 789 4444'); +``` + +When `#user-input` contains `123**&!!asdf#` and `#check-btn` is clicked, `#results-div` should contain the text `"Invalid US number: 123**&!!asdf#"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '123**&!!asdf#'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: 123**&!!asdf#'); +``` + +When the `#user-input` element contains `55555555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 55555555"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '55555555'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: 55555555'); +``` + +When the `#user-input` element contains `(6054756961)` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: (6054756961)"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '(6054756961)'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: (6054756961)'); +``` + +When the `#user-input` element contains `2 (757) 622-7382` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 2 (757) 622-7382"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '2 (757) 622-7382'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: 2 (757) 622-7382'); +``` + +When the `#user-input` element contains `0 (757) 622-7382` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 0 (757) 622-7382"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '0 (757) 622-7382'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: 0 (757) 622-7382'); +``` + +When the `#user-input` element contains `-1 (757) 622-7382` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: -1 (757) 622-7382"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '-1 (757) 622-7382'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: -1 (757) 622-7382'); +``` + +When the `#user-input` element contains `2 757 622-7382` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 2 757 622-7382"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '2 757 622-7382'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: 2 757 622-7382'); +``` + +When the `#user-input` element contains `10 (757) 622-7382` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 10 (757) 622-7382"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '10 (757) 622-7382'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: 10 (757) 622-7382'); +``` + +When the `#user-input` element contains `27576227382` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 27576227382"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '27576227382'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: 27576227382'); +``` + +When the `#user-input` element contains `(275)76227382` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: (275)76227382"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '(275)76227382'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: (275)76227382'); +``` + +When the `#user-input` element contains `2(757)6227382` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 2(757)6227382"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '2(757)6227382'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: 2(757)6227382'); +``` + +When the `#user-input` element contains `2(757)622-7382` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 2(757)622-7382"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '2(757)622-7382'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: 2(757)622-7382'); +``` + +When the `#user-input` element contains `555)-555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 555)-555-5555"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '555)-555-5555'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: 555)-555-5555'); +``` + +When the `#user-input` element contains `(555-555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: (555-555-5555"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '(555-555-5555'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: (555-555-5555'); +``` + +When `#user-input` contains `(555)5(55?)-5555` and `#check-btn` is clicked, `#results-div` should contain the text `"Invalid US number: (555)5(55?)-5555"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '(555)5(55?)-5555'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: (555)5(55?)-5555'); +``` + +When the `#user-input` element contains `55 55-55-555-5` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 55 55-55-555-5"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '55 55-55-555-5'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: 55 55-55-555-5'); +``` + +When the `#user-input` element contains `11 555-555-5555` and the `#check-btn` element is clicked, the `#results-div` element should contain the text `"Invalid US number: 11 555-555-5555"`. + +```js +const userInput = document.getElementById('user-input'); +const checkBtn = document.getElementById('check-btn'); +const resultsDiv = document.getElementById('results-div'); + +resultsDiv.innerHTML = ''; +userInput.value = '11 555-555-5555'; +userInput.dispatchEvent(new Event('change')); +checkBtn.click(); +assert.strictEqual(resultsDiv.innerText.trim().toLowerCase(), 'invalid us number: 11 555-555-5555'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + +
+1 (555) 555-5555
+1(555)555-5555
+1 555 555 5555
+5555555555
+555-555-5555
+(555)555-5555
+
+