add repeat_lesson-10-JS

Sasha-Makar · Mar 1, 2024 · f1f6e29 · f1f6e29
1 parent 242ad34
commit f1f6e29
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 0 deletions.
diff --git a/JS_LESSONS/LESSONS/lesson_10/repeat/demo_1/index.html b/JS_LESSONS/LESSONS/lesson_10/repeat/demo_1/index.html
@@ -7,6 +7,20 @@
 <body>
 
 
+<form name = 'f1'>
+
+    <input type="text" placeholder="username" name="username">
+<!--    <button>save</button>-->
+    <!--    <input type="button" value="save">-->
+    <input type="number" placeholder="user age" name="age">
+    <input type="submit" value="type btn save">
+    <!--    <button>save</button>-->
+</form>
+
+
+<button id="show_all_users">show all users</button>
+
+
 <script src="main.js"></script>
 </body>
 </html>
diff --git a/JS_LESSONS/LESSONS/lesson_10/repeat/demo_1/main.js b/JS_LESSONS/LESSONS/lesson_10/repeat/demo_1/main.js
@@ -0,0 +1,57 @@
+// console.log(22);
+
+
+console.log(document.forms);
+let form = document.forms.f1;
+let usersArr = [];
+
+form.onsubmit = function (ev) {
+    ev.preventDefault();
+    // console.log(ev.target.username.value);
+    let username = ev.target.username.value;
+    // console.log(this.age.value);
+    let age = this.age.value;
+    console.log({username, age});
+    usersArr.push({username, age});
+
+}
+
+let btn = document.getElementById('show_all_users');
+
+btn.onclick = function (ev) {
+    console.log(usersArr);
+    for (const user of usersArr) {
+        let div = document.createElement('div');
+        div.innerText = `USER INFO: name-${user.username}, age - ${user.age}`;
+        document.body.append(div);
+    }
+}
+
+btn.addEventListener('click', function () {
+    console.log('qweasdfrewsdc');
+})
+
+
+window.onload = function () {
+    console.log('load');
+}
+
+document.onreadystatechange = function (ev) {
+    // console.log(ev);
+    console.log(document.readyState);
+    if (document.readyState === "interactive"){
+        console.log('loading.....');
+        btn.innerText = 'start loading';
+        document.body.style.background = 'blue';
+    }
+    if (document.readyState === 'complete'){
+        console.log('FINISH');
+        btn.innerText = 'complete loading';
+        document.body.style.background = 'white';
+    }
+}
+
+window.onload = function () {
+    btn.innerText = 'you can use btn';
+
+}
diff --git a/JS_LESSONS/LESSONS/lesson_10/repeat/demo_2/index.html b/JS_LESSONS/LESSONS/lesson_10/repeat/demo_2/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>demo_2</title>
+</head>
+<body>
+
+<form id="f1">
+    <input type="text" placeholder="username" name="name">
+    <input type="number" placeholder="user age" name="age">
+<!--    <button>save</button>-->
+    <input type="submit" value="save">
+</form>
+
+
+
+
+
+<script src="main.js"></script>
+</body>
+</html>
diff --git a/JS_LESSONS/LESSONS/lesson_10/repeat/demo_2/main.js b/JS_LESSONS/LESSONS/lesson_10/repeat/demo_2/main.js
@@ -0,0 +1,15 @@
+
+
+let form = document.forms.f1;
+let userStorage = localStorage.getItem('user');
+let users = JSON.parse(userStorage) || [];
+
+form.onsubmit=function (ev) {
+    ev.preventDefault();
+    let name = this.name.value;
+    let age = this.age.value;
+    let data = {name, age};
+    console.log(data);
+    users.push(data)
+    localStorage.setItem('user', JSON.stringify(users));
+}