American British Translator - Quality Assurance Projects - freeCodeCamp
Channel: Ganesh H
Date: 2020-09-01

This is a full walkthrough for the American-British Translator project on freeCodeCamp. Firstly, we compile the data from the various data objects to create a simple translation dictionary list. After that, we implement the translation functionality, using string replacement methods.

Link to Project : https://www.freecodecamp.org/learn/quality-assurance/quality-assurance-projects/american-british-translator
Written Guide and Source Code: https://www.notion.so/ganeshh123/American-British-Translator-c2326f06789a4fa4b44ac65e7c051c27

Full Playlist for this course : https://www.youtube.com/playlist?list=PLhGp6N0DI_1THkXF3kT2kVnN8pR4HCbGp
All Writen Guides for this course : https://www.notion.so/ganeshh123/2362de926605419faadb16f295b772c6
All My Tutorials can be found at : https://www.notion.so/Tutorials-Ganesh-H-293ea420d34a464f9a1907e0405b5f26

00:00 - Project Setup
04:05 - Test 1 - I can enter a simple sentence into the text area and select whether to translate to British or American English from the dropdown menu
07:05 - Creating a simple list for  Translation
14:02 - Test 2 - When the "Translate" button is pressed, append the translated sentence to the translated-sentence div
21:09 - Test 3 - Your application should handle the way time is written in American and British English
25:35 - Test 4 - Your application should also handle the way titles/honorifics are abbreviated in American and British English
28:11 - Test 5 - Wrap any translated spelling or terms with span class="highlight".../span tags so they appear in green
32:16 - Test 6 - If the sentence in the text area has no spelling or terms that should be translated, append the message "Everything looks good to me!" to the translated-sentence div
34:20 - Test 7 - If there is no text in the text area, append the message "Error: No text to translate." to the error-msg div so the text appears in red
36:52 - Test 8 - I can press the "Clear Input" button to remove all text from the text area and the translated-sentence div
39:26 - Styling & Final Touches

-————————————————————————————————————-
Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. 

Express.js, or simply Express, is a web application framework for Node.js. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js. Express runs between the server created by Node.js and the frontend pages of a web application. Express also handles an application's routing.

Chai is an assertion library, similar to Node's built-in assert. It makes testing much easier by giving you lots of assertions you can run against your code.

HelmetJS is a type of middleware for Express-based applications that automatically sets HTTP headers to prevent sensitive information from unintentionally being passed between the server and client. While HelmetJS does not account for all situations, it does include support for common ones like Content Security Policy, XSS Filtering, and HTTP Strict Transport Security, among others. HelmetJS can be installed on an Express project from npm, after which each layer of protection can be configured to best fit the project.

freeCodeCamp (also referred to as “Free Code Camp”) is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning web development accessible to anyone. Beginning with tutorials that introduce students to HTML, CSS and JavaScript, students progress to project assignments that they complete either alone or in pairs. Upon completion of all project tasks, students are partnered with other nonprofits to build web applications, giving the students practical development experience.

Thanks for Watching!