No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Lógica del árbol de links tipo linktree

8/23
Recursos

Aportes 3

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

alt + 96 = ``
Dejo el código de la clase con la data completa: ```js const $links = document.getElementById("links"); const $name = document.querySelector("h1"); const data = { name: "Max Diaz", nickname: "maxter", description: "...", avatar: "...", social: [ { name: "platzi", url: "https://platzi.com/", username: "", }, { name: "youtube", url: "https://www.youtube.com/", username: "", }, { name: "github", url: "https://github.com/", username: "", }, { name: "instagram", url: "https://instagram.com/", username: "", }, { name: "twitter", url: "https://twitter.com/", username: "", }, { name: "linkedin", url: "https://www.linkedin.com/", username: "", }, { name: "twitch", url: "https://twitch.tv/", username: "", }, { name: "discord", url: "https://discord.gg/", username: "", }, ], links: [ { name: "mentorías", url: "https://example.com/", color: "fuchsia", emoji: "💻", }, { name: "blog", url: "https://example.com/", color: "red", emoji: "📖", }, { name: "podcast", url: "https://example.com/", color: "yellow", emoji: "💬", }, { name: "cursos", url: "https://example.com/", color: "lime", emoji: "🎒", }, { name: "sponsors", url: "https://example.com/", color: "rose", emoji: "🚀", }, ], footer: "Made with Love on Perú", }; const main = () => { let name = document.createTextNode(data.name); let links = data.links .map((link) => { return `
${link.name} ${link.emoji}
`; }) .join(""); let newItem = document.createElement("section"); newItem.innerHTML = links; $links.appendChild(newItem); $name.appendChild(name); }; main(); ```const $links = document.getElementById("links");const $name = document.querySelector("h1"); const data = {  name: "Max Diaz",  nickname: "maxter",  description: "...",  avatar: "...",  social: \[    {      name: "platzi",      url: "https://platzi.com/",      username: "",    },    {      name: "youtube",      url: "https://www.youtube.com/",      username: "",    },    {      name: "github",      url: "https://github.com/",      username: "",    },    {      name: "instagram",      url: "https://instagram.com/",      username: "",    },    {      name: "twitter",      url: "https://twitter.com/",      username: "",    },    {      name: "linkedin",      url: "https://www.linkedin.com/",      username: "",    },    {      name: "twitch",      url: "https://twitch.tv/",      username: "",    },    {      name: "discord",      url: "https://discord.gg/",      username: "",    },  ],  links: \[    {      name: "mentorías",      url: "https://example.com/",      color: "fuchsia",      emoji: "💻",    },    {      name: "blog",      url: "https://example.com/",      color: "red",      emoji: "📖",    },    {      name: "podcast",      url: "https://example.com/",      color: "yellow",      emoji: "💬",    },    {      name: "cursos",      url: "https://example.com/",      color: "lime",      emoji: "🎒",    },    {      name: "sponsors",      url: "https://example.com/",      color: "rose",      emoji: "🚀",    },  ],  footer: "Made with Love on Perú",}; const main = () => {  let name = document.createTextNode(data.name);  let links = data.links    .map((link) => {      return `    \
      \<a        class="text-sm font-bold text-${link.color}-600 text-center hover:text-${link.color}-800 cursor-pointer"        href=${link.url}        target="\_blank"      >        ${link.name}      \      \${link.emoji}\    \
`;    })    .join("");  let newItem = document.createElement("section");  newItem.innerHTML = links;  $links.appendChild(newItem);  $name.appendChild(name);}; main();

lo ideal sería usar el DocumentFragment(); para una mejor optimización del DOM