diff --git "a/hw7/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1-\320\277\320\265\321\200\320\265\320\261\320\276\321\200_\321\201\320\262\320\276\320\271\321\201\321\202\320\262_\320\276\320\261\321\212\320\265\320\272\321\202\320\260.html" "b/hw7/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1-\320\277\320\265\321\200\320\265\320\261\320\276\321\200_\321\201\320\262\320\276\320\271\321\201\321\202\320\262_\320\276\320\261\321\212\320\265\320\272\321\202\320\260.html" new file mode 100644 index 0000000..8c8743f --- /dev/null +++ "b/hw7/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1-\320\277\320\265\321\200\320\265\320\261\320\276\321\200_\321\201\320\262\320\276\320\271\321\201\321\202\320\262_\320\276\320\261\321\212\320\265\320\272\321\202\320\260.html" @@ -0,0 +1,27 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git "a/hw7/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2-\320\276\321\207\320\270\321\201\321\202\320\272\320\260_\321\201_\320\277\320\276\320\274\320\276\321\211\321\214\321\216_innerHTML.html" "b/hw7/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2-\320\276\321\207\320\270\321\201\321\202\320\272\320\260_\321\201_\320\277\320\276\320\274\320\276\321\211\321\214\321\216_innerHTML.html" new file mode 100644 index 0000000..59b7d51 --- /dev/null +++ "b/hw7/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2-\320\276\321\207\320\270\321\201\321\202\320\272\320\260_\321\201_\320\277\320\276\320\274\320\276\321\211\321\214\321\216_innerHTML.html" @@ -0,0 +1,22 @@ + + + + + + Document + + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing. +

+ + + + + \ No newline at end of file diff --git "a/hw7/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/3-\320\267\320\260\320\277\320\276\320\273\320\275\320\265\320\275\320\270\320\265_\321\201_\320\272\320\276\320\275\320\272\320\260\321\202\320\265\320\275\320\260\321\206\320\270\320\265\320\271.html" "b/hw7/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/3-\320\267\320\260\320\277\320\276\320\273\320\275\320\265\320\275\320\270\320\265_\321\201_\320\272\320\276\320\275\320\272\320\260\321\202\320\265\320\275\320\260\321\206\320\270\320\265\320\271.html" new file mode 100644 index 0000000..a8c6794 --- /dev/null +++ "b/hw7/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/3-\320\267\320\260\320\277\320\276\320\273\320\275\320\265\320\275\320\270\320\265_\321\201_\320\272\320\276\320\275\320\272\320\260\321\202\320\265\320\275\320\260\321\206\320\270\320\265\320\271.html" @@ -0,0 +1,27 @@ + + + + + + Document + + + + + + \ No newline at end of file diff --git "a/hw7/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/4-\320\262\321\201\321\202\320\260\320\262\320\272\320\260_\321\200\320\260\320\267\320\274\320\265\321\202\320\272\320\270.html" "b/hw7/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/4-\320\262\321\201\321\202\320\260\320\262\320\272\320\260_\321\200\320\260\320\267\320\274\320\265\321\202\320\272\320\270.html" new file mode 100644 index 0000000..b99a55c --- /dev/null +++ "b/hw7/1 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/4-\320\262\321\201\321\202\320\260\320\262\320\272\320\260_\321\200\320\260\320\267\320\274\320\265\321\202\320\272\320\270.html" @@ -0,0 +1,29 @@ + + + + + + + Document + + + + + + + + + + + \ No newline at end of file diff --git "a/hw7/2 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1-\320\277\320\276\320\273\321\203\321\207\320\265\320\275\320\270\320\265_data-\320\260\321\202\321\200\320\270\320\261\321\203\321\202\320\276\320\262.html" "b/hw7/2 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1-\320\277\320\276\320\273\321\203\321\207\320\265\320\275\320\270\320\265_data-\320\260\321\202\321\200\320\270\320\261\321\203\321\202\320\276\320\262.html" new file mode 100644 index 0000000..7cf3442 --- /dev/null +++ "b/hw7/2 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1-\320\277\320\276\320\273\321\203\321\207\320\265\320\275\320\270\320\265_data-\320\260\321\202\321\200\320\270\320\261\321\203\321\202\320\276\320\262.html" @@ -0,0 +1,26 @@ + + + + + + Document + + + + + + + + + + + \ No newline at end of file diff --git "a/hw7/2 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2-\321\201\320\276\320\267\320\264\320\260\320\275\320\270\320\265_\321\200\320\260\320\267\320\274\320\265\321\202\320\272\320\270.html" "b/hw7/2 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2-\321\201\320\276\320\267\320\264\320\260\320\275\320\270\320\265_\321\200\320\260\320\267\320\274\320\265\321\202\320\272\320\270.html" new file mode 100644 index 0000000..67cc077 --- /dev/null +++ "b/hw7/2 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2-\321\201\320\276\320\267\320\264\320\260\320\275\320\270\320\265_\321\200\320\260\320\267\320\274\320\265\321\202\320\272\320\270.html" @@ -0,0 +1,25 @@ + + + + + + Document + + + + + + + \ No newline at end of file diff --git "a/hw7/2 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/3-\321\200\320\260\320\267\320\274\320\265\321\200_\321\210\321\200\320\270\321\204\321\202\320\260.html" "b/hw7/2 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/3-\321\200\320\260\320\267\320\274\320\265\321\200_\321\210\321\200\320\270\321\204\321\202\320\260.html" new file mode 100644 index 0000000..15eae2e --- /dev/null +++ "b/hw7/2 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/3-\321\200\320\260\320\267\320\274\320\265\321\200_\321\210\321\200\320\270\321\204\321\202\320\260.html" @@ -0,0 +1,28 @@ + + + + + + Document + + + +
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat, expedita. +
+ + + + + + + \ No newline at end of file diff --git "a/hw7/3 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1-tabs/1-tabs.html" "b/hw7/3 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1-tabs/1-tabs.html" new file mode 100644 index 0000000..239862d --- /dev/null +++ "b/hw7/3 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1-tabs/1-tabs.html" @@ -0,0 +1,41 @@ + + + + + + + Document + + + + + +
+ + +
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+
+ + + + + + + \ No newline at end of file diff --git "a/hw7/3 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1-tabs/app.js" "b/hw7/3 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1-tabs/app.js" new file mode 100644 index 0000000..e6e1c4e --- /dev/null +++ "b/hw7/3 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1-tabs/app.js" @@ -0,0 +1,43 @@ +'use strict'; +const texts = { + text1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.', + text2: 'Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.', + text3: 'Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил.' +}; + +/* +1. Получите ссылку на .text, например с помощью querySelector +2. Получите коллекцию, в которой хранятся все .nav-link, например с помощью querySelectorAll + 2.1 Переберите полученную коллекцию, например с помощью forEach, и каждой ссылке назначьте + обработчик клика функцию clickHandler. +*/ + + +/** + * Обработчик клика по .nav-link + * @param {MouseEvent} event + */ +function clickHandler(event) { + // здесь вызывайте changeText и changeActiveClass, и передавайте + // им объект события. + +} + +/** + * Эта функция должна убирать .active у предыдущего .nav-link и ставить его + * на тот, по которому кликнули. + * @param {MouseEvent} event + */ +function changeActiveClass(event) { + +} + +/** + * Эта фукнция должна читать текст (например через textContent) из + * .nav-link по которому кликнули и в зависимости от этого в .text + * ставить соответствующий текст из texts. + * @param {MouseEvent} event + */ +function changeText(event) { + +} \ No newline at end of file diff --git "a/hw7/3 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1-tabs/style.css" "b/hw7/3 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1-tabs/style.css" new file mode 100644 index 0000000..8c5d434 --- /dev/null +++ "b/hw7/3 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1-tabs/style.css" @@ -0,0 +1,3 @@ +.nav { + margin-top: 30px; +} \ No newline at end of file diff --git "a/hw7/3 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2-\321\201\320\276\320\276\320\261\321\211\320\265\320\275\320\270\320\265/message.html" "b/hw7/3 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2-\321\201\320\276\320\276\320\261\321\211\320\265\320\275\320\270\320\265/message.html" new file mode 100644 index 0000000..8d1faed --- /dev/null +++ "b/hw7/3 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2-\321\201\320\276\320\276\320\261\321\211\320\265\320\275\320\270\320\265/message.html" @@ -0,0 +1,33 @@ + + + + + + + Document + + + + + +
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt, aliquam enim voluptates quibusdam + perferendis sint ipsa, nulla quas doloribus nobis libero voluptatem unde inventore. Ut quas corporis fugit error + explicabo? Ipsa quos qui similique sequi officia quod ab reiciendis alias! +
+ + + + + + + \ No newline at end of file diff --git "a/hw7/3 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2-\321\201\320\276\320\276\320\261\321\211\320\265\320\275\320\270\320\265/notification.mp3" "b/hw7/3 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2-\321\201\320\276\320\276\320\261\321\211\320\265\320\275\320\270\320\265/notification.mp3" new file mode 100644 index 0000000..27b8506 Binary files /dev/null and "b/hw7/3 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2-\321\201\320\276\320\276\320\261\321\211\320\265\320\275\320\270\320\265/notification.mp3" differ diff --git "a/hw7/3 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2-\321\201\320\276\320\276\320\261\321\211\320\265\320\275\320\270\320\265/style.css" "b/hw7/3 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2-\321\201\320\276\320\276\320\261\321\211\320\265\320\275\320\270\320\265/style.css" new file mode 100644 index 0000000..478888e --- /dev/null +++ "b/hw7/3 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2-\321\201\320\276\320\276\320\261\321\211\320\265\320\275\320\270\320\265/style.css" @@ -0,0 +1,11 @@ +.message { + width: 300px; + color: white; + font-family: sans-serif; + padding: 15px; + border-radius: 20px; + background: rgba(0, 0, 0, 0.7); + position: fixed; + top: calc(100vh + 20px); + transition-duration: 0.5s; +} \ No newline at end of file diff --git "a/hw7/4 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1 \320\262\321\213\320\262\320\276\320\264 \321\202\320\276\320\262\320\260\321\200\320\276\320\262/1-\320\262\321\213\320\262\320\276\320\264_\321\202\320\276\320\262\320\260\321\200\320\276\320\262.html" "b/hw7/4 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1 \320\262\321\213\320\262\320\276\320\264 \321\202\320\276\320\262\320\260\321\200\320\276\320\262/1-\320\262\321\213\320\262\320\276\320\264_\321\202\320\276\320\262\320\260\321\200\320\276\320\262.html" new file mode 100644 index 0000000..9b3eb04 --- /dev/null +++ "b/hw7/4 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1 \320\262\321\213\320\262\320\276\320\264 \321\202\320\276\320\262\320\260\321\200\320\276\320\262/1-\320\262\321\213\320\262\320\276\320\264_\321\202\320\276\320\262\320\260\321\200\320\276\320\262.html" @@ -0,0 +1,24 @@ + + + + + + Document + + + + + + + +
+ + + + + + \ No newline at end of file diff --git "a/hw7/4 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1 \320\262\321\213\320\262\320\276\320\264 \321\202\320\276\320\262\320\260\321\200\320\276\320\262/app.js" "b/hw7/4 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1 \320\262\321\213\320\262\320\276\320\264 \321\202\320\276\320\262\320\260\321\200\320\276\320\262/app.js" new file mode 100644 index 0000000..5604fd7 --- /dev/null +++ "b/hw7/4 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1 \320\262\321\213\320\262\320\276\320\264 \321\202\320\276\320\262\320\260\321\200\320\276\320\262/app.js" @@ -0,0 +1,113 @@ +"use strict"; +/* +Разметка товара: + +
+
${здесь_название_товара}
+ +
${здесь_цена}
+ Подробнее +
+*/ + +const products = { + phones: [ + { + id: 1, + name: "Смартфон 1", + price: "23,99 р.", + imageUrl: "https://picsum.photos/seed/1/200", + }, + { + id: 2, + name: "Смартфон 2", + price: "11,99 р.", + imageUrl: "https://picsum.photos/seed/2/200", + }, + { + id: 3, + name: "Смартфон 3", + price: "22,99 р.", + imageUrl: "https://picsum.photos/seed/3/200", + }, + ], + + tablets: [ + { + id: 4, + name: "Планшет 4", + price: "99,99 р.", + imageUrl: "https://picsum.photos/seed/4/200", + }, + { + id: 5, + name: "Планшет 5", + price: "44,99 р.", + imageUrl: "https://picsum.photos/seed/5/200", + }, + ], + + tv: [ + { + id: 6, + name: "Телевизор 6", + price: "199,99 р.", + imageUrl: "https://picsum.photos/seed/6/200", + }, + { + id: 7, + name: "Телевизор 7", + price: "244,99 р.", + imageUrl: "https://picsum.photos/seed/7/200", + }, + { + id: 8, + name: "Телевизор 8", + price: "399,99 р.", + imageUrl: "https://picsum.photos/seed/8/200", + }, + { + id: 9, + name: "Телевизор 9", + price: "444,99 р.", + imageUrl: "https://picsum.photos/seed/9/200", + }, + ], +}; + + +/** + * Эта функция должна вызываться при клике по кнопкам. + * @param {MouseEvent} event + */ +function clickHandler(event) { + //вам нужно очищать содержимое .products + + //в showCategory надо передать строку с типом категории, тип берите + //из атрибута data-type у кнопки, по которой кликнули. + +} + +/** + * Функция берет товары (объекты) из соответствующего массива phones, + * tablets или tv. Генерирует разметку, используя getProductMarkup + * и вставляет в .products + * @param {string} category сюда должно прилетать значение атрибута data-type у кнопки, + * по которой кликнули. + */ +function showCategory(category) { + +} + +/** + * @param {Object} product объект из массива phones, tablets или tv. + * @param {number} product.id id продукта + * @param {string} product.name название продукта + * @param {string} product.price цена продукта + * @param {string} product.imageUrl путь до картинки товара + * @returns {string} html-разметка для товара по аналогии из комментария + * в верху этого файла. + */ +function getProductMarkup(product) { + +} diff --git "a/hw7/4 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1 \320\262\321\213\320\262\320\276\320\264 \321\202\320\276\320\262\320\260\321\200\320\276\320\262/style.css" "b/hw7/4 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1 \320\262\321\213\320\262\320\276\320\264 \321\202\320\276\320\262\320\260\321\200\320\276\320\262/style.css" new file mode 100644 index 0000000..37ad290 --- /dev/null +++ "b/hw7/4 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/1 \320\262\321\213\320\262\320\276\320\264 \321\202\320\276\320\262\320\260\321\200\320\276\320\262/style.css" @@ -0,0 +1,9 @@ +.products { + overflow: hidden; + margin-top: 40px; +} + +.product { + float: left; + margin-right: 20px; +} \ No newline at end of file diff --git "a/hw7/4 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2 \320\277\321\200\320\276\320\263\321\200\320\265\321\201\321\201\320\261\320\260\321\200/progress.html" "b/hw7/4 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2 \320\277\321\200\320\276\320\263\321\200\320\265\321\201\321\201\320\261\320\260\321\200/progress.html" new file mode 100644 index 0000000..b472b17 --- /dev/null +++ "b/hw7/4 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2 \320\277\321\200\320\276\320\263\321\200\320\265\321\201\321\201\320\261\320\260\321\200/progress.html" @@ -0,0 +1,43 @@ + + + + + + + Document + + + + +
+ + + + + + + \ No newline at end of file diff --git "a/hw7/4 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2 \320\277\321\200\320\276\320\263\321\200\320\265\321\201\321\201\320\261\320\260\321\200/style.css" "b/hw7/4 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2 \320\277\321\200\320\276\320\263\321\200\320\265\321\201\321\201\320\261\320\260\321\200/style.css" new file mode 100644 index 0000000..7828f98 --- /dev/null +++ "b/hw7/4 \321\203\321\200\320\276\320\262\320\265\320\275\321\214/2 \320\277\321\200\320\276\320\263\321\200\320\265\321\201\321\201\320\261\320\260\321\200/style.css" @@ -0,0 +1,5 @@ +div { + border: 1px solid black; + height: 40px; + width: 300px; +} \ No newline at end of file