JavaScript编码练习：获取github上公开的用户信息并展示

最新推荐文章于 2022-09-20 17:43:46 发布

kllo__

最新推荐文章于 2022-09-20 17:43:46 发布

阅读量827

点赞数

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/kllo__/article/details/123377763

版权

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

问题描述

在输入框输入用户名，页面将显示用户的头像、姓名和个人网址。

给定代码：

<html>
 <head>
 </head>
 <body>
   <h3> Information about a Github user </h3>
   <form id="form1">
  <input type="text" name="login">
  <input type="submit" value="Submit">
	<div id="infos"></div>
</form> 
  </body></html>

预计输出

解决方法

我的

//Write - Your - Code
const showUserInfo = userName =>
{
    fetch(`https://api.github.com/users/${userName}`)
    .then(response => response.json())
    .then(user => {
        const userImage = user.avatar_url;
        const username = user.name;
        const userSite = user.blog;
        const imgElement = document.createElement("img");
        imgElement.setAttribute("src", userImage);

        const usernameElement = document.createElement("h2");
        usernameElement.textContent = username;

        const userSiteElement = document.createElement("a");
        userSiteElement.href = userSite;
        userSiteElement.textContent = userSite;

        //添加到网页中
        const infosElement = document.getElementById("infos");
        infosElement.appendChild(imgElement);
        infosElement.appendChild(usernameElement);
        infosElement.appendChild(userSiteElement);

    })
    .catch(err =>
    {
        console.error(err.message);
    });
};

const formElement = document.getElementById("form1");
formElement.addEventListener("submit", e =>
{
    e.preventDefault();
    const userName =  formElement.elements.login.value;
    showUserInfo(userName);
});

显示效果：

参考答案：

/*
GitHub user info
*/

const formElement = document.querySelector("form");
formElement.addEventListener("submit", e => {
  e.preventDefault();
  const login = formElement.elements.login.value;
  fetch(`https://api.github.com/users/${login}`)
    .then(response => response.json())
    .then(user => {
      // Create user info
      const pictureElement = document.createElement("img");
      pictureElement.src = user.avatar_url;
      pictureElement.style.height = "150px";
      pictureElement.style.width = "150px";
      const nameElement = document.createElement("div");
      nameElement.textContent = user.name;
      nameElement.style.fontSize = "20px";
      const websiteElement = document.createElement("a");
      websiteElement.href = user.blog;
      websiteElement.textContent = websiteElement.href;
      // Add info on the page
      const infosElement = document.getElementById("infos");
      infosElement.innerHTML = ""; // Remove previous user info
      infosElement.appendChild(pictureElement);
      infosElement.appendChild(nameElement);
      infosElement.appendChild(websiteElement);
    })
    .catch(err => {
      console.error(err.message);
    });
});

显示结果：

kllo__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript编码练习：获取github上公开的用户信息并展示

问题描述在输入框输入用户名，页面将显示用户的头像、姓名和个人网址。给定代码：<html> <head> </head> <body> <h3> Information about a Github user </h3> <form id="form1"> <input type="text" name="login"> <input type="s...
复制链接

扫一扫