diff --git a/Gamandeep singh/index.html b/Gamandeep singh/index.html new file mode 100644 index 0000000..3bd1d7b --- /dev/null +++ b/Gamandeep singh/index.html @@ -0,0 +1,48 @@ + + + + + + + GitHub-User Searcher + + + + + + + + +
+ +

+

+ 🔎GitHub-User Searcher🔍 +

+

+
+
+ +
+
+
+ +
+
+
+ pls! Click on the pic, that will re-direct you to their GitHub profile! +
+
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/Gamandeep singh/script.js b/Gamandeep singh/script.js new file mode 100644 index 0000000..3c3673b --- /dev/null +++ b/Gamandeep singh/script.js @@ -0,0 +1,34 @@ + +//to display text after click on search! +function functionName() { + document.querySelector(".box").classList.toggle("b1") +} + +//fetch data from form! +var form = document.getElementById("myForm"); + + +form.addEventListener('submit', function (e) { + + //prevent the auto submission of form + e.preventDefault(); + + var search = document.getElementById("search").value; + + //to remove space in b/w firstName & lastName + var originalName = search.split(' ').join(''); + + document.getElementById("result").innerHTML = ''; + + fetch("https://api.github.com/users/" + originalName) + .then((result) => result.json()) + .then((data) => { + console.log(data) + + document.getElementById("result").classList.add("discription"); + + document.getElementById("result").innerHTML = ` + + ` + }) +}) diff --git a/Gamandeep singh/style.css b/Gamandeep singh/style.css new file mode 100644 index 0000000..9729090 --- /dev/null +++ b/Gamandeep singh/style.css @@ -0,0 +1,79 @@ +.b1 { + visibility: hidden; + font-family: 'DynaPuff', cursive; + +} + +.box { + display: flex; + align-items: center; + justify-content: center; + color: #917FB3; + font-family: 'Tilt Prism', cursive; + font-size: 30px; +} + +h1 { + font-family: 'DynaPuff', cursive; + text-align: center; + text-align: center; + font-size: 80px; + color: #F7D060; +} + +.form-control { + padding: 7px; + font-size: 14px; + font-family: cursive; + border-width: 2px; + border-color: #FDE2F3; + + color: #000000; + border-style: double; + border-radius: 22px; + box-shadow: 0px 4px 10px rgba(66, 66, 66, .75); + +} + +.form-control:focus { + outline: none; + background-color: #F7D060; +} + +.btn { + width: 100%; + background: #F9D949; + background-image: -webkit-linear-gradient(top, #F9D949, #FF8400); + background-image: -moz-linear-gradient(top, #F9D949, #FF8400); + background-image: -ms-linear-gradient(top, #F9D949, #FF8400); + background-image: -o-linear-gradient(top, #F9D949, #FF8400); + background-image: linear-gradient(to bottom, #F9D949, #FF8400); + -webkit-border-radius: 32; + -moz-border-radius: 32; + border-radius: 32px; + -webkit-box-shadow: 6px 6px 11px #6a7999; + -moz-box-shadow: 6px 6px 11px #6a7999; + box-shadow: 6px 6px 11px #6a7999; + font-family: Arial; + color: #ffffff; + font-size: 21px; + padding: 10px 20px 10px 20px; + text-decoration: none; +} + +.btn:hover { + background: #FF8400; + background-image: -webkit-linear-gradient(top, #FF8400, #F9D949); + background-image: -moz-linear-gradient(top, #FF8400, #F9D949); + background-image: -ms-linear-gradient(top, #FF8400, #F9D949); + background-image: -o-linear-gradient(top, #FF8400, #F9D949); + background-image: linear-gradient(to bottom, #FF8400, #F9D949); + text-decoration: none; + color: #6a7999; +} + +#result { + position: absolute; + left: 35%; + +} \ No newline at end of file