HOUR OF CODE 2023
Create Your Own Translation and Text-to-Speech App
Join us in this Hour of Code activity to build a translator app that can read your translations out loud with text-to-speech technology. When you are done building, you’ll have an exciting app to help you learn a new language!
Start your own project on a separate page by clicking the button and following along with the videos below.
![Hour of Code 2023 Hour of Code 2023](https://blog.thunkable.com/hs-fs/hubfs/HOC%20hero%20image%202023.png?width=350&height=445&name=HOC%20hero%20image%202023.png)
What You'll Need
Before you start building your translation app, make sure you have the following:
A device with internet access.
Access to the Thunkable Workspace.
App backgrounds and icons (download here).
Mobile device with Thunkable Live to test your app (optional).
Ready to Go? Let's Build!
![Hour of Code Step 1](https://blog.thunkable.com/hubfs/Hour%20of%20Code%20Steps.png)
Preview the Translation App You'll Build
Before you dive into your Hour of Code, see a preview of what you'll build! Here is what we'll cover:
- Overview of translation app features
- How to test your app
![Hour of Code Step 2](https://blog.thunkable.com/hubfs/2-Nov-03-2023-10-44-48-6792-PM.png)
Using Assets, Components, and Blocks
Let's make your app look great, then make it work! Here is what we'll cover:
- Customizing your app with images and backgrounds
- Overview of the design tab
- Overview of the blocks tab
![Hour of Code Step 3](https://blog.thunkable.com/hubfs/3-Nov-03-2023-10-44-48-7323-PM.png)
Translate Text from One Language to Another
The next step in this project is to translate text and display it on the screen. Here is what we'll cover:
- Use blocks to translate between two languages
- Display translated text
![Hour of Code Step 4](https://blog.thunkable.com/hubfs/4-Nov-03-2023-10-44-48-7433-PM.png)
Switch Languages in Your App
You can switch between many different languages in your app. Here is what we'll cover:
- Set up the list component
- Create a list of languages to select from
- Use the list to switch languages used in translation
![Hour of Code Step 5](https://blog.thunkable.com/hubfs/5-Nov-03-2023-10-44-48-7484-PM.png)
Create List of All Translations
Now, we'll build a list of all translations created in your app. Here is what we'll cover:
-
Record all translations created in your app with the list component
-
Use blocks to have your device read translations out loud
-
Test out your final creation!
![Hour of Code Step 6](https://blog.thunkable.com/hubfs/6-4.png)