first working version

2020-01-02 20:42:42 +01:00 · 2020-01-02 20:42:42 +01:00 · c6d407cbc2
commit c6d407cbc2
parent 2a9fd0b47a
3 changed files with 79 additions and 0 deletions
--- a/getimg.js
+++ b/getimg.js
@ -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!')
+    }
+}
--- a/index.html
+++ b/index.html
@ -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>
--- a/styles.css
+++ b/styles.css
@ -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;
+}