No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Reto: selecci贸n de idioma

18/20
Recursos

Aportes 15

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Yo lo que hice fue, agregarle a axios el parametro language

const api = axios.create({
    baseURL: "https://api.themoviedb.org/3/",
    params: {
        "api_key": API_KEY,
        "language": navigator.language || "es-ES"
    }
})

Despu茅s de dos d铆as buscando porqu茅 diablos no pod铆a acceder al valor de navigator.language, me di cuenta que la funci贸n que tengo para ver el cambio de hash en la URL se llama as铆 鈥渘avigator鈥 y sobre escribe el window.navigator de la API.

Si al poner el consola navigator.language te sale undefindes es por esto.

Saludos.

Cada vez me gusta m谩s React, se vuelve mucho m谩s sencillo todo, y puedes reutilizar c贸digo, y componentes.
En mi caso, para los lenguajes solamente agregu茅 un select para escoger Ingl茅s, Espa帽ol, oy Franc茅s, tambi茅n para el idioma predeterminado, estoy utilizando el Ingl茅s, y si el usuario da permisos a nuestra app para acceder a sus datos, entonces utilizo el del usuario.

El error del final no s茅 muy bien por qu茅 paso 馃槄

cree un select con algunos idiomas

<select name="language" id="la">            
                <option value="en">English</option>
                <option value="es">Spanish</option>
                <option value="pt-BR">Portuguese Br</option>
                <option value="fr">French</option>
            </select>


una variable donde se cargara el idioma por defecto

let lang = 'en';

Y la funcion que realizara el cambio con un evento click

language.addEventListener('click', () => {
    lang = language.value;
    homePage();
})

Idioma del navegador por defecto:

let lang = navigator.languages[1];

Array de idiomas:

const countries = [
  {
    name: "usa",
    language: "en-US",
    flag: '馃嚭馃嚫',
  }, 
	...

Crear opciones:

async function getLanguages() {
  countries.forEach((country) => {
    const languageOption = document.createElement('option');
    languageOption.setAttribute('value', country.language );
    languageOption.setAttribute('for', 'language');
    const languageText = document.createTextNode(country.flag);
    languageOption.appendChild(languageText);
    languageOptions.appendChild(languageOption);
  });
};

Seleccionar idioma:

languageOptions.addEventListener("change", (event) => {
  lang = event.target.value;
  homePage();
});

Agregar a cada llamado de la API:

params: {
      language: lang,
    },

La soluci贸n a esto ser铆a primero comprobar si el navegador soporta el navigator.languages, si no, entonces debesmos prepararnos para asignar uno pordefecto, por ejemplo el espa帽ol, y all铆 asignarlo a la api e ir implement谩ndolo en todas las funciones!

Cree este objeto

const langs =  [
  {lang: 'es',
    captions:
    {
      trends: 'Tendencias',
      category: 'Categorias',
      likedTitle: 'Peliculas Favoritas',
      trendMore: 'Ver M谩s',
      footerCaption: 'Hecho con amor en Platzi por @juandc',
      selectLang : 'Seleccione Idioma',
      search: 'Buscar',
    }
  },
  {lang: 'en',
    captions:
    { trends: 'Trends',
      category: 'Categories',
      likedTitle: 'Favorite Movies',
      trendMore: 'More',
      footerCaption: 'Made with love in Platzi by @juandc',
      selectLang : 'Select a language',
      search: 'Search',
    }
  },
  {lang: 'pt',
    captions:
    { trends: 'Tend锚ncias',
      category: 'Categorias',
      likedTitle: 'Filmes Favoritos',
      trendMore: 'Ver mais',
      footerCaption: 'Feito com amor em Platzi por @juandc',
      selectLang : 'Selecione um idioma',
      search: 'Procurar',
    }
  },
  {lang: 'gr',
    captions:
    { trends: 'Tendenzen',
      category: 'Kategorien',
      likedTitle: 'Lieblingsfilme',
      trendMore: 'Mehr sehen',
      footerCaption: 'Mit Liebe gemacht in Platzi von @juandc',
      selectLang : 'W盲hle eine Sprache',
      search: 'Suche',
    }
  },
  {lang: 'ar',
    captions:
    { trends: '丕鬲噩丕賴丕鬲',
      category: '賮卅丕鬲',
      likedTitle: '丕賱兀賮賱丕賲 丕賱賲賮囟賱丞',
      trendMore: '丕賱賲夭賷丿',
      footerCaption: '氐賳毓 亘賰賱 丨亘 賮賷 Platzi 亘賵丕爻胤丞juandc',
      selectLang : '丕禺鬲乇 賱睾丞',
      search: '亘丨孬',
    }
  },
  {lang: 'fr',
    captions:
    { trends: 'Les tendances',
      category: 'Cat茅gories',
      likedTitle: 'voir plus',
      trendMore: 'Mehr sehen',
      footerCaption: 'Fait avec amour 脿 Platzi par @juandc',
      selectLang : 'S茅lectionnez une langue',
      search: 'Chercher',
    }
  },
]

Luego en main.js

const  lang = document.getElementById('optionLanguages')
changeLanguage(navigator.language.substring(0,2))


window.addEventListener('languagechange', () => {
  changeLanguage(lang.value = navigator.language.substring(0,2))
  navigatorApp()
});

function changeLanguage(lang) {
  //buscar lenguaje y asignarlo a un objeto
  captions = langs.find(e => e.lang === lang)
  if (captions == undefined) {
    captions = langs.find(e => e.lang === 'es')
    optionLanguages.value = 'es'
  } else {
    optionLanguages.value = lang
  }
}

function optLang(lang) {
  changeLanguage(lang)
  navigatorApp()
}

En cada llamado al api se pasa la variable de Lang

Cree un select con los idiomas del primer objeto creado. Cuando el idioma se cambia por los settings del explorador, el evento se encarga de cambiar el idioma, buscar los titulos y refrescar la seccion que se esta mostrando.

En index .html

 <label class="header-lang" for="lang">Choose a Language:</label>
    <select id="optionLanguages" onchange="optLang(this.value)">
      <option value="gr">Alem谩n</option>
      <option value="ar">Arabe</option>
      <option value="es" selected='selected'>Espa帽ol</option>
      <option value="fr">Franc茅s</option>
      <option value="en">Ingl茅s</option>
      <option value="pt">Portugues</option>
    </select>

Cree esta constante y la pase como un par谩metro junto a la api_key as铆: 鈥榣anguage鈥: leng

const leng = window.navigator.language.split('-')[0]

window.navigator.language da una respuesta algo as铆 como 鈥榚s-419鈥. El .split es para obtener lo que esta antes del guion. Mi pregunta es, 驴para que es el otro numero???

Hola, todo bien solucionado, no s茅 si de la mejor forma pero funcion贸, solo me qued贸 un bug, al a帽adir una peli a favoritos se me queda agregada con el idioma que ten铆a en el momento de agregarla, ya luego no se actualiza, lo seguir茅 viendo a ver si se soluciona.
De lo dem谩s cre茅 un array con los principales idiomas, e inclu铆 el selector en el html y de forma din谩mica con JS, fu铆 agregando cada idioma.
Luego cre茅 una variable lang, con valor del navigator.language y cre茅 un evento para observar cu谩ndo se cambiaba una option del selector y se va cambiando el valor de lang, y llamo ah铆 dentro getTrendingMoviesPreview (), getCategoriesMoviesPreview (), getLikedMovies(), para que se actualicen.
El par谩metro 鈥榣anguage鈥, se lo tuve que pasar a cada funci贸n, porque no me funcionaba pas谩ndola directamente al llamado de la api:

// variable lang
let lang = navigator.language;
// array de lenguajes
const languages = [
    {
    "iso_639_1": "en",
    "english_name": "English",
    "name": "English"
    },
    {
    "iso_639_1": "fr",
    "english_name": "French",
    "name": "fran莽ais"
    },
    {
    "iso_639_1": "de",
    "english_name": "German",
    "name": "Deutsche"
    },
    {
    "iso_639_1": "it",
    "english_name": "Italian",
    "name": "Italiano"
    },
    {
    "iso_639_1": "zh",
    "english_name": "Chinese",
    "name": "婕㈣獮"
    },
    {
    "iso_639_1": "es",
    "english_name": "Spanish",
    "name": "Espa帽ol"
    },
]

// funci贸n para crear el selector, y crear el evento de cambio de lenguaje:
function createLanguages(){
    selectContainLanguaje.innerText = ''
    languages.forEach(language=>{
        let optionLanguage = document.createElement('option');
        optionLanguage.name = language.english_name;
        optionLanguage.innerText = language.name;
        optionLanguage.value = language.iso_639_1;

        selectContainLanguaje.appendChild(optionLanguage)
    })
    selectContainLanguaje.addEventListener('change', (e)=>{
        console.log(e.target)
                lang = e.target.value
                console.log(lang)
                getTrendingMoviesPreview ()
                getCategoriesMoviesPreview ()
                getLikedMovies()
    })
}

// a cada funci贸n le pas茅 el par谩metro de lenguaje
async function getTrendingMoviesPreview (){
    const {data} = await api('trending/movie/day', {
        params: {
            'language': lang,
        }
    })
    const movies = data.results;
    createMovies(movies, trendingMoviesPreviewList, {lazyLoad:true, cleanPage:true});
} 

Al inicio del archivo main.js, cre茅 una variable language cuyo valor es navigator.language

let language = navigator.language;

Luego, dentro de la constante api donde llamamos a axios, agrego dentro de params un nuevo par谩metro que tenga el valor de la variable creada antes.

const api = axios.create({
  baseURL: 'https://api.themoviedb.org/3/',
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
  },
  params: {
    'api_key': API_KEY,
    'language': language,
  },
});

Cambio el idioma del navegador y efectiamente muestra la informaci贸n de las pel铆culas en el idioma correspondiente.

Al agregar idiomas como el espa帽ol, hay que tener en cuenta que debemos usar **decodeURI **en varios textos, que por tener por ejemplo acentos, est谩n codificados.

Yo resolv铆 lo del idioma de este modo:

//Data
const lang= localStorage.language;
lan.value = lang !== '' ? lang : 'en';

if(lan.value == "en"){
    trendingPreviewTitle.innerHTML = 'Trends'
}
lan.addEventListener('change', () => {
    localStorage.setItem('language', lan.value);
    location.reload();
})

const api = axios.create({
    baseURL: 'https://api.themoviedb.org/3',
    headers: {
        'Content-Type': 'application/json; charset=utf-8',
    },
    params: {
        'api_key': API_KEY,
        'language': lan.value,
    },
});

En el archivo navigation.js , agregue un switch para traducir los titulos y botones al ejecutarse la funcion homePage() :

 switch(lan.value){
        case 'en':
            trendingPreviewTitle.innerHTML = 'Trends';
            trendingBtn.innerHTML = 'See more';
            categoriesPreviewTitle.innerHTML = 'Categories';
            likedTitle.innerHTML = 'Favorite movies';
            break;
        case 'fr':
            trendingPreviewTitle.innerHTML = 'Les tendances';
            trendingBtn.innerHTML = 'Voir plus';
            categoriesPreviewTitle.innerHTML = 'Cat茅gories';
            likedTitle.innerHTML = 'Films pr茅f茅r茅s';
            break;
            case 'pt-BR':
                trendingPreviewTitle.innerHTML = 'Tend锚ncias';
                trendingBtn.innerHTML = 'Ver mais'
                categoriesPreviewTitle.innerHTML = 'Categorias';
                likedTitle.innerHTML = 'Filmes favoritos';
            break;
        default:
            trendingPreviewTitle.innerHTML = 'Tendencias';
            break;
    }

En el Html agregue un select para elegir entre varios idiomas:

 <select name="languaje" id="lang">
      <option class="optLang" value="fr">馃嚝馃嚪</option>
      <option class="optLang" value="es-ES">馃嚜馃嚫</option>
      <option class="optLang" value="en">馃嚭馃嚫</option>
      <option class="optLang" value="pt-BR">馃嚙馃嚪</option>
      <option class="optLang" value="es-VE">馃嚮馃嚜</option>
    </select>

nada no pude completar el reto por m谩s que lo intente lo logre hacer despues de un tiempo pero no me cargaban los nombre de html de los idiomas y abandone el reto 馃槮

Viendo si ver o no la siguiente clase por lo que dijo el prof de LLORAR SANGRE鈥

鈥淎yudar con la trava鈥 馃ぃ馃ぃ