add repeat_preview-10-JS + empty file repeat_lesson-10-JS

Sasha-Makar · Feb 29, 2024 · 242ad34 · 242ad34
1 parent 37a06a5
commit 242ad34
Show file tree

Hide file tree

Showing 7 changed files with 324 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
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>repeat_lesson_10</title>
+</head>
+<body>
+
+
+<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
diff --git a/JS_LESSONS/PREVIEW/p_10.1-10.4/repeat/cart demo/cart/cart.html b/JS_LESSONS/PREVIEW/p_10.1-10.4/repeat/cart demo/cart/cart.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>cart</title>
+</head>
+<body>
+
+
+<script>
+
+
+    console.log(localStorage.getItem('cart'));
+</script>
+</body>
+</html>
diff --git a/JS_LESSONS/PREVIEW/p_10.1-10.4/repeat/cart demo/cart_demo.js b/JS_LESSONS/PREVIEW/p_10.1-10.4/repeat/cart demo/cart_demo.js
@@ -0,0 +1,52 @@
+
+let products = [
+    {
+        title: 'milk',
+        price: 30,
+        image: 'https://www.healthyeating.org/images/default-source/home-0.0/nutrition-topics-2.0/milk-dairy/taste-teach_prodcatcard.png?sfvrsn=fb05538d_2'
+    },
+    {
+        title: 'juice',
+        price: 28,
+        image: 'https://img.freepik.com/free-vector/illustration-juce-glass_250435-779.jpg?auto=format&h=200'
+    },
+    {
+        title: 'tomato',
+        price: 45,
+        image: 'https://img.freepik.com/free-vector/set-realistic-full-sliced-tomatoes-vectors_1441-834.jpg?auto=format&h=200'
+    },
+    {
+        title: 'tea',
+        price: 25,
+        image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSonQ8OD5ZbGBe7c9XolRfXgQjvPU5iFvIwOQ&usqp=CAU'
+    }
+];
+let productDiv = document.getElementsByClassName('products')[0];
+
+for (const product of products) {
+    let productBlock = document.createElement('div');
+
+    let h2 = document.createElement('h2');
+    h2.innerText = `${product.title} - ${product.price} UAH`;
+
+    let img = document.createElement('img');
+    img.src = `${product.image}`;
+
+    let button = document.createElement('button');
+    button.innerText = 'add to cart';
+
+    button.onclick = function () {
+        // console.log(localStorage.getItem('cart'));
+        // if (!localStorage.getItem('cart')){
+        //     localStorage.setItem('cart', JSON.stringify([]))
+        // }
+        let cart = JSON.parse(localStorage.getItem('cart')) || [];
+        cart.push(product);
+
+        localStorage.setItem('cart', JSON.stringify(cart));
+    }
+
+    productBlock.append(h2,img,button);
+    productDiv.appendChild(productBlock);
+}
+
diff --git a/JS_LESSONS/PREVIEW/p_10.1-10.4/repeat/cart demo/index.html b/JS_LESSONS/PREVIEW/p_10.1-10.4/repeat/cart demo/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>cart demo</title>
+    <style>
+        .products img {
+            width: 200px;
+        }
+        .products button {
+            display: block;
+            width: 200px;
+        }
+    </style>
+</head>
+<body>
+
+<div class="products"></div>
+
+
+
+<script src="cart_demo.js"></script>
+
+</body>
+</html>
diff --git a/JS_LESSONS/PREVIEW/p_10.1-10.4/repeat/index.html b/JS_LESSONS/PREVIEW/p_10.1-10.4/repeat/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>repeat_preview_10.1-10.4</title>
+    <style>
+        #target {
+            width: 200px;
+            height: 200px;
+            background: silver;
+        }
+
+
+
+    </style>
+
+</head>
+<body>
+
+<!--////////// Forms API///////////-->
+<!--<form action="" name="f1">-->
+<!--  <input type="text" placeholder="username" name="userName">-->
+<!--  <button>SEND USERNAME</button>-->
+<!--</form>-->
+
+<!--<form action="" name="f2">-->
+<!--  <input type="email" placeholder="email" name="userEmail">-->
+<!--  <button>SEND EMAIL</button>-->
+<!--</form>-->
+
+
+<!--<hr>-->
+<!--<hr>-->
+<!--<hr>-->
+
+
+<!--///////Події-DOM EVENTS/////////-->
+<!--<div id="target"></div>-->
+
+
+<!--<form id="f3">-->
+<!--    <input type="text" id="i1" name="userName">-->
+<!--    <button>SEND</button>-->
+<!--</form>-->
+
+
+
+
+
+<!--///////Локальне сховище-->
+
+
+
+
+
+
+
+<script src="main.js"></script>
+</body>
+</html>
diff --git a/JS_LESSONS/PREVIEW/p_10.1-10.4/repeat/main.js b/JS_LESSONS/PREVIEW/p_10.1-10.4/repeat/main.js
@@ -0,0 +1,159 @@
+// console.log(22);
+
+console.log('//////////////// Forms API/////////////');
+
+// console.log(document.forms);
+// console.log('-------');
+//
+// console.log(document.forms.f1);
+// console.log('-----');
+// console.log(document.forms['f2']);
+//
+// console.log('-----------');
+//
+//
+// console.log(document.forms.f1.userName);
+// console.log('---');
+// console.log(document.forms['f2']['userEmail']);
+
+// let line = document.createElement('hr');
+// document.body.appendChild(line);
+
+
+
+
+console.log('//////Події-DOM EVENTS////////');
+
+
+// let target = document.getElementById('target');
+
+// target.onclick = function (ev) {
+//     console.log('click-1');
+//     // console.log(ev);
+// }
+
+// target.onmousemove = function (ev) {
+//     console.log('move');
+//     // console.log(ev);
+//     // console.log(ev.clientX);
+//     // console.log(ev.clientY);
+//     let r = ev.clientX;
+//     let g = ev.clientY;
+//     let b = ev.clientX;
+//     this.style.background = `rgb(${r},${g},${b})`;
+// }
+
+// target.addEventListener('click', function (ev) {
+//     console.log('click-2');
+// })
+
+// target.onmouseover = function (ev) {
+//     console.log('over');
+// }
+//
+// target.onmouseleave = function (ev) {
+//     console.log('leave');
+//     // console.log(ev);
+// }
+
+// let i1 = document.getElementById('i1');
+
+// i1.oninput = function () {
+//     // console.log(this.value);
+//     target.innerText = this.value;
+// }
+
+
+// let f3 = document.forms.f3;
+//
+// f3.onsubmit = function (ev) {
+//     ev.preventDefault();
+//     // console.log('hello');
+// // f3.userName;
+//     let user = {name: this.userName.value}
+//     console.log(user);
+// }
+//
+//
+// console.log(window);
+//
+// window.onload = function () {
+//     console.log('load');
+// }
+//
+// document.onreadystatechange = function () {
+//     console.log(document.readyState);
+// }
+//
+//
+// document.onreadystatechange = function () {
+//     if (document.readyState === 'interactive'){
+//         document.body.innerText = 'load start......';
+//     }
+//     if (document.readyState === 'complete'){
+//         document.body.innerText = 'load finish';
+//     }
+// }
+
+
+console.log('/////////////////Локальне сховище/////////////');
+
+
+// localStorage.setItem('qwe', 'asd');
+
+
+// let item = localStorage.getItem('qwe');
+// console.log(item);
+
+// localStorage.clear();
+
+
+
+// localStorage.setItem('user',JSON.stringify({id:1, name: 'vasya'}));
+
+
+// let userJson = localStorage.getItem('user');
+//
+// console.log(userJson);
+//
+// let userParse = JSON.parse(userJson);
+//
+// console.log(userParse);
+//
+// userParse.status = true;
+// userParse.age = 31;
+//
+//
+// localStorage.setItem('user', JSON.stringify(userParse));
+
+
+let users = [
+    {name: 'vasya', age : 31, status : false},
+    {name: 'petya', age : 30, status : true},
+    {name: 'kolya', age : 29, status : true},
+    {name: 'olya', age : 28, status : false},
+    {name: 'max', age : 30, status : true},
+    {name: 'anya', age : 31, status : false},
+    {name: 'oleg', age : 28, status : false},
+    {name: 'andrey', age : 29, status : true},
+    {name: 'masha', age : 30, status : true},
+    {name: 'olya', age : 31, status : false},
+    {name: 'max', age : 31, status : true}
+];
+
+
+// localStorage.setItem('users', JSON.stringify(users));
+
+let usersJson = localStorage.getItem('users');
+console.log(usersJson);
+
+
+let usersParse = JSON.parse(usersJson);
+
+console.log(usersParse);
+
+usersParse.push({});
+console.log(usersParse);
+
+
+localStorage.setItem('users', JSON.stringify(usersParse));