From e2ffa2b95ed165cf2c64bebdf47a16f109379f1f Mon Sep 17 00:00:00 2001 From: Pranjal Gupta Date: Sat, 9 Nov 2024 12:46:09 +0530 Subject: [PATCH] Add files via upload --- index.html | 46 ++++++++++++++++++++++ script.js | 93 ++++++++++++++++++++++++++++++++++++++++++++ style.css | 111 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 250 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..30eab96 --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ + + + + + + Github Profile Getter + + + +
+
+
+
+

Github Profile Getter

+
+ + +
+
+ +
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..c5c7297 --- /dev/null +++ b/script.js @@ -0,0 +1,93 @@ +// import axios from "/axios"; +// async function fetchGH() { +// const response = await fetch( +// "https://api.github.com/repos/facebook/react/issues", +// { +// headers: { +// +// }, +// } +// ); +// return await response.json(); +// } +// fetchGH(); + +let input = document.getElementById("input"); +let input2 = document.getElementById("input2"); +let button = document.getElementById("button"); + +function toggleFade() { + const element1 = document.getElementById("main"); + const element2 = document.getElementById("main2"); + + element1.classList.toggle("fade-in"); + element1.classList.toggle("fade-out"); + element2.classList.toggle("fade-in"); + element2.classList.toggle("fade-out"); + + setTimeout(() => { + element1.classList.toggle("hidden"); + element2.classList.toggle("hidden"); + element1.classList.toggle("active"); + element2.classList.toggle("active"); + }, 500); +} + +let name1 = document.getElementById("name"); +let usernamename = document.getElementById("username"); +let bio = document.getElementById("bio"); +let username_url = document.getElementById("username-url"); +let profile_pic = document.getElementById("profile-pic"); + +function setData() { + let p = fetch(`https://api.github.com/users/${input.value}`); + p.then((response) => response.json()) + .then((data) => { + name1.innerHTML = data.name; + usernamename.innerHTML = data.login; + bio.innerHTML = data.bio; + username_url.setAttribute("href", data.html_url); + profile_pic.setAttribute("src", data.avatar_url); + input2.setAttribute("value", data.login); + }) + .catch((error) => console.log("Error:", error)); +} + +input.addEventListener("keydown", function (e) { + if (e.key === "Enter") { + toggleFade(); + setData(); + } +}); +input2.addEventListener("keydown", function (e) { + if (e.key === "Enter") { + toggleFade(); + setData(); + } +}); +input.addEventListener("keydown", function (e) { + if (e.key === "Enter") { + toggleFade(); + setData(); + } +}); +button.addEventListener("click", function () { + toggleFade(); + setData(); +}); +// const APIURL = "https://api.github.com/users/"; +// const main = document.querySelector("#main"); +// const getUser = async (username) => { +// const response = await fetch(APIURL + username); +// const data = await response.json(); +// console.log(data); +// }; +// getUser("pranjalgupta4"); + +// axios +// .get("https://api.github.com/users/pranjalgupta4", { +// +// }) +// .then((res) => { +// console.log(res.data); +// }); diff --git a/style.css b/style.css new file mode 100644 index 0000000..a437961 --- /dev/null +++ b/style.css @@ -0,0 +1,111 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} +body { + background-color: #f5f5f5; +} +a { + text-decoration: none; +} +.main { + margin: 10vw 20vw; + display: flex; + flex-direction: column; + align-items: center; +} +.main-txt { + font-size: 2.5rem; + margin-bottom: 3vw; + color: rgba(0, 77, 77, 1); + text-shadow: 3px 3px rgba(0, 128, 128, 0.406); +} +#input { + width: 100%; + padding: 1vw 58px; + font-size: 1.5rem; + border-radius: 50px; + background: left no-repeat url("img/search.jpg"); + background-size: 55px; +} +#button { + margin-top: 3rem; + padding: 1vw 2vw; + width: 20vw; + font-size: 1.5rem; + border-radius: 50px; + background-color: rgba(0, 77, 77, 1); + color: white; + cursor: pointer; +} +.top { + margin: 10vw 20vw 2vw; + display: flex; + flex-direction: row; +} +.main-txt2 { + font-size: 1rem; + margin-bottom: 3vw; + color: rgba(0, 77, 77, 1); + text-shadow: 1.5px 1.5px rgba(0, 128, 128, 0.406); +} +#input2 { + width: 40%; + height: 10%; + padding: 0.5vw 58px; + margin-left: 3rem; + font-size: 1.5rem; + border-radius: 50px; + background: left no-repeat url("img/search.jpg"); + background-size: 55px; +} +.card { + margin: 0vw 20vw; + display: flex; + flex-direction: row; + background-color: rgba(0, 128, 128, 0.406); + border-radius: 20px; + box-shadow: 5px 5px 5px rgba(64, 192, 192, 0.406); +} +#profile-pic { + border-radius: 50%; + margin: 2vw; + width: 20vw; +} +#name { + font-size: 3rem; + margin: 2vw 2vw 0 2vw; + color: rgba(0, 64, 64, 0.925); +} +#username { + font-size: 1.5rem; + margin: 0.5vw 2vw; + color: rgba(128, 128, 128, 0.829); + +} +#username::before { + content: "@"; +} +#bio { + font-size: 1.5rem; + margin: 2vw; + color: rgba(0, 128, 128, 0.906); + +} +.fade-in { + opacity: 1; + transition: opacity 1s ease-in-out; +} + +.fade-out { + opacity: 0; + transition: opacity 0.5s ease-in-out; +} + +.hidden { + display: none; +} +.active { + display: block; +}