diff --git a/script.js b/script.js index fe1e890..3b3ad81 100644 --- a/script.js +++ b/script.js @@ -13,22 +13,66 @@ links.forEach((link) => { linkElement.className = "link"; linkElement.target = "_blank"; linkElement.rel = "noopener noreferrer"; - linkElement.innerHTML = ` - - - ${link.name} - - - - - - `; + + const linkIndicator = document.createElement("span"); + linkIndicator.className = "link-indicator"; + linkIndicator.textContent = "-"; + + const linkText = document.createElement("span"); + linkText.textContent = link.name; + + const svgElement = document.createElementNS( + "http://www.w3.org/2000/svg", + "svg", + ); + svgElement.setAttribute("class", "external-link-icon"); + svgElement.setAttribute("viewBox", "0 0 24 24"); + svgElement.setAttribute("width", "24"); + svgElement.setAttribute("height", "24"); + svgElement.setAttribute("stroke", "currentColor"); + svgElement.setAttribute("stroke-width", "2"); + svgElement.setAttribute("fill", "none"); + svgElement.setAttribute("stroke-linecap", "round"); + svgElement.setAttribute("stroke-linejoin", "round"); + + const pathElement = document.createElementNS( + "http://www.w3.org/2000/svg", + "path", + ); + pathElement.setAttribute( + "d", + "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", + ); + + const polylineElement = document.createElementNS( + "http://www.w3.org/2000/svg", + "polyline", + ); + polylineElement.setAttribute("points", "15 3 21 3 21 9"); + + const lineElement = document.createElementNS( + "http://www.w3.org/2000/svg", + "line", + ); + lineElement.setAttribute("x1", "10"); + lineElement.setAttribute("y1", "14"); + lineElement.setAttribute("x2", "21"); + lineElement.setAttribute("y2", "3"); + + svgElement.appendChild(pathElement); + svgElement.appendChild(polylineElement); + svgElement.appendChild(lineElement); + + linkElement.appendChild(linkIndicator); + linkElement.appendChild(linkText); + linkElement.appendChild(svgElement); linkElement.addEventListener("mouseenter", () => { - linkElement.querySelector(".link-indicator").textContent = ">"; + linkIndicator.textContent = ">"; }); linkElement.addEventListener("mouseleave", () => { - linkElement.querySelector(".link-indicator").textContent = "-"; + linkIndicator.textContent = "-"; }); linksContainer.appendChild(linkElement);