{"id":295983,"date":"2019-12-18T15:00:13","date_gmt":"2019-12-18T15:00:13","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=295983"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=295983","title":{"rendered":"\u041f\u0438\u0448\u0435\u043c \u0442\u0440\u0435\u043d\u0430\u0436\u0435\u0440 \u0441\u043b\u0435\u043f\u043e\u0439 \u043f\u0435\u0447\u0430\u0442\u0438 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c JavaScript: \u0427\u0430\u0441\u0442\u044c 2"},"content":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/company\/otus\/blog\/481020\/\"><i>\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435! \u0412 \u043f\u0440\u0435\u0434\u0434\u0432\u0435\u0440\u0438\u0438 \u0441\u0442\u0430\u0440\u0442\u0430 \u043a\u0443\u0440\u0441\u0430 <a href=\"https:\/\/otus.pw\/vdqp\/\">\u00abFullstack \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a JavaScript\u00bb<\/a> \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0430\u0448\u0438\u0445 \u0430\u0432\u0442\u043e\u0440\u043e\u0432 \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0440\u0435\u043d\u0430\u0436\u0435\u0440\u0430 \u0434\u043b\u044f \u0441\u043b\u0435\u043f\u043e\u0439 \u043f\u0435\u0447\u0430\u0442\u0438. \u0410 \u043c\u044b \u0436\u0435, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0432\u0430\u043c \u0438 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0434\u0435\u043b\u0438\u043c\u0441\u044f \u0437\u0430\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u044c\u044e.<\/i><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/rp\/lu\/hn\/rpluhno5aexsppsfajdqxhtlxr4.png\">  <\/p>\n<hr>\n<p>  \u041f\u0435\u0440\u0432\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/habr.com\/ru\/company\/otus\/blog\/480118\/\">\u0437\u0434\u0435\u0441\u044c<\/a> <br \/>  <a name=\"habracut\"><\/a><\/p>\n<p>  \u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0440\u0435\u043d\u0430\u0436\u0435\u0440 \u0441\u043b\u0435\u043f\u043e\u0439 \u043f\u0435\u0447\u0430\u0442\u0438 \u043d\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u043c JavaScript. \u0412 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0441 \u0432\u0430\u043c\u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0448\u0443 Enter \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b\u0441\u044f \u043f\u0435\u0440\u0432\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0438\u0437 \u0434\u0432\u0430\u0434\u0446\u0430\u0442\u0438 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 \u0441\u043b\u0435\u043f\u043e\u0439 \u043f\u0435\u0447\u0430\u0442\u0438 \u0441\u0442\u043e\u0438\u0442 \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u043e\u0434\u043d\u0438\u043c\u0438 \u0438\u0437 \u043f\u0435\u0440\u0432\u044b\u0445 (J, K, F, D). \u0420\u0430\u0431\u043e\u0447\u0438\u0439 \u0432\u0430\u0440\u0438\u043d\u0430\u0442 \u043f\u0435\u0440\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/isakura13.bitbucket.io\/playground\/\">\u0437\u0434\u0435\u0441\u044c<\/a>. \u041e\u0434\u043d\u0430\u043a\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0434\u0430\u0447 \u043f\u043e \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/dz\/et\/b1\/dzetb19x6wir8i2tokhbzqxkpoi.gif\"><\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u0443\u0435\u043c \u0422\u0417, \u0447\u0442\u043e \u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0435\u0433\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0441\u0442\u0438\u0447\u044c:<\/p>\n<p>  <i>\u00ab\u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u0438\u0433\u0440\u044b, \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0430\u043b \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u044e\u0449\u0438\u0439 Enter, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0432\u0430-\u043d\u0430\u043f\u0440\u0430\u0432\u043e, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0440\u043e\u0432\u043d\u0438 \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u043e \u0442\u0440\u0435\u0442\u0438\u0439. \u041f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u0438\u0433\u0440\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0441\u0438\u0433\u043d\u0430\u043b, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438\u0433\u0440\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439. \u041f\u0435\u0440\u0432\u044b\u0439 \u0438 \u0432\u0442\u043e\u0440\u043e\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0438\u043c\u0435\u044e\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b, \u0442\u0440\u0435\u0442\u0438\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0431\u043e\u043d\u0443\u0441\u043d\u044b\u0439, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u0432 (\u0441\u043a\u043e\u0440\u0435\u0435 \u0448\u0443\u0442\u043e\u0447\u043d\u044b\u0439). \u0412 \u043a\u043e\u043d\u0446\u0435 \u0443\u0440\u043e\u0432\u043d\u044f \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u043a\u043d\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u0438 \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0438\u0437 <code>localStorage<\/code>, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043e\u043a\u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0448\u0438\u0431\u043e\u043a \u0438\u0433\u0440\u043e\u043a\u0430 \u0438 \u0432\u0440\u0435\u043c\u044f \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0441\u0435\u0430\u043d\u0441\u0430. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u043e\u0448\u0438\u0431\u043e\u043a \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0437\u0432\u0443\u043a \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0448\u0430, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u2014 \u043c\u0430\u0436\u043e\u0440\u043d\u0430\u044f \u043c\u0435\u043b\u043e\u0434\u0438\u044f\u00bb.<\/i><\/p>\n<p>  \u041e\u043a\u0435\u0439, \u0442\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0422\u0417, \u043d\u0430\u0447\u043d\u0435\u043c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043d\u0430\u0448\u0430 \u043a\u043e\u0434\u043e\u0432\u0430\u044f \u0431\u0430\u0437\u0430 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u0441\u044f, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043a\u043e\u0434\u0430 \u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f <code>webpack<\/code>. \u041d\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0438. \u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 <code>head<\/code> \u044f \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0447\u0442\u043e \u0442\u0430\u043c \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c \u2014 \u044d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c javascript \u043c\u044b \u043f\u043e\u0434\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u043c \u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u043e\u0433\u043e \u0432\u0435\u0431\u043f\u0430\u043a\u043e\u043c <code>dist\/code.js<\/code>, \u0430 \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043f\u043e \u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443. <\/p>\n<p>  \u0412 \u0441\u0430\u043c\u043e\u043c \u0442\u0435\u043b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u043d\u0435 \u0432\u0438\u0434\u043d\u043e \u0438 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u0440\u043e\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0438\u0433\u0440\u044b \u0432 <code>table<\/code>:<\/p>\n<pre><code class=\"html\">&lt;body class=\"has-background-black-bis\"&gt;  &lt;div class=\"modal\"&gt;     &lt;div class=\"modal-background has-background-link\"&gt;&lt;\/div&gt;     &lt;div class=\"modal-content has-background-white\"&gt;         &lt;h3 class=\"is-size-4\"&gt; \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0448\u0438\u0431\u043e\u043a &lt;\/h3&gt;         &lt;table class=\"table\"&gt;             &lt;thead&gt;               &lt;tr&gt;                 &lt;th&gt; \u0414\u0430\u0442\u0430 \u0438\u0433\u0440\u044b&lt;\/th&gt;                 &lt;th&gt; \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0448\u0438\u0431\u043e\u043a&lt;\/th&gt;               &lt;\/tr&gt;             &lt;\/thead&gt;             &lt;tbody&gt;               &lt;tr class=\"target_error\"&gt;               \t&lt;!-- \u0441\u044e\u0434\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b --&gt;             &lt;\/tr&gt;             &lt;\/tbody&gt;         &lt;\/table&gt;     &lt;div&gt;            &lt;\/div&gt;     &lt;button class=\"modal-close is-large\" aria-label=\"close\"&gt;&lt;\/button&gt; &lt;\/div&gt; &lt;\/div&gt;  <\/code><\/pre>\n<p>  \u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0444\u0430\u043a\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0431\u043e\u043b\u044c \u0443 \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u0435\u0439 SPA \u2014 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 (\u0432\u0435\u0434\u044c \u043e\u043d\u0438 \u0431\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u0432\u0441\u0435 \u044d\u0442\u043e \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e \u0440\u0430\u0437\u043b\u043e\u0436\u0438\u0442\u044c \u043f\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c). \u041d\u043e \u044f \u043d\u0435 \u0437\u0430\u0445\u043e\u0442\u0435\u043b \u0440\u0430\u0441\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 JS. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043d\u0430\u0448\u0435\u0433\u043e html:<\/p>\n<pre><code class=\"html\">    &lt;section class=\"hero is-primary is-large\"&gt;         &lt;div class=\"hero-head container\"&gt;             &lt;h1 class=\"label is-size-4 has-text-white promo\"&gt; \u0422\u0440\u0435\u043d\u0430\u0436\u0435\u0440 \u043f\u0435\u0447\u0430\u0442\u0438 3000&lt;\/h1&gt;              &lt;!-- \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 --&gt;             &lt;h3 class=\"label is-size-4 has-text-danger has-text-centered name-level\"&gt;&lt;\/h3&gt;             &lt;div class=\"error-panel is-hidden\"&gt;                  &lt;!-- \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448\u0430 \u043f\u0430\u043d\u0435\u043b\u044c \u043e\u0448\u0438\u0431\u043e\u043a \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u043a\u0440\u044b\u0442\u0430 --&gt;                 &lt;progress id=\"prog\" class=\"progress is-danger\" value=\"0\" max=\"20\"&gt; &lt;\/progress&gt;             &lt;\/div&gt;         &lt;\/div&gt;         &lt;div class=\"hero-body has-background-black-bis main-board\"&gt;             &lt;div id=\"columns\"&gt;                 &lt;h3 class=\"label is-size-2 has-text-white  has-text-centered begin anim-elem\"&gt;Press Enter to Start&lt;\/h3&gt;                 &lt;div class=\"buttons columns is-half is-centered\"&gt;                     &lt;!-- \u0438 \u0437\u0434\u0435\u0441\u044c \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430--&gt;                 &lt;\/div&gt;             &lt;\/div&gt;         &lt;\/div&gt;     &lt;\/section&gt; &lt;\/body&gt; <\/code><\/pre>\n<p>  \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0443 \u043d\u0430\u0441 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0441 \u043f\u0440\u043e\u0448\u043b\u043e\u0433\u043e \u0440\u0430\u0437\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0440\u0438 \u0432\u0435\u0449\u0438: \u0442\u0435\u043f\u0435\u0440\u044c \u0435\u0441\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0443\u0440\u043e\u0432\u043d\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043d\u0430\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0438\u0437 js, \u043f\u0430\u043d\u0435\u043b\u044c \u043e\u0448\u0438\u0431\u043e\u043a \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u043a\u0440\u044b\u0442\u0430 \u0438 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. <\/p>\n<p>  \u0412\u043e\u0442-\u0432\u043e\u0442 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a JS, \u0442\u043e\u043b\u044c\u043a\u043e \u044f \u0435\u0449\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044e \u0447\u0443\u0442\u044c-\u0447\u0443\u0442\u044c CSS, \u0447\u0442\u043e\u0431\u044b \u043d\u0435\u043c\u043d\u043e\u0436\u043a\u043e \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Bulma<\/code>:<\/p>\n<pre><code class=\"css\">body{     max-height:40vh !important; } .promo{     margin-top: 1rem; } <\/code><\/pre>\n<p>  \u041e\u043a\u0435\u0439, js. \u042f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433 \u0432\u0435\u0431\u043f\u0430\u043a\u0430. \u041e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 <code>webpack<\/code>, \u043e\u043d \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u043b\u0438\u0447\u0438\u0435\u043c \u0441\u043b\u0435\u0436\u0435\u043d\u0438\u044f \u0437\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u0444\u0430\u0439\u043b\u0430\u0445. \u041f\u043e \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043e\u043d \u043c\u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0430\u043c\u0438 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 <code>index.js<\/code>, \u0438 \u0432 \u0438\u0442\u043e\u0433\u0435 \u0438\u043c\u0435\u0442\u044c \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b:<\/p>\n<pre><code class=\"javascript\">const path = require(\"path\");  module.exports = {   entry: '.\/js\/index.js',   output: {     filename: 'code.js',     path: path.resolve(__dirname, 'dist'),     },   watch: true, }  <\/code><\/pre>\n<p>  \u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 js. \u0414\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u044f \u0440\u0435\u0448\u0438\u043b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f <code>anime.js<\/code> \u2014 \u0445\u043e\u0442\u044c \u0438 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u044e, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u043e\u0431\u044a\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f, \u043c\u043e\u0436\u043d\u043e \u0432 css \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430 10 \u0441\u0442\u0440\u043e\u0447\u0435\u043a. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043f\u0440\u0438\u0442\u0430\u0449\u0438\u043b \u0446\u0435\u043b\u044b\u0439 <code>anime.es.js<\/code>. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u044f \u0432\u044b\u043d\u0435\u0441 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0440\u0430\u043d\u0434\u043e\u043c\u0430 \u2014 \u0447\u0438\u0441\u0442\u043e \u0440\u0430\u0434\u0438 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430:<\/p>\n<pre><code class=\"javascript\">export default function getRandomInt(max) {     return Math.floor(Math.random() * Math.floor(max)); } <\/code><\/pre>\n<p>  \u0414\u0430\u043b\u044c\u0448\u0435 \u044f \u0440\u0435\u0448\u0438\u043b \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>showResult<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0430\u0441\u044c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432, \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043c\u043e\u0433 \u043f\u0440\u043e\u0439\u0442\u0438 \u0432\u0441\u044e \u0438\u0433\u0440\u0443. \u042d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u0430\u044f \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0435\u0440\u0432\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u043d\u0430 \u0432\u0445\u043e\u0434 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0438\u0437 <code>localStorage<\/code> \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u0430\u044f, \u0430 \u0432\u0442\u043e\u0440\u044b\u043c \u2014 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c (\u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0448\u0438\u0431\u043e\u043a \u0438\u0433\u0440\u043e\u043a\u0430). \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0443 \u043a\u043b\u044e\u0447\u0435\u0439 \u0438\u0437 <code>localStorage<\/code>, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0431\u044b\u043b\u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043f\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u044b. \u0412\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u043f\u043e\u043f\u044b\u0442\u043e\u043a \u0438\u0433\u0440\u043e\u043a\u0430. \u041e\u0434\u043d\u0430\u043a\u043e \u043c\u0435\u043d\u044c\u0448\u0435 \u0441\u043b\u043e\u0432, \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">export default function showResult(target_El, content){     localStorage.setItem(+new Date, content);        (function drawOnLoad() {         let temp_arr = [];         for (let i = 0; i &lt; localStorage.length; i++) {              temp_arr.push(+localStorage.key(i));         }         temp_arr.sort();         for(let i = 0; i&lt; temp_arr.length; i++){             let item_time = new Date(temp_arr[i]);             target_El.insertAdjacentHTML('afterend',              `&lt;th&gt;${item_time.getDate()} \/ ${item_time.getMonth()}  ${item_time.getHours()} : ${item_time.getMinutes()} &lt;\/th&gt;             &lt;th&gt; ${localStorage.getItem(String(temp_arr[i]))}&lt;\/th&gt;             `);         }     })(); } <\/code><\/pre>\n<p>  \u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u043f\u043e\u043a\u043e\u043d\u0447\u0435\u043d\u043e, \u043d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0443. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u044b:<\/p>\n<pre><code class=\"javascript\">  import anime from \".\/anime.es\";   import getRandomInt from \".\/random\";   import showResult from \".\/showResult\"; <\/code><\/pre>\n<p>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u044b. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043d\u0430\u0448\u0435\u0439 \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u044e\u0449\u0435\u0439 \u043d\u0430\u0434\u043f\u0438\u0441\u0438:<\/p>\n<pre><code class=\"javascript\">anime({   targets: \".anim-elem\",   translateX: [-50, 50],   easing: \"linear\",   direction: \"alternate\",   duration: 1000,   loop: true }); <\/code><\/pre>\n<p>  \u0421\u0443\u043f\u0435\u0440! \u041d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u0441\u0430\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u042f \u0440\u0435\u0448\u0438\u043b \u043f\u0435\u0440\u0435\u043b\u043e\u0436\u0438\u0442\u044c \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 <code>json<\/code>, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0443\u044e \u0438\u0433\u0440\u0443, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u043d\u0430 \u0432\u0435\u043d\u0433\u0435\u0440\u0441\u043a\u043e\u043c, \u0440\u0443\u0441\u0441\u043a\u043e\u043c \u0438\u043b\u0438 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e\u043c \u043a\u0438\u0442\u0430\u0439\u0441\u043a\u043e\u043c \u2014 \u043a\u043e\u0440\u043e\u0447\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u0441 \u043b\u044e\u0431\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 (\u043d\u043e \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u0435\u0449\u0451 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0440\u0430\u0441\u0442\u0438 \u0438 \u0440\u0430\u0441\u0442\u0438). \u041f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e <code>fetch<\/code> \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u0430\u0441\u0442 \u0441\u0442\u0430\u0440\u0442 \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u0435. JSON \u044f \u0437\u0430\u043b\u0438\u043b \u043d\u0430 <code>gist.github<\/code> (\u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/gist.githubusercontent.com\/isakura313\/b705fd423e996a56b35b18b876458f18\/raw\/48023a7ffa598585f80303557e68b2011f776849\/main.json\"> \u0437\u0434\u0435\u0441\u044c <\/a>)<\/p>\n<pre><code class=\"javascript\">function get_data() {   fetch(     \/\/ \"\u043d\u0435 \u0431\u0443\u0434\u0443 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u0434\u043b\u0438\u043d\u043d\u0443\u044e \u0441\u0441\u044b\u043b\u043a\u0443, \u0437\u0434\u0435\u0441\u044c \u0444\u0430\u0439\u043b json\"   )     \/\/ \u044f \u043f\u0435\u0440\u0435\u043b\u043e\u0436\u0438\u043b \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432 json \u0444\u0430\u0439\u043b - \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043c\u043d\u0435 \u0431\u043e\u043b\u0435\u0435 \u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c,     \/\/ \u0435\u0441\u043b\u0438 \u043a\u0442\u043e-\u0442\u043e \u0437\u0430\u0445\u043e\u0447\u0435\u0442 \u0437\u0430\u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0438\u0433\u0440\u0443 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440     .then(res =&gt; res.json())     .then(data =&gt; {       \/\/\u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0438\u0433\u0440\u044b, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f       read_data(data);     })     .catch(err =&gt; {       console.warn(\"\u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430\");       console.warn(err.name);       \/\/\u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u0430\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a     }); }  get_data(); \/\/ \u043b\u043e\u0433\u0438\u0447\u043d\u043e \u044d\u0442\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0432 \u0441\u0430\u043c\u043e\u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u043c\u043e\u0434\u0443\u043b\u044c, \u043d\u043e... \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0431\u0443\u0434\u0443 \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c <\/code><\/pre>\n<p>  \u041a\u0430\u043a \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c \u0443\u0436\u0435 \u0443\u0441\u043f\u0435\u043b \u043f\u043e\u043d\u044f\u0442\u044c, \u0432 \u043d\u0430\u0448\u0435\u0439 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>read_data<\/code> \u0438 \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0433\u0440\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0435\u0441\u044c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u0434 \u043f\u043e\u0439\u0434\u0435\u0442 \u0443\u0436\u0435 \u0438\u0434\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n<pre><code class=\"plaintext\">var number_of_level = 0; \/\/ \u043f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043d\u043e\u043c\u0435\u0440 0   var error_sound = new Audio(\"sounds\/error_sound.wav\");   var fail_sound = new Audio(\"sounds\/fail_sound.wav\"); \/\/ \u0438\u0433\u0440\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0448\u0435   var press_sound = new Audio(\"sounds\/press_sound.wav\");   var succes_sound = new Audio(\"sounds\/succes_sound.wav\"); \/\/ \u0434\u0443\u043c\u0430\u044e \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 \u0432\u0441\u0435 \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e. \u0412\u043e\u0442 \u044d\u0442\u043e\u0442 \u0438\u0433\u0440\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c <\/code><\/pre>\n<p>  8-\u0431\u0438\u0442\u043d\u044b\u0435 \u0437\u0432\u0443\u043a\u0438 \u044f \u043d\u0430\u0448\u0435\u043b \u0432 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0445 \u0431\u0430\u043d\u043a\u0430\u0445 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435. \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043f\u043e\u043b\u0443\u0447\u0430\u044e \u0438\u0437 DOM \u2014 \u0434\u0435\u0440\u0435\u0432\u0430:  <\/p>\n<pre><code class=\"javascript\">  let modal = document.querySelector(\".modal\"); \/\/ \u043d\u0430\u0448\u0435 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u0441 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c\u0438   var target_error = document.querySelector(\".target_error\"); \/\/ \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u043d\u0430\u0448\u0438\u0445 \u043e\u0448\u0438\u0431\u043e\u043a   let error_panel = document.querySelector(\".error-panel\"); \/\/\u043f\u0430\u043d\u0435\u043b\u044c \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430 \u043e\u0448\u0438\u0431\u043e\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f   let begin = document.querySelector(\".begin\"); \/\/ \u0437\u0434\u0435\u0441\u044c \u0443 \u043d\u0430\u0441 \u043d\u0430\u0434\u043f\u0438\u0441\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430\u0436\u0430\u0442\u044c enter \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u0433\u0440\u044b. \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0438\u0433\u0440\u044b \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u043e\u043f\u0430\u0441\u0442\u044c   let progress = document.getElementById(\"prog\"); \/\/ \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u043e\u0448\u0438\u0431\u043e\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f   let buttons = document.querySelector(\".buttons\"); \/\/ \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u0431\u0443\u043a\u043e\u0432\u043a\u0438   let name_level = document.querySelector(\".name-level\"); \/\/\u0441\u044e\u0434\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f   let modal_close = document.querySelector(\".modal-close\"); \/\/ \u043a\u043d\u043e\u043f\u043a\u0430, \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u043a\u043d\u043e \u0441 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c\u0438  document.addEventListener(\"keydown\", StartGame, {     once: true     \/\/\u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f once \u0443 \u043d\u0430\u0441 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b     \/\/\u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0443\u0436\u0435 \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u0442\u0430\u043a \u0447\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443   }); <\/code><\/pre>\n<p>  \u0414\u0430\u043b\u044c\u0448\u0435 \u0438\u0434\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441\u0442\u0430\u0440\u0442\u0430 \u0438\u0433\u0440\u044b. \u0415\u0451 \u0442\u043e\u0436\u0435 \u043d\u0430\u0441\u0442\u0438\u0433\u043b\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u2014 \u0442\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u043f\u0430\u043d\u0435\u043b\u044c \u043e\u0448\u0438\u0431\u043e\u043a \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043d\u0430\u0447\u0430\u043b\u0435 \u0438\u0433\u0440\u044b, \u0438\u0433\u0440\u0430\u0435\u0442\u0441\u044f \u0437\u0432\u0443\u043a \u043d\u0430\u0436\u0430\u0442\u0438\u044f, \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f, \u0430 \u043d\u0435 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u044e\u0449\u0430\u044f \u043d\u0430\u0434\u043f\u0438\u0441\u044c (\u044f \u0441\u0434\u0435\u043b\u0430\u043b \u044d\u0442\u043e \u0434\u043b\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u0431\u044b \u0443 \u043d\u0430\u0441 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u043b\u0430\u0441\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u043e\u0433\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430), \u0438 \u043f\u043e\u0442\u043e\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0438\u0433\u0440\u044b:<\/p>\n<pre><code class=\"javascript\">  function StartGame(e) {     if (e.key == \"Enter\") {       error_panel.classList.remove(\"is-hidden\"); \/\/\u0434\u0435\u043b\u0430\u0435\u043c \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043d\u0430\u0448\u0443 \u043f\u0430\u043d\u0435\u043b\u044c \u043e\u0448\u0438\u0431\u043e\u043a       press_sound.play();       begin.remove(); \/\/ \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u044e\u0449\u0443\u044e \u043d\u0430\u0434\u043f\u0438\u0441\u044c       mainGame(); \/\/ \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u0433\u0440\u044b     }   } <\/code><\/pre>\n<p>  \u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0434\u0430\u043b\u044c\u0448\u0435 \u0438\u0434\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0431\u0443\u043a\u0432. \u0412\u0441\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u044b \u0431\u0435\u0440\u0435\u043c \u0442\u0435\u043f\u0435\u0440\u044c \u0438\u0437 JSON \u043e\u0431\u044a\u0435\u043a\u0442\u0430:<\/p>\n<pre><code class=\"plaintext\">  function drawBoard(info) {     let str_arr = info.level_info[number_of_level].symbols; \/\/ \u0437\u0434\u0435\u0441\u044c \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u043a\u0430\u043a-\u0442\u043e \u0448\u0443\u0441\u0442\u0440\u043e \u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0435\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0437\u0430\u0446\u0438\u044e, \u0431\u043b\u0430\u0433\u043e \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 webpack, \u043d\u043e....     name_level.innerHTML = info.level_info[number_of_level].name_level;     let col_arr = info.symbol_colors;     for (let i = 0; i &lt; 20; i++) { \/\/ \u0440\u0438\u0441\u0443\u0435\u043c \u043f\u043e \u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 20 \u0431\u0443\u043a\u0432       let rand = getRandomInt(str_arr.length);       buttons.insertAdjacentHTML(         \"afterbegin\",         `&lt;button class='game-button button                      is-large ${col_arr[rand]}' id='${str_arr[rand]}'&gt;                         ${str_arr[rand]}&lt;\/button&gt;`       );     }   } <\/code><\/pre>\n<p>  \u0414\u0430\u043b\u044c\u0448\u0435 \u0443 \u043d\u0430\u0441 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0438\u0433\u0440\u044b \u0441 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u0438\u0437 JSON, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0430\u0448\u0430 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0435\u0449\u0435 \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0430\u0432\u0435\u0440\u0445\u0443 \u043f\u0440\u0438\u043d\u044f\u043b\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"plaintext\">  function mainGame() {     drawBoard(information);     document.addEventListener(\"keydown\", press); <\/code><\/pre>\n<p>  \u0414\u0430\u043b\u044c\u0448\u0435 \u043f\u043e\u0439\u0434\u0435\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u0434\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>press<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0443 \u043d\u0430\u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0448 \u0438 \u0432\u044b\u0438\u0433\u0440\u044b\u0448. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0431\u0440\u0430\u043b \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u043e\u0448\u0438\u0431\u043e\u043a, \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u043e\u0431\u0449\u0438\u0442\u044c \u0435\u043c\u0443, \u0447\u0442\u043e \u043e\u043d \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u043b, \u0438 \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u043c\u0435\u043b\u043e\u0434\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u00ab\u0444\u0438\u0430\u0441\u043a\u043e\u00bb. \u0423\u0441\u043f\u0435\u0448\u043d\u044b\u0439 \u043a\u043e\u043d\u0435\u0446 \u0443\u0440\u043e\u0432\u043d\u044f \u0443 \u043d\u0430\u0441 \u0441\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f <code>count_right<\/code> \u043d\u0430\u0431\u0438\u0440\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0440\u0430\u0432\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0437\u043d\u0430\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c (20). \u042f \u043e\u0442\u0434\u0430\u044e \u0441\u0435\u0431\u0435 \u043e\u0442\u0447\u0435\u0442, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u0434\u043b\u0438\u043d\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <code>elements_arr<\/code> \u0443 \u043d\u0430\u0441 \u0441\u0442\u0430\u043d\u0435\u0442 \u0440\u0430\u0432\u043d\u0430 0, \u043d\u043e \u043f\u043e\u043a\u0430 \u0443 \u043d\u0430\u0441 \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043f\u0440\u043e\u0448\u0435\u043b \u0432\u0441\u0435 \u0442\u0440\u0438 \u0443\u0440\u043e\u0432\u043d\u044f, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0441 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043e\u0448\u0438\u0431\u043e\u043a:<\/p>\n<pre><code class=\"plaintext\">  var errors_count = 0;   var count_right = 0;    function press(e) {     let elements_arr = document.querySelectorAll(\".game-button\"); \/\/ \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0432\u0441\u0435\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432     if (e.key == elements_arr[0].id) {       \/\/ \u0437\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0438 \u043f\u043e querySelector, \u043d\u043e \u0442\u043e\u0433\u0434\u0430 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0434\u043b\u0438\u043d\u043d\u0435\u0435       elements_arr[0].remove();       count_right++; \/\/  \u0441\u0447\u0438\u0442\u0430\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u043e\u0442\u0432\u0435\u0442\u044b       press_sound.play();     } else {       errors_count++; \/\/ \u0441\u0447\u0438\u0442\u0430\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0438       error_sound.play();       progress.value = errors_count; \/\/ \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u043d\u0430\u0448 \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u043e\u0448\u0438\u0431\u043e\u043a       if (errors_count &gt; 20) {         \/\/ \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u0442 \u043e\u0448\u0438\u0431\u043e\u043a \u0431\u043e\u043b\u044c\u0448\u0435 \u0447\u0435\u043c \u0443 \u043d\u0430\u0441 \u0431\u0443\u043a\u0432, \u0438\u0433\u0440\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u0441\u044f         fail_sound.play(); \/\/ \u0438\u0433\u0440\u0430\u0435\u0442 \u0437\u0432\u0443\u043a \u0444\u0438\u0430\u0441\u043a\u043e         name_level.innerHTML = '\u0422\u044b \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u043b!';          setTimeout(() =&gt; {           window.location.reload(); \/\/ \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443         }, 2500);       }     }     if (count_right == 20) {        count_right = 0;       number_of_level++;       if (number_of_level == 3) { \/\/\u043f\u043e\u043a\u0430 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e 3 \u043b\u0435\u0432\u0435\u043b\u0430         modal.classList.add(\"is-active\"); \/\/\u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043c\u043e\u0434\u0430\u043b\u043a\u0430 \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432          showResult(target_error, errors_count);         modal_close.onclick = async function() {         modal.classList.remove(\"is-active\");         window.location.reload(); \/\/\u0438, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f         };       }       succes_sound.play();       mainGame();     }   } } \/\/ \u044d\u0442\u043e \u043a\u0441\u0442\u0430\u0442\u0438 \u0441\u043a\u043e\u0431\u043a\u0430 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0439 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u044f \u043d\u0435 \u043e\u0448\u0438\u0431\u0441\u044f <\/code><\/pre>\n<p>  \u041d\u0430 \u044d\u0442\u043e\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432\u0441\u0435. \u0415\u0441\u043b\u0438 \u0432\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0435\u0433\u043e <a href=\"https:\/\/github.com\/isakura313\/tren.git\">\u0437\u0434\u0435\u0441\u044c<\/a>. \u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0434\u0435\u043b\u0435 \u2014 \u0434\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/isakura13.bitbucket.io\/playground2\/\">\u0441\u044e\u0434\u0430<\/a>. \u0412\u0441\u0435 \u0431\u0430\u0433\u0438 \u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043f\u0438\u0448\u0438\u0442\u0435 \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430 \u043b\u0438\u0431\u043e \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445, \u043b\u0438\u0431\u043e \u0441\u0440\u0430\u0437\u0443 \u0432 <code>issues<\/code> \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u043d\u0430 github. <\/p>\n<p>  \u0415\u0441\u0442\u044c \u0435\u0449\u0451 \u043c\u043d\u043e\u0433\u043e \u0447\u0435\u0433\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e \u043a\u0430\u043a\u0438\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u0437\u0430\u0431\u0430\u0432\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0431\u0443\u043a\u0432, \u043c\u0443\u0437\u044b\u043a\u0430 \u043d\u0430 \u0437\u0430\u0434\u043d\u0435\u043c \u0444\u043e\u043d\u0435 (\u0438\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043f\u0435\u0447\u0430\u0442\u0438 \u0438\u0437\u0434\u0430\u0432\u0430\u043b\u0438\u0441\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0437\u0432\u0443\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0444\u043e\u0440\u0441\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c \u0440\u0438\u0442\u043c\u0435). \u041c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443 \u0431\u0443\u043a\u0432 \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u043d\u043e\u0439 \u0440\u0435\u0436\u0438\u043c \u2014 \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c \u043d\u0430 \u0432\u0440\u0435\u043c\u044f \u0438 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0443\u0442\u0443\u044e \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c. \u0422\u0430\u043a\u0436\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 \u0443\u0440\u043e\u0432\u043d\u044f \u0434\u0430\u0432\u0430\u043b\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 \u043e\u0442\u0441\u0447\u0435\u0442, \u0447\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u043e\u043a \u043c\u043e\u0433 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0440\u0443\u043a\u0438 \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435 \u0438 \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c\u0441\u044f. \u041a\u043e\u0440\u043e\u0447\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u0438\u0434\u0435\u0439 \u043c\u0430\u0441\u0441\u0430 (\u043a\u0430\u043a \u0438 \u043e\u0447\u0435\u043d\u044c \u043d\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 React \u0438\u043b\u0438 Vue), \u0438 \u044f \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u0445\u0430\u0431\u0440\u043e\u0432\u0447\u0430\u043d\u0435 \u0442\u043e\u0436\u0435 \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u043e\u0441\u043e\u0432\u0435\u0442\u0443\u044e\u0442. \u0412\u0441\u0435\u043c \u0441\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435!<\/p>\n<p>  \u041d\u0443 \u0430 \u043c\u044b \u0436\u0434\u0435\u043c \u0432\u0441\u0435\u0445 \u0436\u0435\u043b\u0430\u044e\u0449\u0438\u0445 \u043d\u0430 <a href=\"https:\/\/otus.pw\/vdqp\/\">\u043a\u0443\u0440\u0441\u0435<\/a>!<\/div>\n<p>               <script class=\"js-mediator-script\">!function(e){function t(t,n){if(!(n in e)){for(var r,a=e.document,i=a.scripts,o=i.length;o--;)if(-1!==i[o].src.indexOf(t)){r=i[o];break}if(!r){r=a.createElement(\"script\"),r.type=\"text\/javascript\",r.async=!0,r.defer=!0,r.src=t,r.charset=\"UTF-8\";var d=function(){var e=a.getElementsByTagName(\"script\")[0];e.parentNode.insertBefore(r,e)};\"[object Opera]\"==e.opera?a.addEventListener?a.addEventListener(\"DOMContentLoaded\",d,!1):e.attachEvent(\"onload\",d):d() } } }t(\"\/\/mediator.mail.ru\/script\/2820404\/\",\"_mediator\")}(window);<\/script>      <br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/otus\/blog\/481020\/\"> https:\/\/habr.com\/ru\/company\/otus\/blog\/481020\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/company\/otus\/blog\/481020\/\"><i>\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435! \u0412 \u043f\u0440\u0435\u0434\u0434\u0432\u0435\u0440\u0438\u0438 \u0441\u0442\u0430\u0440\u0442\u0430 \u043a\u0443\u0440\u0441\u0430 <a href=\"https:\/\/otus.pw\/vdqp\/\">\u00abFullstack \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a JavaScript\u00bb<\/a> \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0430\u0448\u0438\u0445 \u0430\u0432\u0442\u043e\u0440\u043e\u0432 \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0440\u0435\u043d\u0430\u0436\u0435\u0440\u0430 \u0434\u043b\u044f \u0441\u043b\u0435\u043f\u043e\u0439 \u043f\u0435\u0447\u0430\u0442\u0438. \u0410 \u043c\u044b \u0436\u0435, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0432\u0430\u043c \u0438 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0434\u0435\u043b\u0438\u043c\u0441\u044f \u0437\u0430\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u044c\u044e.<\/i><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/rp\/lu\/hn\/rpluhno5aexsppsfajdqxhtlxr4.png\">  <\/p>\n<hr>\n<p>  \u041f\u0435\u0440\u0432\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/habr.com\/ru\/company\/otus\/blog\/480118\/\">\u0437\u0434\u0435\u0441\u044c<\/a>   <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-295983","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/295983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=295983"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/295983\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=295983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=295983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=295983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}