před 2 roky · d96522232f
--- a/README.md
+++ b/README.md
@@ -0,0 +1,6 @@
 
				+# barchartsfromArray
			
 
				+Есть массив чисел: [5,8,2,1,15,2,3,5,9,11,10,4,3,14,1,7,10,3,2,13] 
			
 
				+Вывести его в виде графика (bar charts), где по оси x - индекс элемента, по оси y - значение. 
			
 
				+Сделать цветовую градацию показателей на графике: 0 - 5 зеленый, 6 - 10 желтый, свыше 10 красный.
			
 
				+Допускается использование только html, css, javascript. Использование сторонних библиотек, canvas, svg не допускается.
			
 
				+![image](https://user-images.githubusercontent.com/72445490/137629013-650e592c-f5b9-455f-a858-f886f6c08186.png)
			
--- a/index.html
+++ b/index.html
@@ -0,0 +1,14 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <link rel="stylesheet" href="style.css">
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="root"></div>
			
 
				+    <script src="main.js"></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/main.js
+++ b/main.js
@@ -0,0 +1,45 @@
 
				+
			
 
				+/* Есть массив чисел:
			
 
				+[5,8,2,1,15,2,3,5,9,11,10,4,3,14,1,7,10,3,2,13]
			
 
				+Вывести его в виде графика (bar charts), где по оси x - 
			
 
				+индекс элемента, по оси y - значение. 
			
 
				+Сделать цветовую градацию показателей на графике: 0 - 5 зеленый, 6 - 10 желтый, свыше 10 красный.
			
 
				+ Допускается использование только html, css, javascript. Использование сторонних библиотек, canvas, svg не допускается. */
			
 
				+
			
 
				+const array = [5,8,2,1,15,2,3,5,9,11,10,4,3,14,1,7,10,3,2,13],
			
 
				+        root = document.querySelector('.root'),
			
 
				+        axY = document.createElement('div');
			
 
				+
			
 
				+
			
 
				+axY.classList.add('axY');
			
 
				+axY.style.height = `${Math.max.apply(null, array) * 20}px`;
			
 
				+root.append(axY);
			
 
				+
			
 
				+for (let i = 0; i <= Math.max.apply(null, array); i++){
			
 
				+    yIndex = document.createElement('span');
			
 
				+    yIndex.innerText = i;
			
 
				+    axY.append(yIndex);
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+        
			
 
				+array.map((item, index) => {
			
 
				+     let div = document.createElement('div'),
			
 
				+        xIndex = document.createElement('span'),
			
 
				+        height = item * 20;
			
 
				+     div.classList.add('bar');
			
 
				+     xIndex.classList.add('line');
			
 
				+     xIndex.innerText = index;
			
 
				+     div.style.height = `${height}px`;
			
 
				+     if (item > 0 && item < 5) {
			
 
				+         div.style.backgroundColor = 'green';
			
 
				+     } else if (item >= 5 && item <= 10){
			
 
				+        div.style.backgroundColor = 'yellow';
			
 
				+    } else if (item > 10){
			
 
				+        div.style.backgroundColor = 'red';
			
 
				+    }
			
 
				+    
			
 
				+     root.append(xIndex);
			
 
				+     root.append(div);
			
 
				+});
			
--- a/style.css
+++ b/style.css
@@ -0,0 +1,37 @@
 
				+.root {
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    align-items: flex-end;
			
 
				+    margin-top: 20px;  
			
 
				+}
			
 
				+.axY {
			
 
				+    display: flex;
			
 
				+    position: relative;
			
 
				+    flex-direction: column-reverse;
			
 
				+    align-items: flex-end;
			
 
				+    width: 1px;
			
 
				+    background-color:black;
			
 
				+}
			
 
				+.axY span {
			
 
				+    margin-right: 5px;
			
 
				+    margin-bottom: 1px;
			
 
				+}
			
 
				+.axY span::after {
			
 
				+    position: absolute;
			
 
				+    content:'';
			
 
				+    width: 5px;
			
 
				+    height: 5px;
			
 
				+    border-radius: 100%;
			
 
				+    left: -2px;
			
 
				+    background-color: rgb(5, 3, 3);
			
 
				+}
			
 
				+.bar {
			
 
				+    width: 20px;
			
 
				+    border:1px solid black;
			
 
				+    margin-left: 1px;
			
 
				+}
			
 
				+.line {
			
 
				+    height: 0;
			
 
				+    width: 0;
			
 
				+    
			
 
				+}