diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 1ad6d9f58fe..bed24cb45d1 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -2373,7 +2373,12 @@ ] }, "yaxm": { "title": "245", "intro": [] }, - "lofk": { "title": "246", "intro": [] }, + "lab-telephone-number-validator": { + "title": "Build a Telephone Number Validator", + "intro": [ + "For this lab, you'll build an application that checks if a number is a valid United States phone number." + ] + }, "lab-cash-register": { "title": "Build a Cash Register", "intro": ["For this lab, you will build a cash register."] diff --git a/client/src/pages/learn/front-end-development/lab-telephone-number-validator/index.md b/client/src/pages/learn/front-end-development/lab-telephone-number-validator/index.md new file mode 100644 index 00000000000..686c3be64c7 --- /dev/null +++ b/client/src/pages/learn/front-end-development/lab-telephone-number-validator/index.md @@ -0,0 +1,9 @@ +--- +title: Introduction to the Build a Telephone Number Validator +block: lab-telephone-number-validator +superBlock: front-end-development +--- + +## Introduction to the Build a Telephone Number Validator + +For this lab, you'll build an application that checks if a number is a valid United States phone number. diff --git a/curriculum/challenges/_meta/lab-telephone-number-validator/meta.json b/curriculum/challenges/_meta/lab-telephone-number-validator/meta.json new file mode 100644 index 00000000000..cecb910f202 --- /dev/null +++ b/curriculum/challenges/_meta/lab-telephone-number-validator/meta.json @@ -0,0 +1,12 @@ +{ + "name": "Build a Telephone Number Validator", + "isUpcomingChange": true, + "usesMultifileEditor": true, + "blockType": "lab", + "dashedName": "lab-telephone-number-validator", + "order": 246, + "superBlock": "front-end-development", + "challengeOrder": [{ "id": "657bdcb9a322aae1eac38391", "title": "Build a Telephone Number Validator" }], + "helpCategory": "JavaScript" + } + \ No newline at end of file diff --git a/curriculum/challenges/english/25-front-end-development/lab-telephone-number-validator/657bdcb9a322aae1eac38391.md b/curriculum/challenges/english/25-front-end-development/lab-telephone-number-validator/657bdcb9a322aae1eac38391.md new file mode 100644 index 00000000000..bbaf5618316 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lab-telephone-number-validator/657bdcb9a322aae1eac38391.md @@ -0,0 +1,752 @@ +--- +id: 657bdcb9a322aae1eac38391 +title: Build a Telephone Number Validator +challengeType: 14 +dashedName: lab-telephone-number-validator +demoType: onClick +--- + +# --description-- + +In the US, phone numbers can be formatted in many ways. Here are some examples of valid formats for US phone numbers: + +
+1 555-555-5555
+1 (555) 555-5555
+1(555)555-5555
+1 555 555 5555
+5555555555
+555-555-5555
+(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 + + + + + + Telephone Number Validator + + + + + + + + +``` + +```css + +``` + +```js + +``` + +# --solutions-- + +```html + + + + + + + + Telephone Number Validator + + + +
+ +

Telephone Number Validator

+
+
+
+
+ + +
+
+ + +
+
+
+ + + +``` + +```css +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --phone-colors: #dfdfe2; + --center-text: center; + --gray-00: #fff; +} + +body { + background-color: #3b3b4f; + font-family: Verdana, Geneva, Tahoma, sans-serif; + color: #0a0a23; +} + +main { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 40px 10px; +} + +.freecodecamp-logo { + width: 100%; + height: 30px; + margin-bottom: 20px; +} + +h1 { + color: white; + width: 100%; + max-width: 480px; + margin: 15px 0; + text-align: var(--center-text); +} + +.phone-container { + position: relative; + background-color: var(--phone-colors); + width: 250px; + height: 460px; + margin: 30px auto; + border-radius: 15px; + border: 15px solid black; + display: flex; + flex-direction: column; + align-items: center; +} + +.phone-background { + background-color: black; + width: 100%; + height: 25px; +} + +.phone-camera { + background-color: var(--phone-colors); + width: 10px; + height: 10px; + border-radius: 50%; + margin: auto; +} + +label { + margin: 10px auto 5px; +} + +#user-input { + display: block; + margin: 10px auto; + padding: 5px; + border: 1px solid black; + border-radius: 10px; + text-align: var(--center-text); + width: 90%; + height: 42px; + font-size: 16px; +} + +.phone-footer { + background-color: black; + width: 100%; + height: 40px; + position: absolute; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; +} + +.btn-styles { + cursor: pointer; + width: 100px; + margin: 10px; + color: #0a0a23; + font-size: 18px; + background-color: #ffffff; + background-image: linear-gradient(#ffffff, #928d86); + border-color: #ffffff; + border-width: 3px; +} + +#results-div { + overflow-y: auto; + height: 265px; + width: 100%; +} + +.results-text { + font-size: 1.2rem; + padding: 5px; + text-align: var(--center-text); + margin: 10px 0; +} +``` + +```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"); + +const checkValidNumber = (input) => { + if (input === "") { + alert("Please provide a phone number"); + return; + } + const countryCode = "^(1\\s?)?"; + const areaCode = "(\\([0-9]{3}\\)|[0-9]{3})"; + const spacesDashes = "[\\s\\-]?"; + const phoneNumber = "[0-9]{3}[\\s\\-]?[0-9]{4}$"; + const phoneRegex = new RegExp( + `${countryCode}${areaCode}${spacesDashes}${phoneNumber}`, + ); + + const pTag = document.createElement("p"); + pTag.className = "results-text"; + phoneRegex.test(input) + ? (pTag.style.color = "#00471b") + : (pTag.style.color = "#4d3800"); + pTag.appendChild( + document.createTextNode( + `${phoneRegex.test(input) ? "Valid" : "Invalid"} US number: ${input}`, + ), + ); + resultsDiv.appendChild(pTag); +}; + +checkBtn.addEventListener("click", () => { + checkValidNumber(userInput.value); + userInput.value = ""; +}); + +userInput.addEventListener("keydown", (e) => { + if (e.key === "Enter") { + checkValidNumber(userInput.value); + userInput.value = ""; + } +}); + +clearBtn.addEventListener("click", () => { + resultsDiv.textContent = ""; +}); +``` diff --git a/curriculum/test/utils/mongo-ids.js b/curriculum/test/utils/mongo-ids.js index 857e6989a10..855a03c5665 100644 --- a/curriculum/test/utils/mongo-ids.js +++ b/curriculum/test/utils/mongo-ids.js @@ -77,7 +77,7 @@ const duplicatedProjectIds = [ // Dice Game Project // Telephone Number Validator - 'aff0395860f5d3034dc0bfc9', + '657bdcb9a322aae1eac38391', // Cash Register 'aa2e6f85cab2ab736c9a9b24',