Build A Language Translator App in HTML CSS & JavaScript | Translator App in JavaScript

Build A Language Translator App in HTML CSS & JavaScript | Translator App in Javascript
In this video, I have shown you how to Build A Language Translator App in HTML CSS & JavaScript. This app is similar to Google Translate. In this app, users can easily translate text into multiple languages, copy translated text, and convert text to speech.
Download countries.js file only of this Translator App
drive.google.com/file/d/1AuBK...
Download Codes of this Language Translator
www.codingnepalweb.com
Timestamps:
0:00 Demo of Translator App
2:29 HTML & CSS Code Start
11:51 Creating JavaScript Folder & Files
12:50 Storing Supported Countries as an Object
14:08 Creating Options Tag & Adding it inside the Select Tag
16:29 Sending Request to API & Fetching Data of Entered Text From API
21:25 Working on Exchange Icon
23:44 Working on Copy & Speech Icons
Second Channel - bit.ly/3aHNkru
Facebook - / coding.np
Instagram - / coding.np
Music Credit:
Deep Sea by Vendredi
Free Download / Stream: bit.ly/-deep-sea
Music promoted by Audio Library • Deep Sea - Vendredi (N...
Something 'bout July (Instrumental) by RYYZN
Free Download / Stream: bit.ly/-_something-bout-july
Music promoted by Audio Library • Something 'bout July (...
Ehrling - You And Me (Vlog No Copyright Music)
• Ehrling - You And Me (...

Пікірлер: 161

  • @Niku1299
    @Niku1299 Жыл бұрын

    Whenever I watched your video I feel like this guy is teaching the best way to write scripting easily, and your explanation is good. Every time I learn new things from your videos. Thank You :)

  • @VortexVibesYT
    @VortexVibesYT2 жыл бұрын

    Thanks for accepting my project request, here is a like and a sub!

  • @ramseselgrande1555
    @ramseselgrande15552 жыл бұрын

    Excelente aporte hermano... saludos desde el Perú.

  • @pitaji_badewale
    @pitaji_badewale Жыл бұрын

    You are a very good programmer... Thanks for this amazing tutorial.♥️ But After watching these amazing tutorials I feel that I know nothing 😞

  • @user-lk6dw4fd2b
    @user-lk6dw4fd2b Жыл бұрын

    YEAAAAAAAAAAAAAAAAAAAH Thank you Brother for your video. I have searched so looooong time a such tutorial for google translate API and finally i found it. Thank u again

  • @sahilmaharjan3955
    @sahilmaharjan3955 Жыл бұрын

    You have got some really goosebump js skills

  • @darkcss77
    @darkcss772 жыл бұрын

    A Great Video 👍 I was Searching for that

  • @gulsimali6660

    @gulsimali6660

    2 жыл бұрын

    Brilliant

  • @Random-cf9md

    @Random-cf9md

    2 жыл бұрын

    Great

  • @paramkumar5288
    @paramkumar5288 Жыл бұрын

    Best channel for enhancing skills

  • @peterxavier1
    @peterxavier12 жыл бұрын

    Wow! This is absolutely awesome. I always learn something new from your videos. Thanks alot👍

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Happy to hear that!

  • @NuclearGames111

    @NuclearGames111

    2 жыл бұрын

    @@CodingNepal Hi coding nepal 👋👋👋👋 I am following you since 1 year you are so much talented creator.... PLZ BRO MAKE AN ONLINE CHAT APP USING 'HTML' , 'CSS' , 'JAVASCRIPT ' AND FIREBASE PLZZZZZZZZ...... PICK MY MSG 🤞🤞🤞🤞

  • @GouravVerma2907

    @GouravVerma2907

    2 ай бұрын

    @@CodingNepal can i use google translate api??

  • @mxxlu3996
    @mxxlu39962 жыл бұрын

    wow epic man deserve 1M!!!!OP

  • @qphiig8731
    @qphiig8731 Жыл бұрын

    useful as always. Thanks you

  • @souhaila1202
    @souhaila1202 Жыл бұрын

    thank tou sooooooooooooooooo much . yo're my saver every time

  • @Duluper
    @Duluper8 ай бұрын

    So me and my friends created a language (you've probably did it before) and I used this video and modified the translator a bit so that it only translates to my language that I made with my friends so ty!

  • @yukisann4600

    @yukisann4600

    4 ай бұрын

    Hello can i get your code for reference pls?

  • @karimfawzy8932
    @karimfawzy8932 Жыл бұрын

    Iam very sure this channel is the most successful in youtube

  • @reallife1482
    @reallife1482 Жыл бұрын

    Incredible ❤️😍

  • @najmiddinturgunpolatov
    @najmiddinturgunpolatov Жыл бұрын

    thank you bro,

  • @ibrahimkhalid3999
    @ibrahimkhalid39992 жыл бұрын

    I am appreciate you . You make amazing project . Love from Pakistan

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thank you.. Keep loving ❤️

  • @yubiroaster6285
    @yubiroaster62852 жыл бұрын

    Big fan sir 🙇🙌🇳🇵

  • @nikitolaypodcast
    @nikitolaypodcast2 жыл бұрын

    Respect!

  • @RossWasTaken
    @RossWasTaken Жыл бұрын

    Thanks bro, I used it for my typing test game. Now it can test many languages 🤩

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Great 👍

  • @chetanwankhade9120

    @chetanwankhade9120

    Жыл бұрын

    can you send me synopsis of this project

  • @broum2911
    @broum29112 жыл бұрын

    wow nice content brother. i with next vidio all thebest for you...

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thanks brother ❤️

  • @bearddev9974
    @bearddev9974 Жыл бұрын

    Awesome 👍

  • @ottomozale3931
    @ottomozale3931 Жыл бұрын

    thank you, bro. I was waiting here for one video like that. Thank you so much

  • @lephat4475
    @lephat44752 жыл бұрын

    What's the purpose of using ul for "control" element? Why should'nt we use div tag instead?

  • @sweet-boy1
    @sweet-boy17 ай бұрын

    Awesome, I like It

  • @makeasence1344
    @makeasence13442 жыл бұрын

    One best freelancer work

  • @mdhossen7082
    @mdhossen70822 жыл бұрын

    Amazing project Plus helpful

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Many many thanks

  • @temal32
    @temal322 жыл бұрын

    More please!

  • @dorukane1821
    @dorukane1821 Жыл бұрын

    thank you

  • @codingcinemax
    @codingcinemax2 жыл бұрын

    Quality Content...❤️

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    ❤️❤️

  • @meiribernardina4679
    @meiribernardina46792 жыл бұрын

    Thank you!

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Welcome to both of you ❤️

  • @codingcinemax
    @codingcinemax2 жыл бұрын

    🔥🔥💯💯

  • @PrinceKumar-hh6yn
    @PrinceKumar-hh6yn10 ай бұрын

    What I have understood for sure is that - ".js" can do a lot

  • @hulashmahto99
    @hulashmahto992 жыл бұрын

    Good video

  • @golyrics1286
    @golyrics1286 Жыл бұрын

    NICE WORK SIR, I APPRECIATE AND I ALSO WANT TO ASK IF YOU CAN GIVE GUIDE ON HOW TO GET AND DOWNLOAD THE VOICE IN MP3 OR WAV.

  • @voatxm
    @voatxm2 жыл бұрын

    Its damn 😲 op

  • @user-yi3rq7jk2r
    @user-yi3rq7jk2r2 жыл бұрын

    perfect go on

  • @AnnopTunsomkid
    @AnnopTunsomkid2 жыл бұрын

    Wow have translate to thai language. 👍

  • @VrlHtzz
    @VrlHtzz Жыл бұрын

    Hi Sir, is there any limit? how many times we can do translation ?

  • @zeeshanali7639
    @zeeshanali76392 жыл бұрын

    No Words ❤️❤️❤️

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thanks ❤️

  • @eee-bro
    @eee-bro2 жыл бұрын

    Brilliant💕

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thanks ❤️

  • @miskinga7382
    @miskinga73822 жыл бұрын

    Fantastic 🙂

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thanks 😀

  • @vigorousinfo...4146
    @vigorousinfo...41462 жыл бұрын

    please make a notes making app! I really like your videos and I also don't even miss any of your video. I request you to please make a notes making app

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Please, check out my last video that was about notes app.

  • @ddhananjayrao3296
    @ddhananjayrao32962 жыл бұрын

    Thank you for providing such valuable projects for practice, keep up the good work, while trying the above, I found that speech works only for english audio. no audio for other lang. Also source code of this video is unavailable on your site. can you please update that. That will be a great help to tally if i missed out anywhere.

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    I've used speech synthesis web speech API to convert a text into speech. For now, it supports limited languages. I'll provide the source codes for this project on my website soon.

  • @ibrahimkhalid3999
    @ibrahimkhalid39992 жыл бұрын

    good bro well done

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thank you so much 😀

  • @storyPlus12
    @storyPlus122 жыл бұрын

    Amazing

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thanks

  • @sourabhsp9313
    @sourabhsp9313 Жыл бұрын

    ❤❤❤

  • @Henry_Nunez
    @Henry_Nunez2 жыл бұрын

    👍👏👏👈

  • @CheckYouTubeUIUX
    @CheckYouTubeUIUX Жыл бұрын

    ❤️

  • @taranewstime6909
    @taranewstime69092 жыл бұрын

    Nice app

  • @STARGAMERMJ
    @STARGAMERMJ2 жыл бұрын

    Nice bro 😁

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thanks bro

  • @DevAmbience
    @DevAmbience2 жыл бұрын

    Hey Can you create a full ecommerce website using PHP with AUTH page , social login , payment gateway, add to cart function, track order, wishlist and a admin panel (responsive) ??

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Okay, I'll think about it.

  • @zahirpahari

    @zahirpahari

    Жыл бұрын

    @@CodingNepal your all script can't work why ...?

  • @odiljonyokubjonov1034

    @odiljonyokubjonov1034

    Жыл бұрын

    All scripts are working pretty well:)

  • @khildesh
    @khildesh2 жыл бұрын

    Brother aap tool like pdf to html, html to pdf is type ka tool banane wala tutorials banaiye please. Thank You.

  • @rextonuae2618
    @rextonuae26182 жыл бұрын

    this app is not working correctly i check eng to Arabic and urdu not working.

  • @desi_fitness_boy07
    @desi_fitness_boy072 жыл бұрын

    Very good bro, but make a translator which is auto language detector like google translator

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Okay, I'll try it.

  • @zahirpahari

    @zahirpahari

    Жыл бұрын

    @@CodingNepal plz ..i will waiting

  • @payalpundir4360
    @payalpundir4360 Жыл бұрын

    Amazing, I will use it as a project 😊

  • @namanyadav7207
    @namanyadav72072 жыл бұрын

    Ye har sentence ko hindi m change nhi kr rha hai what I will do now

  • @NuclearGames111
    @NuclearGames1112 жыл бұрын

    Hi coding nepal 👋👋👋👋 I am following you since 1 year you are so much talented creator.... PLZ BRO MAKE AN ONLINE CHAT APP USING 'HTML' , 'CSS' , 'JAVASCRIPT ' AND FIREBASE PLZZZZZZZZ...... PICK MY MSG 🤞🤞🤞🤞

  • @codinghub2686
    @codinghub26862 жыл бұрын

    Sir please give a voice in your video and EXPLANATION also 😇😇😇😇

  • @nurasian7355
    @nurasian73552 жыл бұрын

    If creating a custom translation Where should I fix the code in this code? Thank you.

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Fix code..? You mean without using any other API.

  • @nurasian7355

    @nurasian7355

    2 жыл бұрын

    @@CodingNepalYes fix code? Write to translate as required, may be defined in scripts or in databases or Sheet. Want you to teach, thank you very much.

  • @GALANAGADesireeM
    @GALANAGADesireeM8 ай бұрын

    i've tried your work but why does the console.log (data ) says its native code, pls help me

  • @dev7755
    @dev77552 жыл бұрын

    8:30

  • @MBDev_
    @MBDev_2 жыл бұрын

    Amazing video bro. 😍 can you tell me ho to multiselect in vs code. i use Ctrl+ D but i watch you make different tell me the shourtcut you use.

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Alt + Right click to multiselect and Shift + Alt + Arrow down to duplicate the line

  • @toyinoluwole2485
    @toyinoluwole24858 ай бұрын

    Thanks for this, please how do I go about it if I want to have my own database.

  • @OurWorldIsAwesome
    @OurWorldIsAwesome8 ай бұрын

    How to change api to google api?

  • @ziontutorial
    @ziontutorial Жыл бұрын

    Can you make text to handwriting website ???

  • @umeshsinha6388
    @umeshsinha63882 жыл бұрын

    can you teach how to make image captcha program using javascript i will be thankful to you if you do it for me

  • @ashwinanish5805
    @ashwinanish58052 жыл бұрын

    Better than Google translate

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Glad you like it ❤️

  • @CheckYouTubeUIUX
    @CheckYouTubeUIUX Жыл бұрын

    Omg bro

  • @highendgamer7849
    @highendgamer7849 Жыл бұрын

    Please tell me is it dynamic translator app?????

  • @soumyameena6316
    @soumyameena63162 жыл бұрын

    Nothing is coming in console 😕

  • @LegalLegacy121
    @LegalLegacy1212 жыл бұрын

    how did you get list of countries in your code ??

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    I've stored all supported countries as an object. Watch the video for more details information about it.

  • @omkarjaiswal3613
    @omkarjaiswal3613 Жыл бұрын

    I have used nearly the same code with some slight modifications , it is showing translateBtn.addEventListener is not a function, I am not able to figure out what shall I look to rectify the fault. Can you tell from this or u need more info?

  • @geek_24

    @geek_24

    Жыл бұрын

    Hi brother I also create some tutorial videos, I have created a translation app in ReactJS please check it out :)

  • @Hindi_Work
    @Hindi_Work Жыл бұрын

    Sir voice download ka v dijiye

  • @bestcricketnews3681
    @bestcricketnews36812 жыл бұрын

    Bro i need this code that is on your website demo. I want to make website plz give me that code which is on your website.

  • @umakantsahani6151
    @umakantsahani6151 Жыл бұрын

    Just an amazing translator tool you made, but is it responsive on all devices 🤔

  • @edvard_miller4868
    @edvard_miller4868 Жыл бұрын

    а в какой программе код вводить то?

  • @highendgamer7849
    @highendgamer7849 Жыл бұрын

    Kya hum dynamic website ke example me isko bna skte h?????

  • @neerajchoithwani6975
    @neerajchoithwani697515 күн бұрын

    Why don't you use if else instead of ternary ,ternary is very confusing.

  • @web_dev210
    @web_dev2102 жыл бұрын

    I like your vadio, there is no source code of this project on your website... please provide source code Thanks !!!!

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Source code has been uploaded. You can download from here - codingnepalweb.com/demos/language-translator-javascript/

  • @web_dev210

    @web_dev210

    2 жыл бұрын

    @@CodingNepal Thanks!!!

  • @mdasifahmed593
    @mdasifahmed5932 жыл бұрын

    can you share the country code pls it's very helpful for me

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    You can download it from here - drive.google.com/file/d/1AuBKYK-6uEFWZP_4XYxisVFI-zOkHu-F/view?usp=sharing

  • @kumatoons5508
    @kumatoons55082 жыл бұрын

    how can you make a word counter?

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    I'll try to make video on it. Stay tuned!

  • @kumatoons5508

    @kumatoons5508

    2 жыл бұрын

    @@CodingNepal thanks alot!

  • @gracebavula2166
    @gracebavula21662 жыл бұрын

    where can i find those countries list?

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    You can download it from here - drive.google.com/file/d/1AuBKYK-6uEFWZP_4XYxisVFI-zOkHu-F/view?usp=sharing

  • @gracebavula2166

    @gracebavula2166

    2 жыл бұрын

    @@CodingNepal thanks man. much love from sweden

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Source code has been uploaded. You can download from here - codingnepalweb.com/demos/language-translator-javascript/

  • @SScAspirant412
    @SScAspirant412 Жыл бұрын

    brother I have a question that you used same Id two times in HTML page Is it correct to use same Id two times in a page?

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    No, ID should be unique for an HTML element. I may have entered the same ID by mistake.

  • @SScAspirant412

    @SScAspirant412

    Жыл бұрын

    @@CodingNepal thanks bro

  • @sonalpatel8032
    @sonalpatel80322 жыл бұрын

    This api is not working for all time If you can translate good morning from English to Hindi then result will be different

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    No, it is working but sometimes result might not be accurate because it is free API

  • @sonalpatel8032

    @sonalpatel8032

    2 жыл бұрын

    @@CodingNepal then another api is available which is use for free ?

  • @FofarpShorts
    @FofarpShorts2 жыл бұрын

    Hi

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Hello

  • @datalove6577
    @datalove6577 Жыл бұрын

    Where are you finding these free API's ?

  • @zahirpahari
    @zahirpahari Жыл бұрын

    Bro . it's countrie code not working plz some help.😢🙏🏻

  • @danielraducu9073
    @danielraducu9073 Жыл бұрын

    gg

  • @umeshsinha6388
    @umeshsinha63882 жыл бұрын

    hey man i need your help can you do it

  • @StonyCodes
    @StonyCodes Жыл бұрын

    Does this use jQuery?

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    No.. Pure JavaScript

  • @chikkii1601
    @chikkii16012 жыл бұрын

    can you provide the code?

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    You can download from here - www.codingnepalweb.com/language-translator-app-html-css-javascript/

  • @150RsDega
    @150RsDega2 жыл бұрын

    Enter "hi" in English to convert into Nepali and try to not laugh 😂😂😂

  • @hulashmahto99
    @hulashmahto992 жыл бұрын

    Google input tool in javascript

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Can you explain more..?

  • @hulashmahto99

    @hulashmahto99

    2 жыл бұрын

    @@CodingNepal easy hindi typing ☆☆com jaisa

  • @rnp0728
    @rnp07282 жыл бұрын

    Sir, Can i take some help from your videos and build some projects as an achievement?? Permission Granted or Not !! Please reply 🥲

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Sure, you can do it.

  • @rnp0728

    @rnp0728

    2 жыл бұрын

    Thanks a lot sir ….

  • @avengerkrish8352
    @avengerkrish8352 Жыл бұрын

    You have report for this project? Please send me

  • @makeasence1344
    @makeasence13442 жыл бұрын

    Impervious

  • @shashinautiyal3438
    @shashinautiyal34382 жыл бұрын

    Can you make a calculator

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    I've already made it. Here is the video - kzread.info/dash/bejne/omd6yMWDfpnSoqg.html

  • @kushalchakraborty6970
    @kushalchakraborty69702 жыл бұрын

    Source code?

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Please, check description for source codes link.

  • @bhuvana9550
    @bhuvana95503 ай бұрын

    Its not working