- Düzenlendi
Selamün Aleyküm herkese 
Javascript tarafında eksiklerimi tamamlarken async, await, fetch ve import, export işlemlerinin kullanıldığı basit bir örnek çıkarttık. Hataları, eksikleri muhakkak vardır. Faydası olması dileği ile saygılar
Amaç : Github get request atarak githubname üzerinden profil bilgilerini çekmek ve ekrana bastırmak ayrıca son arananları localstorage üzerine kaydetmek.
index.html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Github Api Deneme</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
</head>
<body>
<div class="container">
<div class="row justify-content-center mt-2">
<div class="col-lg-6">
<div class="p-2 rounded border bg-light">
<h3 class="text-center mb-3">Github Api JS Project</h3>
<form id="gitForm">
<div class="mb-2">
<input id="githubName" type="text" class="form-control" placeholder="Github Name">
</div>
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-sm btn-info fw-bold text-white"><i class="fas fa-search"></i> Getir</button>
</div>
</form>
</div>
<div id="searchResult"></div>
<div id="latestSearch"></div>
</div>
</div>
</div>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="js/app.js"></script>
</body>
</html>js -> app.js
import {GithubRequests} from './github/request.js';
import {UI} from "./github/ui.js";
import {Storage} from './github/storage.js';
const gitForm = document.getElementById("gitForm");
const githubName = document.getElementById("githubName");
const request = new GithubRequests();
const ui = new UI();
const storage = new Storage();
document.addEventListener("DOMContentLoaded",function (){
ui.getDataFromStorageToUI(storage.getDataFromStorage());
});
gitForm.addEventListener("submit", function (e){
e.preventDefault();
let userName = githubName.value.trim();
if(userName === ""){
ui.alert("Please enter the valid github user name !",1);
}else{
request.get(userName)
.then(response => {
if(response.user.message !== "Not Found"){
ui.dataToUI(response);
storage.dataToStorage(userName);
ui.getDataFromStorageToUI(storage.getDataFromStorage());
ui.alert("Success",3);
}else{
ui.alert("User Not Found",1);
}
})
.catch(err => {
ui.alert(err,1);
});
}
});js -> github -> request.js
export class GithubRequests {
constructor() {
this.url = "https://api.github.com/users/";
}
async get(githubName){
const responseUser = await fetch(this.url + githubName);
const responseRepo = await fetch(this.url + githubName + "/repos");
const userData = await responseUser.json();
const userRepos = await responseRepo.json();
return {
user : userData,
repos : userRepos,
}
}
}js -> github -> storage.js
export class Storage {
dataToStorage(userName){
let userNames = this.getDataFromStorage();
if(userNames.indexOf(userName) === -1){
userNames.push(userName);
localStorage.setItem("userNames",JSON.stringify(userNames));
}
}
getDataFromStorage(){
let userNames;
if(localStorage.getItem("userNames") === null){
userNames = [];
}else {
userNames = JSON.parse(localStorage.getItem("userNames"));
}
return userNames;
}
}js -> github -> ui.js
export class UI {
constructor() {
this.searchResult = document.getElementById("searchResult")
this.alertArea = document.createElement("div");
this.latestSearchArea = document.getElementById("latestSearch");
}
dataToUI(response){
let repoNames="";
response.repos.forEach(function (data){
repoNames +=`<li>${data.name}</li>`;
})
this.searchResult.innerHTML = `
<div class="p-2 rounded bg-light border mt-2">
<h6 class="mb-0 text-center">Bilgiler</h6>
<hr/>
<img width="100px" class="d-block mx-auto img-fluid rounded-circle" src="${response.user.avatar_url}" alt="">
<div class="d-flex justify-content-around mt-2">
<span class="badge bg-secondary">Followers : ${response.user.followers}</span>
<span class="badge bg-primary">Followings : ${response.user.following}</span>
<span class="badge bg-danger">Public Repos : ${response.user.public_repos}</span>
<span class="badge bg-danger">Public Gists : ${response.user.public_gists}</span>
</div>
<hr/>
<ul>
<li>Bio : ${response.user.bio}</li>
<li>Website : ${response.user.blog}</li>
<li>Company : ${response.user.company}</li>
<li>Location : ${response.user.location}</li>
<li>Created Date : ${response.user.created_at}</li>
</ul>
</div>
<div class="p-2 rounded bg-light border mt-2">
<h6 class="mb-0 text-center">Repolar</h6>
<hr/>
<ul>
${repoNames}
</ul>
</div>`;
}
alert(message,type){
this.alertArea.setAttribute("role","alert");
switch (type){
case 1:
this.alertArea.className = "alert alert-danger";
break;
case 2:
this.alertArea.className = "alert alert-warning";
break;
case 3:
this.alertArea.className = "alert alert-success";
break;
}
this.alertArea.innerHTML = message;
const appArea = document.getElementsByClassName("col-lg-6")[0];
appArea.insertBefore(this.alertArea,appArea.firstChild);
setTimeout( () => {
this.alertArea.remove();
},2000)
}
getDataFromStorageToUI(data){
this.latestSearchArea.className = "p-2 rounded bg-light border mt-2";
this.latestSearchArea.innerHTML = '<h6>Latest Search Names</h6>';
if(data.length > 0){
this.latestSearchArea.innerHTML += '<ul>';
data.forEach((e) => {
this.latestSearchArea.innerHTML += `<li>${e}</li>`;
});
this.latestSearchArea.innerHTML += '</ul>';
}else{
this.latestSearchArea.innerHTML += 'No data yet.';
}
}
}
). Ben de olayı açıklamıştım: