{"id":82624,"date":"2025-02-18T12:16:23","date_gmt":"2025-02-18T12:16:23","guid":{"rendered":"https:\/\/goodwriterz.com\/site\/?p=82624"},"modified":"2025-02-18T12:16:23","modified_gmt":"2025-02-18T12:16:23","slug":"%d8%aa%d8%b7%d8%a8%d9%8a%d9%82-notes-simple-%d9%88-word-counter","status":"publish","type":"post","link":"https:\/\/goodwriterz.com\/site\/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82-notes-simple-%d9%88-word-counter\/","title":{"rendered":"\u062a\u0637\u0628\u064a\u0642 Notes Simple \u0648 Word Counter"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_68_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >\u062c\u062f\u0648\u0644 \u0627\u0644\u0645\u062d\u062a\u0648\u064a\u0627\u062a<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/goodwriterz.com\/site\/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82-notes-simple-%d9%88-word-counter\/#%D8%B1%D9%88%D8%A7%D8%A8%D8%B7_%D8%B3%D8%B1%D9%8A%D8%B9%D8%A9\" title=\"\u0631\u0648\u0627\u0628\u0637 \u0633\u0631\u064a\u0639\u0629\">\u0631\u0648\u0627\u0628\u0637 \u0633\u0631\u064a\u0639\u0629<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/goodwriterz.com\/site\/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82-notes-simple-%d9%88-word-counter\/#%D9%85%D8%A7_%D8%A7%D9%84%D8%B0%D9%8A_%D8%B3%D8%AA%D9%82%D9%88%D9%85_%D8%A8%D8%A8%D9%86%D8%A7%D8%A6%D9%87\" title=\"\u0645\u0627 \u0627\u0644\u0630\u064a \u0633\u062a\u0642\u0648\u0645 \u0628\u0628\u0646\u0627\u0626\u0647\">\u0645\u0627 \u0627\u0644\u0630\u064a \u0633\u062a\u0642\u0648\u0645 \u0628\u0628\u0646\u0627\u0626\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/goodwriterz.com\/site\/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82-notes-simple-%d9%88-word-counter\/#%D9%83%D9%8A%D9%81_%D8%B3%D8%AA%D9%82%D9%88%D9%85_%D8%A8%D8%A8%D9%86%D8%A7%D8%A6%D9%87\" title=\"\u0643\u064a\u0641 \u0633\u062a\u0642\u0648\u0645 \u0628\u0628\u0646\u0627\u0626\u0647\">\u0643\u064a\u0641 \u0633\u062a\u0642\u0648\u0645 \u0628\u0628\u0646\u0627\u0626\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/goodwriterz.com\/site\/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82-notes-simple-%d9%88-word-counter\/#%D8%A8%D9%86%D9%8A%D8%A9_%D8%A7%D9%84%D8%AA%D8%B7%D8%A8%D9%8A%D9%82\" title=\"\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u0637\u0628\u064a\u0642\">\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u0637\u0628\u064a\u0642<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/goodwriterz.com\/site\/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82-notes-simple-%d9%88-word-counter\/#%D9%83%D9%8A%D9%81%D9%8A%D8%A9_%D8%A8%D9%86%D8%A7%D8%A1_%D8%A7%D9%84%D9%85%D9%84%D8%A7%D8%AD%D8%B8%D8%A9_Taker\" title=\"\u0643\u064a\u0641\u064a\u0629 \u0628\u0646\u0627\u0621 \u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0629 Taker\">\u0643\u064a\u0641\u064a\u0629 \u0628\u0646\u0627\u0621 \u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0629 Taker<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/goodwriterz.com\/site\/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82-notes-simple-%d9%88-word-counter\/#%D8%A8%D9%86%D8%A7%D8%A1_%D8%A7%D9%84%D9%87%D9%8A%D9%83%D9%84_%D9%85%D8%B9_HTML\" title=\"\u0628\u0646\u0627\u0621 \u0627\u0644\u0647\u064a\u0643\u0644 \u0645\u0639 HTML\">\u0628\u0646\u0627\u0621 \u0627\u0644\u0647\u064a\u0643\u0644 \u0645\u0639 HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/goodwriterz.com\/site\/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82-notes-simple-%d9%88-word-counter\/#%D8%AC%D8%B9%D9%84_%D8%A7%D9%84%D8%A3%D8%B4%D9%8A%D8%A7%D8%A1_%D8%AA%D8%A8%D8%AF%D9%88_%D8%AC%D9%8A%D8%AF%D8%A9_%D9%85%D8%B9_CSS\" title=\"\u062c\u0639\u0644 \u0627\u0644\u0623\u0634\u064a\u0627\u0621 \u062a\u0628\u062f\u0648 \u062c\u064a\u062f\u0629 \u0645\u0639 CSS\">\u062c\u0639\u0644 \u0627\u0644\u0623\u0634\u064a\u0627\u0621 \u062a\u0628\u062f\u0648 \u062c\u064a\u062f\u0629 \u0645\u0639 CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/goodwriterz.com\/site\/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82-notes-simple-%d9%88-word-counter\/#%D8%A5%D8%B6%D8%A7%D9%81%D8%A9_%D9%88%D8%B8%D9%8A%D9%81%D8%A9_%D9%85%D8%B9_JavaScript\" title=\"\u0625\u0636\u0627\u0641\u0629 \u0648\u0638\u064a\u0641\u0629 \u0645\u0639 JavaScript\">\u0625\u0636\u0627\u0641\u0629 \u0648\u0638\u064a\u0641\u0629 \u0645\u0639 JavaScript<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<div>\n<div class=\"w-table-content\">\n<h3 class=\"title icon i-flash\"><span class=\"ez-toc-section\" id=\"%D8%B1%D9%88%D8%A7%D8%A8%D8%B7_%D8%B3%D8%B1%D9%8A%D8%B9%D8%A9\"><\/span>\u0631\u0648\u0627\u0628\u0637 \u0633\u0631\u064a\u0639\u0629<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"table-content\">\n<div class=\"w-table-content-list\">\n<ul class=\"table-content-list\">\n<li class=\"table-content-element icon\">\n<div class=\"table-content-link\">\n                                        <a rel=\"nofollow noopener\" target=\"_blank\" href=\"#how-to-build-the-note-taker\">\u0643\u064a\u0641\u064a\u0629 \u0628\u0646\u0627\u0621 \u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0629 Taker<\/a>\n                                        <\/div>\n<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>\u064a\u0645\u0643\u0646 \u0623\u0646 \u064a\u0628\u062f\u0648 \u0627\u0644\u062f\u062e\u0648\u0644 \u0641\u064a \u0627\u0644\u062a\u0631\u0645\u064a\u0632 \u0645\u062e\u064a\u0641\u064b\u0627 \u060c \u0645\u0639 \u0648\u062c\u0648\u062f \u0639\u062f\u062f \u0644\u0627 \u064a\u062d\u0635\u0649 \u0645\u0646 \u0627\u0644\u0644\u063a\u0627\u062a \u0648\u0627\u0644\u0623\u0637\u0631 \u0648\u0627\u0644\u0645\u0646\u0647\u062c\u064a\u0627\u062a \u0627\u0644\u062a\u064a \u064a\u062c\u0628 \u0645\u0631\u0627\u0639\u0627\u062a\u0647\u0627. \u0642\u062f \u064a\u0643\u0648\u0646 \u0645\u0646 \u0627\u0644\u0623\u0633\u0647\u0644 \u062d\u062a\u0649 \u0627\u0644\u0627\u0633\u062a\u0639\u0627\u0646\u0629 \u0628\u0645\u0635\u0627\u062f\u0631 \u062e\u0627\u0631\u062c\u064a\u0629 \u0644\u0643\u0644 \u0634\u064a\u0621 \u0644\u0645\u0646\u0638\u0645\u0629 \u0627\u0644\u0639\u0641\u0648 \u0627\u0644\u062f\u0648\u0644\u064a\u0629. \u0643\u0646 \u0645\u0637\u0645\u0626\u0646\u064b\u0627: \u064a\u0645\u0643\u0646 \u0623\u0646 \u062a\u0643\u0648\u0646 \u0627\u0644\u0628\u0631\u0645\u062c\u0629 \u0644\u0644\u0648\u064a\u0628 \u0628\u0633\u064a\u0637\u0629 \u0648\u0645\u0645\u062a\u0639\u0629 \u060c \u0648 &#8211; \u0623\u0633\u062a\u0646\u0634\u0642 &#8211; \u0645\u062c\u0627\u0646\u064a\u0629!<\/p>\n<p>    <!-- Not injecting Ads due to No-Ads mode. --><!-- Not injecting Ads due to No-Ads mode. --><\/p>\n<h2 id=\"what-you-rsquo-ll-build\">\n<p>                        \u0645\u0627 \u0627\u0644\u0630\u064a \u0633\u062a\u0642\u0648\u0645 \u0628\u0628\u0646\u0627\u0626\u0647<br \/>\n               <\/h2>\n<p>\u0628\u0627\u062a\u0628\u0627\u0639 \u0647\u0630\u0627 \u0627\u0644\u0628\u0631\u0646\u0627\u0645\u062c \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a \u060c \u0633\u062a\u0642\u0648\u0645 \u0628\u0625\u0646\u0634\u0627\u0621 \u062a\u0637\u0628\u064a\u0642 \u0648\u064a\u0628 \u0628\u0633\u064a\u0637 \u0644\u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0627\u0644\u0646\u0635\u064a\u0629 \u0648\u062d\u0633\u0627\u0628 \u0627\u0644\u0623\u062d\u0631\u0641 \u0648\u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0641\u064a\u0647\u0627.<\/p>\n<p>\u064a\u0633\u062a\u0645\u0631 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0641\u064a \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u060c \u0644\u0630\u0644\u0643 \u064a\u062a\u0630\u0643\u0631 \u0627\u0644\u0646\u0635 \u0639\u0646\u062f \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0635\u0641\u062d\u0629 \u0623\u0648 \u0625\u0639\u0627\u062f\u0629 \u0641\u062a\u062d\u0647\u0627. \u0647\u0630\u0627 \u064a\u0639\u0646\u064a \u0623\u0646\u0647\u0627 \u0637\u0631\u064a\u0642\u0629 \u0645\u0631\u064a\u062d\u0629 \u0644\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0623\u064a \u0646\u0635 \u0642\u062f \u062a\u0631\u063a\u0628 \u0641\u064a \u0627\u0644\u0631\u062c\u0648\u0639 \u0625\u0644\u064a\u0647 \u0644\u0627\u062d\u0642\u064b\u0627 \u060c \u0645\u062b\u0644 \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646 \u0648\u0639\u0646\u0648\u0627\u0646 URL \u060c \u0625\u0644\u062e.<\/p>\n<div class=\"body-img landscape \">\n<div class=\"responsive-img  image-expandable  img-article-item\">\n<figure>\n<p>                <img data-recalc-dims=\"1\" decoding=\"async\" width=\"960\" height=\"569\" loading=\"lazy\" alt=\"\u0645\u062b\u0627\u0644 \u0639\u0644\u0649 \u062a\u0637\u0628\u064a\u0642 Web Text \u0627\u0644\u0628\u0633\u064a\u0637 \u0627\u0644\u0630\u064a \u064a\u0639\u0631\u0636 \u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0628\u0645\u0627 \u0641\u064a \u0630\u0644\u0643 \u0625\u062f\u062e\u0627\u0644 \u0627\u0644\u062a\u0642\u0648\u064a\u0645 \u0648\u0642\u0627\u0626\u0645\u0629 \u0639\u0646\u0627\u0648\u064a\u0646 URL.\" data-img-url=\"https:\/\/goodwriterz.com\/site\/wp-content\/uploads\/2025\/02\/\u062a\u0637\u0628\u064a\u0642-Notes-Simple-\u0648-Word-Counter.png\" src=\"https:\/\/i0.wp.com\/goodwriterz.com\/site\/wp-content\/uploads\/2025\/02\/%D8%AA%D8%B7%D8%A8%D9%8A%D9%82-Notes-Simple-%D9%88-Word-Counter.png?resize=960%2C569&#038;ssl=1\" style=\"height:auto;max-width:100%\" title=\"\"><\/p>\n<\/figure><\/div>\n<\/p><\/div>\n<p>  \u0643\u0645\u0627 \u0623\u0646\u0647 \u064a\u0639\u062a\u0628\u0631 \u0627\u0644\u0623\u062d\u0631\u0641 \u0648\u0627\u0644\u0643\u0644\u0645\u0627\u062a \u060c \u0648\u0647\u064a \u0645\u0642\u062f\u0645\u0629 \u0645\u0641\u064a\u062f\u0629 \u0644\u0644\u0639\u0645\u0644 \u0645\u0639 \u0627\u0644\u0633\u0644\u0627\u0633\u0644 (\u0627\u0644\u0646\u0635). \u0628\u0627\u0644\u0637\u0628\u0639 \u060c \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0628\u0633\u064a\u0637 \u0644\u0644\u063a\u0627\u064a\u0629: \u0647\u0630\u0647 \u0647\u064a \u0627\u0644\u0646\u0642\u0637\u0629. \u0648\u0644\u0643\u0646 \u060c \u0645\u0639 \u0647\u0630\u0627 \u0627\u0644\u0628\u0631\u0646\u0627\u0645\u062c \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a \u060c \u0633\u062a\u062a\u0639\u0644\u0645 \u0627\u0644\u0645\u0641\u0627\u0647\u064a\u0645 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0648\u0631\u0627\u0621 \u0628\u0646\u0627\u0621 \u062a\u0637\u0628\u064a\u0642 \u0648\u064a\u0628 \u060c \u0648\u0633\u064a\u0643\u0648\u0646 \u0627\u0644\u0639\u0627\u0644\u0645 \u0645\u062d\u0627\u0631\u0643.<\/p>\n<h2 id=\"how-you-rsquo-ll-build-it\">\n<p>                        \u0643\u064a\u0641 \u0633\u062a\u0642\u0648\u0645 \u0628\u0628\u0646\u0627\u0626\u0647<br \/>\n               <\/h2>\n<p>\u0639\u0644\u0649 \u0627\u0644\u0631\u063a\u0645 \u0645\u0646 \u0623\u0646 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u062a\u062e\u062a\u0644\u0641 \u0627\u062e\u062a\u0644\u0627\u0641\u064b\u0627 \u0643\u0628\u064a\u0631\u064b\u0627 \u060c \u0625\u0644\u0627 \u0623\u0646\u0647\u0627 \u062a\u062a\u0636\u0645\u0646 \u0639\u0627\u062f\u0629 \u062b\u0644\u0627\u062b \u062a\u0642\u0646\u064a\u0627\u062a \u0623\u0633\u0627\u0633\u064a\u0629: HTML \u0648 CSS \u0648 JavaScript. \u0647\u0630\u0647 \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0644\u0647\u0627 \u0623\u062f\u0648\u0627\u0631 \u062d\u064a\u0648\u064a\u0629 \u064a\u062c\u0628 \u0623\u0646 \u062a\u0641\u0647\u0645\u0647\u0627 \u0642\u0628\u0644 \u0623\u0646 \u062a\u0628\u062f\u0623.<\/p>\n<ul>\n<li>\n<p>                                        HTML: \u062a\u062a\u064a\u062d \u0644\u0643 \u0644\u063a\u0629 \u062a\u0631\u0645\u064a\u0632 \u0627\u0644\u0646\u0635 \u0627\u0644\u062a\u0634\u0639\u0628\u064a \u062a\u062d\u062f\u064a\u062f \u0628\u0646\u064a\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062e\u0627\u0635 \u0628\u0643. \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0647 \u060c \u064a\u0645\u0643\u0646\u0643 \u0648\u0636\u0639 \u0639\u0644\u0627\u0645\u0629 \u0639\u0644\u0649 \u0627\u0644\u0646\u0635 \u0648\u0641\u0642\u064b\u0627 \u0644\u0645\u0639\u0646\u0627\u0647 \u060c \u0645\u0639 \u0627\u0644\u0625\u0634\u0627\u0631\u0629 \u0625\u0644\u0649 \u0645\u0627 \u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u0641\u0642\u0631\u0629 \u0623\u0648 \u0639\u0646\u0648\u0627\u0646\u064b\u0627 \u0623\u0648 \u0639\u0646\u0635\u0631\u064b\u0627 \u0641\u064a \u0642\u0627\u0626\u0645\u0629 \u060c \u0639\u0644\u0649 \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644.\n                        <\/li>\n<li>\n<p>                                        CSS: \u062a\u062a\u064a\u062d \u0644\u0643 \u0623\u0648\u0631\u0627\u0642 \u0627\u0644\u0623\u0646\u0627\u0642\u0629 \u0627\u0644\u0645\u062a\u062a\u0627\u0644\u064a\u0629 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062e\u0627\u0635 \u0628\u0643. \u0627\u0633\u062a\u062e\u062f\u0627\u0645 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.noemamag.com\/the-great-decentralization\/\">\u0644\u063a\u0629 \u062a\u0631\u0645\u064a\u0632 \u0627\u0644\u0646\u0635 \u0627\u0644\u062a\u0634\u0639\u0628\u064a<\/a> \u0627\u0644\u0644\u063a\u0629 \u060c \u064a\u0645\u0643\u0646\u0643 \u062a\u0644\u0648\u064a\u0646 \u0641\u0642\u0631\u0629 \u062e\u0636\u0631\u0627\u0621 \u0645\u0639\u064a\u0646\u0629 \u060c \u0623\u0648 \u062c\u0639\u0644 \u062c\u0645\u064a\u0639 \u0631\u0648\u0627\u0628\u0637\u0643 \u062c\u0631\u064a\u0626\u0629 \u060c \u0623\u0648 \u0636\u0639 \u0627\u0644\u0634\u0631\u064a\u0637 \u0627\u0644\u062c\u0627\u0646\u0628\u064a \u0628\u062c\u0648\u0627\u0631 \u0645\u0642\u0627\u0644\u062a\u0643 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629.\n                        <\/li>\n<li>\n<p>                                        JavaScript: \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0644\u063a\u0629 \u0627\u0644\u0628\u0631\u0645\u062c\u0629 \u0647\u0630\u0647 \u060c \u064a\u0645\u0643\u0646\u0643 \u0625\u0636\u0627\u0641\u0629 \u0648\u0638\u0627\u0626\u0641 \u0625\u0644\u0649 \u0635\u0641\u062d\u0629 \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0643. \u064a\u0645\u0643\u0646\u0643 \u062c\u0639\u0644 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u062a\u0638\u0647\u0631 \u0623\u0648 \u0625\u062e\u0641\u0627\u0621 \u0623\u062c\u0632\u0627\u0621 \u0645\u0646 \u0627\u0644\u0645\u0633\u062a\u0646\u062f \u0627\u0644\u062e\u0627\u0635 \u0628\u0643 \u0639\u0646\u062f \u0627\u0644\u0646\u0642\u0631 \u0641\u0648\u0642 \u060c \u0623\u0648 \u062a\u0646\u0641\u064a\u0630 \u0645\u0639\u0627\u0644\u062c \u0643\u0644\u0645\u0627\u062a \u0643\u0627\u0645\u0644 \u0623\u0648 \u0644\u0639\u0628\u0629 \u0641\u064a\u062f\u064a\u0648.\n                        <\/li>\n<\/ul>\n<p>\u0627\u0644 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\">\u0645\u0648\u0642\u0639 web.dev<\/a> (\u0643\u062a\u0628\u0647 \u0623\u0639\u0636\u0627\u0621 \u0641\u0631\u064a\u0642 \u0627\u0644\u0643\u0631\u0648\u0645) \u0648 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/\">MDN \u060c \u0634\u0628\u0643\u0629 \u0645\u0637\u0648\u0631 Mozilla<\/a>\u060c \u0648\u0647\u0645\u0627 \u0645\u0635\u062f\u0631\u0627\u0646 \u0645\u0645\u062a\u0627\u0632\u0627\u0646 \u0644\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u062d\u0648\u0644 \u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629.<\/p>\n<div class=\"body-img landscape \">\n<div class=\"responsive-img  image-expandable  img-article-item\">\n<figure>\n<p>                <img data-recalc-dims=\"1\" decoding=\"async\" width=\"1200\" height=\"635\" loading=\"lazy\" alt=\"\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0644\u0645\u0648\u0642\u0639 web.dev \u0645\u0639 \u0645\u0648\u0627\u0631\u062f \u0627\u0644\u062a\u0639\u0644\u0645 \u0644\u0640 HTML \u0648 CSS \u0648 JavaScript.\" data-img-url=\"https:\/\/goodwriterz.com\/site\/wp-content\/uploads\/2025\/02\/1739880981_372_\u062a\u0637\u0628\u064a\u0642-Notes-Simple-\u0648-Word-Counter.png\" src=\"https:\/\/i0.wp.com\/goodwriterz.com\/site\/wp-content\/uploads\/2025\/02\/1739880981_372_%D8%AA%D8%B7%D8%A8%D9%8A%D9%82-Notes-Simple-%D9%88-Word-Counter.png?resize=1200%2C635&#038;ssl=1\" style=\"height:auto;max-width:100%\" title=\"\"><\/p>\n<\/figure><\/div>\n<\/p><\/div>\n<h2 id=\"the-app-structure\">\n<p>                        \u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u0637\u0628\u064a\u0642<br \/>\n               <\/h2>\n<p>\u0633\u064a\u062a\u0623\u0644\u0641 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0630\u064a \u0633\u062a\u0646\u0634\u0626\u0647 \u0645\u0646 \u062b\u0644\u0627\u062b\u0629 \u0645\u0644\u0641\u0627\u062a \u0628\u0633\u064a\u0637\u0629: index.html \u060c styles.css \u060c \u0648 script.js.<\/p>\n<p>\u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u062a\u0637\u0644\u0628\u0627\u062a \u062e\u0627\u0635\u0629 \u0644\u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u060c \u0643\u0644 \u0645\u0627 \u062a\u062d\u062a\u0627\u062c\u0647 \u0647\u0648 \u0645\u062a\u0635\u0641\u062d \u0627\u0644\u0648\u064a\u0628. \u0644\u0627 \u062a\u0648\u062c\u062f \u0648\u0638\u0627\u0626\u0641 \u062e\u0644\u0641\u064a\u0629 \u060c \u0644\u0630\u0644\u0643 \u0644\u0627 \u062a\u062d\u062a\u0627\u062c \u0625\u0644\u0649 \u0644\u063a\u0629 \u0628\u0631\u0645\u062c\u0629 \u0645\u062b\u0644 PHP \u0623\u0648 \u062e\u0627\u062f\u0645 \u0648\u064a\u0628 \u0645\u062d\u0644\u064a. \u0628\u0645\u062c\u0631\u062f \u0627\u0644\u0627\u0646\u062a\u0647\u0627\u0621 \u0645\u0646 \u0630\u0644\u0643 \u060c \u064a\u0645\u0643\u0646\u0643 \u0641\u062a\u062d \u0645\u0644\u0641 index.html \u0645\u0628\u0627\u0634\u0631\u0629 \u0641\u064a \u0645\u062a\u0635\u0641\u062d\u0643 \u0648\u0633\u064a\u0639\u0645\u0644 \u0643\u0644 \u0634\u064a\u0621.<\/p>\n<p>\u0645\u0646 \u0627\u0644\u0645\u0647\u0645 \u0623\u0646 \u0646\u0644\u0627\u062d\u0638 \u0623\u0646 \u0647\u0630\u0627 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u064a\u062d\u0641\u0638 \u0646\u0635\u0643 \u062f\u0648\u0646 \u0627\u0644\u0643\u062a\u0627\u0628\u0629 \u0625\u0644\u0649 \u0645\u0644\u0641 \u0645\u0639\u064a\u0646 \u0639\u0644\u0649 \u0627\u0644\u0642\u0631\u0635 \u060c \u062d\u064a\u062b \u0644\u0627 \u064a\u0645\u0643\u0646 \u0644\u0640 JavaScript \u0627\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 \u0646\u0638\u0627\u0645 \u0627\u0644\u0645\u0644\u0641\u0627\u062a. \u064a\u0642\u0648\u0645 \u0628\u0630\u0644\u0643 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0648\u0627\u062c\u0647\u0629 \u0628\u0631\u0645\u062c\u0629 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u0648\u064a\u0628 \u060c \u0648\u0647\u0648 \u0628\u062f\u064a\u0644 \u0642\u0648\u064a \u0644\u0645\u0644\u0641\u0627\u062a \u062a\u0639\u0631\u064a\u0641 \u0627\u0644\u0627\u0631\u062a\u0628\u0627\u0637.<\/p>\n<h2 id=\"how-to-build-the-note-taker\">\n<p>                        \u0643\u064a\u0641\u064a\u0629 \u0628\u0646\u0627\u0621 \u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0629 Taker<br \/>\n               <\/h2>\n<p>\u0642\u0645 \u0628\u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u0645\u0644\u0641\u0627\u062a \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629 \u0641\u064a \u0646\u0641\u0633 \u0627\u0644\u062f\u0644\u064a\u0644 \u060c \u062b\u0645 \u0627\u0641\u062a\u062d index.html \u0641\u064a \u0645\u062a\u0635\u0641\u062d \u0627\u0644\u0648\u064a\u0628. \u0628\u062f\u0644\u0627\u064b \u0645\u0646 \u0630\u0644\u0643 \u060c \u064a\u0645\u0643\u0646\u0643 \u062a\u0646\u0632\u064a\u0644 \u0627\u0644\u0645\u0644\u0641\u0627\u062a \u0645\u0646 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/bobbykjack\/text\">\u0647\u0630\u0627 \u0645\u0633\u062a\u0648\u062f\u0639 \u062c\u064a\u062b\u0628<\/a>.<\/p>\n<h3 id=\"building-the-structure-with-html\">\n<p>            \u0628\u0646\u0627\u0621 \u0627\u0644\u0647\u064a\u0643\u0644 \u0645\u0639 HTML<br \/>\n    <\/h3>\n<p>\u064a\u062d\u062f\u062f \u0645\u0644\u0641 index.html \u0628\u0646\u064a\u0629 \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0641\u064a HTML. \u0648\u064a\u0634\u0645\u0644 \u0625\u0634\u0627\u0631\u0627\u062a \u0625\u0644\u0649 \u0627\u0644\u0645\u0644\u0641\u064a\u0646 \u0627\u0644\u0622\u062e\u0631\u064a\u0646 \u062d\u062a\u0649 \u064a\u062a\u0645\u0643\u0646 \u0627\u0644\u0645\u062a\u0635\u0641\u062d \u0645\u0646 \u0627\u0644\u062c\u0645\u0639 \u0628\u064a\u0646\u0647\u0645\u0627 \u0644\u0644\u0645\u0646\u062a\u062c \u0627\u0644\u0646\u0647\u0627\u0626\u064a.<\/p>\n<p>\u0645\u062b\u0644 \u062c\u0645\u064a\u0639 \u0645\u0633\u062a\u0646\u062f\u0627\u062a HTML \u060c \u064a\u062a\u0636\u0645\u0646 \u0627\u0644\u0647\u064a\u0643\u0644 \u0645\u0646 \u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u0623\u0639\u0644\u0649 \u0642\u0633\u0645\u064b\u0627 \u0644\u0644\u0631\u0623\u0633 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0628\u064a\u0627\u0646\u0627\u062a \u062a\u0639\u0631\u064a\u0641 \u0648\u062c\u0633\u0645 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0641\u0639\u0644\u064a \u0627\u0644\u0630\u064a \u0633\u064a\u0638\u0647\u0631 \u0641\u064a \u0627\u0644\u0635\u0641\u062d\u0629:<\/p>\n<pre>\n        <code class=\"hljs html\"><span class=\"hljs-meta\">html<\/span>&gt;<br \/><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span><br \/><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\u00a0\u00a0\u00a0\u00a0...<br \/><span class=\"hljs-tag\"><span class=\"hljs-name\">head<\/span>&gt;<\/span><p><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\u00a0\u00a0\u00a0\u00a0...<br \/><span class=\"hljs-tag\"><span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/><span class=\"hljs-tag\"><span class=\"hljs-name\">html<\/span>&gt;<\/span><br \/><\/p><\/code>\n    <\/pre>\n<p>\u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0648\u0635\u0641\u064a\u0629 \u0641\u064a \u0627\u0644\u0631\u0623\u0633 \u0642\u0635\u064a\u0631\u0629 \u062c\u062f\u064b\u0627 \u060c \u0645\u0639 \u0645\u062c\u0631\u062f \u0639\u0646\u0648\u0627\u0646 \u0644\u0644\u0635\u0641\u062d\u0629 (\u0627\u0644\u0630\u064a \u064a\u0638\u0647\u0631 \u0641\u064a \u0634\u0631\u064a\u0637 \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0645\u062a\u0635\u0641\u062d \u0627\u0644\u062e\u0627\u0635 \u0628\u0643) \u0648\u0645\u0631\u062c\u0639 \u0625\u0644\u0649 \u0645\u0644\u0641 STYLES.CSS:<\/p>\n<pre>\n        <code class=\"hljs html\">\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Text<span class=\"hljs-tag\"><span class=\"hljs-name\">title<\/span>&gt;<\/span><br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span>\u00a0<span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span>\u00a0<span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"styles.css\"<\/span> \/&gt;<\/span><br \/><\/code>\n    <\/pre>\n<p>\u0627\u0644\u062c\u0633\u0645 \u0623\u0643\u062b\u0631 \u062a\u0639\u0642\u064a\u062f\u064b\u0627 \u060c \u0648\u0644\u0643\u0646 \u0647\u0646\u0627\u0643 \u0639\u062f\u062f \u0642\u0644\u064a\u0644 \u0645\u0646 \u0627\u0644\u0623\u062c\u0632\u0627\u0621 \u0627\u0644\u0645\u0647\u0645\u0629:<\/p>\n<pre>\n        <code class=\"hljs html\">\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>\u00a0<span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"counter\"<\/span>&gt;<\/span><br \/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0words: <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>\u00a0<span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"words\"<\/span>&gt;<\/span>0<span class=\"hljs-tag\"><span class=\"hljs-name\">span<\/span>&gt;<\/span><br \/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/<br \/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0characters: <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>\u00a0<span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"chars\"<\/span>&gt;<\/span>0<span class=\"hljs-tag\"><span class=\"hljs-name\">span<\/span>&gt;<\/span><br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\"><span class=\"hljs-name\">div<\/span>&gt;<\/span><p>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">textarea<\/span>\u00a0<span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"text\"<\/span>\u00a0<span class=\"hljs-attr\">autofocus<\/span>=<span class=\"hljs-string\">\"1\"<\/span>&gt;<\/span><span class=\"hljs-tag\"><span class=\"hljs-name\">textarea<\/span>&gt;<\/span><\/p><p>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>\u00a0<span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"script.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\"><span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/><\/p><\/code>\n    <\/pre>\n<p>\u064a\u062d\u062a\u0648\u064a \u0639\u0646\u0635\u0631 DIV (&#8220;\u0627\u0644\u062a\u0642\u0633\u064a\u0645&#8221;) \u0639\u0644\u0649 \u0643\u0644\u0645\u0629 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0648\u062a\u0647\u0645 \u0627\u0644\u0623\u062d\u0631\u0641. \u0633\u0648\u0641 \u064a\u062c\u0644\u0633 \u0641\u064a \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0639\u0644\u0648\u064a \u0645\u0646 \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0648\u064a\u0628 \u0648\u0627\u0644\u062a\u062d\u062f\u064a\u062b \u0643\u0644\u0645\u0627 \u062a\u063a\u064a\u0631 \u0627\u0644\u0646\u0635.<\/p>\n<p>\u0644\u0627\u062d\u0638 \u0633\u0645\u0627\u062a \u0627\u0644\u0645\u0639\u0631\u0641 \u060c \u0648\u0627\u0644\u062a\u064a \u062a\u0639\u062a\u0628\u0631 \u062d\u064a\u0648\u064a\u0629 \u0644\u0644\u0639\u0645\u0644\u064a\u0629. \u064a\u062c\u0628 \u0623\u0646 \u062a\u0643\u0648\u0646 \u0642\u064a\u0645\u0629 \u0627\u0644\u0645\u0639\u0631\u0641 \u0641\u0631\u064a\u062f\u0629 \u0645\u0646 \u0646\u0648\u0639\u0647\u0627 \u060c \u0628\u062d\u064a\u062b \u064a\u0645\u0643\u0646 \u0644\u0644\u062a\u0637\u0628\u064a\u0642 \u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0647 \u0644\u062a\u062d\u062f\u064a\u062f \u0639\u0646\u0635\u0631 \u0645\u0639\u064a\u0646. \u064a\u0645\u0643\u0646 \u0623\u0646 \u064a\u0633\u0627\u0639\u062f\u0646\u0627 \u0627\u0644\u0642\u064a\u0627\u0645 \u0628\u0630\u0644\u0643 \u0641\u064a \u062a\u0635\u0645\u064a\u0645 \u0647\u0630\u0647 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0648\u0623\u064a\u0636\u064b\u0627 \u0627\u0633\u062a\u0647\u062f\u0627\u0641\u0647\u0627 \u0639\u0646\u062f\u0645\u0627 \u0646\u0636\u064a\u0641 \u0648\u0638\u0627\u0626\u0641.<\/p>\n<p>Textarea \u0647\u0648 \u0639\u0646\u0635\u0631 \u0646\u0645\u0648\u0630\u062c \u0645\u062f\u0645\u062c \u064a\u062a\u064a\u062d \u0644\u0643 \u0643\u062a\u0627\u0628\u0629 \u0646\u0635 \u0639\u0627\u062f\u064a \u0641\u064a \u0627\u0644\u0645\u062a\u0635\u0641\u062d. \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0633\u0645\u0629 \u0636\u0628\u0637 \u062a\u0644\u0642\u0627\u0626\u064a \u0644\u0644\u0635\u0648\u0631\u0629 \u060c \u0633\u064a\u0643\u0648\u0646 \u062c\u0627\u0647\u0632\u064b\u0627 \u0644\u0644\u0643\u062a\u0627\u0628\u0629 \u0628\u0645\u062c\u0631\u062f \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629. \u0623\u062e\u064a\u0631\u064b\u0627 \u060c \u062a\u0634\u064a\u0631 \u0627\u0644\u0635\u0641\u062d\u0629 \u0625\u0644\u0649 \u0645\u0644\u0641 JavaScript \u060c script.js.<\/p>\n<p>\u0641\u064a \u0647\u0630\u0647 \u0627\u0644\u0645\u0631\u062d\u0644\u0629 \u060c \u064a\u0645\u0643\u0646\u0643 \u0641\u062a\u062d \u0645\u0644\u0641 index.html \u0641\u064a \u0645\u062a\u0635\u0641\u062d. \u0644\u0646 \u064a\u0641\u0639\u0644 \u0623\u064a \u0634\u064a\u0621 \u0641\u064a \u0627\u0644\u0648\u0642\u062a \u0627\u0644\u062d\u0627\u0644\u064a \u060c \u0648\u0644\u0646 \u064a\u0628\u062f\u0648 \u0627\u0644\u0623\u0645\u0631 \u0635\u062d\u064a\u062d\u064b\u0627 \u060c \u0644\u0643\u0646 \u0645\u0646 \u0627\u0644\u0645\u0641\u064a\u062f \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u062a\u0637\u0628\u064a\u0642\u0643 \u0641\u064a \u0643\u0644 \u0645\u0631\u062d\u0644\u0629 \u0644\u0636\u0645\u0627\u0646 \u0623\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0627\u062a \u062a\u0639\u0645\u0644 \u0643\u0645\u0627 \u062a\u062a\u0648\u0642\u0639.<\/p>\n<div class=\"body-img landscape \">\n<div class=\"responsive-img  image-expandable  img-article-item\">\n<figure>\n<p>                <img data-recalc-dims=\"1\" decoding=\"async\" width=\"960\" height=\"569\" loading=\"lazy\" alt=\"\u0639\u0631\u0636 \u0644\u062a\u0637\u0628\u064a\u0642 \u0648\u064a\u0628 \u062a\u062f\u0648\u064a\u0646 \u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0645\u0639 \u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0645\u062a\u0635\u0641\u062d \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629 \u060c \u0645\u0645\u0627 \u064a\u0648\u0636\u062d \u0643\u0644 \u0634\u064a\u0621 \u062a\u0645 \u062a\u062c\u0645\u064a\u0639\u0647 \u0641\u064a \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u0639\u0644\u0648\u064a\u0629 \u0627\u0644\u064a\u0633\u0631\u0649.\" data-img-url=\"https:\/\/goodwriterz.com\/site\/wp-content\/uploads\/2025\/02\/1739880981_183_\u062a\u0637\u0628\u064a\u0642-Notes-Simple-\u0648-Word-Counter.png\" src=\"https:\/\/i0.wp.com\/goodwriterz.com\/site\/wp-content\/uploads\/2025\/02\/1739880981_183_%D8%AA%D8%B7%D8%A8%D9%8A%D9%82-Notes-Simple-%D9%88-Word-Counter.png?resize=960%2C569&#038;ssl=1\" style=\"height:auto;max-width:100%\" title=\"\"><\/p>\n<\/figure><\/div>\n<\/p><\/div>\n<h3 id=\"making-things-look-good-with-css\">\n<p>            \u062c\u0639\u0644 \u0627\u0644\u0623\u0634\u064a\u0627\u0621 \u062a\u0628\u062f\u0648 \u062c\u064a\u062f\u0629 \u0645\u0639 CSS<br \/>\n    <\/h3>\n<p>\u064a\u062a\u064a\u062d \u0644\u0643 CSS \u062a\u063a\u064a\u064a\u0631 \u0646\u0645\u0637 \u0623\u062c\u0632\u0627\u0621 \u0645\u0646 \u0635\u0641\u062d\u0629 \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0643 \u060c \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0633\u062a\u0647\u062f\u0627\u0641 \u062a\u0644\u0643 \u0627\u0644\u0623\u062c\u0632\u0627\u0621 \u0648\u062a\u062d\u062f\u064a\u062f \u0642\u064a\u0645 \u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u0645\u062b\u0644 \u062d\u062c\u0645 \u0627\u0644\u062e\u0637 \u0648\u0627\u0644\u062e\u0644\u0641\u064a\u0629. \u0644\u0627 \u064a\u062d\u062a\u0627\u062c \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0639\u064a\u0646\u0629 \u0647\u0630\u0627 \u0625\u0644\u0649 \u0627\u0644\u0643\u062b\u064a\u0631 \u0645\u0646 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0630\u064a \u062a\u0645 \u062a\u0633\u0631\u064a\u0628\u0647 \u0628\u0634\u0643\u0644 \u0646\u0627\u0639 \u0644\u0623\u0646 \u0648\u0627\u062c\u0647\u062a\u0647 \u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0644\u063a\u0627\u064a\u0629. \u0648\u0645\u0639 \u0630\u0644\u0643 \u060c \u064a\u0645\u0643\u0646\u0646\u0627 \u062a\u0646\u0638\u064a\u0641 \u0627\u0644\u062d\u0648\u0627\u0641 \u0627\u0644\u062e\u0634\u0646\u0629 \u0642\u0644\u064a\u0644\u0627\u064b \u0645\u0639 \u0645\u062c\u0645\u0648\u0639\u0629 \u0643\u0628\u064a\u0631\u0629 \u0645\u0646 \u0627\u0644\u0623\u0646\u0627\u0642\u0629.<\/p>\n<p>\u0623\u0648\u0644\u0627\u064b \u060c \u0642\u0645 \u0628\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u062c\u0633\u0645 \u0644\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0643\u0644\u064a:<\/p>\n<pre>\n        <code class=\"hljs css\"><span class=\"hljs-selector-tag\">body<\/span> {<br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">margin<\/span>: 0;<br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">padding<\/span>: 0;<br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">display<\/span>: <span class=\"hljs-selector-tag\">grid<\/span>;<br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">min-height<\/span>: 100<span class=\"hljs-selector-tag\">vh<\/span>;<br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">grid-template-rows<\/span>: <span class=\"hljs-selector-tag\">min-content<\/span> 1<span class=\"hljs-selector-tag\">fr<\/span>;<br \/>}<br \/><\/code>\n    <\/pre>\n<p>\u064a\u0633\u062a\u062e\u062f\u0645 \u0647\u0630\u0627 CSS <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_grid_layout\">\u062a\u062e\u0637\u064a\u0637 \u0627\u0644\u0634\u0628\u0643\u0629<\/a> \u0644\u0648\u0636\u0639 \u0627\u0644\u0643\u0644\u0645\u0629 \u0648\u0627\u0644\u0634\u062e\u0635\u064a\u0629 \u0641\u064a \u0635\u0641 \u0636\u064a\u0642 \u0641\u0648\u0642 \u0627\u0644\u0646\u0635. \u062a\u062d\u062f\u062f \u062e\u0627\u0635\u064a\u0629 \u0635\u0648\u0641 \u0627\u0644\u0634\u0628\u0643\u0629-\u0623\u0646 \u0635\u0641 \u0627\u0644\u0639\u062f \u064a\u062c\u0628 \u0623\u0646 \u064a\u0643\u0648\u0646 \u0642\u0635\u064a\u0631\u064b\u0627 \u0642\u062f\u0631 \u0627\u0644\u0625\u0645\u0643\u0627\u0646 (MIN-MAINTENT) \u0648\u064a\u062c\u0628 \u0623\u0646 \u064a\u0645\u0644\u0623 Textarea \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u062a\u0628\u0642\u064a\u0629 (1FR).<\/p>\n<p>\u064a\u062d\u062a\u0648\u064a \u0627\u0644\u0635\u0641 \u0627\u0644\u0645\u0636\u0627\u062f \u0639\u0644\u0649 \u0628\u0639\u0636 \u0627\u0644\u0623\u0633\u0644\u0648\u0628 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0644\u0644\u062a\u0645\u064a\u064a\u0632 \u0628\u064a\u0646\u0647 \u0639\u0646 \u0627\u0644\u0646\u0635 \u0627\u0644\u0645\u062a\u0628\u0642\u064a \u060c \u0648\u0630\u0644\u0643 \u0628\u0634\u0643\u0644 \u0631\u0626\u064a\u0633\u064a \u0639\u0646 \u0637\u0631\u064a\u0642 \u062e\u0644\u0641\u064a\u062a\u0647:<\/p>\n<pre>\n        <code class=\"hljs css\"><span class=\"hljs-selector-id\">#counter<\/span> {<br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">font-family<\/span>: <span class=\"hljs-selector-tag\">sans-serif<\/span>;<br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">background-color<\/span>: <span class=\"hljs-selector-id\">#f7f7f7<\/span>;<br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">text-align<\/span>: <span class=\"hljs-selector-tag\">center<\/span>;<br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">width<\/span>: 100%;<br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">padding<\/span>: 0<span class=\"hljs-selector-class\">.5em<\/span> 0;<br \/>}<br \/><\/code>\n    <\/pre>\n<p>\u0623\u062e\u064a\u0631\u064b\u0627 \u060c \u062a\u0645 \u062a\u0635\u0645\u064a\u0645 Textarea \u0644\u0639\u0631\u0636 \u0646\u0635 \u0642\u0627\u0628\u0644 \u0644\u0644\u0642\u0631\u0627\u0621\u0629 \u0645\u0639 \u0645\u0633\u0627\u062d\u0629 \u0643\u0627\u0641\u064a\u0629 \u0644\u0644\u062a\u0646\u0641\u0633. \u0627\u0644\u062e\u0637 \u0627\u0644\u0630\u064a \u064a\u0641\u0635\u0644 \u0627\u0644\u062a\u0647\u0645 \u0639\u0646 \u0627\u0644\u0646\u0635 \u0647\u0648 \u0641\u064a \u0627\u0644\u0648\u0627\u0642\u0639 \u0627\u0644\u062d\u062f\u0648\u062f \u0627\u0644\u0639\u0644\u064a\u0627 \u0644\u0647\u0630\u0627 \u0627\u0644\u0646\u0635.<\/p>\n<pre>\n        <code class=\"hljs css\"><span class=\"hljs-selector-tag\">textarea<\/span> {<br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">width<\/span>: 100%;<br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">height<\/span>: 100%;<br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">font-size<\/span>: 16<span class=\"hljs-selector-tag\">pt<\/span>;<br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">padding<\/span>: 1<span class=\"hljs-selector-tag\">em<\/span>;<br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">box-sizing<\/span>: <span class=\"hljs-selector-tag\">border-box<\/span>;<br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">outline<\/span>: 0;<br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">border<\/span>: <span class=\"hljs-selector-tag\">none<\/span>;<br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">border-top<\/span>: 1<span class=\"hljs-selector-tag\">px<\/span>\u00a0<span class=\"hljs-selector-tag\">solid<\/span>\u00a0<span class=\"hljs-selector-id\">#999<\/span>;<br \/>}<\/code>\n    <\/pre>\n<div class=\"body-img landscape \">\n<div class=\"responsive-img  image-expandable  img-article-item\">\n<figure>\n<p>                <img data-recalc-dims=\"1\" decoding=\"async\" width=\"960\" height=\"569\" loading=\"lazy\" alt=\"\u064a\u064f\u0638\u0647\u0631 \u062a\u0637\u0628\u064a\u0642 \u062a\u062f\u0648\u064a\u0646 \u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0630\u0627\u062a \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0645\u062e\u0635\u0635\u0629 \u0634\u0631\u064a\u0637 \u0627\u0644\u0639\u062f\u0627\u062f \u0641\u064a \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0639\u0644\u0648\u064a \u0645\u0639 \u0646\u0635 \u0643\u0627\u0645\u0644 \u0627\u0644\u062d\u062c\u0645 \u0623\u062f\u0646\u0627\u0647.\" data-img-url=\"https:\/\/goodwriterz.com\/site\/wp-content\/uploads\/2025\/02\/1739880982_807_\u062a\u0637\u0628\u064a\u0642-Notes-Simple-\u0648-Word-Counter.png\" src=\"https:\/\/i0.wp.com\/goodwriterz.com\/site\/wp-content\/uploads\/2025\/02\/1739880982_807_%D8%AA%D8%B7%D8%A8%D9%8A%D9%82-Notes-Simple-%D9%88-Word-Counter.png?resize=960%2C569&#038;ssl=1\" style=\"height:auto;max-width:100%\" title=\"\"><\/p>\n<\/figure><\/div>\n<\/p><\/div>\n<h3 id=\"adding-functionality-with-javascript\">\n<p>            \u0625\u0636\u0627\u0641\u0629 \u0648\u0638\u064a\u0641\u0629 \u0645\u0639 JavaScript<br \/>\n    <\/h3>\n<p>\u0645\u0639 \u0648\u062c\u0648\u062f \u0627\u0644\u0628\u0646\u064a\u0629 \u0648\u0627\u0644\u0623\u0646\u0627\u0642\u0629 \u0641\u064a \u0645\u0643\u0627\u0646\u0647\u0627 \u060c \u0623\u0646\u062a \u0645\u0633\u062a\u0639\u062f \u0644\u0625\u0636\u0627\u0641\u0629 \u0648\u0638\u0627\u0626\u0641: \u0627\u0644\u0631\u0645\u0632 \u0627\u0644\u0630\u064a \u064a\u062c\u0639\u0644 \u0647\u0630\u0627 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0628\u0633\u064a\u0637 \u064a\u0641\u0639\u0644 \u0634\u064a\u0626\u064b\u0627 \u0645\u0627.<\/p>\n<p>\u0642\u0628\u0644 \u0627\u0644\u0628\u062f\u0621 \u0641\u064a \u0643\u062a\u0627\u0628\u0629 \u062d\u062a\u0649 \u0623\u0628\u0633\u0637 \u0631\u0645\u0632 \u060c \u0645\u0646 \u0627\u0644\u0645\u0639\u0642\u0648\u0644 \u0623\u0646 \u062a\u0641\u0647\u0645 \u0645\u0627 \u062a\u0631\u064a\u062f \u0623\u0646 \u062a\u0641\u0639\u0644\u0647. \u0641\u064a \u0647\u0630\u0647 \u0627\u0644\u062d\u0627\u0644\u0629 \u060c \u0647\u0646\u0627\u0643 \u0645\u062c\u0631\u062f \u0645\u062a\u0637\u0644\u0628\u0627\u062a \u0639\u0627\u0645\u0629:<\/p>\n<ul>\n<li>\n<p>                                        \u0627\u062d\u0641\u0638 \u0627\u0644\u0646\u0635 \u0627\u0644\u0630\u064a \u062a\u0645 \u0625\u062f\u062e\u0627\u0644\u0647 \u060c \u0648\u0623\u0639\u064a\u062f \u062a\u062d\u0645\u064a\u0644\u0647 \u0639\u0646\u062f \u0627\u0644\u062d\u0627\u062c\u0629.\n                        <\/li>\n<li>\n<p>                                        \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u062d\u0631\u0641 \u0648\u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u062a\u0647\u0645 \u0644\u062a\u0648\u0641\u064a\u0631 \u0627\u0644\u0625\u062d\u0635\u0627\u0621\u0627\u062a \u0627\u0644\u062d\u064a\u0629.\n                        <\/li>\n<\/ul>\n<p>\u064a\u062a\u0636\u0645\u0646 \u0643\u0644\u0627 \u0627\u0644\u0645\u062a\u0637\u0644\u0628\u0627\u062a \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0641\u064a \u0627\u0644\u0645\u0633\u062a\u0646\u062f. \u0644\u0630\u0644\u0643 \u064a\u0628\u062f\u0623 \u0627\u0644\u0628\u0631\u0646\u0627\u0645\u062c \u0627\u0644\u0646\u0635\u064a \u0628\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0625\u0634\u0627\u0631\u0627\u062a \u0625\u0644\u0649 \u0647\u0630\u0647 \u0627\u0644\u0639\u0642\u062f \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0637\u0631\u064a\u0642\u0629 getElementByID:<\/p>\n<pre>\n        <code class=\"hljs js\"><span class=\"hljs-keyword\">const<\/span> words = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"words\"<\/span>);<br \/><span class=\"hljs-keyword\">const<\/span> chars = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"chars\"<\/span>);<br \/><span class=\"hljs-keyword\">const<\/span> textarea = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"text\"<\/span>);<br \/><\/code>\n    <\/pre>\n<p>\u0644\u0627\u062d\u0638 \u0623\u0646 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u060c \u0648 chars \u060c \u0648\u0627\u0644\u0646\u0635 \u0647\u064a \u0645\u0639\u0631\u0641\u0627\u062a \u0639\u0646\u0627\u0635\u0631\u0647\u0627 \u0627\u0644\u062e\u0627\u0635\u0629 \u0641\u064a \u0627\u0644\u0645\u0633\u062a\u0646\u062f \u060c \u0627\u0644\u0645\u062e\u0635\u0635\u0629 \u0641\u064a \u0645\u0644\u0641 HTML \u0645\u0639 \u0633\u0645\u0629 \u0627\u0644\u0645\u0639\u0631\u0641.<\/p>\n<p>\u0628\u0639\u062f \u0630\u0644\u0643 \u060c \u0646\u062d\u062a\u0627\u062c \u0625\u0644\u0649 \u0631\u062f \u0641\u0639\u0644 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0639\u0646\u062f \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0646\u0635:<\/p>\n<pre>\n        <code class=\"hljs js\">textarea.addEventListener(<span class=\"hljs-string\">\"input\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">ev<\/span>) <\/span>{<br \/>\u00a0\u00a0\u00a0\u00a0localStorage.setItem(<span class=\"hljs-string\">\"text\"<\/span>, ev.target.value);<br \/>\u00a0\u00a0\u00a0\u00a0update_counts(ev.target.value);<br \/>});<br \/><\/code>\n    <\/pre>\n<p>\u0645\u0633\u062a\u0645\u0639 \u0627\u0644\u062d\u062f\u062b \u0647\u0648 \u0648\u0638\u064a\u0641\u0629 \u0633\u064a\u062a\u0645 \u062a\u0634\u063a\u064a\u0644 JavaScript \u062a\u0644\u0642\u0627\u0626\u064a\u064b\u0627 \u0639\u0646\u062f \u062d\u062f\u0648\u062b \u062d\u062f\u062b \u0645\u0639\u064a\u0646. \u0641\u064a \u0647\u0630\u0647 \u0627\u0644\u062d\u0627\u0644\u0629 \u060c \u0646\u0639\u0644\u0642 \u0645\u0633\u062a\u0645\u0639\u064b\u0627 \u0639\u0644\u0649 \u0639\u0642\u062f\u0629 Textarea \u0627\u0644\u062a\u064a \u062a\u0639\u0645\u0644 \u0639\u0646\u062f \u062d\u062f\u0648\u062b \u062d\u062f\u062b &#8220;\u0627\u0644\u0625\u062f\u062e\u0627\u0644&#8221;. \u0647\u0630\u0627 \u060c \u0628\u0634\u0643\u0644 \u0641\u0639\u0627\u0644 \u060c \u0639\u0646\u062f\u0645\u0627 \u064a\u062a\u0641\u0627\u0639\u0644 \u0634\u062e\u0635 \u0645\u0627 \u0645\u0639 \u0627\u0644\u0646\u0635.<\/p>\n<p>\u0628\u0639\u062f \u0630\u0644\u0643 \u060c \u0646\u0633\u062a\u062e\u062f\u0645 \u0648\u0627\u062c\u0647\u0629 \u0628\u0631\u0645\u062c\u0629 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u0648\u064a\u0628 \u0644\u062d\u0641\u0638 \u0627\u0644\u0645\u062d\u062a\u0648\u064a\u0627\u062a \u0627\u0644\u062d\u0627\u0644\u064a\u0629 \u0644\u0644\u0646\u0635 \u060c \u0645\u0646 ev.target.value. \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u0647\u064a\u0643\u0644 \u060c EV \u0647\u0648 \u0643\u0627\u0626\u0646 \u064a\u0645\u062b\u0644 \u0627\u0644\u062d\u062f\u062b \u0627\u0644\u0630\u064a \u0623\u062b\u0627\u0631 \u0627\u0644\u0645\u0633\u062a\u0645\u0639 \u060c EV.Target \u0647\u0648 \u0627\u0644\u0639\u0642\u062f\u0629 \u0627\u0644\u062a\u064a \u062a\u0644\u0642\u0627 \u0627\u0644\u062d\u062f\u062b \u060c \u0648 ev.target.value \u0647\u0648 \u0646\u0635 \u0647\u0630\u0627 \u0627\u0644\u0646\u0635.<\/p>\n<p>\u062a\u0623\u062e\u0630 \u0637\u0631\u064a\u0642\u0629 SetItem \u0645\u0639\u0644\u0645\u062a\u064a\u0646: \u0627\u0633\u0645 \u0631\u0626\u064a\u0633\u064a \u0644\u0644\u0631\u0628\u0637 \u0628\u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u060c \u0648\u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0641\u0639\u0644\u064a\u0629 \u0644\u062a\u062e\u0632\u064a\u0646\u0647\u0627.<\/p>\n<p>\u0628\u0639\u062f \u0630\u0644\u0643 \u060c \u0646\u062f\u0639\u0648 update_counts () \u060c \u0648\u0646\u0645\u0631 \u0628\u0646\u0641\u0633 \u0627\u0644\u0646\u0635 \u0625\u0644\u064a\u0647. \u0633\u0646\u0634\u0631\u062d \u0647\u0630\u0647 \u0627\u0644\u0648\u0638\u064a\u0641\u0629 \u0642\u0644\u064a\u0644\u0627\u064b.<\/p>\n<p>\u0627\u0644\u0622\u0646 \u0628\u0639\u062f \u0623\u0646 \u0646\u0642\u0648\u0645 \u0628\u062d\u0641\u0638 \u0627\u0644\u0646\u0635 \u060c \u0633\u0646\u0631\u063a\u0628 \u0641\u064a \u062a\u062d\u0645\u064a\u0644\u0647 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649 \u0639\u0646\u062f \u0641\u062a\u062d \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0623\u0648 \u062a\u062d\u062f\u064a\u062b\u0647. \u064a\u0645\u0643\u0646\u0646\u0627 \u0627\u0644\u0627\u0639\u062a\u0646\u0627\u0621 \u0628\u0630\u0644\u0643 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u0633\u062a\u0645\u0639 \u0622\u062e\u0631:<\/p>\n<pre>\n        <code class=\"hljs js\"><span class=\"hljs-built_in\">window<\/span>.addEventListener(<span class=\"hljs-string\">\"load\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">ev<\/span>) <\/span>{<br \/>\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-keyword\">var<\/span> text = localStorage.getItem(<span class=\"hljs-string\">\"text\"<\/span>);<br \/>\u00a0\u00a0\u00a0\u00a0textarea.value = text;<br \/>\u00a0\u00a0\u00a0\u00a0update_counts(text);<br \/>});<br \/><\/code>\n    <\/pre>\n<p>\u064a\u062a\u0648\u0644\u0649 \u0647\u0630\u0627 \u0627\u0644\u062d\u062f\u062b \u0627\u0644\u062d\u0645\u0644 \u0627\u0644\u0630\u064a \u064a\u062d\u062f\u062b \u0639\u0644\u0649 \u0643\u0627\u0626\u0646 \u0627\u0644\u0646\u0627\u0641\u0630\u0629 \u060c \u0648\u0647\u0648 \u062a\u0645\u062b\u064a\u0644 \u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u0623\u0639\u0644\u0649 \u0644\u0646\u0627\u0641\u0630\u0629 \u0627\u0644\u0645\u062a\u0635\u0641\u062d \u0646\u0641\u0633\u0647\u0627. \u0639\u0646\u062f \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0646\u0627\u0641\u0630\u0629 \u060c \u062a\u0642\u0648\u0645 \u0645\u0643\u0627\u0644\u0645\u0629 \u0644\u0640 GetItem () \u0628\u0625\u0631\u062c\u0627\u0639 \u0627\u0644\u0642\u064a\u0645\u0629 \u0627\u0644\u0645\u062e\u0632\u0646\u0629 \u0644\u0646\u0635\u0646\u0627 \u0645\u0646 \u0627\u0644\u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u0645\u062d\u0644\u064a. \u062b\u0645 \u064a\u0642\u0648\u0645 \u0647\u0630\u0627 \u0627\u0644\u0631\u0645\u0632 \u0628\u062a\u0639\u064a\u064a\u0646 \u0642\u064a\u0645\u0629 TextArea \u0639\u0644\u0649 \u0627\u0644\u0646\u0635 \u0627\u0644\u0645\u062d\u0645\u0651\u0644 \u060c \u0648\u0645\u062b\u0644 \u0627\u0644\u0645\u0633\u062a\u0645\u0639 \u0627\u0644\u0633\u0627\u0628\u0642 \u060c \u064a\u0633\u062a\u062f\u0639\u064a update_counts () \u0628\u0647\u0630\u0627 \u0627\u0644\u0646\u0635.<\/p>\n<p>\u064a\u062a\u0645 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0645\u062a\u0628\u0642\u064a \u0641\u064a \u0648\u0638\u064a\u0641\u0629 update_counts () \u0627\u0644\u062a\u064a \u062a\u0628\u062f\u0648 \u0647\u0643\u0630\u0627:<\/p>\n<pre>\n        <code class=\"hljs js\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>\u00a0<span class=\"hljs-title\">update_counts<\/span>(<span class=\"hljs-params\">text<\/span>) <\/span>{<br \/>\u00a0\u00a0\u00a0\u00a0chars.innerHTML = text.length;<br \/>\u00a0\u00a0\u00a0\u00a0words.innerHTML = text.split(<span class=\"hljs-string\">' '<\/span>).length;<br \/>}<br \/><\/code>\n    <\/pre>\n<p>\u0639\u0644\u0649 \u0639\u0643\u0633 textarea \u060c \u0644\u0627 \u064a\u062d\u062a\u0648\u064a \u0627\u0644\u0646\u0635 \u0627\u0644\u0639\u0627\u062f\u064a \u0639\u0644\u0649 \u062e\u0627\u0635\u064a\u0629 \u0642\u064a\u0645\u0629 \u060c \u0644\u0630\u0644\u0643 \u0642\u0645\u0646\u0627 \u0628\u062a\u0639\u064a\u064a\u0646 \u062e\u0627\u0635\u064a\u0629 InnerHTML \u0628\u062f\u0644\u0627\u064b \u0645\u0646 \u0630\u0644\u0643. \u062e\u0627\u0635\u064a\u0629 \u0627\u0644\u0637\u0648\u0644 \u0644\u0644\u0633\u0644\u0633\u0644\u0629 \u0647\u064a \u062e\u0627\u0635\u064a\u0629 \u0628\u0633\u064a\u0637\u0629 \u0644\u0644\u0642\u0631\u0627\u0621\u0629 \u0641\u0642\u0637 \u062a\u0639\u0637\u064a\u0646\u0627 \u0639\u062f\u062f \u0627\u0644\u0623\u062d\u0631\u0641.<\/p>\n<p>Text.split (&#8221;) \u064a\u0643\u0633\u0631 \u0627\u0644\u0633\u0644\u0633\u0644\u0629 \u0639\u0646\u062f \u0623\u062d\u0631\u0641 \u0627\u0644\u0641\u0636\u0627\u0621 \u060c \u0648\u0625\u0631\u062c\u0627\u0639 \u0627\u0644\u0646\u062a\u064a\u062c\u0629 \u0643\u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u0646 \u0627\u0644\u0623\u0648\u062a\u0627\u0631. \u0645\u062b\u0644 \u0627\u0644\u0623\u0648\u062a\u0627\u0631 \u060c \u062a\u062d\u062a\u0648\u064a \u0627\u0644\u0645\u0635\u0641\u0648\u0641\u0627\u062a \u0639\u0644\u0649 \u062e\u0627\u0635\u064a\u0629 \u0637\u0648\u0644 \u062a\u0639\u0637\u064a\u0646\u0627 \u0639\u062f\u062f \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0645\u0648\u062c\u0648\u062f\u0629 \u0641\u064a \u0635\u0641\u064a\u0641.<\/p>\n<p>\u0625\u0630\u0627 \u062c\u0631\u0628\u062a \u0647\u0630\u0627 \u0627\u0644\u0631\u0645\u0632 \u060c \u0641\u0642\u062f \u062a\u0644\u0627\u062d\u0638 \u0628\u0639\u0636 \u0627\u0644\u0623\u062e\u0637\u0627\u0621:<\/p>\n<ol>\n<li>\n<p>                                        \u0644\u0646 \u062a\u062d\u0633\u0628 \u0643\u0644\u0645\u0629 \u0645\u0646 \u062a\u0644\u0642\u0627\u0621 \u0646\u0641\u0633\u0647\u0627 \u0639\u0644\u0649 \u0627\u0644\u062e\u0637 \u0628\u0634\u0643\u0644 \u0635\u062d\u064a\u062d \u060c \u062d\u064a\u062b \u0644\u0627 \u062a\u0648\u062c\u062f \u0623\u062d\u0631\u0641 \u0641\u0636\u0627\u0621 \u0639\u0644\u0649 \u062c\u0627\u0646\u0628\u064a\u0647\u0627.\n                        <\/li>\n<li>\n<p>                                        \u0645\u0639 \u0639\u062f\u0645 \u0648\u062c\u0648\u062f \u0646\u0635 \u0639\u0644\u0649 \u0627\u0644\u0625\u0637\u0644\u0627\u0642 \u060c \u0633\u0648\u0641 \u064a\u0628\u0644\u063a \u0639\u0646 \u0643\u0644\u0645\u0629 \u0648\u0627\u062d\u062f\u0629 \u0628\u0633\u0628\u0628 \u0643\u064a\u0641\u064a\u0629 \u0639\u0645\u0644 \u0627\u0644\u0627\u0646\u0642\u0633\u0627\u0645.\n                        <\/li>\n<\/ol>\n<p>\u0644\u0625\u0635\u0644\u0627\u062d \u0627\u0644\u0645\u0634\u0643\u0644\u0629 \u0627\u0644\u0623\u0648\u0644\u0649 \u060c \u064a\u0645\u0643\u0646\u0643 \u0627\u0644\u0627\u0646\u0642\u0633\u0627\u0645 \u0639\u0644\u0649 \u062a\u0639\u0628\u064a\u0631 \u0645\u0646\u062a\u0638\u0645 (\u062a\u0639\u0646\u064a &#8220;\u062d\u0631\u0641 \u0645\u0633\u0627\u062d\u0629 \u0628\u064a\u0636\u0627\u0621&#8221;) \u0628\u062f\u0644\u0627\u064b \u0645\u0646 \u0627\u0644\u0645\u0633\u0627\u062d\u0629. \u0644\u0625\u0635\u0644\u0627\u062d \u0627\u0644\u062b\u0627\u0646\u064a \u060c \u0642\u0645 \u0628\u062a\u0635\u0641\u064a\u0629 \u0627\u0644\u0633\u0644\u0627\u0633\u0644 \u0627\u0644\u0641\u0627\u0631\u063a\u0629 \u0645\u0646 \u0627\u0644\u0646\u062a\u064a\u062c\u0629:<\/p>\n<pre>\n        <code class=\"hljs js\">\u00a0\u00a0\u00a0\u00a0words.innerHTML = text.split(<span class=\"hljs-regexp\">\/\\s\/<\/span>).filter(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">n<\/span>) <\/span>{ <span class=\"hljs-keyword\">return<\/span> n != <span class=\"hljs-string\">''<\/span>; }).length;<br \/><\/code>\n    <\/pre>\n<p>\u0625\u0630\u0627 \u0643\u0646\u062a \u0644\u0627 \u062a\u0641\u0647\u0645 \u0647\u0630\u0627 \u0627\u0644\u062e\u0637 \u062a\u0645\u0627\u0645\u064b\u0627 \u060c \u062a\u062d\u0642\u0642 \u0645\u0646 \u0635\u0641\u062d\u0627\u062a MDN \u0644\u0640 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/split\">\u064a\u0646\u0642\u0633\u0645<\/a> \u0648 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/filter\">\u0641\u0644\u062a\u0631<\/a>.<\/p>\n<div class=\"body-img landscape \">\n<div class=\"responsive-img  image-expandable  img-article-item\">\n<figure>\n<p>                <img data-recalc-dims=\"1\" decoding=\"async\" width=\"960\" height=\"569\" loading=\"lazy\" alt=\"\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0648\u064a\u0628 \u0645\u0639 \u0646\u0635 \u0645\u062b\u0627\u0644 \u060c \u064a\u0648\u0636\u062d \u062a\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u062f\u0642\u0629 \u0648\u0627\u0644\u0643\u0644\u0645\u0627\u062a.\" data-img-url=\"https:\/\/goodwriterz.com\/site\/wp-content\/uploads\/2025\/02\/1739880982_484_\u062a\u0637\u0628\u064a\u0642-Notes-Simple-\u0648-Word-Counter.png\" src=\"https:\/\/i0.wp.com\/goodwriterz.com\/site\/wp-content\/uploads\/2025\/02\/1739880982_484_%D8%AA%D8%B7%D8%A8%D9%8A%D9%82-Notes-Simple-%D9%88-Word-Counter.png?resize=960%2C569&#038;ssl=1\" style=\"height:auto;max-width:100%\" title=\"\"><\/p>\n<\/figure><\/div>\n<\/p><\/div>\n<hr \/>\n<p>\u064a\u0645\u0643\u0646\u0643 \u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u0639\u062f\u064a\u062f \u0645\u0646 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u0645\u0641\u064a\u062f\u0629 \u0645\u0639 \u0639\u062f\u062f \u0642\u0644\u064a\u0644 \u0645\u0646 \u0627\u0644\u0645\u0644\u0641\u0627\u062a. \u064a\u0645\u0643\u0646\u0643 \u0623\u064a\u0636\u064b\u0627 \u062a\u0645\u062f\u064a\u062f \u062a\u0637\u0628\u064a\u0642 Notes Simple \u0647\u0630\u0627 \u0644\u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0632\u064a\u062f \u0645\u0646 \u0627\u0644\u0648\u0638\u0627\u0626\u0641. \u0639\u0644\u0649 \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644 \u060c \u064a\u0645\u0643\u0646\u0643 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/location\">\u062e\u0627\u0635\u064a\u0629 window.location<\/a> \u0644\u0627\u0633\u062a\u0631\u062f\u0627\u062f \u0639\u0646\u0648\u0627\u0646 URL \u0627\u0644\u062d\u0627\u0644\u064a \u0648\u062f\u0639\u0645 \u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0645\u062a\u0639\u062f\u062f\u0629 \u0639\u0646 \u0637\u0631\u064a\u0642 \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0630\u064a \u062a\u0646\u0642\u0644\u0647 \u0625\u0644\u0649 LocalStorage.setItem.<\/p>\n<\/p><\/div>\n<p>    (tagstotranslate) \u0627\u0644\u0628\u0631\u0645\u062c\u0629 (T) \u0627\u0644\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0648\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0648\u064a\u0628<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0631\u0648\u0627\u0628\u0637 \u0633\u0631\u064a\u0639\u0629 \u0643\u064a\u0641\u064a\u0629 \u0628\u0646\u0627\u0621 \u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0629 Taker \u064a\u0645\u0643\u0646 \u0623\u0646 \u064a\u0628\u062f\u0648 \u0627\u0644\u062f\u062e\u0648\u0644 \u0641\u064a \u0627\u0644\u062a\u0631\u0645\u064a\u0632 \u0645\u062e\u064a\u0641\u064b\u0627 \u060c \u0645\u0639 \u0648\u062c\u0648\u062f \u0639\u062f\u062f \u0644\u0627 \u064a\u062d\u0635\u0649 \u0645\u0646 \u0627\u0644\u0644\u063a\u0627\u062a \u0648\u0627\u0644\u0623\u0637\u0631 \u0648\u0627\u0644\u0645\u0646\u0647\u062c\u064a\u0627\u062a \u0627\u0644\u062a\u064a \u064a\u062c\u0628 \u0645\u0631\u0627\u0639\u0627\u062a\u0647\u0627. \u0642\u062f \u064a\u0643\u0648\u0646 \u0645\u0646 \u0627\u0644\u0623\u0633\u0647\u0644 \u062d\u062a\u0649 \u0627\u0644\u0627\u0633\u062a\u0639\u0627\u0646\u0629 \u0628\u0645\u0635\u0627\u062f\u0631 \u062e\u0627\u0631\u062c\u064a\u0629 \u0644\u0643\u0644 \u0634\u064a\u0621 \u0644\u0645\u0646\u0638\u0645\u0629 \u0627\u0644\u0639\u0641\u0648 \u0627\u0644\u062f\u0648\u0644\u064a\u0629. \u0643\u0646 \u0645\u0637\u0645\u0626\u0646\u064b\u0627: \u064a\u0645\u0643\u0646 \u0623\u0646 \u062a\u0643\u0648\u0646 \u0627\u0644\u0628\u0631\u0645\u062c\u0629 \u0644\u0644\u0648\u064a\u0628 \u0628\u0633\u064a\u0637\u0629 \u0648\u0645\u0645\u062a\u0639\u0629 \u060c \u0648 &#8211; \u0623\u0633\u062a\u0646\u0634\u0642 &#8211; \u0645\u062c\u0627\u0646\u064a\u0629! \u0645\u0627 &#8230; <a title=\"\u062a\u0637\u0628\u064a\u0642 Notes Simple \u0648 Word Counter\" class=\"read-more\" href=\"https:\/\/goodwriterz.com\/site\/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82-notes-simple-%d9%88-word-counter\/\" aria-label=\"Read more about \u062a\u0637\u0628\u064a\u0642 Notes Simple \u0648 Word Counter\">\u0625\u0642\u0631\u0623 \u0627\u0644\u0645\u0632\u064a\u062f<\/a><\/p>\n","protected":false},"author":1,"featured_media":82625,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[19],"tags":[],"class_list":["post-82624","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-apps-web-apps"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/goodwriterz.com\/site\/wp-content\/uploads\/2025\/02\/%D8%AA%D8%B7%D8%A8%D9%8A%D9%82-Notes-Simple-%D9%88-Word-Counter.jpg?fit=1920%2C1080&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/goodwriterz.com\/site\/wp-json\/wp\/v2\/posts\/82624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/goodwriterz.com\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/goodwriterz.com\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/goodwriterz.com\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/goodwriterz.com\/site\/wp-json\/wp\/v2\/comments?post=82624"}],"version-history":[{"count":1,"href":"https:\/\/goodwriterz.com\/site\/wp-json\/wp\/v2\/posts\/82624\/revisions"}],"predecessor-version":[{"id":82626,"href":"https:\/\/goodwriterz.com\/site\/wp-json\/wp\/v2\/posts\/82624\/revisions\/82626"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/goodwriterz.com\/site\/wp-json\/wp\/v2\/media\/82625"}],"wp:attachment":[{"href":"https:\/\/goodwriterz.com\/site\/wp-json\/wp\/v2\/media?parent=82624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/goodwriterz.com\/site\/wp-json\/wp\/v2\/categories?post=82624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/goodwriterz.com\/site\/wp-json\/wp\/v2\/tags?post=82624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}