{"id":92833,"date":"2025-01-13T21:47:44","date_gmt":"2025-01-13T18:17:44","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%db%8c%db%8c%d8%af-%db%8c%da%a9-%d9%85%d9%88%d9%84%d8%af-%d8%b1%d9%86%da%af-%d8%aa%d8%b5%d8%a7%d8%af%d9%81%db%8c-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d9%85\/"},"modified":"2025-01-13T21:47:44","modified_gmt":"2025-01-13T18:17:44","slug":"%d8%a8%db%8c%d8%a7%db%8c%db%8c%d8%af-%db%8c%da%a9-%d9%85%d9%88%d9%84%d8%af-%d8%b1%d9%86%da%af-%d8%aa%d8%b5%d8%a7%d8%af%d9%81%db%8c-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d9%85","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%db%8c%db%8c%d8%af-%db%8c%da%a9-%d9%85%d9%88%d9%84%d8%af-%d8%b1%d9%86%da%af-%d8%aa%d8%b5%d8%a7%d8%af%d9%81%db%8c-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d9%85\/","title":{"rendered":"\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0645\u0648\u0644\u062f \u0631\u0646\u06af \u062a\u0635\u0627\u062f\u0641\u06cc \u0628\u0633\u0627\u0632\u06cc\u0645!"},"content":{"rendered":"<div data-article-id=\"2204578\" id=\"article-body\">\n<p>\u0627\u06af\u0631 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062a\u0627\u0632\u0647 \u06a9\u0627\u0631 \u0647\u0633\u062a\u06cc\u062f\u060c \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0686\u06cc\u0632\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0646\u062d\u0648\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0646\u0648\u0627\u0639 \u062f\u0627\u062f\u0647\u060c \u0645\u0646\u0637\u0642\u060c \u062a\u0648\u0627\u0628\u0639 \u0648 \u063a\u06cc\u0631\u0647 \u06cc\u0627\u062f \u06af\u0631\u0641\u062a\u0647 \u0627\u06cc\u062f. \u0627\u06cc\u0646 \u062e\u0648\u0628 \u0627\u0633\u062a\u061b \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JS \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631\u060c \u0628\u0627\u06cc\u062f \u0627\u0632 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0628\u0633\u062a\u0647 \u0628\u0647 \u062f\u0627\u0645\u0646\u0647 \u062a\u0648\u062c\u0647 \u0634\u0645\u0627\u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0647 \u0632\u0648\u062f\u06cc \u062a\u0645\u0627\u06cc\u0644 \u0634\u062f\u06cc\u062f\u06cc \u0628\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0647\u0627\u0631\u062a \u0647\u0627\u06cc JS \u062e\u0648\u062f \u062f\u0631 \u06cc\u06a9 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0648\u0627\u0642\u0639\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f. \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u06a9\u0645\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0628\u0627\u0634\u062f (\u0627\u0645\u0627 \u0646\u0647 \u0628\u0647 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0639\u0628\u0627\u0631\u0627\u062a \u0628\u0627 \u0642\u0627\u0639\u062f\u0647\u060c amirite)\u060c \u0627\u0645\u0627 \u06cc\u06a9\u06cc \u0627\u0632 \u0633\u0627\u062f\u0647\u200c\u062a\u0631\u06cc\u0646 \u0645\u0648\u0627\u0631\u062f\u06cc \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0622\u0646 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f\u060c \u062d\u062f\u0633 \u0632\u062f\u06cc\u062f\u060c \u06cc\u06a9 \u062a\u0648\u0644\u06cc\u062f\u06a9\u0646\u0646\u062f\u0647 \u0631\u0646\u06af \u062a\u0635\u0627\u062f\u0641\u06cc \u0627\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0645\u0646 \u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0645\u0631\u0627\u062d\u0644\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0645\u060c \u0622\u0634\u0646\u0627 \u0645\u06cc\u200c\u06a9\u0646\u0645.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/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 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%db%8c%db%8c%d8%af-%db%8c%da%a9-%d9%85%d9%88%d9%84%d8%af-%d8%b1%d9%86%da%af-%d8%aa%d8%b5%d8%a7%d8%af%d9%81%db%8c-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d9%85\/#1_HTML_boilerplate_%D8%B1%D8%A7_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\" >1. HTML boilerplate \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%db%8c%db%8c%d8%af-%db%8c%da%a9-%d9%85%d9%88%d9%84%d8%af-%d8%b1%d9%86%da%af-%d8%aa%d8%b5%d8%a7%d8%af%d9%81%db%8c-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d9%85\/#2_Build_the_HTML_%E2%80%98skeleton\" >2. Build the HTML \u2018skeleton\u2019<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%db%8c%db%8c%d8%af-%db%8c%da%a9-%d9%85%d9%88%d9%84%d8%af-%d8%b1%d9%86%da%af-%d8%aa%d8%b5%d8%a7%d8%af%d9%81%db%8c-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d9%85\/#Please_select_a_color_by_clicking_the_button_below\" >Please select a color by clicking the button below.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%db%8c%db%8c%d8%af-%db%8c%da%a9-%d9%85%d9%88%d9%84%d8%af-%d8%b1%d9%86%da%af-%d8%aa%d8%b5%d8%a7%d8%af%d9%81%db%8c-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d9%85\/#3_Add_JavaScript\" >3. Add JavaScript!<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%db%8c%db%8c%d8%af-%db%8c%da%a9-%d9%85%d9%88%d9%84%d8%af-%d8%b1%d9%86%da%af-%d8%aa%d8%b5%d8%a7%d8%af%d9%81%db%8c-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d9%85\/#4_Apply_JS_to_HTML_file\" >4. Apply JS to HTML file<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%db%8c%db%8c%d8%af-%db%8c%da%a9-%d9%85%d9%88%d9%84%d8%af-%d8%b1%d9%86%da%af-%d8%aa%d8%b5%d8%a7%d8%af%d9%81%db%8c-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d9%85\/#5_%D8%A8%D9%87_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%A8%DA%AF%D9%88%DB%8C%DB%8C%D8%AF_%DA%A9%D9%87_%DA%86%D9%87_%D8%B2%D9%85%D8%A7%D9%86%DB%8C_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF_%D8%B1%D8%A7_%D8%A7%D8%AC%D8%B1%D8%A7_%DA%A9%D9%86%D8%AF\" >5. \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u06af\u0648\u06cc\u06cc\u062f \u06a9\u0647 \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%db%8c%db%8c%d8%af-%db%8c%da%a9-%d9%85%d9%88%d9%84%d8%af-%d8%b1%d9%86%da%af-%d8%aa%d8%b5%d8%a7%d8%af%d9%81%db%8c-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d9%85\/#6_%DB%8C%DA%A9_%D8%B8%D8%A7%D9%87%D8%B1_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%B1%D8%A7_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\" >6. \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%db%8c%db%8c%d8%af-%db%8c%da%a9-%d9%85%d9%88%d9%84%d8%af-%d8%b1%d9%86%da%af-%d8%aa%d8%b5%d8%a7%d8%af%d9%81%db%8c-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d9%85\/#7_%D8%A8%DB%8C%D8%A7%DB%8C%DB%8C%D8%AF_%D8%A2%D9%86_%D8%B1%D8%A7_%D8%A2%D8%B2%D9%85%D8%A7%DB%8C%D8%B4_%DA%A9%D9%86%DB%8C%D9%85\" >7. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u0645!<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%db%8c%db%8c%d8%af-%db%8c%da%a9-%d9%85%d9%88%d9%84%d8%af-%d8%b1%d9%86%da%af-%d8%aa%d8%b5%d8%a7%d8%af%d9%81%db%8c-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d9%85\/#%D8%AF%D8%B1_%D8%A7%D8%AF%D8%A7%D9%85%D9%87_%D8%A8%D8%AE%D9%88%D8%A7%D9%86%DB%8C%D8%AF\" >\u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%db%8c%db%8c%d8%af-%db%8c%da%a9-%d9%85%d9%88%d9%84%d8%af-%d8%b1%d9%86%da%af-%d8%aa%d8%b5%d8%a7%d8%af%d9%81%db%8c-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d9%85\/#%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C_%DA%A9%D8%A7%D9%85%D9%84_%D8%AA%D8%B3%D8%AA_%D9%85%D8%B1%D9%88%D8%B1%DA%AF%D8%B1_%D9%85%D8%AA%D9%82%D8%A7%D8%A8%D9%84_%D8%AF%D8%B1_%D8%B3%D8%A7%D9%84_2025\" >\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 \u062a\u0633\u062a \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u062a\u0642\u0627\u0628\u0644 \u062f\u0631 \u0633\u0627\u0644 2025<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%db%8c%db%8c%d8%af-%db%8c%da%a9-%d9%85%d9%88%d9%84%d8%af-%d8%b1%d9%86%da%af-%d8%aa%d8%b5%d8%a7%d8%af%d9%81%db%8c-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d9%85\/#%D9%85%D8%A7%DA%98%D9%88%D9%84_OpenTofu_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A7%D8%B3%D9%BE%DB%8C%DA%A9%D8%B1_VPC_%D8%A8%D8%A7_TGW\" >\u0645\u0627\u0698\u0648\u0644 OpenTofu \u0628\u0631\u0627\u06cc \u0627\u0633\u067e\u06cc\u06a9\u0631 VPC \u0628\u0627 TGW<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%db%8c%db%8c%d8%af-%db%8c%da%a9-%d9%85%d9%88%d9%84%d8%af-%d8%b1%d9%86%da%af-%d8%aa%d8%b5%d8%a7%d8%af%d9%81%db%8c-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d9%85\/#5_%D8%AF%D9%84%DB%8C%D9%84_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B4%D8%B1%DA%A9%D8%AA_%D8%AF%D8%B1_%DA%A9%D8%A7%D8%B1%DA%AF%D8%A7%D9%87_%D9%87%DA%A9_%D8%A7%D8%AE%D9%84%D8%A7%D9%82%DB%8C_%D8%AF%D8%B1_IIT_Jodhpur_Prometeo_2025\" >5 \u062f\u0644\u06cc\u0644 \u0628\u0631\u0627\u06cc \u0634\u0631\u06a9\u062a \u062f\u0631 \u06a9\u0627\u0631\u06af\u0627\u0647 \u0647\u06a9 \u0627\u062e\u0644\u0627\u0642\u06cc \u062f\u0631 IIT Jodhpur Prometeo 2025<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%db%8c%db%8c%d8%af-%db%8c%da%a9-%d9%85%d9%88%d9%84%d8%af-%d8%b1%d9%86%da%af-%d8%aa%d8%b5%d8%a7%d8%af%d9%81%db%8c-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d9%85\/#%F0%9F%9A%80_%D8%B3%D9%81%D8%B1_%D9%85%D9%86_%D8%A8%D9%87_%D8%B3%D9%85%D8%AA_%D8%AA%D9%88%D8%B3%D8%B9%D9%87_%D9%88%D8%A8_%D9%88_%D9%86%D8%B1%D9%85_%D8%A7%D9%81%D8%B2%D8%A7%D8%B1\" >\ud83d\ude80 \u0633\u0641\u0631 \u0645\u0646 \u0628\u0647 \u0633\u0645\u062a \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0648 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"1_HTML_boilerplate_%D8%B1%D8%A7_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  1. HTML boilerplate \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\n\n\n  <meta charset=\"UTF-8\"\/>\n  <meta http-equiv=\"X-UA=Compatible\" content=\"IE=edge\"\/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\n  <title>Random-Color Generator<\/title>\n\n  <!--Link stylesheets-->\n  <link rel=\"stylesheet\" href=\"https:\/\/dev.to\/egroene\/.\/styling.css\"\/>\n  <link rel=\"stylesheet\" href=\".\/responsive.css\"\/>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06af\u0631 \u0627\u0632 VS Code \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u00ab!\u00bb \u0631\u0627 \u062a\u0627\u06cc\u067e \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0633\u0646\u062f \u062e\u0627\u0644\u06cc HTML\u060c \u0633\u067e\u0633 &#8220;Enter&#8221; \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f \u062a\u0627 \u0627\u06cc\u0646 \u0642\u0633\u0645\u062a \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f (\u062f\u0631 \u0645\u0648\u0631\u062f \u0633\u0627\u06cc\u0631 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631\u0647\u0627\u06cc \u0645\u062a\u0646 \u0645\u0637\u0645\u0626\u0646 \u0646\u06cc\u0633\u062a\u06cc\u062f) \u0627\u06af\u0631 \u0642\u0628\u0644\u0627\u064b \u0622\u0646 \u0631\u0627 \u0646\u0645\u06cc \u062f\u0627\u0646\u0633\u062a\u06cc\u062f. \u062f\u0631 \u0632\u06cc\u0631 \u0635\u0641\u062d\u0647 \u062f\u06cc\u06af\u060c \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc\u06cc \u0628\u0647 \u0627\u0633\u0646\u0627\u062f CSS \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0645 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0645. \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc \u06a9\u0646\u0645 CSS \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f\u060c \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0641\u0627\u06cc\u0644 HTML \u0634\u0645\u0627 \u062e\u06cc\u0644\u06cc \u0628\u0632\u0631\u06af \u0648 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0646\u0634\u0648\u062f. \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u06cc \u06a9\u0647 \u0645\u0627 \u0645\u06cc \u0646\u0648\u06cc\u0633\u06cc\u0645 \u062e\u06cc\u0644\u06cc \u0637\u0648\u0644\u0627\u0646\u06cc \u0646\u06cc\u0633\u062a\u060c \u0645\u0646 \u0622\u0646 \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u0647 \u0641\u0627\u06cc\u0644 HTML \u062f\u0627\u062e\u0644 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u0645. <code><script\/><\/code> tag, which you\u2019ll see in step 3. If you wanted to have a separate JS file and link it to your HTML file, you could do this:\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code><script type=\"text\/javascript\" src=\"https:\/\/dev.to\/egroene\/main.js\"\/>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>Enter fullscreen mode<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>Exit fullscreen mode<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"2_Build_the_HTML_%E2%80%98skeleton\"><\/span>\n  2. Build the HTML \u2018skeleton\u2019\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\n  \n    \n    <h2><span class=\"ez-toc-section\" id=\"Please_select_a_color_by_clicking_the_button_below\"><\/span>Please select a color by clicking the button below.<span class=\"ez-toc-section-end\"><\/span><\/h2>\n  \n  \n    <span id=\"hex\"\/>\n    <button onclick=\"getNewColor()\">Get New Color!<\/button>\n  \n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>Enter fullscreen mode<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>Exit fullscreen mode<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg>\n<\/div>\n<\/div>\n<\/div>\nNow that we\u2019ve added the boilerplate HTML &amp; linked our CSS documents in the <code\/>, let\u2019s add the body &amp; build out our HTML. As you can see, the <code>getNewColor()<\/code> function will run whenever the page loads. More on this function in the following steps.\nIn the picture above, I add a <code>\n<div>, which contains a couple of headers, letting the user know where they are &amp; what to do. I then add another <code>\n<div>, which contains a <code><span\/><\/code> tag, which will eventually be populated with a HEX code and will display as text on the page. Next, I insert a button that the user clicks to generate a new HEX code. This is done by the <code>getNewColor()<\/code> function, which I will explain soon.\n<h2><span class=\"ez-toc-section\" id=\"3_Add_JavaScript\"><\/span>\n  3. Add JavaScript!\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\nNow we are at the point where the real magic starts to happen. Are you excited? I can tell. Here\u2019s how you do that:\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code><script><![CDATA[\n  function getNewColor() {\n    let symbols = \"0123456789ABCDEF\";\n    let color = \"#\";\n\n]]><\/script><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0633\u0628\u062a\u0627\u064b \u0633\u0627\u062f\u0647 \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646\u060c \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646\u0686\u0647 \u0631\u0627 \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645 \u062a\u0646\u0647\u0627 \u0628\u0627 \u06cc\u06a9 \u062a\u0627\u0628\u0639\u060c \u06a9\u0647 \u062f\u0631 \u0628\u0627\u0644\u0627 \u0630\u06a9\u0631 \u0634\u062f\u060c \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645. <code>getNewColor()<\/code> \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0698\u0646\u0631\u0627\u062a\u0648\u0631\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc HEX \u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0631\u0646\u06af \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0627\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0642\u0627\u062f\u06cc\u0631 RGB \u0646\u06cc\u0632 \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \u0627\u0633\u062a.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u0628\u062a\u062f\u0627 \u062a\u0645\u0627\u0645 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627\u06cc HEX \u0645\u0645\u06a9\u0646 (\u0627\u0639\u062f\u0627\u062f \u0635\u062d\u06cc\u062d 0-9 \u0648 \u062d\u0631\u0648\u0641 AF) \u0631\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 \u06cc\u06a9 \u0631\u0634\u062a\u0647\u060c \u062f\u0631 \u0645\u062a\u063a\u06cc\u0631\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645. <code>symbols<\/code>.<\/p>\n<p>\u0633\u067e\u0633\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u06a9\u0646\u06cc\u0645 <code>color<\/code> \u0645\u062a\u063a\u06cc\u0631 \u0628\u0627 \u0639\u0644\u0627\u0645\u062a \u0647\u0634 \u0628\u0647 \u0634\u06a9\u0644 \u0631\u0634\u062a\u0647. \u0627\u06cc\u0646 \u0645\u062a\u063a\u06cc\u0631 \u062f\u0631 \u062d\u0644\u0642\u0647 \u062a\u0648\u0636\u06cc\u062d \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u062c\u0647\u0634 \u0645\u06cc \u06cc\u0627\u0628\u062f.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06a9\u0646\u0648\u0646 \u06cc\u06a9 \u062d\u0644\u0642\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u06a9\u0647 6 \u0628\u0627\u0631 \u0627\u062c\u0631\u0627 \u0634\u0648\u062f\u060c \u0632\u06cc\u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u06a9\u062f HEX 6 \u0645\u0642\u062f\u0627\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. \u0628\u0631\u0627\u06cc \u0647\u0631 \u062a\u06a9\u0631\u0627\u0631 \u062d\u0644\u0642\u0647\u060c \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u062a\u0635\u0627\u062f\u0641\u06cc \u0645\u0646\u0641\u0631\u062f \u0627\u0632 <code>symbols string<\/code> \u0628\u0647 \u0645\u062a\u063a\u06cc\u0631 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u0634\u0648\u062f <code>color<\/code>\u060c \u06a9\u0647 \u0627\u06af\u0631 \u0628\u0647 \u062e\u0627\u0637\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u0628\u0647 \u0635\u0648\u0631\u062a \u0631\u0634\u062a\u0647 \u0627\u06cc \u0628\u0627 # \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647\u060c \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u0645\u0627 \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u06cc\u062f <code>getNewColor()<\/code>\u060c \u06cc\u06a9 \u06a9\u062f HEX \u062c\u062f\u06cc\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0622\u0646 \u06a9\u062f \u0631\u0627 \u062f\u0631 \u0635\u0641\u062d\u0647 HTML \u062e\u0648\u062f \u0627\u0639\u0645\u0627\u0644 \u06a9\u0646\u06cc\u0645.<\/p>\n<p><em>\u062f\u0631 \u062a\u062c\u0631\u0628\u0647 \u0645\u0646\u060c \u0628\u0647\u062a\u0631\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0631\u0627\u06cc \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0622\u0646 \u0627\u0633\u062a <code><script\/><\/code> tag at the end of the <code\/> tag. Some would vehemently argue otherwise, and they may have a point, but I\u2019m not going to discuss that in this article. Please have a keyboard war in the comment section below if you feel inclined, as it\u2019s good for engagement.<\/em>\n<h2><span class=\"ez-toc-section\" id=\"4_Apply_JS_to_HTML_file\"><\/span>\n  4. Apply JS to HTML file\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\nCool, we now have a function that gives us a random HEX code. However, this is useless unless we apply it to our HTML. In this case, it\u2019d be nice to change the background of the entire page, so the user can have a preview of the random color, and to put the HEX code in text format, so they can copy it. We\u2019ll first need to define these behaviors in our function:\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ continuing getRandomColor()...\n    document.body.style.background = color;\n    document.getElementByID(\"hex\").textContent = color;\n  \n\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>Enter fullscreen mode<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>Exit fullscreen mode<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg>\n<\/div>\n<\/div>\n<\/div>\nStill operating inside the <code>getNewColor()<\/code> function, we can access the <code>background<\/code> styling property with the first line of code you see in the above photo. We could have also used <code>backgroundColor<\/code>, which, by the way, translates to <code>background-color<\/code> in CSS. In this step, we set the variable <code>color<\/code>, which we randomly defined in the loop, as the background color for the page.\nIn the second line of code, we access the previously defined <code><span\/><\/code> tag by its id, \u2018hex\u2019. To add the variable <code>color<\/code> in text form, we can use the method <code>.textContent<\/code>, which I\u2019ve used here, or the <code>.innerHTML<\/code> method, to append color to the <code><span\/><\/code> tag. See the link at the end of this article to read more on the difference between these. In the way we laid out our HTML above, this text will appear directly above the button so the user can see the exact color displayed &amp; copy it if they want.\nAltogether, our JS looks like this:\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code><script><![CDATA[\n        function getNewColor() {\n            let symbols=\"0123456789ABCDEF\";\n            let color=\"#\"\n            for (let i = 0; i < 6; i++) { \/\/ Hex code can only go up to 6, so i < 6. This loop runs once for every function call.\n                color += symbols[Math.floor(Math.random() * 16)]; \/\/ 16 because of all the different possibilities in a hex code\n            }\n            document.body.style.background = color; \/\/ changes the background of the body to the value of var color\n            document.getElementById(\"hex\").textContent = color; \/* text value of var color (current color's hex code) is displayed above the button &#038; inside the span tag *\/\n        }\n    ]]><\/script>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"5_%D8%A8%D9%87_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%A8%DA%AF%D9%88%DB%8C%DB%8C%D8%AF_%DA%A9%D9%87_%DA%86%D9%87_%D8%B2%D9%85%D8%A7%D9%86%DB%8C_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF_%D8%B1%D8%A7_%D8%A7%D8%AC%D8%B1%D8%A7_%DA%A9%D9%86%D8%AF\"><\/span>\n<p>  5. \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u06af\u0648\u06cc\u06cc\u062f \u06a9\u0647 \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06af\u0631 \u0647\u0631\u06af\u0632 \u0622\u0646 \u0631\u0627 \u0627\u062c\u0631\u0627 \u0646\u06a9\u0646\u06cc\u0645\u060c \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0641\u0627\u06cc\u062f\u0647 \u0627\u06cc \u0646\u062f\u0627\u0631\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0628\u06af\u0648\u06cc\u06cc\u0645 \u06a9\u0647 \u062a\u0627\u0628\u0639 getNewColor () \u0645\u0627 \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0628\u0627\u06cc\u062f \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0634\u0648\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f getNewColor() \u0631\u0627 \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u0635\u0641\u062d\u0647 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \"\u062f\u0631\u06cc\u0627\u0641\u062a \u0631\u0646\u06af \u062c\u062f\u06cc\u062f!\" \u062f\u06a9\u0645\u0647 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u0634\u0648\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u062d\u0648\u0647 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0622\u0645\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ Run getNewColor() upon loading of page:\n\n\n\/\/ Run getNewColor() when clicking \"Get New Color!\" button:\n<button onclick=\"getNewColor()\">Get New Color!<\/button>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"6_%DB%8C%DA%A9_%D8%B8%D8%A7%D9%87%D8%B1_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%B1%D8%A7_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  6. \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0634\u0645\u0627 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0627\u06cc\u0646 \u0642\u0633\u0645\u062a \u0631\u0627 \u0647\u0631 \u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f \u06cc\u0627 \u0627\u0635\u0644\u0627\u064b \u0627\u0646\u062c\u0627\u0645 \u0646\u062f\u0647\u06cc\u062f\u060c \u0627\u0645\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0633\u062a\u0627\u06cc\u0644\u06cc \u06a9\u0647 \u0645\u0646 \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0645 \u0622\u0645\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/* styling.css *\/\nbody {\n    margin: 0;\n    padding: 0;\n    font-family: 'Courier New', Courier, monospace;\n}\n\n#heading {\n    background-color: rgba(0, 0, 0, 0.4);\n    color: white;\n    text-align: center;\n    padding: 16px;\n}\n\n.color {\n    text-align: center;\n    background-color: rgba(0, 0, 0, 0.4);\n    padding: 48px 32px;\n    margin: 136px 384px;\n}\n\n#hex, #rgb {\n    display: block;\n    color: white;\n    font-size: 40px;\n    text-transform: uppercase;\n    margin-bottom: 24px\n}\n\n#rgb {\n    font-size: 32px;\n}\n\n.color button {\n    background: none;\n    outline: none;\n    color: white;\n    border: 3px solid white;\n    cursor: pointer;\n    font-size: 24px;\n    padding: 8px;\n    font-family: 'Courier New', Courier, monospace;\n}\n\n\/* responsive.css *\/\n@media screen and (max-width: 768px) {\n    .color {\n        margin: 118px 213px;\n    }   \n\n    #hex {\n        font-size: 32px;\n    }\n\n    .color button {\n        font-size: 20px;\n        padding: 3px;\n    }\n}\n\n@media screen and (max-width: 425px) {\n    #heading {\n        font-size: small;\n    }\n\n    .color {\n        margin: 89px 66px;\n    }\n\n\n}\n\n@media screen and (max-width: 325px) {\n    .color {\n        margin: 101px 66px;\n    }\n\n    #hex {\n        font-size: 25px;\n    }\n\n    .color button {\n        font-size: 14px;\n        padding: 8px;\n    }\n}\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"7_%D8%A8%DB%8C%D8%A7%DB%8C%DB%8C%D8%AF_%D8%A2%D9%86_%D8%B1%D8%A7_%D8%A2%D8%B2%D9%85%D8%A7%DB%8C%D8%B4_%DA%A9%D9%86%DB%8C%D9%85\"><\/span>\n<p>  7. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u0645!<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06af\u0631 \u0645\u0631\u0627\u062d\u0644 \u0628\u0627\u0644\u0627 \u0631\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c \u0647\u0646\u06af\u0627\u0645 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0635\u0641\u062d\u0647 \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647\u060c \u06cc\u06a9 \u0631\u0646\u06af \u062a\u0635\u0627\u062f\u0641\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u0634\u0648\u062f. \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0635\u0641\u062d\u0647 \u0631\u0648\u06cc \u0631\u0646\u06af \u062a\u0635\u0627\u062f\u0641\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u0634\u0648\u062f \u0648 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u06a9\u062f HEX \u0631\u0627 \u06a9\u067e\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<hr\/>\n<p>\u0645\u0645\u0646\u0648\u0646 \u06a9\u0647 \u062a\u0627 \u0627\u06cc\u0646\u062c\u0627 \u062e\u0648\u0627\u0646\u062f\u06cc\u062f! \u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u0645\u0641\u06cc\u062f \u0628\u0648\u062f\u0647 \u0628\u0627\u0634\u062f. \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c \u06af\u0627\u0647\u06cc \u0627\u0648\u0642\u0627\u062a \u062e\u0648\u0627\u0646\u062f\u0646 \u0645\u0642\u0627\u0644\u0627\u062a \u0648 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0622\u0645\u0648\u0632\u0634\u200c\u0647\u0627 \u0627\u0634\u06a9\u0627\u0644\u06cc \u0646\u062f\u0627\u0631\u062f\u060c \u0627\u0645\u0627 \u0628\u0627\u06cc\u062f \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0641\u0627\u0647\u06cc\u0645 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f. \u0648\u0642\u062a\u06cc \u0641\u06a9\u0631 \u06a9\u0631\u062f\u06cc\u062f \u06a9\u0647 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0631\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u062f\u0631\u06a9 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f\u060c \u0633\u0639\u06cc \u06a9\u0646\u06cc\u062f \u062e\u0648\u062f\u062a\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0633\u0627\u0632\u06cc\u062f. \u0646\u0647\u060c \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0628\u0627\u0631 \u0627\u0648\u0644 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u062f\u0631\u0633\u062a \u0646\u062e\u0648\u0627\u0647\u06cc\u062f \u06af\u0631\u0641\u062a\u060c \u0627\u0645\u0627 \u0645\u0648\u0627\u062c\u0647 \u0634\u062f\u0646 \u0628\u0627 \u06cc\u06a9 \u0645\u0634\u06a9\u0644 \u0648 \u0641\u0647\u0645\u06cc\u062f\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u062e\u0648\u062f\u062a\u0627\u0646 \u0622\u0646 \u0631\u0627 \u062d\u0644 \u06a9\u0646\u06cc\u062f\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0641\u0627\u0647\u06cc\u0645\u06cc \u06a9\u0647 \u0622\u0645\u0648\u062e\u062a\u0647\u200c\u0627\u06cc\u062f\u060c \u0631\u0627\u0647\u06cc \u0628\u0631\u0627\u06cc \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0646 \u0628\u0647 \u06cc\u06a9 \u06a9\u062f\u0646\u0648\u06cc\u0633 \u0628\u0647\u062a\u0631 \u0627\u0633\u062a.<\/p>\n<p>\u0627\u06af\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u0645\u0641\u06cc\u062f \u0628\u0648\u062f\u060c \u0627\u0632 \u06cc\u06a9 \u0646\u0638\u0631 \u062e\u0648\u0628 \u06cc\u0627 \u0686\u0646\u062f \u06a9\u0641 \u0632\u062f\u0646 \u0633\u067e\u0627\u0633\u06af\u0632\u0627\u0631\u0645\u060c \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u0645 \u0628\u062f\u0627\u0646\u0645 \u0686\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0645\u0631\u062f\u0645 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a\u060c \u0648 \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u062a\u0648\u0627\u0646\u0645 \u062f\u0631 \u0622\u06cc\u0646\u062f\u0647 \u0631\u0648\u06cc \u0646\u0648\u0634\u062a\u0646 \u0622\u0646 \u0645\u062d\u062a\u0648\u0627 \u062a\u0645\u0631\u06a9\u0632 \u06a9\u0646\u0645.<\/p>\n<p>\u0645\u062b\u0644 \u0647\u0645\u06cc\u0634\u0647\u060c \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9!<\/p>\n<hr\/>\n<p>\u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u062f\u0631 \u0639\u0645\u0644 \u0628\u0628\u06cc\u0646\u06cc\u062f<\/p>\n<p>\u067e\u06cc\u0648\u0646\u062f \u0628\u0647 \u0645\u062e\u0632\u0646 GitHub \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647<\/p>\n<p>\u067e\u06cc\u0648\u0646\u062f \u0628\u0647 \u0645\u0642\u0627\u0644\u0647 \u062f\u0631 \u0645\u0648\u0631\u062f \u062a\u0641\u0627\u0648\u062a \u0628\u06cc\u0646 .innerHTML \u0648 .textContent<\/p>\n<p><em>\u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u062f\u0631 Medium \u0628\u0631\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0632\u0628\u0627\u0646 \u0627\u0646\u06af\u0644\u06cc\u0633\u06cc \u0633\u0627\u062f\u0647 \u062f\u0631 15 \u0627\u0648\u062a 2022 \u0645\u0646\u062a\u0634\u0631 \u0634\u062f<\/em><\/p>\n<\/p><\/div>\n<p>        <\/code><\/div>\n<section class=\"crayons-card crayons-card--secondary text-padding mb-4 print-hidden\" id=\"bottom-content-read-next\">\n<h2 class=\"crayons-subtitle-1\"><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B1_%D8%A7%D8%AF%D8%A7%D9%85%D9%87_%D8%A8%D8%AE%D9%88%D8%A7%D9%86%DB%8C%D8%AF\"><\/span>\u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"flex items-center\">\n          <span class=\"crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0\"><br \/>\n              <img decoding=\"async\" loading=\"lazy\" alt=\"\u0639\u06a9\u0633 \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 maria_bueno\" class=\"crayons-avatar__image\" width=\"100\" height=\"100\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=100,height=100,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2669604%2F955ce38f-1d08-4404-ba29-8ab81138cec3.png\" title=\"\"><br \/>\n          <\/span><\/p>\n<div>\n<h3 class=\"fs-xl mb-0 lh-tight\"><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C_%DA%A9%D8%A7%D9%85%D9%84_%D8%AA%D8%B3%D8%AA_%D9%85%D8%B1%D9%88%D8%B1%DA%AF%D8%B1_%D9%85%D8%AA%D9%82%D8%A7%D8%A8%D9%84_%D8%AF%D8%B1_%D8%B3%D8%A7%D9%84_2025\"><\/span>\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 \u062a\u0633\u062a \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u062a\u0642\u0627\u0628\u0644 \u062f\u0631 \u0633\u0627\u0644 2025<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p class=\"opacity-75 pt-1\">\n<p>              \u0645\u0627\u0631\u06cc\u0627 \u0628\u0648\u0626\u0646\u0648 - <time datetime=\"2025-01-09T13:17:46Z\">9 \u0698\u0627\u0646\u0648\u06cc\u0647<\/time>\n            <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"flex items-center\">\n          <span class=\"crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0\"><br \/>\n              <img decoding=\"async\" loading=\"lazy\" alt=\"\u0639\u06a9\u0633 \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 cyber_gavin_038a51f0d5c30\" class=\"crayons-avatar__image\" width=\"100\" height=\"100\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=100,height=100,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2216778%2F6643f9cc-7c86-4ffc-9e10-40c2cbdd0f76.png\" title=\"\"><br \/>\n          <\/span><\/p>\n<div>\n<h3 class=\"fs-xl mb-0 lh-tight\"><span class=\"ez-toc-section\" id=\"%D9%85%D8%A7%DA%98%D9%88%D9%84_OpenTofu_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A7%D8%B3%D9%BE%DB%8C%DA%A9%D8%B1_VPC_%D8%A8%D8%A7_TGW\"><\/span>\u0645\u0627\u0698\u0648\u0644 OpenTofu \u0628\u0631\u0627\u06cc \u0627\u0633\u067e\u06cc\u06a9\u0631 VPC \u0628\u0627 TGW<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p class=\"opacity-75 pt-1\">\n<p>              \u0633\u0627\u06cc\u0628\u0631\u06af\u0627\u0648\u06cc\u0646 - <time datetime=\"2025-01-05T06:46:44Z\">5 \u0698\u0627\u0646\u0648\u06cc\u0647<\/time>\n            <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"flex items-center\">\n          <span class=\"crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0\"><br \/>\n              <img decoding=\"async\" loading=\"lazy\" alt=\"\u0639\u06a9\u0633 \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 daksh_kataria_9c4197f3f7c\" class=\"crayons-avatar__image\" width=\"100\" height=\"100\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=100,height=100,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2458563%2F7671ea03-f791-4ab5-8964-b382aa8af003.jpg\" title=\"\"><br \/>\n          <\/span><\/p>\n<div>\n<h3 class=\"fs-xl mb-0 lh-tight\"><span class=\"ez-toc-section\" id=\"5_%D8%AF%D9%84%DB%8C%D9%84_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B4%D8%B1%DA%A9%D8%AA_%D8%AF%D8%B1_%DA%A9%D8%A7%D8%B1%DA%AF%D8%A7%D9%87_%D9%87%DA%A9_%D8%A7%D8%AE%D9%84%D8%A7%D9%82%DB%8C_%D8%AF%D8%B1_IIT_Jodhpur_Prometeo_2025\"><\/span>5 \u062f\u0644\u06cc\u0644 \u0628\u0631\u0627\u06cc \u0634\u0631\u06a9\u062a \u062f\u0631 \u06a9\u0627\u0631\u06af\u0627\u0647 \u0647\u06a9 \u0627\u062e\u0644\u0627\u0642\u06cc \u062f\u0631 IIT Jodhpur Prometeo 2025<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p class=\"opacity-75 pt-1\">\n<p>              \u062f\u0627\u06a9\u0634 \u06a9\u0627\u062a\u0627\u0631\u06cc\u0627 - <time datetime=\"2025-01-05T07:17:46Z\">5 \u0698\u0627\u0646\u0648\u06cc\u0647<\/time>\n            <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"flex items-center\">\n          <span class=\"crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0\"><br \/>\n              <img decoding=\"async\" loading=\"lazy\" alt=\"\u0639\u06a9\u0633 \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 shamsuddin_hamdule\" class=\"crayons-avatar__image\" width=\"100\" height=\"100\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=100,height=100,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2656473%2Fcbee2d38-3f81-4eec-a54f-03f8dffe2032.png\" title=\"\"><br \/>\n          <\/span><\/p>\n<div>\n<h3 class=\"fs-xl mb-0 lh-tight\"><span class=\"ez-toc-section\" id=\"%F0%9F%9A%80_%D8%B3%D9%81%D8%B1_%D9%85%D9%86_%D8%A8%D9%87_%D8%B3%D9%85%D8%AA_%D8%AA%D9%88%D8%B3%D8%B9%D9%87_%D9%88%D8%A8_%D9%88_%D9%86%D8%B1%D9%85_%D8%A7%D9%81%D8%B2%D8%A7%D8%B1\"><\/span>\ud83d\ude80 \u0633\u0641\u0631 \u0645\u0646 \u0628\u0647 \u0633\u0645\u062a \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0648 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p class=\"opacity-75 pt-1\">\n<p>              \u0634\u0645\u0633 \u0627\u0644\u062f\u06cc\u0646 \u062d\u0645\u062f\u0648\u0644\u0647 - <time datetime=\"2025-01-05T03:57:44Z\">5 \u0698\u0627\u0646\u0648\u06cc\u0647<\/time>\n            <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>    <\/code><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u06af\u0631 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062a\u0627\u0632\u0647 \u06a9\u0627\u0631 \u0647\u0633\u062a\u06cc\u062f\u060c \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0686\u06cc\u0632\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0646\u062d\u0648\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0646\u0648\u0627\u0639 \u062f\u0627\u062f\u0647\u060c \u0645\u0646\u0637\u0642\u060c \u062a\u0648\u0627\u0628\u0639 \u0648 \u063a\u06cc\u0631\u0647 \u06cc\u0627\u062f \u06af\u0631\u0641\u062a\u0647 \u0627\u06cc\u062f. \u0627\u06cc\u0646 \u062e\u0648\u0628 \u0627\u0633\u062a\u061b \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JS \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631\u060c \u0628\u0627\u06cc\u062f \u0627\u0632 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0628\u0633\u062a\u0647 \u0628\u0647 \u062f\u0627\u0645\u0646\u0647 \u062a\u0648\u062c\u0647 \u0634\u0645\u0627\u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0647 \u0632\u0648\u062f\u06cc \u062a\u0645\u0627\u06cc\u0644 \u0634\u062f\u06cc\u062f\u06cc &hellip;<\/p>\n","protected":false},"author":2,"featured_media":92834,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzijg4bq75ww72kq5dkul.jpg","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-92833","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/92833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=92833"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/92833\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/92834"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=92833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=92833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=92833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}