Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yashi-singh-1/telephone-number-validator

This project validates US phone numbers in formats such as 555-555-5555 and (555) 555-5555. It ensures the area code is present and, if a country code is included, it must be '1'.
https://github.com/yashi-singh-1/telephone-number-validator

css css3 freecodecamp freecodecamp-challenge freecodecamp-frontend freecodecamp-project html html-css html-css-javascript html5 javascript phone-number phone-number-validation telephone-number-validation telephone-numbers

Last synced: 3 days ago
JSON representation

This project validates US phone numbers in formats such as 555-555-5555 and (555) 555-5555. It ensures the area code is present and, if a country code is included, it must be '1'.

Awesome Lists containing this project

README 

        
# Telephone Number Validator - FreeCodeCamp Challenge



This project is a solution to the [Build a Telephone Number Validator challenge on FreeCodeCamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-a-telephone-number-validator-project/build-a-telephone-number-validator). The challenge involves creating a web page that validates a given phone number based on US phone number formats.



## Table of contents



- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Continued development](#continued-development)

  - [Useful resources](#useful-resources)

- [Contributing](#contributing)

- [Author](#author)

- [Acknowledgments](#acknowledgments)



## Overview



### The challenge



The goal of this challenge is to build a web page that validates US phone numbers. The page features:



- An input field for users to enter a phone number.

- A button to trigger the validation.

- A section to display whether the number is valid or invalid based on US phone number formats.



### Screenshot



![Telephone Number Validator Screenshot](Preview.png)



### Links



- Live Demo: [View the Telephone Number Validator](https://codepen.io/Yashi-Singh/pen/abgLZOY)



## My process



### Built with



- **HTML5** for the structure and layout of the page.

- **CSS3** for styling and responsive design.

- **JavaScript (ES6)** for implementing the phone number validation logic and interacting with the DOM.



### What I learned



Working on this project enhanced my understanding of:



- **Phone Number Validation**: Implementing regex-based validation for US phone numbers, including handling optional country codes and different formats.

- **DOM Manipulation**: Dynamically updating the DOM to display results based on user input and handling user interactions.

- **Event Handling**: Capturing user actions (button clicks, Enter key press) to trigger the validation function.



### Continued development



Future improvements for this project may include:



- **Enhanced Validation**: Supporting additional international phone number formats.

- **User Interface Enhancements**: Refining the design for a more modern and user-friendly experience.

- **Real-time Validation**: Implementing real-time feedback as the user types in the phone number.



### Useful resources



- [MDN Web Docs - RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) - Documentation on regular expressions and their usage in JavaScript.

- [MDN Web Docs - Element.classList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) - Overview of the classList property for manipulating element classes.

- [CSS Tricks - Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - Guide on using Flexbox for layout and design.



## Contributing



We welcome contributions to the Palindrome Checker project! Please see our [CONTRIBUTING.md](CONTRIBUTING.md) file for guidelines on how to get involved.



## Author



- LinkedIn - [Yashi Singh](https://www.linkedin.com/in/yashi-singh-b4143a246)



## Acknowledgments



A big thank you to FreeCodeCamp for providing this challenge, which allowed me to apply and improve my skills in JavaScript and web development. Special thanks to the community and resources that offered support and inspiration throughout the project.