An Interest In:
Web News this Week
- April 3, 2024
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
How I created a translator web app using HTML,CSS and JAVASCRIPT
There are three things that are needed for an application-input,processing and output.For processing in this app means translation.We will be using funtranslation api
which returns translated content.
Funtranslations API
There are so many translation languages available which can be used for translations.Here we will be using minion language and to get response from the api we need to send the url in the given format-
Taking user input
For any translator app, the first thing needed is the user's input so we that using textarea
tag of HTML.
Processing user input
For processing which is done in our app.js, we reference textarea
in javascript using document.querySelector()
Now we have reference to input and to extract the value from this we will use textInp.value
.But first, we will make a function to get our translation url which we will be using it to fetch translated text from the server using the funtranslations api
Here serverUrl is the base url which is required for API. Now a fetch function which gets the translated text and displays output using innerText
on an output element also referenced using document.querySelector()
Translated output to the user
We will create a div that has no text and will show output after processing after clicking of a button happens.
Button referenced in the script and added an event listener addEventListener()
on it which waits for a click on the button and then calls our clickHandler
function.
To check the live demo of this app you can go to Banana app
Also I have created a repo on github.
This is my first blog. Suggestions are welcome from all of you. Thank You.
Original Link: https://dev.to/amansethi00/how-i-created-a-translator-web-app-using-html-css-and-javascript-2724
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To