first working version

This commit is contained in:
MaKe_UnIV3rS 2020-01-02 20:42:42 +01:00
parent 2a9fd0b47a
commit c6d407cbc2
3 changed files with 79 additions and 0 deletions

20
getimg.js Normal file
View file

@ -0,0 +1,20 @@
function getImage(a) {
var regex = new RegExp(/^(?!.*\.\.)(?!.*\.$)[^\W][\w.]{0,29}$/);
var validation = regex.test(a);
if(validation) {
$.get("https://www.instagram.com/"+a+"/?__a=1")
.done(function(data) {
var imageURL = data["graphql"]["user"]["profile_pic_url_hd"];
$("#imageReturn").attr("src",imageURL)
})
.fail(function() {
alert('Nutzername wurde nicht gefunden!')
})
} else {
alert('Der Nutzername ist ungültig!')
}
}

25
index.html Normal file
View file

@ -0,0 +1,25 @@
<!doctype html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="getImg.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container1">
<input type="text" id="nameInput" placeholder="Nutzername">
<button id="goButton" onclick="getImage($('#nameInput').val().trim())">Go</button>
</div>
</br>
<div id="container2">
<img src="" id="imageReturn">
</div>
</body>
</html>

34
styles.css Normal file
View file

@ -0,0 +1,34 @@
#container1 {
left: 50%;
position: absolute;
transform: translate3d(-50%, 0, 0);
}
#container2 {
position: absolute;
left: 50%;
top: 200px;
transform: translate3d(-50%, 0, 0);
}
#nameInput {
width: 600px;
padding: 14px 6px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
border-radius: 8px;
}
#goButton {
width: 100px;
padding: 14px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
outline: none;
border-radius: 8px;
}