A histogram is a widespread visual way of presenting data. It can be used for admin dashboards or reports. In this challenge, you will create your own version of a histogram.
A histogram looks like a table from a markup point of view. This is an important point - if the styles are not loaded, all the information will be displayed as a table and therefore it will remain readable. This behavior would be nearly impossible to implement with other structures.
Histogram heading
Use the table heading as the heading of the histogram. Inside it, place three tabular headings containing the names of the literature genres:
- Classical
- Fiction
- Novels
Heading structure:
<thead class="histogram-header">
<tr>
<th>Genres:</th>
<th class="px-20 histogram-header-[color]">[genre]</th>
</tr>
</thead>
The [color]
is the color of the genre, and [genre]
is the name. The .px-20
class is already available in the app.css file, so you don't need to define it.
In this challenge we use the three main colors for a histogram:
- Red
- Blue
- Green
Each color is already present in the app.css file as a variable. Use them to create a flexible color scheme structure.
.histogram-red {
background-color: var(--red);
}
To the left of each genre, draw a square with a side of 10 pixels. Place it 5 pixels to the right of the left edge of the title. Do this for proper positioning relative to the <th>
padding. To align the square vertically you can use the following template:
top: 50%;
transform: translateY(-50%);
Place the headings in the center of the entire histogram. Note that the whole challenge is based on Flexbox. Do not be misled by a tabular layout. As mentioned above, this is done for accessibility.
Columns
- Top indent from tbody: 50px
Columns are implemented as follows:
<tr class="histogram-row">
<td class="histogram-name">[year]</td>
<td class="histogram-col">
<span [value] class="w-50px histogram-[color]"></span>
<p>[value description]</p>
</td>
</tr>
where:
[year]
is a year[value]
is a data-attribute containing column height[color]
is a column color[value description]
is a column text description
Each .histogram-row
contains all the values that refer to the current year.
Place the elements of the container .histogram-row
according to the template using flexbox and taking into account the following points:
- The minimum row height: 400 pixels
- Horizontal paddings: 50 pixels
Year that indicates the period of book sales has absolute positioning. The element is located 5 pixels above the highest column. To achieve the required value pay attention to the columns' paddings, .histogram-col
.
Place the elements inside the container .histogram-col
according to the template and the following points:
- Container paddings: 10 pixels on each side
- Use percentages to determine the height of the column. In HTML, use the data attribute in which you will store the value and, using the selector on the attribute, set the desired height. These values are equal to the number of books sold excluding thousands. For example, 40k = 40% height
Histogram data
2018
- Classical: 40k
- Fiction: 80k
- Novels: 75k
2019
- Classical: 35k
- Fiction: 63k
- Novels: 50k
2020
- Classical: 90k
- Fiction: 77k
- Novels: 80k
Tips
- You have to work with relative and absolute positioning
- For convenience, use the attribute selector where needed
For full access to the challenge you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.