How to Add a Telephone Input Field with Country Code & Flag using Pure JavaScript

Подписаться 5 тыс.

Просмотров 13 тыс.

50% 1

Phone numbers are standardized in an international format known as E.164 which combines country codes and subscriber numbers in a format like this: +14155552671. This format is required by many APIs (including Twilio's) and means that you don't have to store country codes and phone numbers in two separate database columns.
However, you probably don't want your users to have to type in a + sign and country code when they provide their phone number.
This video will walk through how to build a phone number input field with country code and flag using HTML,CSS & vanilla JavaScript.
📢 SUBSCRIBE my channel for more helpful 🎬videos
🔔 / @codingdesign
⌚Timestamps
00:00 Telephone Input Field with Country Code & Flag
00:41 HTML
03:56 CSS (UI Design)
12:54 JavaScript
16:30 JavaScript (Generate all countries with code and flag)
20:12 JavaScript (select specific country)
23:49 JavaScript (Search specific country)
28:03 Outro (Result)
Iconify Design (Flags)
✅ icon-sets.iconify.design/flag
🗃 Source Code :
✅ github.com/JeetSaru/Telephone...
🌎 Browser : Brave V.1.50
📝 Code Editor : VS Code
💠 Extensions : Live-Server

Опубликовано:

8 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 21

@adeisaac Год назад

So great, I have been looking for this

@CodingDesign Год назад

Hope it was helpful to you.

@arathabello4763 10 месяцев назад

thank you you're so great :D greetings from Chile :)

@CodingDesign 10 месяцев назад

Thanks for watching! Hope you'll show your same ❤ & support in future too.

@chinnaratthuengklin2179 2 месяца назад

Very cool, Thanks a lot bro.

@CodingDesign 2 месяца назад

You're welcome. Hope this video helped you.

@Risha8h 3 месяца назад

Jeet bhai awesome content❤

@CodingDesign 2 месяца назад

Thank you!. Hope it was helpful.

@fadelghani 2 месяца назад

Thank you so much

@CodingDesign 2 месяца назад

You're welcome. Hope this video was helpful.

@pramodyadeshan 11 месяцев назад

Thank you!

@CodingDesign 11 месяцев назад

You're most welcome.

@srutisasmal6589 11 месяцев назад

Great video, great explanation thanks a lot for this but ,I need some help for the last part, like you said if someone types the code country code the flag should change, can you please help with that?

@CodingDesign 11 месяцев назад

There're 2️⃣problems Problem 1️⃣ If you first enter phone number in your Input field & later if you choose specific option then your "_Input Field's Value_" will be replaced by "_Country Code_". ✅Solution: ⏏Update code function selectOption() { input_box.value = phone_code.innerText + input_box.value; } Problem 2️⃣ If you enter "COUNTRY CODE" in input field there won't be any ⏏Update (country Flag & Country code). ✅Solution: input_box.addEventListener('change', updateFlag); function updateFlag() { this.value = "+" + this.value; const matched_code = countries.find(country => country.phone == this.value); this.previousElementSibling.querySelector('.iconify').setAttribute('data-icon', `flag:${matched_code.code.toLowerCase()}-4x3`); this.previousElementSibling.querySelector('strong').innerHTML = '+' + matched_code.phone; }; ⚠ But I haven't given extra validation so you can try it yourself.

@clevertech74 9 месяцев назад

@@CodingDesign Hello there, first of thanks for this great project. It'll be great if the user types any country code this change or match the flag+country code on the left too. I know you have explained this above with your solution but it does not work for me, I get the error: Uncaught TypeError: this.previousElementSibling is null, it'll be nice if you could test this and let me know if it really works on your end? Thanks.