diff --git a/Web Development/Intermediate/githubProfileSearchEngine/index.html b/Web Development/Intermediate/githubProfileSearchEngine/index.html new file mode 100644 index 000000000..96843cfaf --- /dev/null +++ b/Web Development/Intermediate/githubProfileSearchEngine/index.html @@ -0,0 +1,17 @@ + + + + + + Document + + + +
+ +
+
+
+ + + \ No newline at end of file diff --git a/Web Development/Intermediate/githubProfileSearchEngine/script.js b/Web Development/Intermediate/githubProfileSearchEngine/script.js new file mode 100644 index 000000000..cd05b5d03 --- /dev/null +++ b/Web Development/Intermediate/githubProfileSearchEngine/script.js @@ -0,0 +1,61 @@ +const APIURL = "https://api.github.com/users/"; +const main = document.getElementById('main'); +const type = document.getElementById("search"); +const getUser = async(username)=>{ + const response = await fetch(APIURL + username); + const data = await response.json(); + const card = ` +
+
+ +
+
+

${data.name}

+

${data.bio}

+ +
+ +
+
+
+ ` + main.innerHTML=card; + getRepos(username); + +} + +const getRepos = async (username)=>{ + const repos = document.querySelector("#repos") +const response = await fetch(APIURL + username + "/repos") +const data = await response.json(); +data.forEach((item) => { + //console.log(item) + const ele = document.createElement('a'); + ele.classList.add("repo"); + ele.href=item.html_url; + ele.innerHTML=item.name; + ele.target='_blank' + repos.appendChild(ele); +}); + +} + + + +const form = document.querySelector('#form'); +function formsubmit(){ + if(type.value != ""){ + getUser(type.value); + type.value=""; + } + + return false; +} + +type.addEventListener('focusout',function(){ + formsubmit(); +}) \ No newline at end of file diff --git a/Web Development/Intermediate/githubProfileSearchEngine/style.css b/Web Development/Intermediate/githubProfileSearchEngine/style.css new file mode 100644 index 000000000..1cbcc2207 --- /dev/null +++ b/Web Development/Intermediate/githubProfileSearchEngine/style.css @@ -0,0 +1,96 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap"); +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +body { + background-color: #3498db; + background-image: linear-gradient(315deg, #3498db 0%, #3498db 74%); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-family: "Poppins", sans-serif; + margin: 0; + min-height: 100vh; +} + +input { + background-color: #2980b9; + border-radius: 10px; + border: none; + box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), 0 15px 40px rgba(0, 0, 0, 0.1); + color: white; + font-family: inherit; + font-size: 1rem; + padding: 1rem; + margin-bottom: 2rem; + width: 400px; +} + +input::placeholder { + color: #bbb; +} + +input:focus { + outline: none; +} + +.card { + background-color:#34495e; + background-image: linear-gradient(315deg,#34495e 0%, #34495e 100%); + border-radius: 20px; + box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), 0 15px 40px rgba(0, 0, 0, 0.1); + display: flex; + padding: 3rem; + max-width: 800px; +} + +.avatar { + border: 10px solid #2c3e50; + border-radius: 50%; + height: 150px; + width: 150px; +} + +.user-info { + color: #eee; + margin-left: 2rem; +} + +.user-info h2 { + margin-top: 0; +} + +.user-info ul { + display: flex; + justify-content: space-between; + list-style-type: none; + padding: 0; + max-width: 400px; +} + +.user-info ul li { + display: flex; + margin-right: 10px; + align-items: center; +} + +.user-info ul li strong { + font-size: 0.9rem; + margin-left: 0.5rem; +} + +.repo { + background-color: #7f8c8d; + border-radius: 5px; + display: inline-block; + color: white; + font-size: 0.7rem; + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + margin-bottom: 0.5rem; + text-decoration: none; +} \ No newline at end of file