This Telephone Number Validator project was created as a certification requirement for the JavaScript Algorithms and Data Structures course from freeCodeCamp. The objective was to build an application that validates US phone numbers based on various acceptable formats. The app meets the required functionalities, providing a user-friendly interface to input a phone number and receive feedback on its validity.

Important

This project is part of the freeCodeCamp JavaScript Algorithms and Data Structures course. Although freeCodeCamp provides guidelines and user stories for certification projects, it does not offer tutorials or step-by-step guides for development. This project was built entirely from scratch using my own approach to meet the requirements.

Screenshot

📝 Project Objective

The primary objective of this project was to create a telephone number validator application that accurately determines the validity of US phone numbers. The goal was to implement an app that can handle various phone number formats, including those with or without country codes, different separators, and parentheses. The design and functionality reflect personal choices while sticking to the user stories provided.

🔧 Features

• Input Field: An input element with id user-input for users to enter a phone number.

• Check Button: A button element with id check-btn that triggers the validation check.

• Clear Button: A button element with id clear-btn to reset the results and input field.

• Result Display: A div element with id results-div that shows whether the entered phone number is valid or invalid.

• Validation and Alerts: Alerts and result messages are displayed based on the input's validity, with appropriate styling changes for visual feedback.

• Phone Number Validation: Utilizes regular expressions to validate phone number formats and ensure the correct country code.

📖 Learnings

• Regex: Gained more experience applying regular expressions to validate various US phone number formats and handle different input scenarios.

• String Manipulation: Utilized JavaScript for processing and validating user input.

• Event Handling: Implemented event listeners to handle user interactions and trigger validation checks.

• Styling: Enhanced user experience with visual feedback based on input validity.

💻 Technologies Used

• HTML5 for structuring the application.

• CSS3 for styling and providing visual feedback.

• JavaScript for functionality, including regex validation and DOM manipulation.

💡 Acknowledgments

• freeCodeCamp: For providing the project guidelines and user stories that served as the basis for this application.

• Nermin Muminovic: For the 3D model video used for inspiration, which can be found here: Dribbble