Build a full stack JavaScript app that is functionally similar to this: <https://american-british-translator.freecodecamp.rocks/>. Working on this project will involve you writing your code using one of the following methods:
- Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-american-british-english-translator/) and complete your project locally.
- Use [our repl.it starter project](https://repl.it/github/freeCodeCamp/boilerplate-project-american-british-english-translator) to complete your project.
- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
- All logic can go into `/components/translator.js`
- Complete the `/api/translate` route in `/routes/api.js`
- Create all of the unit/functional tests in `tests/1_unit-tests.js` and `tests/2_functional-tests.js`
- See the JavaScript files in `/components` for the different spelling and terms your application should translate
- To run the tests on Repl.it, set `NODE_ENV` to `test` without quotes in the `.env` file
- To run the tests in the console, use the command `npm run test`. To open the Repl.it console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell"
You can `POST` to `/api/translate` with a body containing `text` with the text to translate and `locale` with either `american-to-british` or `british-to-american`. The returned object should contain the submitted `text` and `translation` with the translated text.
```js
async (getUserInput) => {
try {
const text = 'Mangoes are my favorite fruit.';
const locale = 'american-to-british';
const output = {
text: 'Mangoes are my favorite fruit.',
translation:
'Mangoes are my <spanclass="highlight">favourite</span> fruit.'
};
let data = await fetch(getUserInput('url') + '/api/translate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text, locale })
});
let parsed = await data.json();
assert.isObject(parsed);
assert.property(parsed, 'text');
assert.property(parsed, 'translation');
assert.deepEqual(parsed, output);
} catch (err) {
throw new Error(err.responseText || err.message);
}
};
```
The `/api/translate` route should handle the way time is written in American and British English. For example, ten thirty is written as "10.30" in British English and "10:30" in American English.
The `/api/translate` route should also handle the way titles/honorifics are abbreviated in American and British English. For example, Doctor Wright is abbreviated as "Dr Wright" in British English and "Dr. Wright" in American English. See `/public/american-to-british-titles.js` for the different titles your application should handle.
```js
async (getUserInput) => {
try {
const text = 'Dr. Grosh will see you now.';
const locale = 'american-to-british';
const output = {
text: text,
translation: '<spanclass="highlight">Dr</span> Grosh will see you now.'
};
let data = await fetch(getUserInput('url') + '/api/translate', {