Internationalization, or i18n, is an approach that allows for having multiple language versions of a webpage. Depending on the user's settings, the page is displayed in a certain available language, allowing for the creation of multilingual websites without having to make multiple files for each language.
The implementation of i18n varies, and each popular framework has its own approach, but the principle is similar everywhere: an object with the translation of all necessary phrases/sentences is created and loaded depending on the conditions.
In this test, implement the i18n approach using JavaScript and Pug. You need to create objects in js files and substitute data into pug files. The task itself is almost identical to the Conditional Structures exercise.
Implement the menu and test block for the admin and user on Hexlet. The profile.pug file receives an object with the user in the following format from the server as input:
const user = {
name: 'John',
surname: 'Doe',
role: 'user',
}
For the user, the page has a template:
- Username
- Menu of the following items:
- Settings
- Promo code
- Access as a gift
- Help
- Go out
If the user role is not user, then three new menu items are added in addition to the existing menu items:
- Staff room
- Mentoring
- Marketing
There are two language localizations available for the page: English and Spanish. Each localization is in a separate file. Localization itself is an object that can be described as follows:
pageName: {
key1: "translate",
key2: "translate",
key3: "translate",
}
Part of the object has already been written for the Spanish localization. You can start working with it, and subsequently make localization for English. You can choose all the key names yourself. The resulting object will end up in profile.js when testing. This object is what you need to use when creating markup.
Pairs for translation in the format Spanish localization: English localization
- Perfil de estudiante: Student Profile
- Ajustes: Settings
- Código promocional: Promo Code
- acceso de regalo: Access as a gift
- Sala de profesores: Staffroom
- Tutoría: Mentoring
- Marketing: Marketing
- Ayuda: Help
* Cerrar sesión: Log out
An example layout for the admin. English localization
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Profile</title>
</head>
<body>
<section class="profile-links">
<h1>John Doe</h1>
<nav>
<a href="#">Settings</a>
<div class="divider"></div>
<a href="#">Promo Code</a>
<a href="#">Gift access</a>
<div class="divider"></div>
<a href="#">Staffroom</a>
<a href="#">Mentoring</a>
<a href="#">Marketing</a>
<div class="divider"></div>
<a href="#">Help</a>
<button>Log out</button>
</nav>
</section>
</body>
</html>
An example of layout for a student. English localization
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Profile</title>
</head>
<body>
<section class="profile-links">
<h1>John Doe</h1>
<nav>
<a href="#">Settings</a>
<div class="divider"></div>
<a href="#">Promo Code</a>
<a href="#">Gift access</a>
<div class="divider"></div>
<a href="#">Help</a>
<button>Log out</button>
</nav>
</section>
</body>
</html>
For full access to the challenge you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.