Harjutus 7: GitHub API päring – Anton Ivanov Portfoolio

Käesolevas harjutuses õpid võtma andmeid Githubi avalikust API-st. Proovime pärida GitHubi kasutaja profiili andmeid.

Link dokumentatsioonile: Github API

Harjutuse lõpuks valmib selline rakendus:

Valmista endale uus Vanilla keskkond Code Sandbox’is.
Kasuta järgmist malli index.js failis:

Valmis kood (index.js):

import "./styles.css";

let givenProfile = "";
let profileName = "";
let profileID = "";
let profileLink = "";
let profileRepos = "";

function renderPage() {
  document.getElementById("app").innerHTML = `
      <div>
        <h1>Github konto vaade</h1>
        <p>Palun sisesta konto nimi</p>
        <input placeholder="Sisesta GitHub kasutajanimi" value="${givenProfile}" />
        <div class="box">
          <h1>Nimi: ${profileName ? profileName : "-"}</h1>
          <p>ID: ${profileID ? profileID : "-"}</p>
          <p>Repos: ${profileRepos ? profileRepos : "-"}</p>
          <p>Link: ${
            profileLink && profileName
              ? `<a href="${profileLink}" target="_blank">${profileLink}</a>`
              : "-"
          }</p>
        </div>
      </div>
    `;
  const input = document.querySelector("input");
  input.addEventListener("change", updateValue);
}

function updateValue(e) {
  givenProfile = e.target.value;
  fetchProfile();
}

async function fetchProfile() {
  let fetchedData;

  await fetch(`https://api.github.com/users/${givenProfile}`)
    .then((response) => response.json())
    .then((data) => (fetchedData = data));

  profileName = fetchedData.login;
  profileID = fetchedData.id;
  profileLink = fetchedData.html_url;
  profileRepos = fetchedData.public_repos;
  renderPage();
}

renderPage();

import "./styles.css";

let givenProfile = "";
let profileName = "";
let profileID = "";
let profileLink = "";
let profileRepos = "";

function renderPage() {
  document.getElementById("app").innerHTML = `
      <div>
        <h1>Github konto vaade</h1>
        <p>Palun sisesta konto nimi</p>
        <input placeholder="Sisesta GitHub kasutajanimi" value="${givenProfile}" />
        <div class="box">
          <h1>Nimi: ${profileName ? profileName : "-"}</h1>
          <p>ID: ${profileID ? profileID : "-"}</p>
          <p>Repos: ${profileRepos ? profileRepos : "-"}</p>
          <p>Link: ${
            profileLink && profileName
              ? `<a href="${profileLink}" target="_blank">${profileLink}</a>`
              : "-"
          }</p>
        </div>
      </div>
    `;
  const input = document.querySelector("input");
  input.addEventListener("change", updateValue);
}

function updateValue(e) {
  givenProfile = e.target.value;
  fetchProfile();
}

async function fetchProfile() {
  let fetchedData;

  await fetch(`https://api.github.com/users/${givenProfile}`)
    .then((response) => response.json())
    .then((data) => (fetchedData = data));

  profileName = fetchedData.login;
  profileID = fetchedData.id;
  profileLink = fetchedData.html_url;
  profileRepos = fetchedData.public_repos;
  renderPage();
}

renderPage();

renderPage() – loob ja uuendab veebilehe sisu
updateValue() – jälgib sisestusvälja muutusi
fetchProfile() – teostab API päringud ja töödeldab vastused

Stiilid:

body {
  font-family: Arial, sans-serif;
  margin: 20px;
  padding: 0;
  background-color: aqua;
}

h1,
p {
  margin: 10px 0;
}

input {
  padding: 5px;
  margin: 10px 0;
  border-radius: 1px;
}

a {
  color: blue;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.box {
  margin-top: 25px;
  background-color: #5ae0da;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #e1e4e8;
}

body {
  font-family: Arial, sans-serif;
  margin: 20px;
  padding: 0;
  background-color: aqua;
}

h1,
p {
  margin: 10px 0;
}

input {
  padding: 5px;
  margin: 10px 0;
  border-radius: 1px;
}

a {
  color: blue;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.box {
  margin-top: 25px;
  background-color: #5ae0da;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #e1e4e8;
}

Valmis leht: