codebasecodebase · codebasecodebase · May 8, 2020 · retarcorp · May 15, 2020 · retarcorp
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Page Title</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
+
+</head>
+<body>
+    <div id="start">
+        <div id ="error">
+            <input type="file" id="file"/>
+            <button id="read">Read!</button>
+        </div>
+        <div id='main'>
+            <div id="results"></div>
+            <div id="results2"></div>
+        </div>
+    </div>
+    <script src='main.js'></script>
+</body>
+</html>
diff --git a/main.css b/main.css
@@ -0,0 +1,38 @@
+#start{
+    display: flex;
+    flex-direction: column;
+    width: 310px;
+    margin: 0 auto;
+
+}
+
+#start{
+    border: 1px solid;
+    border-color: rgb(187, 179, 179);
+}
+
+#error{
+    border-color: brown;
+    display: flex;
+    flex-direction: column;
+}
+
+#main{
+    display: flex;
+    flex-direction: column;
+    background-color: rgb(231, 225, 225);
+}
+
+#results{
+    display: flex;
+    margin-left: 70px;
+}
+
+
+#results2 div{
+    display: flex;
+    margin: 10px;
+    border: solid rgb(167, 139, 139) 1px;
+}
+
+
diff --git a/main.js b/main.js
@@ -0,0 +1,85 @@
+const btn = document.getElementById('read');
+btn.addEventListener('click', function() {
+    const input = document.getElementById('file');
+    const file = input.files[0];
+
+    if(!file) {
+        const pole = document.getElementById('read');
+        const pole1 = document.getElementById('error');
+            pole.setAttribute("style", "background-color: coral");
+            pole1.setAttribute("style", "border: solid rgb(255, 0, 0) 1px");
+            const div1 = document.getElementById('results2');
+            div1.innerText = '';
+            const div = document.getElementById('results');
+            div.innerText = '';
+    }
+    if(file) {
+        const pole = document.getElementById('read');
+        const pole1 = document.getElementById('error');
+            pole.setAttribute("style", "background-color: white");
+            pole1.setAttribute("style", "border: none");
+            const read = document.getElementById('read');
+            read.setAttribute("style", "background-color: green");
+    }
+
+    const reader = new FileReader();
+     reader.onload = () => {
+         const result = reader.result;
+         const div = document.getElementById('results');
+           div.innerText = `Length: ${result.length}; Words: ${result.split(' ').length}`;
+           const div1 = document.getElementById('results2');
+            div1.innerText = '';
+           var allowed = /\w/i;
+
+// собираем информацию :
+var results = Array.prototype.reduce.call(result, function (data, letter) {
+
+    if (allowed.test(letter)) {
+
+        //letter = letter.toLowerCase();
+
+        if (data[letter] === undefined) {
+            data[letter] = 0;
+        }
+
+        data[letter] += 1;
+
+    }
+
+    return data;
+
+}, {});
+
+
+// выводим:
+for (var letter in results) {
+    div1.insertAdjacentHTML('beforeend', `<div><div>Символ</div> <div>${letter}</div> <div>повторяется</div> <div>${results[letter]}</div> <div>раз</div></p>`);
+}
+
+
+// ПОЧЕМУ ТАК НЕ РАБОТАЕТ НЕ ПОНИМАЮ!!!! // ПОЧЕМУ ТАК НЕ РАБОТАЕТ НЕ ПОНИМАЮ!!!! // ПОЧЕМУ ТАК НЕ РАБОТАЕТ НЕ ПОНИМАЮ!!!!
+document.addEventListener('DOMContentLoaded', () => {
+
+let trs = document.querySelectorAll('#results2 div');
+ let table = document.getElementById('results2');
+ let sorted = [...trs].sort(function(a, b) {
+     if (a.children[3].innerHTML >= b.children[3].innerHTML) {
+        return 1;
+     }else {
+        return -1;
+     }
+ });
+ table.innerHTML = '';
+
+ for (let div of sorted) {
+     table.appendChild(div)
+ }
+
+})
+
+// ПОЧЕМУ ТАК НЕ РАБОТАЕТ НЕ ПОНИМАЮ!!!! // ПОЧЕМУ ТАК НЕ РАБОТАЕТ НЕ ПОНИМАЮ!!!! // ПОЧЕМУ ТАК НЕ РАБОТАЕТ НЕ ПОНИМАЮ!!!!
+
+}
+reader.readAsText(file);
+
+});