Repository: js-tasks-ru/htmlcss-20250313_boldnesspie
Pull request #9: add solving 04-01-histogram
Author: login: BoldnessPie
Created: 2025-03-27T06:34:24Z | Merged: 2025-03-31T06:00:33Z



Diff:
diff --git a/04-lection2/01-histogram/histogram.css b/04-lection2/01-histogram/histogram.css
index e69de29..d968cd0 100644
--- a/04-lection2/01-histogram/histogram.css
+++ b/04-lection2/01-histogram/histogram.css
@@ -0,0 +1,83 @@
+.histogram {
+    box-sizing: border-box;
+    padding: 16px 24px 24px;
+  
+    background: #ffffff;
+    border: 1px solid #acb5bd;
+    border-radius: 8px;
+  
+    font-family: "Inter";
+  }
+  
+  .histogram__header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+  
+  .histogram__titles-container {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  
+  .histogram__title {
+    margin: 0;
+  
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+  
+    color: var(--black);
+    opacity: 0.8;
+  }
+  
+  .histogram__link {
+    margin-top: 3px;
+  
+    font-style: normal;
+    text-decoration: none;
+  
+    color: var(--blue);
+  }
+  
+  .histogram__counter {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 26px;
+  
+    color: var(--black);
+  }
+  
+  .histogram__candles {
+    margin-top: 39px;
+    height: 50px;
+  
+    display: flex;
+    align-items: flex-end;
+    gap: 1px;
+  }
+  
+  .histogram__candle {
+    flex-grow: 1;
+    background: var(--blue);
+  }
+  
+  .histogram__candle_full {
+    height: 100%;
+  }
+  .histogram__candle_large {
+    height: 80%;
+  }
+  .histogram__candle_middle {
+    height: 60%;
+  }
+  .histogram__candle_small {
+    height: 40%;
+  }
+  .histogram__candle_little {
+    height: 20%;
+  }
+  
\ No newline at end of file
diff --git a/04-lection2/01-histogram/index.html b/04-lection2/01-histogram/index.html
index be79f33..dc70360 100644
--- a/04-lection2/01-histogram/index.html
+++ b/04-lection2/01-histogram/index.html
@@ -1,11 +1,55 @@
 <!DOCTYPE html>
 <!-- Страница с гистограммой -->
 <html lang="ru">
-    <head>
-        <link rel="stylesheet" href="../../assets/css/main.css">
-        <link rel="stylesheet" href="./histogram.css">
-    </head>
-    <body>
+  <head>
+    <link rel="stylesheet" href="../../assets/css/main.css" />
+    <link rel="stylesheet" href="./histogram.css" />
+  </head>
+  <body>
+    <div class="histogram">
 
-    </body>
+      <div class="histogram__header-container">
+        
+        <div class="histogram__titles-container">
+          <h3 class="histogram__title">Total orders</h3>
+          <div class="histogram__counter">50254</div>
+        </div>
+
+        <a href="#" class="histogram__link">View all</a>
+      </div>
+
+      <div class="histogram__candles">
+        <div class="histogram__candle histogram__candle_full"></div>
+        <div class="histogram__candle histogram__candle_large"></div>
+        <div class="histogram__candle histogram__candle_middle"></div>
+        <div class="histogram__candle histogram__candle_little"></div>
+        <div class="histogram__candle histogram__candle_small"></div>
+        <div class="histogram__candle histogram__candle_large"></div>
+        <div class="histogram__candle histogram__candle_full"></div>
+        <div class="histogram__candle histogram__candle_little"></div>
+        <div class="histogram__candle histogram__candle_middle"></div>
+        <div class="histogram__candle histogram__candle_little"></div>
+        <div class="histogram__candle histogram__candle_large"></div>
+        <div class="histogram__candle histogram__candle_little"></div>
+        <div class="histogram__candle histogram__candle_small"></div>
+        <div class="histogram__candle histogram__candle_middle"></div>
+        <div class="histogram__candle histogram__candle_large"></div>
+        <div class="histogram__candle histogram__candle_little"></div>
+        <div class="histogram__candle histogram__candle_full"></div>
+        <div class="histogram__candle histogram__candle_little"></div>
+        <div class="histogram__candle histogram__candle_middle"></div>
+        <div class="histogram__candle histogram__candle_little"></div>
+        <div class="histogram__candle histogram__candle_small"></div>
+        <div class="histogram__candle histogram__candle_little"></div>
+        <div class="histogram__candle histogram__candle_middle"></div>
+        <div class="histogram__candle histogram__candle_large"></div>
+        <div class="histogram__candle histogram__candle_little"></div>
+        <div class="histogram__candle histogram__candle_small"></div>
+        <div class="histogram__candle histogram__candle_large"></div>
+        <div class="histogram__candle histogram__candle_little"></div>
+        <div class="histogram__candle histogram__candle_small"></div>
+        <div class="histogram__candle histogram__candle_little"></div>
+      </div>
+    </div>
+  </body>
 </html>


Reviews:
user: login: GSemikozov
state: CHANGES_REQUESTED
author_association: NONE
submitted_at: 2025-03-28T13:54:23Z
user: login: GSemikozov
state: CHANGES_REQUESTED
author_association: NONE
submitted_at: 2025-03-30T07:04:06Z
user: login: GSemikozov
state: APPROVED
author_association: NONE
submitted_at: 2025-03-31T06:00:24Z

Review comments:
diff_hunk: @@ -0,0 +1,96 @@
+.histogram {
+    padding: 16px 24px 24px 24px;
+    box-sizing: border-box;
+  
+    width: 354px;
path: 04-lection2/01-histogram/histogram.css
user: login: GSemikozov
body: ширину и высоту не фиксируем
created_at: 2025-03-28T13:53:26Z
author_association: NONE
diff_hunk: @@ -0,0 +1,96 @@
+.histogram {
+    padding: 16px 24px 24px 24px;
+    box-sizing: border-box;
+  
+    width: 354px;
+    height: 185px;
+  
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
path: 04-lection2/01-histogram/histogram.css
user: login: GSemikozov
body: лишнее
created_at: 2025-03-28T13:53:31Z
author_association: NONE
diff_hunk: @@ -0,0 +1,96 @@
+.histogram {
+    padding: 16px 24px 24px 24px;
+    box-sizing: border-box;
+  
+    width: 354px;
+    height: 185px;
+  
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  
+    background: #ffffff;
+    border: 1px solid #acb5bd;
+    border-radius: 8px;
+
+    font-family: "Inter";
+  }
+  
+  .histogram__header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+  
+  .histogram__titles-container {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .histogram__title {
+    margin: 0;
+  
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+  
+    color: var(--black);
+    opacity: 0.8;
+  }
+  
+  .histogram__link {
+    margin-top: 3px;
+  
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: right;
path: 04-lection2/01-histogram/histogram.css
user: login: GSemikozov
body: лишнее
created_at: 2025-03-28T13:53:47Z
author_association: NONE
diff_hunk: @@ -0,0 +1,96 @@
+.histogram {
+    padding: 16px 24px 24px 24px;
+    box-sizing: border-box;
+  
+    width: 354px;
+    height: 185px;
+  
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  
+    background: #ffffff;
+    border: 1px solid #acb5bd;
+    border-radius: 8px;
+
+    font-family: "Inter";
+  }
+  
+  .histogram__header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+  
+  .histogram__titles-container {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .histogram__title {
+    margin: 0;
+  
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+  
+    color: var(--black);
+    opacity: 0.8;
+  }
+  
+  .histogram__link {
+    margin-top: 3px;
+  
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: right;
+    text-decoration: none;
+  
+    color: var(--blue);
+  }
+  
+  .histogram__counter {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 26px;
+  
+    color: var(--black);
+  }
+  
+  .histogram__candles {
+    height: 50px;
+  
+    display: flex;
+    align-items: flex-end;
+    gap: 1px;
+  }
+  
+  .histogram__candle {
+    width: 9px;
path: 04-lection2/01-histogram/histogram.css
user: login: GSemikozov
body: flex-grow: 1
created_at: 2025-03-28T13:53:59Z
author_association: NONE
diff_hunk: @@ -0,0 +1,96 @@
+.histogram {
+    padding: 16px 24px 24px 24px;
+    box-sizing: border-box;
+  
+    width: 354px;
+    height: 185px;
+  
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  
+    background: #ffffff;
+    border: 1px solid #acb5bd;
+    border-radius: 8px;
+
+    font-family: "Inter";
+  }
+  
+  .histogram__header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+  
+  .histogram__titles-container {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .histogram__title {
+    margin: 0;
+  
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+  
+    color: var(--black);
+    opacity: 0.8;
+  }
+  
+  .histogram__link {
+    margin-top: 3px;
+  
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: right;
+    text-decoration: none;
+  
+    color: var(--blue);
+  }
+  
+  .histogram__counter {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 26px;
+  
+    color: var(--black);
+  }
+  
+  .histogram__candles {
+    height: 50px;
+  
+    display: flex;
+    align-items: flex-end;
+    gap: 1px;
+  }
+  
+  .histogram__candle {
+    width: 9px;
+  }
+  
+  .histogram__candle_bg {
+    background: var(--blue);
path: 04-lection2/01-histogram/histogram.css
user: login: GSemikozov
body: такой фон всегда по умолчанию, лишний модификатор
created_at: 2025-03-28T13:54:15Z
author_association: NONE
diff_hunk: @@ -0,0 +1,84 @@
+.histogram {
+    box-sizing: border-box;
+    padding: 16px 24px 24px;
+    height: 185px;
path: 04-lection2/01-histogram/histogram.css
user: login: GSemikozov
body: высоту не фиксируем
created_at: 2025-03-30T07:03:05Z
author_association: NONE

PR comments:
user: login: jsru-1
created_at: 2025-03-27T06:34:54Z
body: Добавляю преподавателя (@GSemikozov) для код-ревью.
author_association: CONTRIBUTOR
user: login: jsru-1
created_at: 2025-03-27T08:17:05Z
body: Решение было обновлено, посмотрим что скажет @GSemikozov
author_association: CONTRIBUTOR
user: login: jsru-1
created_at: 2025-03-29T14:27:14Z
body: Добавляю преподавателя (@GSemikozov) для код-ревью.
author_association: CONTRIBUTOR
user: login: jsru-1
created_at: 2025-03-29T15:16:09Z
body: Решение было обновлено, посмотрим что скажет @GSemikozov
author_association: CONTRIBUTOR