add repeat_hw-9 + resolve-9-JS

Sasha-Makar · Feb 28, 2024 · 37a06a5 · 37a06a5
1 parent 8969507
commit 37a06a5
Show file tree

Hide file tree

Showing 7 changed files with 574 additions and 0 deletions.
diff --git a/JS_LESSONS/CONS & RESOLVE/LESS_9/const#9/index.html b/JS_LESSONS/CONS & RESOLVE/LESS_9/const#9/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>consultation#9</title>
+<!--    <link rel="stylesheet" href="">-->
+    <style>
+        #wrapper {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-around;
+            align-items: center;
+            border: 2px solid red;
+            height: 100vh;
+            width: 80vw;
+            margin: 0 auto;
+        }
+
+        .test {
+            background: azure;
+        }
+
+        .cars {
+            width: 200px;
+            height: 250px;
+            border: 3px solid #700dea;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            margin: 10px;
+            padding: 10px;
+        }
+
+    </style>
+</head>
+<body>
+
+<div id="wrapper"></div>
+
+<script src="main.js"></script>
+</body>
+</html>
diff --git a/JS_LESSONS/CONS & RESOLVE/LESS_9/const#9/main.js b/JS_LESSONS/CONS & RESOLVE/LESS_9/const#9/main.js
@@ -0,0 +1,71 @@
+// console.log(22);
+
+console.log('CONST ADD #9');
+console.log('-------------------------');
+
+let cars = [
+    {make: "Toyota", model: "Camry", year: 2022, color: "Blue", price: 25000, image: 'https://img.freepik.com/free-photo/3d-car-with-vibrant-colors_23-2150796934.jpg?size=626&ext=jpg'},
+    {make: "Honda", model: "Civic", year: 2021, color: "Red", price: 22000, image: 'https://img.freepik.com/free-photo/3d-car-with-vibrant-colors_23-2150797034.jpg?size=626&ext=jpg'},
+    {make: "Ford", model: "Mustang", year: 2023, color: "Black", price: 40000,image: 'https://img.freepik.com/free-photo/sport-car-on-the-road-with-motion-blur-background_90220-1685.jpg?size=626&ext=jpg'},
+    {make: "Chevrolet", model: "Silverado", year: 2024, color: "Gray", price: 350000, image:'https://img.freepik.com/free-photo/3d-car-on-vibrant-city-at-night_23-2150796972.jpg?size=626&ext=jpg'},
+    // {make: "Nissan", model: "Altima", year: 2021, color: "White", price: 23000},
+    // {make: "BMW", model: "X5", year: 2022, color: "Silver", price: 60000},
+    // {make: "Mercedes-Benz", model: "C-Class", year: 2023, color: "Black", price: 50000},
+    // {make: "Audi", model: "A4", year: 2022, color: "Blue", price: 45000},
+    // // {make: "Jeep", model: "Wrangler", year: 2022, color: "Green", price: 35000},
+    // // {make: "Lexus", model: "RX", year: 2023, color: "Champagne", price: 55000}
+];
+
+console.log(cars)
+
+let wrapper = document.getElementById('wrapper');
+console.log(wrapper);
+wrapper.style.border = '4px solid black';
+
+wrapper.classList.add('test');
+
+for (const car of cars) {
+    // console.log(car);
+    let div = document.createElement('div');
+    div.innerText = car.make;
+    div.classList.add('cars');
+    let img = document.createElement('img');
+    img.src = car.image;
+    img.style.width = '200px';
+
+    wrapper.appendChild(div);
+    div.appendChild(img);
+}
+
+// wrapper.cloneNode(true);
+document.body.appendChild(wrapper.cloneNode(true));
+
+//
+// let wrapper = document.getElementById('wrapper');
+// wrapper.classList.add('test', 'test2', 'test3')
+// wrapper.style.border = '4px solid black';
+// // wrapper.style.background = 'red'
+// for (const car of cars) {
+//     let div = document.createElement('div');
+//     let img = document.createElement('img')
+//     let p = document.createElement('p')
+//     p.innerText = 'TEXT P'
+//     div.classList.add('cars')
+//     div.innerText = `${car.make} - ${car.year} - ${car.price} $`;
+//     img.src = car.image
+//     // wrapper.appendChild(div)
+//     div.append(img,p)
+//     wrapper.appendChild(div)
+// }
+// console.log(wrapper)
+//
+//
+//
+// let newDiv = document.createElement('div');
+// document.body.appendChild(newDiv)
+// let clone = newDiv.cloneNode(true)
+//
+//
+// clone.innerText = 'CLONE'
+// document.body.appendChild(clone)
+// newDiv.innerText = 'NEW DIV'
diff --git a/JS_LESSONS/CONS & RESOLVE/LESS_9/resolve#9/index.html b/JS_LESSONS/CONS & RESOLVE/LESS_9/resolve#9/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>repeat_HW-9_resolve#9</title>
+    <link rel="stylesheet" href="main1.css">
+</head>
+<body>
+
+
+<script src="main.js"></script>
+</body>
+</html>