classwork-20

Balashov Nikita · OlegLustenko · commit 816e370935ce · 2018-08-11T07:41:31.000+03:00
diff --git a/js-core/classworks/classwork-20/index.html b/js-core/classworks/classwork-20/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Class work 20</title>
+</head>
+<body>
+    <pre id="test"></pre>
+    <button>server request</button>
+
+    <form>
+        <input id="fn" name="fullName" type="text" placeholder="FULL NAME">
+        <input id="em" name="email" type="text" placeholder="EMAIL">
+        <button type="submit" class="add">add user</button>
+    </form>
+
+<script src="src/main.js"></script>
+</body>
+</html>
diff --git a/js-core/classworks/classwork-20/src/main.js b/js-core/classworks/classwork-20/src/main.js
@@ -0,0 +1,56 @@
+const btn = document.querySelector('button');
+const add = document.querySelector('.add');
+const test = document.querySelector('#test');
+
+const url = 'http://easycode-js.herokuapp.com/qwerty12341';
+
+const serverRequest = () => {
+    const xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = () => {
+        if(xhr.readyState === 4) {
+            test.innerHTML += xhr.responseText + '\n';
+        }
+    }
+
+    xhr.open('GET', url, true);
+    xhr.send();
+}
+
+btn.addEventListener('click', () => {
+    serverRequest();
+})
+
+const serverAddUser = (usreProps) => {
+    const xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = () => {
+        if(xhr.readyState === 4) {
+            test.innerHTML += xhr.responseText + '\n';
+        }
+    }
+
+    xhr.open('POST', `${url}/users`, true);    
+    xhr.setRequestHeader('Content-type', 'application/json');
+    xhr.send(JSON.stringify(usreProps));
+}
+
+const form = document.querySelector('form');
+
+form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const inputs = [...form.elements].filter(elem => elem.tagName === "INPUT");
+    let passedValid = true;
+    const user = {};
+
+    inputs.forEach(input => {
+        if(!input.value) {
+            passedValid = false;
+            alert(`404 ${input.name}`)
+            return;
+        }
+
+        user[input.name] = input.value;
+    })
+
+    if(passedValid) {serverAddUser(user);}
+   
+})
