fix: changed naming variables, prettier

kottans · A-Ostrovnyy · Sep 13, 2022 · Aug 26, 2022 · Aug 26, 2022 · Aug 26, 2022
commit 13c0f2913c157c5a6327bd55682a401a9d44d23c
diff --git a/submissions/DmitryHniezdilov/task-js-dom/css/scss/style.scss b/submissions/DmitryHniezdilov/task-js-dom/css/scss/style.scss
@@ -1,32 +1,30 @@
-//bcg colors
 $bcgWhite: #fff;
 $bcgBlue: #2d78b5;
-$bcgWhiteA: #f7efd6;
-$bcgBluePic: #0a6a8d;
+$bcgWhiteApricot: #f7efd6;
+$bcgBlueAllports: #0a6a8d;
 $bcgBluePolo: #7ca3d2;
 $bcgBlueFill: #1e90ff;
-
-$font: #182331;
-$selection: rgba(110, 123, 127, 0.8);
-$logo-hov: rgba(227, 90, 37, 0.7);
-$paper-bcg: rgba(110, 123, 127, 0.3);
-$btn-hov: rgba(227, 90, 37, 0.5);
+$colorFont: #182331;
+$colorSelection: rgba(110, 123, 127, 0.8);
+$colorLogoHover: rgba(227, 90, 37, 0.7);
+$colorPaperBcg: rgba(110, 123, 127, 0.3);
+$colorBtnHov: rgba(227, 90, 37, 0.5);
 
 * {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   font-size: 0;
   font-family: "Roboto Mono", monospace;
-  color: $font;
+  color: $colorFont;
 }
 
 *:focus-visible {
   outline: none;
 }
 
 *::selection {
-  background: $selection;
+  background: $colorSelection;
 }
 
 .wrapper {
@@ -85,10 +83,10 @@ $btn-hov: rgba(227, 90, 37, 0.5);
     background-color: $bcgBlue;
   }
   25% {
-    background-color: $bcgWhiteA;
+    background-color: $bcgWhiteApricot;
   }
   50% {
-    background-color: $bcgBluePic;
+    background-color: $bcgBlueAllports;
   }
   75% {
     background-color: $bcgBluePolo;
@@ -114,7 +112,7 @@ $btn-hov: rgba(227, 90, 37, 0.5);
     &:active,
     &:focus,
     &:focus-visible {
-      background-color: $logo-hov;
+      background-color: $colorLogoHover;
       transition: ease 0.25s;
     }
   }
@@ -144,7 +142,7 @@ $btn-hov: rgba(227, 90, 37, 0.5);
 
 .paper {
   border-radius: 15px;
-  background-color: $paper-bcg;
+  background-color: $colorPaperBcg;
   backdrop-filter: blur(10px);
 }
 
@@ -170,7 +168,7 @@ $btn-hov: rgba(227, 90, 37, 0.5);
     &:active,
     &:focus,
     &:focus-visible {
-      background-color: $btn-hov;
+      background-color: $colorBtnHov;
       transition: ease 0.25s;
 
       &.is-active:after {
@@ -203,7 +201,7 @@ $btn-hov: rgba(227, 90, 37, 0.5);
       left: 15px;
       width: auto;
       height: 2px;
-      background-color: $btn-hov;
+      background-color: $colorBtnHov;
     }
 
     &.is-active {

diff --git a/submissions/DmitryHniezdilov/task-js-dom/css/style.css b/submissions/DmitryHniezdilov/task-js-dom/css/style.css
@@ -1,6 +1,6 @@
 * {
   -webkit-box-sizing: border-box;
-  box-sizing: border-box;
+          box-sizing: border-box;
   padding: 0;
   margin: 0;
   font-size: 0;
@@ -28,24 +28,16 @@
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-  -ms-flex-flow: column nowrap;
-  flex-flow: column nowrap;
+      -ms-flex-flow: column nowrap;
+          flex-flow: column nowrap;
   position: relative;
   min-height: 100vh;
   overflow: hidden;
-  background: radial-gradient(circle at top, #fff, transparent 50%),
-    -webkit-gradient(linear, left top, left bottom, from(#1e90ff), color-stop(70%, transparent)),
-    -webkit-gradient(linear, left bottom, left top, from(transparent), color-stop(70%, rgba(255, 255, 255, 0.3))),
-    #2d78b5;
-  background: -o-radial-gradient(top, circle, #fff, transparent 50%),
-    -o-linear-gradient(top, #1e90ff 0%, transparent 70%),
-    -o-linear-gradient(bottom, transparent, rgba(255, 255, 255, 0.3) 70%),
-    #2d78b5;
-  background: radial-gradient(circle at top, #fff, transparent 50%),
-    linear-gradient(to bottom, #1e90ff 0%, transparent 70%),
-    linear-gradient(to top, transparent, rgba(255, 255, 255, 0.3) 70%), #2d78b5;
+  background: radial-gradient(circle at top, #fff, transparent 50%), -webkit-gradient(linear, left top, left bottom, from(#1e90ff), color-stop(70%, transparent)), -webkit-gradient(linear, left bottom, left top, from(transparent), color-stop(70%, rgba(255, 255, 255, 0.3))), #2d78b5;
+  background: -o-radial-gradient(top, circle, #fff, transparent 50%), -o-linear-gradient(top, #1e90ff 0%, transparent 70%), -o-linear-gradient(bottom, transparent, rgba(255, 255, 255, 0.3) 70%), #2d78b5;
+  background: radial-gradient(circle at top, #fff, transparent 50%), linear-gradient(to bottom, #1e90ff 0%, transparent 70%), linear-gradient(to top, transparent, rgba(255, 255, 255, 0.3) 70%), #2d78b5;
   -webkit-animation: bg 30s infinite;
-  animation: bg 30s infinite;
+          animation: bg 30s infinite;
 }
 
 .wrapper__bcg-box {
@@ -55,14 +47,14 @@
   left: 0;
   height: 65%;
   -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 
 .wrapper__bcg-img {
   -o-object-fit: contain;
-  object-fit: contain;
+     object-fit: contain;
   width: 100%;
   height: auto;
 }
@@ -80,7 +72,7 @@
 
 .wrapper__inner::-webkit-scrollbar-track {
   -webkit-box-shadow: transparent;
-  box-shadow: transparent;
+          box-shadow: transparent;
 }
 
 .wrapper__inner::-webkit-scrollbar-thumb {
@@ -89,8 +81,7 @@
 }
 
 @-webkit-keyframes bg {
-  0%,
-  100% {
+  0%, 100% {
     background-color: #2d78b5;
   }
 
@@ -108,8 +99,7 @@
 }
 
 @keyframes bg {
-  0%,
-  100% {
+  0%, 100% {
     background-color: #2d78b5;
   }
 
@@ -132,11 +122,11 @@
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 
 .header__logo {
@@ -170,8 +160,8 @@
   padding: 20px 30px 30px;
   max-width: 1300px;
   -webkit-box-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+      -ms-flex: 1;
+          flex: 1;
   display: -ms-grid;
   display: grid;
   height: 100%;
@@ -186,7 +176,7 @@
   border-radius: 15px;
   background-color: rgba(110, 123, 127, 0.3);
   -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
+          backdrop-filter: blur(10px);
 }
 
 .menu__list {
@@ -274,7 +264,7 @@
   -ms-grid-rows: auto 20px 1fr;
   grid-template-rows: auto 1fr;
   gap: 20px;
-  grid-template-areas: "top top" "img-wrap info-wrap";
+      grid-template-areas: "top top" "img-wrap info-wrap";
 }
 
 .content__top {
@@ -283,7 +273,7 @@
   -ms-grid-column-span: 3;
   grid-area: top;
   -ms-grid-row-align: center;
-  align-self: center;
+      align-self: center;
 }
 
 .content__img-wrap {
@@ -319,9 +309,9 @@
   height: 100%;
   max-height: 500px;
   -o-object-fit: cover;
-  object-fit: cover;
+     object-fit: cover;
   -o-object-position: center;
-  object-position: center;
+     object-position: center;
 }
 
 .content__info-list {
@@ -330,8 +320,8 @@
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-  -ms-flex-flow: column nowrap;
-  flex-flow: column nowrap;
+      -ms-flex-flow: column nowrap;
+          flex-flow: column nowrap;
   list-style: none;
 }
 
@@ -351,7 +341,7 @@
 @media screen and (max-width: 1400px) {
   .wrapper__bcg-img {
     -o-object-fit: cover;
-    object-fit: cover;
+       object-fit: cover;
     width: 100%;
     height: 100%;
   }
@@ -361,7 +351,7 @@
   .content {
     -ms-grid-columns: 1fr;
     grid-template-columns: 1fr;
-    grid-template-areas: "top" "img-wrap" "info-wrap";
+        grid-template-areas: "top" "img-wrap" "info-wrap";
   }
   .content__top {
     -ms-grid-row: 1;
@@ -385,4 +375,4 @@
     padding: 20px;
     gap: 20px;
   }
-}
+}
diff --git a/submissions/DmitryHniezdilov/task-js-dom/js/main.js b/submissions/DmitryHniezdilov/task-js-dom/js/main.js
@@ -37,6 +37,7 @@ const createСontentMarkup = (item = defaultContentItem) => {
           key === "Runtime"
             ? changeMinToHm(item["details"][key])
             : item["details"][key];
+
         return `
                     <li class="content__info-item">
                         <span class="content__info-text"><strong>${key}: </strong>${value}</span>
@@ -56,28 +57,31 @@ const createСontentMarkup = (item = defaultContentItem) => {
             </div>
             <div class="content__info-wrap">
                 <ul class="content__info-list">
-
                     <li class="content__info-item">
                         <span class="content__info-text content__info-text--plot">${item["Plot"]}</span>
                     </li>
-
                     ${detailsList}
-
                 </ul>
             </div>
         `;
 };
 
-elemMenu.innerHTML += createMenuMarkup(dataList);
-elemContent.innerHTML += createСontentMarkup();
+const createInitialMarkup = () => {
+  elemMenu.innerHTML += createMenuMarkup(dataList);
+  elemContent.innerHTML += createСontentMarkup();
+};
+
+createInitialMarkup();
 
 const deleteActiveClass = () =>
   elemMenu
     .querySelectorAll(".is-active")
     .forEach((item) => item.classList.remove("is-active"));
-const addActiveClass = (event) => event.target.classList.add("is-active");
 
-const getItemId = (event) => event.target.getAttribute("data-item-id");
+const addActiveClass = ({ target }) => target.classList.add("is-active");
+
+const getItemId = ({ target }) => target.getAttribute("data-item-id");
+
 const getContentItem = (event) =>
   dataList.filter((item) => item["id"] === getItemId(event))[0];