HW js18 done + cw

js/18_redux-thunk-3/index.js

@@ -230,14 +230,17 @@ const getGQL = url =>
           //{_id1: {good, count},
           //_id2: {good, count}}
       const orderGoods = Object.entries(cart)
-                          .map(([_id, {}]) => ({good: {_id}, count}))
+                          .map(([_id, {good, count}]) => ({good: {_id}, count}))
 
-      await dispatch(actionPromise('order', gql(`
+      let result = await dispatch(actionPromise('order', gql(`
                   mutation newOrder($order:OrderInput){
                     OrderUpsert(order:$order)
-                      { _id total 	}
+                      { _id total}
                   }
           `, {order: {orderGoods}})))
+          if (result?._id) {
+              dispatch(actionCartClear())
+          }
     })
 
 
@@ -390,7 +393,6 @@ function createForm(parent, type, callback) {
 const createCartPage = (parent) => {
     parent.innerHTML = '';
     const {cart} = store.getState();
-    console.log(cart);
 
     const clearBtn = document.createElement('button');
     clearBtn.innerText = "ОЧИСТИТЬ КОРЗИНУ";
@@ -402,17 +404,15 @@ const createCartPage = (parent) => {
         store.dispatch(actionCartClear());
     }
     for(const item in cart) {
-        console.log(cart[item])
         const {good} = cart[item];
         const {count, good: {_id: id, name: name, price: price, images: [{url}]}} = cart[item];
-        console.log(count, id, name, price, url);
         const card = document.createElement('div');
         card.innerHTML = `
             <div>
                 <p>${name}</p>
                 <img src="${backURL}/${url}">
                 <p>${count}</p>
-                <p>${price}</p>
+                <p>${price} грн</p>
             </div>
         `;
 
@@ -514,12 +514,12 @@ store.subscribe(() => {
                 const card      = document.createElement('div')
                 card.innerHTML = `<h2>${name}</h2>
                                   <img src="${backURL}/${images[0].url}" />
-                                  <strong>${price}</strong>
+                                  <strong>${price} грн</strong>
                                   <br>
                                   <a href="#/good/${_id}">Перейти на страницу товара</a>
                                 `
                 const btnCart      = document.createElement('button')
-                btnCart.innerText  = 'Добавить товар'
+                btnCart.innerText  = 'Добавить в корзину'
                 btnCart.onclick = () => {
                     store.dispatch(actionCartAdd(good))
                 }
@@ -536,13 +536,20 @@ store.subscribe(() => {
     const [,route, _id] = location.hash.split('/');
     if (goodById?.payload && route === 'good') {
         main.innerHTML = '';
-        const {_id, name, images, price, description}  = goodById.payload;
+        const good = goodById.payload;
+            const {_id, name, images, price, description} = good
             const card = document.createElement('div');
             card.innerHTML = `<h2>${name}</h2>
                             <img src="${backURL}/${images[0].url}" />
-                            <strong>${price}</strong>
+                            <strong>${price} грн</strong>
                             <h2>${description}</h2>
                             `;
+            const btnCart      = document.createElement('button')
+            btnCart.innerText  = 'Добавить в корзину'
+            btnCart.onclick = () => {
+                store.dispatch(actionCartAdd(good))
+            }
+            card.append(btnCart)
             main.append(card);
         }
     }
@@ -591,10 +598,10 @@ store.subscribe(() => {
                             const card      = document.createElement('div')
                             card.innerHTML  = `<h2>${name}</h2>
                                                  <img src="${backURL}/${images[0].url}" />
-                                                 <strong>Куплено ${count} по ${price} грн. Итого:${total}</strong>
+                                                 <strong>Куплено ${count} по ${price} грн. Итого: ${total} грн</strong>
                                                  <br>
                                                  <a href="#/good/${_id}">Перейти на страницу товара</a>
-                                             `
+                                             `                                    
                             main.append(card)
                         }
                     }

js/19/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-   <meta charset="UTF-8">
-   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-   <title>Document</title>
-</head>
-<body>
-   
-   <script src="./index.js"></script>
-</body>
-</html>

js/19/index.js

@@ -1,24 +0,0 @@
-htmlTree()
-function htmlTree() {
-
-}
-
-htmlTree()
-function htmlTree() {
-
-}
-
-htmlTree()
-function htmlTree() {
-
-}
-
-htmlTree()
-function htmlTree() {
-
-}
-
-htmlTree()
-function htmlTree() {
-
-}

js/19_canvas/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+   <meta charset="UTF-8">
+   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <title>CANVAS</title>
+   <style>
+      input {
+         display: block;
+      }
+
+   </style>
+</head>
+<body>
+   <canvas id="canvas" width="400px" height="400px"></canvas>
+   <div class="operations">
+      <input id="colorInput" type='color'/>
+      <input id="radiusInput" type='number'/>
+      <button id="randomBtn">get random</button>
+   </div>
+   <script src="./index.js"></script>
+</body>
+</html>

js/19_canvas/index.js

@@ -0,0 +1,55 @@
+
+
+let ctx = canvas.getContext('2d')
+
+ctx.beginPath();
+// 1,2: x и y от начала координат;
+// 3: радиус
+// 4,5: начало и конец отрисовки
+// 6: направление отрисовки
+ctx.arc(100, 100, 10, 0, 1.5 * Math.PI, false);
+// ctx.lineTo(50, 50)   // зависит только от начальной точки канваса
+ctx.closePath()
+ctx.fillStyle = '#00FF00' 
+ctx.fill()
+ctx.stroke();
+
+
+canvas.onclick = (e) => {
+    // console.log(e)
+
+    ctx.beginPath();
+    ctx.arc(e.layerX, e.layerY, radiusInput.value ? radiusInput.value : 5, 0, 1.5 * Math.PI, false);
+    ctx.closePath()
+    ctx.fillStyle = colorInput.value
+    ctx.fill()
+    ctx.stroke();
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// randomBtn.onclick = (e) => {
+
+//     ctx.beginPath();
+//     ctx.arc(e.layerX, e.layerY, radiusInput.value, 0, 1.5 * Math.PI, false);
+//     ctx.closePath()
+//     ctx.fillStyle = colorInput.value
+//     ctx.fill()
+//     ctx.stroke();
+// }
+
+// three.js babylon.js