diff --git a/raviYadav/app.js b/raviYadav/app.js new file mode 100644 index 0000000..f8be1ae --- /dev/null +++ b/raviYadav/app.js @@ -0,0 +1,48 @@ +var input = document.querySelector("input"); +const btn = document.querySelector(".btn"); + +const user = document.querySelector(".githubUser"); +const joined = document.querySelector(".joinedDate"); +const repo = document.querySelector(".reposTotal"); +const followers = document.querySelector(".followersTotal"); +const following = document.querySelector(".followingTotal"); +const img = document.querySelector("img"); +const block = document.querySelector(".mainImg"); +const locations = document.querySelector(".locationss"); +const bio = document.querySelector(".githubBio"); +const twitter = document.querySelector(".twitterr"); +const company = document.querySelector(".companyy"); +const login = document.querySelector(".githubUserName1"); +const website = document.querySelector(".websitee"); +const link = document.getElementById("link"); +btn.addEventListener("click", function () { + const url = `https://api.github.com/users/${input.value}`; + async function getUrl() { + const response = await fetch(url); + const data = await response.json(); + console.log(data); + img.src = data.avatar_url; + block.appendChild(img); + block.style.border = "none"; + + user.textContent = data.name; + login.textContent = "@" + data.login; + joined.textContent = "Joined " + data.created_at.slice(0, 10); + repo.textContent = data.public_repos; + followers.textContent = data.followers; + following.textContent = data.following; + bio.textContent = data.bio == null ? "The profile has no bio." : data.bio; + locations.innerHTML = + data.location == null ? "No Location" : data.location; + twitter.innerHTML = + data.twitter_username == null ? "No twitter" : "@" + data.twitter_username; + company.innerHTML = + data.company == null ? "No Company" : data.company; + website.innerHTML = + data.blog == null ? "No Website" : data.blog; + link.href = data.html_url; + console.log(data.blog); + + } + getUrl(); +}); diff --git a/raviYadav/index.html b/raviYadav/index.html new file mode 100644 index 0000000..b0c0742 --- /dev/null +++ b/raviYadav/index.html @@ -0,0 +1,69 @@ + + + + + + + GitHubUserFinder + + + +
+
+

GeekInfo

+
+
+ +
Search
+
+
+
+
+
+
+
GithubUser
+ +
+
+
+
Joined Date
+
Not a good bio
+
+
+
+
Repos
+
0
+
+
+
Followers
+
0
+
+
+
Following
+ 0 +
+
+
+
+ +

Location

+
+ +
+ +

Website

+
+
+ +

Company

+
+
+
+
+
+ + + \ No newline at end of file diff --git a/raviYadav/styles.css b/raviYadav/styles.css new file mode 100644 index 0000000..1534eb5 --- /dev/null +++ b/raviYadav/styles.css @@ -0,0 +1,235 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap'); +*{ + font-family: 'Montserrat', sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + + background: rgb(15, 20, 35); + margin: 0; + padding: 0; +} +body::after{ + + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #7272ed; + background: linear-gradient(to top left, #f0f, #f08); + clip-path: circle(35vw at 100% 1%); + z-index:-1; +} +body::before{ + content:''; + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: #7272ed; + background: linear-gradient(to top left, #f08, #f0f); + clip-path: circle(65vh at 0% 100%); + z-index: -1; +} +.container { + display: flex; + color: aliceblue; + background-color: rgba(255, 235, 205, 0); + justify-content: center; + align-items: center; + z-index: 1; + text-align: center; + height: 100vh; + overflow: hidden; +} + +.content{ + position: absolute; + background-color: #ffffff13; + backdrop-filter: blur(10px); + + box-shadow: 2px 2px 22px 2px #ffffff2a; + border-width: 4px; + border-style: solid; + border-image: linear-gradient(to right, rgba(14, 14, 18, 0.686),#1f0c95, rgba(37, 27, 42, 0.44)) 1; + +} +h1{ + margin: 10px; + font-size: 2rem; + text-align: left; + margin-bottom: 30px; + font-weight: 500; + color: #ffffff; + font-style: italic; +} +form{ + display: flex; + justify-content: space-between; + align-items: center; + background-color: #ffffff00; + border-radius: 20px; + padding: 10px; + margin: 10px 10px; +} +input{ + border-radius: 20px; + padding: 10px; + border: none; + width: 100%; + font-size:1rem; +} +input:focus{ + outline: none; +} +::placeholder{ + color: #876262; + font-weight: 500; + font-size: 1rem; + font-style: italic; +} + +.btn{ + font-size: 16px; + color: #ffffff; + background: linear-gradient(90deg, #182633 0%, #2c47aa 100%); + padding: 10px 47px; + border: none; + box-shadow: rgb(0, 0, 0) 0px 0px 10px 0px; + border-radius: 22px 22px; + transition : 327ms; + transform: translateY(0); + } + +.btn:hover{ + transition : 1ms; + transform : translateY(-2px); + color: #ffffff; + border: none; + cursor: pointer; +} +.btn:active{ + transition : 1ms; + transform : translateY(0px); + color: #ffffff; + border: none; + cursor: pointer; +} + +.resultBody{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + background-color: #b961610c; + border: #0b051d19 2px solid; + border-radius: 20px; + padding: 10px; + margin: 10px 10px; + box-shadow: 2px 2px 50px 2px #15050579; +} + +.usrImg { + width: 100px; + height: 100px; + border-radius: 50%; + margin: 10px; + border: 2px solid #ffffff; + border-radius: 50%; + border-radius: 50%; +} + +.githubHead{ + display: flex;; + align-items: center; + flex-direction: row; + flex-wrap: nowrap; + width: 650px; + margin: 10px; +} +.githubInfo{ + height: 100%; + width: 400px; + position: relative; +} +.githubUser{ + font-size: 26px; + font-weight: bold; + color: #e1ebf5; + margin: 10px; +} +.githubFact{ + position: relative; + width: 480px; + height: 100%; +} +.joinedDate { + position: absolute; + top:-5rem; + right: -10px; + opacity: .7; + font-weight: 500; +} +.githubBio { + opacity: .7; + font-weight: 500; + word-wrap: break-word; +} +.githubUserName a{ + font-size: 16px; + font-weight: 500; + color: #e1ebf5; + margin: 10px; + font-style: italic; + text-decoration: none; + opacity: .7; +} +.githubRepo{ + display: flex; + justify-content: space-around; + align-items: center; + margin:20px; + background-color: #2326282b; + border-radius: 50%; + border-radius: 20px; + width: 100%; + height: 85px; + padding: 10px; + +} +.followers , .following, .repos{ + padding: 10px; + margin: 10px; + text-align: left; +} +.reposHeading, .followersHeading, .followingHeading { + font-size: 13px; + font-weight: 600; +} +.reposTotal, .followersTotal, .followingTotal { + font-size: 18px; + font-weight: 600; + opacity: .7; +} +.githubSocial{ + display: grid; + grid-template-columns: 240px 240px; + row-gap: 1.2em; + color:rgba(255, 255, 255, 0.857); +} + +.location, .twitter ,.website, .company { + display: flex; + align-items: center; + font-size: 15px; +} +.location img , .twitter img ,.website img , .company img { + width: 20px; + height: 20px; + margin-right: 10px; +} \ No newline at end of file