Welcome to the Language Translator App! This intuitive web application allows you to easily translate text between multiple languages in just a few clicks. Designed with simplicity and functionality in mind, it provides a seamless translation experience with instant results. Whether you're communicating with someone from another country, learning a new language, or traveling abroad, this app ensures you have access to accurate translations at your fingertips.

In addition to translating text, the app also includes powerful features like speech synthesis, enabling you to hear the pronunciation of words and phrases in both the source and target languages. With easy-to-use controls for language selection, text input, and translation, along with the ability to copy translations and swap languages effortlessly, the Language Translator App is the perfect tool for anyone looking to bridge language barriers. Enjoy a smooth, responsive, and engaging translation experience with a user-friendly interface, all powered by HTML, CSS, and JavaScript.

You may also check this simple HTML, CSS and JavaScript project:

• Event ID Badge Generator
• Vote Tally App
• Schedule Maker App
• Location Time Clock Identifier
• Hourglass Sand Timer

Features:

1. Text Input: Users can input text to be translated into the app.
2. Multiple Language Selection: The app supports multiple languages. Users can select both the source and target languages for translation.
3. Translation Display: The translated text is displayed instantly once the translation is complete.
4. Speech Synthesis: Users can click on speaker icons to hear the pronunciation of text in both source and target languages.
5. Copy Translation: By clicking on the copy icons, users can copy the translated text to the clipboard for easy pasting.
6. Language Switch: The app includes a feature that allows users to swap the source and target languages with a single click.
7. Responsive Layout: The app has a responsive design, making it accessible and user-friendly on both desktop and mobile devices.

Technologies Used:

• HTML: Provides the structure of the web page.
• CSS: Used for styling the user interface to give the app a modern and attractive look.
• JavaScript: Adds interactivity to the app, such as translation functionality, speech synthesis, and handling user inputs.
• API Integration: MyMemory Translation API for real-time translations between languages.
• SpeechSynthesis API: Used for speaking out the text in the selected languages.

How to Use:

1. Input Text: Start by typing or pasting the text you want to translate in the first text area.
2. Select Languages: Use the dropdown menus to select the source language (the language of the text you're translating) and the target language (the language you want the text to be translated to).
3. Translate: Click the Translate button to get the translation. The translated text will appear in the second text area.
4. Listen to Translations: Click on the speaker icons next to the text areas to hear the pronunciation of the text in both languages.
5. Copy Translations: To copy the translated text, simply click the copy icon next to the translation box.
6. Switch Languages: If you wish to swap the source and target languages, click on the exchange icon located in the middle.

Sample Screenshots of the Project:

Landing Page

Sample Translation

How to Run?

• Download the provided source code zip file.
• Extract the downloaded zip file.
• Open the html file and you are now ready to go!

Video Demonstration for Installation/Setup:

Conclusion: