Merge branch 'master' into 03-lection1/03-index

js-tasks-ru · Dec 21, 2024 · 90b5484 · 90b5484
2 parents 63da779 + a9c1a22
commit 90b5484
Show file tree

Hide file tree

Showing 25 changed files with 195 additions and 25 deletions.
diff --git a/05-lection3/01-tooltip/index.html b/05-lection3/01-tooltip/index.html
@@ -6,31 +6,26 @@
     <link rel="stylesheet" href="../../assets/css/main.css">
     <link rel="stylesheet" href="./tooltip.css">
     <title>Tooltip</title>
+
+    <script src="https://unpkg.com/feather-icons"></script>
 </head>
 
 <body style="display: flex; justify-content: center; align-items: center; height: 100vh;">
     <div class="container">
         <div class="tooltip">
             <div class="tooltip__trigger">
-                <svg class="tooltip__icon" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <path fill-rule="evenodd" clip-rule="evenodd"
-                        d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12Z"
-                        fill="#212429" />
-                    <path fill-rule="evenodd" clip-rule="evenodd"
-                        d="M12.2582 8.02428C11.7927 7.94443 11.314 8.03191 10.9068 8.27123C10.4996 8.51054 10.1902 8.88625 10.0335 9.3318C9.85018 9.85279 9.27926 10.1266 8.75827 9.9433C8.23728 9.76002 7.96351 9.18911 8.14678 8.66812C8.46025 7.77701 9.07898 7.02559 9.89339 6.54696C10.7078 6.06833 11.6653 5.89337 12.5964 6.05307C13.5274 6.21277 14.3719 6.69682 14.9802 7.41949C15.5884 8.14201 15.9214 9.05644 15.9201 10.0009C15.9197 11.5312 14.7851 12.5419 13.9748 13.082C13.5392 13.3724 13.1107 13.586 12.795 13.7263C12.6358 13.7971 12.5016 13.8508 12.405 13.8876C12.3566 13.906 12.3174 13.9203 12.2888 13.9305L12.2541 13.9426L12.243 13.9464L12.2391 13.9477L12.2376 13.9482C12.2373 13.9483 12.2363 13.9486 11.9201 13L12.2363 13.9486C11.7124 14.1233 11.1461 13.8401 10.9714 13.3162C10.7969 12.7926 11.0796 12.2267 11.6028 12.0516L11.6016 12.0521C11.6017 12.052 11.6018 12.052 11.6028 12.0516L11.6188 12.046C11.6342 12.0406 11.6594 12.0314 11.693 12.0186C11.7605 11.9929 11.8607 11.9529 11.9827 11.8986C12.2296 11.7889 12.551 11.6275 12.8654 11.4179C13.555 10.9582 13.9201 10.4691 13.9201 9.99996L13.9201 9.99847C13.9208 9.52615 13.7543 9.06883 13.4502 8.70749C13.146 8.34615 12.7238 8.10413 12.2582 8.02428Z"
-                        fill="#212429" />
-                    <path fill-rule="evenodd" clip-rule="evenodd"
-                        d="M12 15C12.5523 15 13 15.4477 13 16V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V16C11 15.4477 11.4477 15 12 15Z"
-                        fill="#212429" />
-                </svg>
+                <i data-feather="help-circle" class="tooltip__icon"></i>
             </div>
 
             <div class="tooltip__bubble">
                 <span>Helper text</span>
             </div>
         </div>
     </div>
+
+    <script>
+        feather.replace();
+      </script>
 </body>
 
 </html>
diff --git a/05-lection3/01-tooltip/tooltip.css b/05-lection3/01-tooltip/tooltip.css
@@ -11,6 +11,9 @@
 .tooltip__icon {
     width: 24px;
     height: 24px;
+    stroke: var(--grey-4);
+    fill: none;
+    stroke-width: 2px;
 }
 
 .tooltip__bubble {

diff --git a/05-lection3/02-modal/index.html b/05-lection3/02-modal/index.html
@@ -7,6 +7,8 @@
     <link rel="stylesheet" href="./modal.css">
     <link rel="stylesheet" href="../../components/01-button/button.css">
     <title>Modal</title>
+
+    <script src="https://unpkg.com/feather-icons"></script>
 </head>
 
 <body>
@@ -15,15 +17,8 @@
 
         <div id="modal" class="modal">
             <div class="modal__content">
-                <svg id="modal-close" class="modal__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-                    viewBox="0 0 16 16" fill="none">
-                    <path fill-rule="evenodd" clip-rule="evenodd"
-                        d="M12.4714 3.52861C12.7318 3.78896 12.7318 4.21107 12.4714 4.47141L4.47141 12.4714C4.21107 12.7318 3.78896 12.7318 3.52861 12.4714C3.26826 12.2111 3.26826 11.789 3.52861 11.5286L11.5286 3.52861C11.789 3.26826 12.2111 3.26826 12.4714 3.52861Z"
-                        fill="#495057" />
-                    <path fill-rule="evenodd" clip-rule="evenodd"
-                        d="M3.52861 3.52861C3.78896 3.26826 4.21107 3.26826 4.47141 3.52861L12.4714 11.5286C12.7318 11.789 12.7318 12.2111 12.4714 12.4714C12.2111 12.7318 11.789 12.7318 11.5286 12.4714L3.52861 4.47141C3.26826 4.21107 3.26826 3.78896 3.52861 3.52861Z"
-                        fill="#495057" />
-                </svg>
+                <i data-feather="x" id="modal-close" class="modal__icon"></i>
+
                 <h2 class="modal__title">Modal title</h2>
                 <p class="modal__text">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
                     Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
@@ -34,6 +29,9 @@ <h2 class="modal__title">Modal title</h2>
         </div>
     </div>
 
+    <script>
+        feather.replace();
+      </script>
 </body>
 <script src="./index.js"></script>
 

diff --git a/06-lection4/01-avatar/README.md b/06-lection4/01-avatar/README.md
@@ -0,0 +1,9 @@
+# Avatar
+
+Аватарка - неотъемлимая часть любого сайта, где есть профиль пользователя.<br>
+Этот компонент выглядит несложно, но надо обратить внимание на то, что пользователи загружают картинки в разных размерах, с разным соотношением сторон, а на странице эта картинка не должна сжиматься, или наоборот, оставлять пустое пространство в контейнере.<br>
+Еще одно требование - возможность сохранить аватарку через пкм.
+Не забудьте про атрибут `alt` :)
+
+## object-fit
+Возможно, вам будет полезно свойство `object-fit`, которое определяет как содержимое тегов `img` или `video` должно заполнять контейнер относительно его высоты и ширины.
diff --git a/06-lection4/01-avatar/avatar.css b/06-lection4/01-avatar/avatar.css
@@ -0,0 +1,11 @@
+.avatar {
+    width: 102px;
+    height: 102px;
+}
+
+.avatar__img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+}
diff --git a/06-lection4/01-avatar/index.html b/06-lection4/01-avatar/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!-- Страница с аватаром -->
+<html lang="ru">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Avatar</title>
+
+    <link rel="stylesheet" href="../../assets/css/main.css">
+    <link rel="stylesheet" href="./avatar.css">
+</head>
+
+<body>
+    <div class="container">
+        <div class="avatar">
+            <img class="avatar__img" src="../../assets/images/avatar.jpg" alt="userpic photo">
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/06-lection4/01-avatar/public/avatar-200.jpg b/06-lection4/01-avatar/public/avatar-200.jpg
diff --git a/06-lection4/01-avatar/test/solution.test.js b/06-lection4/01-avatar/test/solution.test.js
@@ -0,0 +1,7 @@
+const expect = require('chai').expect;
+
+describe('lection4/avatar', () => {
+  it('Аватарка', () => {
+    expect(1).to.equal(1);
+  });
+});
diff --git a/06-lection4/02-background-image/README.md b/06-lection4/02-background-image/README.md
@@ -0,0 +1,7 @@
+# background-image
+
+В директории `public` лежат картинки в нескольких разрешениях.<br>
+Нужно вставить картинку на фон страницы так, чтобы не грузились картинки избыточного размера.<br>
+
+Воспользоваться нужно способом вставки картинки через `background-image` и медиа-запросы.
+
diff --git a/06-lection4/02-background-image/background-image.css b/06-lection4/02-background-image/background-image.css
@@ -0,0 +1,26 @@
+.background {
+    width: 100%;
+    height: 400px;
+    background-image: url(./public/forest_400.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+}
+
+@media screen and (min-width: 768px) {
+    .background {
+        background-image: url(./public/forest_768.jpg);
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .background {
+        background-image: url(./public/forest_1024.jpg);
+    }
+}
+
+@media screen and (min-width: 2560px) {
+    .background {
+        background-image: url(./public/forest_2560.jpg);
+    }
+}
diff --git a/06-lection4/02-background-image/index.html b/06-lection4/02-background-image/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="ru">
+    <head>
+        <link rel="stylesheet" href="../../assets/css/main.css">
+        <link rel="stylesheet" href="./background-image.css">
+    </head>
+    <body>
+        <div class="container">
+            <div class="background">
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/06-lection4/02-background-image/public/forest_1024.jpg b/06-lection4/02-background-image/public/forest_1024.jpg
diff --git a/06-lection4/02-background-image/public/forest_2560.jpg b/06-lection4/02-background-image/public/forest_2560.jpg
diff --git a/06-lection4/02-background-image/public/forest_400.jpg b/06-lection4/02-background-image/public/forest_400.jpg
diff --git a/06-lection4/02-background-image/public/forest_768.jpg b/06-lection4/02-background-image/public/forest_768.jpg
diff --git a/06-lection4/02-background-image/test/solution.test.js b/06-lection4/02-background-image/test/solution.test.js
@@ -0,0 +1,7 @@
+const expect = require('chai').expect;
+
+describe('lection4/background-image', () => {
+  it('Фон', () => {
+    expect(1).to.equal(1);
+  });
+});
diff --git a/06-lection4/03-srcset/README.md b/06-lection4/03-srcset/README.md
@@ -0,0 +1,5 @@
+# srcset
+
+В директории `public` лежат картинки в нескольких разрешениях.<br>
+Нужно вставить на страницу квадратный блок 300x300, а в него вписать картинку так, чтобы для экранов с высокой плотностью пикселей загружалась картинка в 2 раза больше.<br>
+
diff --git a/06-lection4/03-srcset/index.html b/06-lection4/03-srcset/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+    <link rel="stylesheet" href="../../assets/css/main.css">
+    <link rel="stylesheet" href="./srcset.css">
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Srcset</title>
+</head>
+
+<body>
+    <div class="image__wrapper">
+        <img src="./public/forest_400.jpg" alt="forest image" 
+
+             srcset="
+             ./public/forest_400.jpg 400w,
+             ./public/forest_768.jpg 768w"
+
+             sizes="
+             (max-width: 400px) 300px,
+             (max-width: 768px) 300px">
+    </div>
+</body>
+
+</html>
diff --git a/06-lection4/03-srcset/public/forest_400.jpg b/06-lection4/03-srcset/public/forest_400.jpg
diff --git a/06-lection4/03-srcset/public/forest_768.jpg b/06-lection4/03-srcset/public/forest_768.jpg
diff --git a/06-lection4/03-srcset/srcset.css b/06-lection4/03-srcset/srcset.css
@@ -0,0 +1,5 @@
+.image__wrapper {
+    width: 300px;
+    height: 300px;
+    overflow: hidden;
+}
diff --git a/06-lection4/03-srcset/test/solution.test.js b/06-lection4/03-srcset/test/solution.test.js
@@ -0,0 +1,7 @@
+const expect = require('chai').expect;
+
+describe('lection4/srcset', () => {
+  it('Srcset', () => {
+    expect(1).to.equal(1);
+  });
+});
diff --git a/assets/images/avatar.jpg b/assets/images/avatar.jpg
diff --git a/components/accordion/accordion.css b/components/accordion/accordion.css
@@ -1,4 +1,6 @@
 .accordion {
+    display: flex;
+    flex-direction: column;
     font-family: 'Inter', sans-serif;
     font-size: 16px;
     font-style: normal;
@@ -11,7 +13,6 @@
     border: 1px solid var(--grey-3);
     padding: 24px 32px;
     border-radius: 8px;
-    cursor: pointer;
 }
 
 .accordion__item:last-child {
@@ -20,6 +21,18 @@
 
 .accordion__summary {
     list-style: none;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+}
+
+.accordion__icon {
+    width: 24px;
+    height: 24px;
+    stroke: var(--grey-4);
+    fill: none;
+    stroke-width: 2px;
 }
 
 .accordion__summary::-webkit-details-marker {
@@ -30,4 +43,8 @@
     color: var(--grey-4);
     padding-top: 16px;
     padding-bottom: 8px;
+}
+
+.accordion__item[open] .accordion__icon {
+    transform: rotate(180deg);
 }
diff --git a/components/accordion/index.html b/components/accordion/index.html
@@ -7,29 +7,40 @@
     <title>Accordeon</title>
 
     <link rel="stylesheet" href="../../assets/css/main.css">
+
+    <script src="https://unpkg.com/feather-icons"></script>
 </head>
 
 <body>
     <div class="container">
         <div class="accordion">
             <details class="accordion__item" open>
-                <summary class="accordion__summary">Why did the programmer quit his job?</summary>
+                <summary class="accordion__summary">Why did the programmer quit his job?
+                    <i data-feather="chevron-down" class="accordion__icon"></i>
+                </summary>
                 <p class="accordion__text">Because he didn't get arrays (a raise)!</p>
             </details>
 
             <details class="accordion__item">
-                <summary class="accordion__summary">How do you comfort a JavaScript bug?</summary>
+                <summary class="accordion__summary">How do you comfort a JavaScript bug?
+                    <i data-feather="chevron-down" class="accordion__icon"></i>
+                </summary>
                 <p class="accordion__text">You console it!</p>
             </details>
 
             <details class="accordion__item">
-                <summary class="accordion__summary">Why do programmers prefer dark mode?</summary>
+                <summary class="accordion__summary">Why do programmers prefer dark mode?
+                    <i data-feather="chevron-down" class="accordion__icon"></i>
+                </summary>
                 <p class="accordion__text">Because light attracts bugs!</p>
             </details>
         </div>
 
     </div>
 
+    <script>
+        feather.replace();
+      </script>
 </body>
 
 </html>