{"id":133401,"date":"2025-01-26T20:03:22","date_gmt":"2025-01-26T14:03:22","guid":{"rendered":"http:\/\/rcl-radio.ru\/?p=133401"},"modified":"2025-01-26T20:03:22","modified_gmt":"2025-01-26T14:03:22","slug":"%d1%81%d0%be%d0%b7%d0%b4%d0%b0%d0%bd%d0%b8%d0%b5-%d0%bf%d1%80%d0%be%d1%81%d1%82%d0%be%d0%b3%d0%be-%d0%ba%d0%b0%d0%bb%d1%8c%d0%ba%d1%83%d0%bb%d1%8f%d1%82%d0%be%d1%80%d0%b0-%d0%bd%d0%b0-html-css-%d0%b8","status":"publish","type":"post","link":"http:\/\/rcl-radio.ru\/?p=133401","title":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430 \u043d\u0430 HTML, CSS \u0438 JavaScript"},"content":{"rendered":"

\u0412 \u044d\u0442\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438: HTML, CSS \u0438 JavaScript. \u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u0442\u0440\u043e\u0433\u0438\u0439 \u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0430\u0440\u0438\u0444\u043c\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439. \u041c\u044b \u0448\u0430\u0433 \u0437\u0430 \u0448\u0430\u0433\u043e\u043c \u043f\u0440\u043e\u0439\u0434\u0451\u043c\u0441\u044f \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0441\u0442\u0438\u043b\u044f\u043c \u0438 \u043b\u043e\u0433\u0438\u043a\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/span><\/p>\n

\"\"<\/a><\/p>\n

\u0428\u0430\u0433 1: \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b HTML<\/span><\/strong><\/p>\n

\u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 HTML, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0443\u0436\u0438\u0442\u044c \u043a\u0430\u0440\u043a\u0430\u0441\u043e\u043c \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b\u00a0<\/span>index.html<\/code><\/span>\u00a0\u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 \u043d\u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/span><\/p>\n

<<\/span>!<\/span>DOCTYPE<\/span> html<\/span>><\/span>\r\n<<\/span>html<\/span> lang<\/span>=<\/span>\"en\"<\/span>><\/span>\r\n<<\/span>head<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>meta<\/span> charset<\/span>=<\/span>\"UTF-8\"<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>meta<\/span> name<\/span>=<\/span>\"viewport\"<\/span> content<\/span>=<\/span>\"width=device-width, initial-scale=1.0\"<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>title<\/span>><\/span>\u041f\u0440\u043e\u0441\u0442\u043e\u0439<\/span> \u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440<\/span><<\/span>\/<\/span>title<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>style<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/* \u0417\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u0448\u0438 \u0441\u0442\u0438\u043b\u0438 *\/<\/span>\r\n \u00a0\u00a0\u00a0<<\/span>\/<\/span>style<\/span>><\/span>\r\n<<\/span>\/<\/span>head<\/span>><\/span>\r\n<<\/span>body<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>div<\/span> class<\/span>=<\/span>\"calculator\"<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>input<\/span> type<\/span>=<\/span>\"text\"<\/span> id<\/span>=<\/span>\"display\"<\/span> disabled<\/span> \/<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>div<\/span> class<\/span>=<\/span>\"buttons\"<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('7')\"<\/span>><\/span>7<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('8')\"<\/span>><\/span>8<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('9')\"<\/span>><\/span>9<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('+')\"<\/span>><\/span>+<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('4')\"<\/span>><\/span>4<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('5')\"<\/span>><\/span>5<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('6')\"<\/span>><\/span>6<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('-')\"<\/span>><\/span>-<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('1')\"<\/span>><\/span>1<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('2')\"<\/span>><\/span>2<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('3')\"<\/span>><\/span>3<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('*')\"<\/span>><\/span>\u00d7<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('.')\"<\/span>><\/span>.<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('0')\"<\/span>><\/span>0<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"calculateResult()\"<\/span> id<\/span>=<\/span>\"equals\"<\/span>>=<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('\/')\"<\/span>><\/span>\u00f7<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"clearDisplay()\"<\/span> id<\/span>=<\/span>\"clear\"<\/span>><\/span>C<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>\/<\/span>div<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>\/<\/span>div<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0<<\/span>script<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/* \u0417\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0448\u0430 \u043b\u043e\u0433\u0438\u043a\u0430 \u043d\u0430 JavaScript *\/<\/span>\r\n \u00a0\u00a0\u00a0<<\/span>\/<\/span>script<\/span>><\/span>\r\n<<\/span>\/<\/span>body<\/span>><\/span>\r\n<<\/span>\/<\/span>html<\/span>><\/span>\r\n<\/pre>\n
\u0420\u0430\u0437\u0431\u043e\u0440 HTML-\u043a\u043e\u0434\u0430<\/span><\/strong><\/p>\n
    \n
  • <input type=\"text\" id=\"display\" disabled \/><\/code><\/strong>: \u041f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430, \u0433\u0434\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u0410\u0442\u0440\u0438\u0431\u0443\u0442\u00a0disabled<\/code>\u00a0\u0437\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u0442 \u043f\u0440\u044f\u043c\u043e\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c.<\/span><\/li>\n
  • <div class=\"buttons\"><\/code><\/strong>: \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430. \u0412\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0441 \u0446\u0438\u0444\u0440\u0430\u043c\u0438 \u0438 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430\u043c\u0438.<\/span><\/li>\n
  • <button onclick=\"addToDisplay('7')\">7<\/button><\/code><\/strong>: \u041a\u043d\u043e\u043f\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e\u00a0addToDisplay()<\/code>\u00a0\u0441 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c ‘7’.<\/span><\/li>\n
  • <button onclick=\"calculateResult()\" id=\"equals\">=<\/button><\/code><\/strong>: \u041a\u043d\u043e\u043f\u043a\u0430 \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e\u00a0calculateResult()<\/code>.<\/span><\/li>\n
  • <button onclick=\"clearDisplay()\" id=\"clear\">C<\/button><\/code><\/strong>: \u041a\u043d\u043e\u043f\u043a\u0430 \u043e\u0447\u0438\u0441\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430.<\/span><\/li>\n<\/ul>\n
    \u0428\u0430\u0433 2: \u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS<\/span><\/strong><\/p>\n
    \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u044c \u0442\u0435\u0433\u0430\u00a0<\/span><style><\/code><\/span>:<\/span><\/p>\n
    \/* \u041e\u0431\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 *\/<\/span>\r\nbody<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0font<\/span>-<\/span>family<\/span>:<\/span> Arial<\/span>,<\/span> sans<\/span>-<\/span>serif<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0background<\/span>-<\/span>color<\/span>:<\/span> #333<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0color<\/span>:<\/span> white<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0display<\/span>:<\/span> flex<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0justify<\/span>-<\/span>content<\/span>:<\/span> center<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0align<\/span>-<\/span>items<\/span>:<\/span> center<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0height<\/span>:<\/span> 100vh<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0margin<\/span>:<\/span> 0<\/span>;<\/span>\r\n}<\/span>\r\n\r\n.<\/span>calculator<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0background<\/span>-<\/span>color<\/span>:<\/span> #222<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0padding<\/span>:<\/span> 20px<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0border<\/span>-<\/span>radius<\/span>:<\/span> 5px<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0box<\/span>-<\/span>shadow<\/span>:<\/span> 0<\/span> 0<\/span> 10px<\/span> rgba<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>,<\/span> 0.25<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0display<\/span>:<\/span> inline<\/span>-<\/span>block<\/span>;<\/span>\r\n}<\/span>\r\n\r\n#display<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0width<\/span>:<\/span> 210px<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0padding<\/span>:<\/span> 10px<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0font<\/span>-<\/span>size<\/span>:<\/span> 24px<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0text<\/span>-<\/span>align<\/span>:<\/span> right<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0background<\/span>-<\/span>color<\/span>:<\/span> #888<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0color<\/span>:<\/span> white<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0border<\/span>:<\/span> none<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0outline<\/span>:<\/span> none<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0margin<\/span>-<\/span>bottom<\/span>:<\/span> 15px<\/span>;<\/span>\r\n}<\/span>\r\n\r\n.<\/span>buttons<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0display<\/span>:<\/span> grid<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0grid<\/span>-<\/span>template<\/span>-<\/span>columns<\/span>:<\/span> repeat<\/span>(<\/span>4<\/span>,<\/span> 50px<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0gap<\/span>:<\/span> 10px<\/span>;<\/span>\r\n}<\/span>\r\n\r\nbutton<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0padding<\/span>:<\/span> 10px<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0font<\/span>-<\/span>size<\/span>:<\/span> 18px<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0cursor<\/span>:<\/span> pointer<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0border<\/span>:<\/span> none<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0background<\/span>-<\/span>color<\/span>:<\/span> #555<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0color<\/span>:<\/span> white<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0transition<\/span>:<\/span> background<\/span>-<\/span>color<\/span> 0.2s<\/span> ease<\/span>-<\/span>in<\/span>-<\/span>out<\/span>;<\/span>\r\n}<\/span>\r\n\r\nbutton<\/span>:<\/span>hover<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0background<\/span>-<\/span>color<\/span>:<\/span> #666<\/span>;<\/span>\r\n}<\/span>\r\n\r\n#equals<\/span>,<\/span>\r\n#clear<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0background<\/span>-<\/span>color<\/span>:<\/span> #007bff<\/span>;<\/span>\r\n}<\/span>\r\n\r\n#equals<\/span>:<\/span>hover<\/span>,<\/span>\r\n#clear<\/span>:<\/span>hover<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0background<\/span>-<\/span>color<\/span>:<\/span> #0056b3<\/span>;<\/span>\r\n}<\/span>\r\n<\/pre>\n
    \u0420\u0430\u0437\u0431\u043e\u0440 CSS-\u043a\u043e\u0434\u0430<\/span><\/strong><\/p>\n
      \n
    • body<\/code><\/strong>: \u0417\u0430\u0434\u0430\u0451\u0442 \u043e\u0431\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0448\u0440\u0438\u0444\u0442, \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 \u0438 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e.<\/span><\/li>\n
    • .calculator<\/code><\/strong>: \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430: \u0442\u0451\u043c\u043d\u044b\u0439 \u0444\u043e\u043d, \u0441\u043a\u0440\u0443\u0433\u043b\u0451\u043d\u043d\u044b\u0435 \u0443\u0433\u043b\u044b \u0438 \u043b\u0451\u0433\u043a\u0430\u044f \u0442\u0435\u043d\u044c.<\/span><\/li>\n
    • #display<\/code><\/strong>: \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430: \u0448\u0438\u0440\u0438\u043d\u0430, \u0432\u044b\u0441\u043e\u0442\u0430, \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430, \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0440\u0430\u043c\u043a\u0438.<\/span><\/li>\n
    • .buttons<\/code><\/strong>: \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f CSS Grid \u0434\u043b\u044f \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0432 \u0447\u0435\u0442\u044b\u0440\u0435 \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438.<\/span><\/li>\n
    • button<\/code><\/strong>: \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043e\u0431\u0449\u0438\u0439 \u0441\u0442\u0438\u043b\u044c \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043d\u043e\u043f\u043e\u043a: \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0433\u0440\u0430\u043d\u0438\u0446, \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430, \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430.<\/span><\/li>\n
    • #equals, #clear<\/code><\/strong>: \u0421\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u0430 \u0438 \u043e\u0447\u0438\u0441\u0442\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043e\u0442\u043b\u0438\u0447\u0430\u043b\u0438\u0441\u044c \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043d\u043e\u043f\u043e\u043a.<\/span><\/li>\n<\/ul>\n
      \u0428\u0430\u0433 3: \u041b\u043e\u0433\u0438\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430 \u043d\u0430 JavaScript<\/span><\/strong><\/p>\n
      \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u0448\u0435\u043c\u0443 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JavaScript. \u041f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432\u043d\u0443\u0442\u0440\u044c \u0442\u0435\u0433\u0430\u00a0<\/span><script><\/code><\/span>:<\/span><\/p>\n
      let<\/span> displayText<\/span> =<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>'display'<\/span>)<\/span>;<\/span>\r\n\r\n\/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0438\u043c\u0432\u043e\u043b \u0432 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430<\/span>\r\nfunction<\/span> addToDisplay<\/span>(<\/span>symbol<\/span>)<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0let<\/span> currentValue<\/span> =<\/span> displayText<\/span>.<\/span>value<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0if<\/span> (<\/span>currentValue<\/span> ==<\/span>=<\/span> '0'<\/span> ||<\/span> currentValue<\/span> ==<\/span>=<\/span> '\u041e\u0448\u0438\u0431\u043a\u0430'<\/span>)<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0displayText<\/span>.<\/span>value<\/span> =<\/span> symbol<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0}<\/span> else<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0displayText<\/span>.<\/span>value<\/span> +=<\/span> symbol<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0}<\/span>\r\n}<\/span>\r\n\r\n\/\/ \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f<\/span>\r\nfunction<\/span> calculateResult<\/span>(<\/span>)<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0try<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let<\/span> result<\/span> =<\/span> eval<\/span>(<\/span>displayText<\/span>.<\/span>value<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0displayText<\/span>.<\/span>value<\/span> =<\/span> result<\/span>.<\/span>toString<\/span>(<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0}<\/span> catch<\/span> (<\/span>error<\/span>)<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0displayText<\/span>.<\/span>value<\/span> =<\/span> '\u041e\u0448\u0438\u0431\u043a\u0430'<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0}<\/span>\r\n}<\/span>\r\n\r\n\/\/ \u041e\u0447\u0438\u0449\u0430\u0435\u0442 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430<\/span>\r\nfunction<\/span> clearDisplay<\/span>(<\/span>)<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0displayText<\/span>.<\/span>value<\/span> =<\/span> '0'<\/span>;<\/span>\r\n}<\/span>\r\n\r\n\/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448 \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435<\/span>\r\nwindow<\/span>.<\/span>addEventListener<\/span>(<\/span>'keydown'<\/span>,<\/span> function<\/span>(<\/span>event<\/span>)<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0const<\/span> key<\/span> =<\/span> event<\/span>.<\/span>key<\/span>;<\/span>\r\n\r\n \u00a0\u00a0\u00a0switch<\/span>(<\/span>key<\/span>)<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '0'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '1'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '2'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '3'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '4'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '5'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '6'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '7'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '8'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '9'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0addToDisplay<\/span>(<\/span>key<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '+'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '-'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '*'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '\/'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0addToDisplay<\/span>(<\/span>key<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '.'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0addToDisplay<\/span>(<\/span>'.'<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> 'Enter'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0calculateResult<\/span>(<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> 'Backspace'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0clearDisplay<\/span>(<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0default<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return<\/span>;<\/span> \/\/ \u0418\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438<\/span>\r\n \u00a0\u00a0\u00a0}<\/span>\r\n\r\n \u00a0\u00a0\u00a0\/\/ \u0424\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u043a\u0430 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0432\u0432\u043e\u0434\u0430<\/span>\r\n \u00a0\u00a0\u00a0displayText<\/span>.<\/span>focus<\/span>(<\/span>)<\/span>;<\/span>\r\n}<\/span>)<\/span>;<\/span>\r\n<\/pre>\n
      \u0420\u0430\u0437\u0431\u043e\u0440 JavaScript-\u043a\u043e\u0434\u0430<\/span><\/strong><\/p>\n
        \n
      • let displayText = document.getElementById('display');<\/code><\/strong>: \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430.<\/span><\/li>\n
      • addToDisplay(symbol)<\/code><\/strong>: \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0439 \u0441\u0438\u043c\u0432\u043e\u043b \u0432 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430. \u0415\u0441\u043b\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0432\u043d\u043e «0» \u0438\u043b\u0438 «\u041e\u0448\u0438\u0431\u043a\u0430», \u043e\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u043c \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u043c, \u0438\u043d\u0430\u0447\u0435 \u0441\u0438\u043c\u0432\u043e\u043b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e.<\/span><\/li>\n
      • calculateResult()<\/code><\/strong>: \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0432\u0432\u0435\u0434\u0451\u043d\u043d\u043e\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e\u00a0eval()<\/code>. \u0415\u0441\u043b\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0448\u043b\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u043e, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430, \u0438\u043d\u0430\u0447\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 «\u041e\u0448\u0438\u0431\u043a\u0430».<\/span><\/li>\n
      • clearDisplay()<\/code><\/strong>: \u041f\u0440\u043e\u0441\u0442\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0447\u0438\u0449\u0430\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044f \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 «0».<\/span><\/li>\n
      • \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u00a0keydown<\/code><\/strong>: \u0420\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448 \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435. \u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043d\u0430\u0436\u0430\u0442\u043e\u0439 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f: \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432, \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439 \u0438\u043b\u0438 \u043e\u0447\u0438\u0441\u0442\u043a\u0430 \u0434\u0438\u0441\u043f\u043b\u0435\u044f.<\/span><\/li>\n<\/ul>\n
        \u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430<\/span><\/strong><\/p>\n
        \u0412\u043e\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0449\u0438\u0439 \u0432\u0441\u0451 \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0435:<\/span><\/p>\n
        <<\/span>!<\/span>DOCTYPE<\/span> html<\/span>><\/span>\r\n<<\/span>html<\/span> lang<\/span>=<\/span>\"en\"<\/span>><\/span>\r\n<<\/span>head<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>meta<\/span> charset<\/span>=<\/span>\"UTF-8\"<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>meta<\/span> name<\/span>=<\/span>\"viewport\"<\/span> content<\/span>=<\/span>\"width=device-width, initial-scale=1.0\"<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>title<\/span>><\/span>\u0421\u0442\u0440\u043e\u0433\u0438\u0439<\/span> \u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440<\/span><<\/span>\/<\/span>title<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>style<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/* \u041e\u0431\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 *\/<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0font<\/span>-<\/span>family<\/span>:<\/span> Arial<\/span>,<\/span> sans<\/span>-<\/span>serif<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background<\/span>-<\/span>color<\/span>:<\/span> #333<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color<\/span>:<\/span> white<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0display<\/span>:<\/span> flex<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0justify<\/span>-<\/span>content<\/span>:<\/span> center<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0align<\/span>-<\/span>items<\/span>:<\/span> center<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height<\/span>:<\/span> 100vh<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin<\/span>:<\/span> 0<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>calculator<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background<\/span>-<\/span>color<\/span>:<\/span> #222<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding<\/span>:<\/span> 20px<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0border<\/span>-<\/span>radius<\/span>:<\/span> 5px<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0box<\/span>-<\/span>shadow<\/span>:<\/span> 0<\/span> 0<\/span> 10px<\/span> rgba<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>,<\/span> 0.25<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0display<\/span>:<\/span> inline<\/span>-<\/span>block<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0#display<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width<\/span>:<\/span> 210px<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding<\/span>:<\/span> 10px<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0font<\/span>-<\/span>size<\/span>:<\/span> 24px<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text<\/span>-<\/span>align<\/span>:<\/span> right<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background<\/span>-<\/span>color<\/span>:<\/span> #888<\/span>;<\/span> \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 *\/<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color<\/span>:<\/span> white<\/span>;<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 *\/<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0border<\/span>:<\/span> none<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0outline<\/span>:<\/span> none<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin<\/span>-<\/span>bottom<\/span>:<\/span> 15px<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.<\/span>buttons<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0display<\/span>:<\/span> grid<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0grid<\/span>-<\/span>template<\/span>-<\/span>columns<\/span>:<\/span> repeat<\/span>(<\/span>4<\/span>,<\/span> 50px<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0gap<\/span>:<\/span> 10px<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0button<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding<\/span>:<\/span> 10px<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0font<\/span>-<\/span>size<\/span>:<\/span> 18px<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cursor<\/span>:<\/span> pointer<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0border<\/span>:<\/span> none<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background<\/span>-<\/span>color<\/span>:<\/span> #555<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color<\/span>:<\/span> white<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0transition<\/span>:<\/span> background<\/span>-<\/span>color<\/span> 0.2s<\/span> ease<\/span>-<\/span>in<\/span>-<\/span>out<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0button<\/span>:<\/span>hover<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background<\/span>-<\/span>color<\/span>:<\/span> #666<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0#equals<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0#clear<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background<\/span>-<\/span>color<\/span>:<\/span> #007bff<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0#equals<\/span>:<\/span>hover<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0#clear<\/span>:<\/span>hover<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background<\/span>-<\/span>color<\/span>:<\/span> #0056b3<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n \u00a0\u00a0\u00a0<<\/span>\/<\/span>style<\/span>><\/span>\r\n<<\/span>\/<\/span>head<\/span>><\/span>\r\n<<\/span>body<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>div<\/span> class<\/span>=<\/span>\"calculator\"<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>input<\/span> type<\/span>=<\/span>\"text\"<\/span> id<\/span>=<\/span>\"display\"<\/span> disabled<\/span> \/<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>div<\/span> class<\/span>=<\/span>\"buttons\"<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('7')\"<\/span>><\/span>7<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('8')\"<\/span>><\/span>8<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('9')\"<\/span>><\/span>9<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('+')\"<\/span>><\/span>+<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('4')\"<\/span>><\/span>4<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('5')\"<\/span>><\/span>5<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('6')\"<\/span>><\/span>6<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('-')\"<\/span>><\/span>-<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('1')\"<\/span>><\/span>1<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('2')\"<\/span>><\/span>2<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('3')\"<\/span>><\/span>3<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('*')\"<\/span>><\/span>\u00d7<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('.')\"<\/span>><\/span>.<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('0')\"<\/span>><\/span>0<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"calculateResult()\"<\/span> id<\/span>=<\/span>\"equals\"<\/span>>=<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"addToDisplay('\/')\"<\/span>><\/span>\u00f7<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>button<\/span> onclick<\/span>=<\/span>\"clearDisplay()\"<\/span> id<\/span>=<\/span>\"clear\"<\/span>><\/span>C<\/span><<\/span>\/<\/span>button<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<<\/span>\/<\/span>div<\/span>><\/span>\r\n \u00a0\u00a0\u00a0<<\/span>\/<\/span>div<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\r\n \u00a0\u00a0\u00a0<<\/span>script<\/span>><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let<\/span> displayText<\/span> =<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>'display'<\/span>)<\/span>;<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0438\u043c\u0432\u043e\u043b \u0432 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function<\/span> addToDisplay<\/span>(<\/span>symbol<\/span>)<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let<\/span> currentValue<\/span> =<\/span> displayText<\/span>.<\/span>value<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if<\/span> (<\/span>currentValue<\/span> ==<\/span>=<\/span> '0'<\/span> ||<\/span> currentValue<\/span> ==<\/span>=<\/span> '\u041e\u0448\u0438\u0431\u043a\u0430'<\/span>)<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0displayText<\/span>.<\/span>value<\/span> =<\/span> symbol<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span> else<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0displayText<\/span>.<\/span>value<\/span> +=<\/span> symbol<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function<\/span> calculateResult<\/span>(<\/span>)<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0try<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let<\/span> result<\/span> =<\/span> eval<\/span>(<\/span>displayText<\/span>.<\/span>value<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0displayText<\/span>.<\/span>value<\/span> =<\/span> result<\/span>.<\/span>toString<\/span>(<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span> catch<\/span> (<\/span>error<\/span>)<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0displayText<\/span>.<\/span>value<\/span> =<\/span> '\u041e\u0448\u0438\u0431\u043a\u0430'<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u041e\u0447\u0438\u0449\u0430\u0435\u0442 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function<\/span> clearDisplay<\/span>(<\/span>)<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0displayText<\/span>.<\/span>value<\/span> =<\/span> '0'<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448 \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0window<\/span>.<\/span>addEventListener<\/span>(<\/span>'keydown'<\/span>,<\/span> function<\/span>(<\/span>event<\/span>)<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> key<\/span> =<\/span> event<\/span>.<\/span>key<\/span>;<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0switch<\/span>(<\/span>key<\/span>)<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '0'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '1'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '2'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '3'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '4'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '5'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '6'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '7'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '8'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '9'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0addToDisplay<\/span>(<\/span>key<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '+'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '-'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '*'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '\/'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0addToDisplay<\/span>(<\/span>key<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> '.'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0addToDisplay<\/span>(<\/span>'.'<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> 'Enter'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0calculateResult<\/span>(<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case<\/span> 'Backspace'<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0clearDisplay<\/span>(<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0default<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return<\/span>;<\/span> \/\/ \u0418\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ \u0424\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u043a\u0430 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0432\u0432\u043e\u0434\u0430<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0displayText<\/span>.<\/span>focus<\/span>(<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>)<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0<<\/span>\/<\/span>script<\/span>><\/span>\r\n<<\/span>\/<\/span>body<\/span>><\/span>\r\n<<\/span>\/<\/span>html<\/span>><\/span>\r\n<\/pre>\n
        \u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0432 \u0444\u0430\u0439\u043b \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c\u00a0<\/span>.html<\/code><\/span>\u00a0(\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,\u00a0<\/span>calculator.html<\/code><\/span>), \u0438 \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0435\u0433\u043e \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0432\u0430\u043c\u0438 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
        \u0412 \u044d\u0442\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438: HTML, CSS \u0438 JavaScript. \u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u0442\u0440\u043e\u0433\u0438\u0439 \u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0430\u0440\u0438\u0444\u043c\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439. \u041c\u044b \u0448\u0430\u0433 \u0437\u0430 \u0448\u0430\u0433\u043e\u043c \u043f\u0440\u043e\u0439\u0434\u0451\u043c\u0441\u044f \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0441\u0442\u0438\u043b\u044f\u043c \u0438 \u043b\u043e\u0433\u0438\u043a\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0428\u0430\u0433 1: \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b HTML \u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 HTML, \u043a\u043e\u0442\u043e\u0440\u0430\u044f […]<\/p>\n","protected":false},"author":1,"featured_media":133402,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[463],"tags":[],"class_list":["post-133401","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"views":1464,"_links":{"self":[{"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts\/133401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=133401"}],"version-history":[{"count":1,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts\/133401\/revisions"}],"predecessor-version":[{"id":133403,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/posts\/133401\/revisions\/133403"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=\/wp\/v2\/media\/133402"}],"wp:attachment":[{"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=133401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=133401"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/rcl-radio.ru\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=133401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}