337 lines
12 KiB
Markdown
337 lines
12 KiB
Markdown
---
|
|
id: 5e601c0d5ac9d0ecd8b94afe
|
|
title: American British Translator
|
|
challengeType: 4
|
|
dashedName: american-british-translator
|
|
---
|
|
|
|
# --description--
|
|
|
|
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 replit.com starter project](https://replit.com/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.
|
|
|
|
# --instructions--
|
|
|
|
- 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 Replit.com, 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 Replit.com console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell"
|
|
|
|
Write the following tests in `tests/1_unit-tests.js`:
|
|
|
|
- Translate `Mangoes are my favorite fruit.` to British English
|
|
- Translate `I ate yogurt for breakfast.` to British English
|
|
- Translate `We had a party at my friend's condo.` to British English
|
|
- Translate `Can you toss this in the trashcan for me?` to British English
|
|
- Translate `The parking lot was full.` to British English
|
|
- Translate `Like a high tech Rube Goldberg machine.` to British English
|
|
- Translate `To play hooky means to skip class or work.` to British English
|
|
- Translate `No Mr. Bond, I expect you to die.` to British English
|
|
- Translate `Dr. Grosh will see you now.` to British English
|
|
- Translate `Lunch is at 12:15 today.` to British English
|
|
- Translate `We watched the footie match for a while.` to American English
|
|
- Translate `Paracetamol takes up to an hour to work.` to American English
|
|
- Translate `First, caramelise the onions.` to American English
|
|
- Translate `I spent the bank holiday at the funfair.` to American English
|
|
- Translate `I had a bicky then went to the chippy.` to American English
|
|
- Translate `I've just got bits and bobs in my bum bag.` to American English
|
|
- Translate `The car boot sale at Boxted Airfield was called off.` to American English
|
|
- Translate `Have you met Mrs Kalyani?` to American English
|
|
- Translate `Prof Joyner of King's College, London.` to American English
|
|
- Translate `Tea time is usually around 4 or 4.30.` to American English
|
|
- Highlight translation in `Mangoes are my favorite fruit.`
|
|
- Highlight translation in `I ate yogurt for breakfast.`
|
|
- Highlight translation in `We watched the footie match for a while.`
|
|
- Highlight translation in `Paracetamol takes up to an hour to work.`
|
|
|
|
Write the following tests in `tests/2_functional-tests.js`:
|
|
|
|
- Translation with text and locale fields: POST request to `/api/translate`
|
|
- Translation with text and invalid locale field: POST request to `/api/translate`
|
|
- Translation with missing text field: POST request to `/api/translate`
|
|
- Translation with missing locale field: POST request to `/api/translate`
|
|
- Translation with empty text: POST request to `/api/translate`
|
|
- Translation with text that needs no translation: POST request to `/api/translate`
|
|
|
|
# --hints--
|
|
|
|
I can provide my own project, not the example URL.
|
|
|
|
```js
|
|
(getUserInput) => {
|
|
assert(
|
|
!/.*\/american-british-translator\.freecodecamp\.rocks/.test(
|
|
getUserInput('url')
|
|
)
|
|
);
|
|
};
|
|
```
|
|
|
|
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 <span class="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 `span` element should wrap the entire time string, i.e. `<span class="highlight">10:30</span>`.
|
|
|
|
```js
|
|
async (getUserInput) => {
|
|
try {
|
|
const text = 'Lunch is at 12:15 today.';
|
|
const locale = 'american-to-british';
|
|
const output = {
|
|
text: text,
|
|
translation: 'Lunch is at <span class="highlight">12.15</span> today.'
|
|
};
|
|
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 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: '<span class="highlight">Dr</span> Grosh will see you now.'
|
|
};
|
|
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);
|
|
}
|
|
};
|
|
```
|
|
|
|
Wrap any translated spelling or terms with `<span class="highlight">...</span>` tags so they appear in green.
|
|
|
|
```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 <span class="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);
|
|
}
|
|
};
|
|
```
|
|
|
|
If one or more of the required fields is missing, return `{ error: 'Required field(s) missing' }`.
|
|
|
|
```js
|
|
async (getUserInput) => {
|
|
try {
|
|
const locale = 'american-to-british';
|
|
let data = await fetch(getUserInput('url') + '/api/translate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ locale })
|
|
});
|
|
let parsed = await data.json();
|
|
assert.isObject(parsed);
|
|
assert.property(parsed, 'error');
|
|
assert.equal(parsed.error, 'Required field(s) missing');
|
|
} catch (err) {
|
|
throw new Error(err.responseText || err.message);
|
|
}
|
|
};
|
|
```
|
|
|
|
If `text` is empty, return `{ error: 'No text to translate' }`
|
|
|
|
```js
|
|
async (getUserInput) => {
|
|
try {
|
|
const locale = 'american-to-british';
|
|
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, 'error');
|
|
assert.equal(parsed.error, 'No text to translate');
|
|
} catch (err) {
|
|
throw new Error(err.responseText || err.message);
|
|
}
|
|
};
|
|
```
|
|
|
|
If `locale` does not match one of the two specified locales, return `{ error: 'Invalid value for locale field' }`.
|
|
|
|
```js
|
|
async (getUserInput) => {
|
|
try {
|
|
const text = "Ceci n'est pas une pipe";
|
|
const locale = 'french-to-american';
|
|
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, 'error');
|
|
assert.equal(parsed.error, 'Invalid value for locale field');
|
|
} catch (err) {
|
|
throw new Error(err.responseText || err.message);
|
|
}
|
|
};
|
|
```
|
|
|
|
If `text` requires no translation, return `"Everything looks good to me!"` for the `translation` value.
|
|
|
|
```js
|
|
async (getUserInput) => {
|
|
try {
|
|
const locale = 'british-to-american';
|
|
const output = {
|
|
text: 'SaintPeter and nhcarrigan give their regards!',
|
|
translation: 'Everything looks good to me!'
|
|
};
|
|
let data = await fetch(getUserInput('url') + '/api/translate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ text: output.text, locale })
|
|
});
|
|
let parsed = await data.json();
|
|
assert.isObject(parsed);
|
|
assert.isObject(parsed);
|
|
assert.property(parsed, 'text');
|
|
assert.property(parsed, 'translation');
|
|
assert.deepEqual(parsed, output);
|
|
} catch (err) {
|
|
throw new Error(err.responseText || err.message);
|
|
}
|
|
};
|
|
```
|
|
|
|
All 24 unit tests are complete and passing. See `/tests/1_unit-tests.js` for the expected behavior you should write tests for.
|
|
|
|
```js
|
|
async (getUserInput) => {
|
|
try {
|
|
const getTests = await $.get(getUserInput('url') + '/_api/get-tests');
|
|
assert.isArray(getTests);
|
|
const unitTests = getTests.filter((test) => {
|
|
return !!test.context.match(/Unit Tests/gi);
|
|
});
|
|
assert.isAtLeast(unitTests.length, 24, 'At least 24 tests passed');
|
|
unitTests.forEach((test) => {
|
|
assert.equal(test.state, 'passed', 'Tests in Passed State');
|
|
assert.isAtLeast(
|
|
test.assertions.length,
|
|
1,
|
|
'At least one assertion per test'
|
|
);
|
|
});
|
|
} catch (err) {
|
|
throw new Error(err.responseText || err.message);
|
|
}
|
|
};
|
|
```
|
|
|
|
All 6 functional tests are complete and passing. See `/tests/2_functional-tests.js` for the functionality you should write tests for.
|
|
|
|
```js
|
|
async (getUserInput) => {
|
|
try {
|
|
const getTests = await $.get(getUserInput('url') + '/_api/get-tests');
|
|
assert.isArray(getTests);
|
|
const functTests = getTests.filter((test) => {
|
|
return !!test.context.match(/Functional Tests/gi);
|
|
});
|
|
assert.isAtLeast(functTests.length, 6, 'At least 6 tests passed');
|
|
functTests.forEach((test) => {
|
|
assert.equal(test.state, 'passed', 'Tests in Passed State');
|
|
assert.isAtLeast(
|
|
test.assertions.length,
|
|
1,
|
|
'At least one assertion per test'
|
|
);
|
|
});
|
|
} catch (err) {
|
|
throw new Error(err.responseText || err.message);
|
|
}
|
|
};
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```js
|
|
/**
|
|
Backend challenges don't need solutions,
|
|
because they would need to be tested against a full working project.
|
|
Please check our contributing guidelines to learn more.
|
|
*/
|
|
```
|