{"id":2269,"date":"2025-09-18T08:31:41","date_gmt":"2025-09-18T08:31:41","guid":{"rendered":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/?page_id=2269"},"modified":"2025-09-18T10:19:38","modified_gmt":"2025-09-18T10:19:38","slug":"github-api-paring","status":"publish","type":"page","link":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/github-api-paring\/","title":{"rendered":"H7: GitHub API p\u00e4ring"},"content":{"rendered":"\n<p>See juhend selgitab, kuidas luua lihtne veebirakendus, mis kasutab JavaScripti Fetch API-d GitHubi avaliku API kaudu kasutajaprofiili andmete hankimiseks ja kuvamiseks. Rakendus v\u00f5imaldab kasutajal sisestada GitHubi kasutajanime ning p\u00e4rib seej\u00e4rel selle kasutaja avalikke andmeid, nagu nimi, ID, avalike repode arv ja profiililink. Andmete hankimine on as\u00fcnkroonne ja sisaldab minu poolt lisatud veat\u00f6\u00f6tlust, mis kuvab vastavad teated, kui kasutaja ei ole identifitseeritud v\u00f5i API p\u00e4ring eba\u00f5nnestub.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML:<\/h2>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:clamp(16px, 1rem, 24px);font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#e1e4e8;--cbp-line-number-width:calc(2 * 0.6 * 1rem);line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2f363c;color:#d3d7dd\">HTML<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;!DOCTYPE html>\n&lt;html>\n  &lt;head>\n    &lt;meta charset=\"UTF-8\" \/>\n    &lt;link rel=\"stylesheet\" href=\"styles.css\" \/>\n  &lt;\/head>\n\n  &lt;body>\n    &lt;div id=\"app\">&lt;\/div>\n\n    &lt;script src=\".\/index.js\" type=\"module\">&lt;\/script>\n  &lt;\/body>\n&lt;\/html><\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">charset<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;UTF-8&quot;<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">link<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">rel<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;stylesheet&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">href<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;styles.css&quot;<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;app&quot;<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">src<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;.\/index.js&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;module&quot;<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>CSS:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:clamp(16px, 1rem, 24px);font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#e1e4e8;--cbp-line-number-width:calc(2 * 0.6 * 1rem);line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2f363c;color:#d3d7dd\">CSS<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>body {\n  font-family: Arial, Helvetica, sans-serif, sans-serif;\n  background: #f0f2f5;\n  margin: 0;\n  padding: 20px;\n  display: flex;\n  justify-content: center;\n}\n\n#app > div {\n  background: white;\n  padding: 25px 30px;\n  border-radius: 10px;\n  width: 350px;\n}\n\nimg {\n  width: 100%;\n}\n\nh1 {\n  margin-top: 0;\n  color: #24292e;\n}\n\np {\n  font-size: 14px;\n  color: #555;\n}\n\ninput {\n  width: 100%;\n  padding: 8px 10px;\n  font-size: 14px;\n  border-radius: 5px;\n  border: 1px solid gray;\n  margin-bottom: 20px;\n  box-sizing: border-box;\n  outline-color: #4f81bb;\n}\n\ninput:focus {\n  border-color: #0366d6;\n}\n\n.content p,\n.content h1 {\n  margin: 8px 0;\n}\n\na {\n  color: #0366d6;\n  text-decoration: none;\n}\n\na:hover {\n  text-decoration: underline;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">font-family<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">Arial<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #79B8FF\">Helvetica<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #79B8FF\">sans-serif<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #79B8FF\">sans-serif<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">background<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#f0f2f5<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">display<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">flex<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">justify-content<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">center<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">#app<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">&gt;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">background<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">white<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">25<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">30<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">350<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">img<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">100<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">h1<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">margin-top<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#24292e<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">font-size<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">14<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#555<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">100<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">8<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">font-size<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">14<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">gray<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">margin-bottom<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">box-sizing<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">border-box<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">outline-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#4f81bb<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">input<\/span><span style=\"color: #B392F0\">:focus<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">border-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#0366d6<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">.content<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">.content<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #85E89D\">h1<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">8<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">a<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#0366d6<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">text-decoration<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">none<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">a<\/span><span style=\"color: #B392F0\">:hover<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">text-decoration<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">underline<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>JavaScript:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:clamp(16px, 1rem, 24px);font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#e1e4e8;--cbp-line-number-width:calc(2 * 0.6 * 1rem);line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2f363c;color:#d3d7dd\">JavaScript<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>let givenProfile = \"\";\nlet profileName = \"\";\nlet profileAvatar = \"\";\nlet profileId = \"\";\nlet profileLink = \"\";\nlet profileRepos = \"\";\n\nfunction renderPage() {\n  document.getElementById(\"app\").innerHTML = `\n    &lt;div>\n      &lt;h1>Github profile viewer&lt;\/h1>\n      &lt;p>Please enter profile name:&lt;\/p>\n      &lt;input \/>\n      &lt;div class=\"content\">\n        &lt;h1 id=\"name\">Name: ${profileName}&lt;\/h1>\n        &lt;img src=${profileAvatar}\/>\n        &lt;p id=\"id\">Id: ${profileId}&lt;\/p>\n        &lt;p id=\"repos\">Public repos: ${profileRepos}&lt;\/p>\n        &lt;p id=\"profileurl\">Link: &lt;a href=\"${profileLink}\" target=\"_blank\">${profileLink}&lt;\/a>&lt;\/p>\n \n      &lt;\/div>\n    &lt;\/div>\n  `;\n\n  const input = document.querySelector(\"input\");\n  input.addEventListener(\"change\", updateValue);\n}\n\nrenderPage();\n\nfunction updateValue(e) {\n  givenProfile = e.target.value;\n  fetchProfile();\n}\n\nasync function fetchProfile() {\n  try {\n    const reqHeaders = new Headers();\n    reqHeaders.set(\"Authorization\", \"URL\");\n    const options = {\n      headers: reqHeaders,\n    };\n    const response = await fetch(\n      `https:\/\/api.github.com\/users\/${givenProfile}`,\n      options\n    );\n    const rateLimitRemaining = response.headers.get(\"X-RateLimit-Remaining\");\n\n    if (!response.ok) {\n      profileName = \"User not found\";\n      profileAvatar = \"\";\n      profileId = \"\";\n      profileLink = \"\";\n      profileRepos = \"\";\n    } else {\n      const data = await response.json();\n      profileName = data.login;\n      profileAvatar = data.avatar_url;\n      profileId = data.id;\n      profileLink = data.html_url;\n      profileRepos = data.public_repos;\n    }\n\n    if (rateLimitRemaining === \"0\") {\n      profileName = \"API rate limit reached. Try again later.\";\n      profileAvatar = \"\";\n      profileId = \"\";\n      profileLink = \"\";\n      profileRepos = \"\";\n    }\n  } catch (error) {\n    profileName = \"Error fetching data\";\n    profileAvatar = \"\";\n    profileId = \"\";\n    profileLink = \"\";\n    profileRepos = \"\";\n  }\n  renderPage();\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F97583\">let<\/span><span style=\"color: #E1E4E8\"> givenProfile <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">let<\/span><span style=\"color: #E1E4E8\"> profileName <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">let<\/span><span style=\"color: #E1E4E8\"> profileAvatar <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">let<\/span><span style=\"color: #E1E4E8\"> profileId <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">let<\/span><span style=\"color: #E1E4E8\"> profileLink <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">let<\/span><span style=\"color: #E1E4E8\"> profileRepos <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">renderPage<\/span><span style=\"color: #E1E4E8\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  document.<\/span><span style=\"color: #B392F0\">getElementById<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&quot;app&quot;<\/span><span style=\"color: #E1E4E8\">).innerHTML <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">`<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">    &lt;div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">      &lt;h1&gt;Github profile viewer&lt;\/h1&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">      &lt;p&gt;Please enter profile name:&lt;\/p&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">      &lt;input \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">      &lt;div class=&quot;content&quot;&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">        &lt;h1 id=&quot;name&quot;&gt;Name: ${<\/span><span style=\"color: #E1E4E8\">profileName<\/span><span style=\"color: #9ECBFF\">}&lt;\/h1&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">        &lt;img src=${<\/span><span style=\"color: #E1E4E8\">profileAvatar<\/span><span style=\"color: #9ECBFF\">}\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">        &lt;p id=&quot;id&quot;&gt;Id: ${<\/span><span style=\"color: #E1E4E8\">profileId<\/span><span style=\"color: #9ECBFF\">}&lt;\/p&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">        &lt;p id=&quot;repos&quot;&gt;Public repos: ${<\/span><span style=\"color: #E1E4E8\">profileRepos<\/span><span style=\"color: #9ECBFF\">}&lt;\/p&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">        &lt;p id=&quot;profileurl&quot;&gt;Link: &lt;a href=&quot;${<\/span><span style=\"color: #E1E4E8\">profileLink<\/span><span style=\"color: #9ECBFF\">}&quot; target=&quot;_blank&quot;&gt;${<\/span><span style=\"color: #E1E4E8\">profileLink<\/span><span style=\"color: #9ECBFF\">}&lt;\/a&gt;&lt;\/p&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">      &lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">    &lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #9ECBFF\">  `<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> document.<\/span><span style=\"color: #B392F0\">querySelector<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&quot;input&quot;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  input.<\/span><span style=\"color: #B392F0\">addEventListener<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&quot;change&quot;<\/span><span style=\"color: #E1E4E8\">, updateValue);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">renderPage<\/span><span style=\"color: #E1E4E8\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">updateValue<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #FFAB70\">e<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  givenProfile <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> e.target.value;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #B392F0\">fetchProfile<\/span><span style=\"color: #E1E4E8\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">async<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">fetchProfile<\/span><span style=\"color: #E1E4E8\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #F97583\">try<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">reqHeaders<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">new<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">Headers<\/span><span style=\"color: #E1E4E8\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    reqHeaders.<\/span><span style=\"color: #B392F0\">set<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&quot;Authorization&quot;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #9ECBFF\">&quot;URL&quot;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">options<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      headers: reqHeaders,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    };<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">response<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">await<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">fetch<\/span><span style=\"color: #E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #9ECBFF\">`https:\/\/api.github.com\/users\/${<\/span><span style=\"color: #E1E4E8\">givenProfile<\/span><span style=\"color: #9ECBFF\">}`<\/span><span style=\"color: #E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      options<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">rateLimitRemaining<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> response.headers.<\/span><span style=\"color: #B392F0\">get<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&quot;X-RateLimit-Remaining&quot;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (<\/span><span style=\"color: #F97583\">!<\/span><span style=\"color: #E1E4E8\">response.ok) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      profileName <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;User not found&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      profileAvatar <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      profileId <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      profileLink <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      profileRepos <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    } <\/span><span style=\"color: #F97583\">else<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">const<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">data<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">await<\/span><span style=\"color: #E1E4E8\"> response.<\/span><span style=\"color: #B392F0\">json<\/span><span style=\"color: #E1E4E8\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      profileName <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> data.login;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      profileAvatar <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> data.avatar_url;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      profileId <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> data.id;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      profileLink <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> data.html_url;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      profileRepos <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> data.public_repos;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (rateLimitRemaining <\/span><span style=\"color: #F97583\">===<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;0&quot;<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      profileName <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;API rate limit reached. Try again later.&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      profileAvatar <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      profileId <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      profileLink <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      profileRepos <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  } <\/span><span style=\"color: #F97583\">catch<\/span><span style=\"color: #E1E4E8\"> (error) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    profileName <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;Error fetching data&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    profileAvatar <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    profileId <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    profileLink <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    profileRepos <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #B392F0\">renderPage<\/span><span style=\"color: #E1E4E8\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-full wp-duotone-unset-1\"><img loading=\"lazy\" decoding=\"async\" width=\"483\" height=\"715\" src=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/528EA031-ECB8-4DBE-BF86-A33F718C1320.png\" alt=\"\" class=\"wp-image-2308\" srcset=\"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/528EA031-ECB8-4DBE-BF86-A33F718C1320.png 483w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/528EA031-ECB8-4DBE-BF86-A33F718C1320-203x300.png 203w, https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-content\/uploads\/2025\/09\/528EA031-ECB8-4DBE-BF86-A33F718C1320-101x150.png 101w\" sizes=\"auto, (max-width: 483px) 100vw, 483px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>See juhend selgitab, kuidas luua lihtne veebirakendus, mis kasutab JavaScripti Fetch API-d GitHubi avaliku API kaudu kasutajaprofiili andmete hankimiseks ja kuvamiseks. Rakendus v\u00f5imaldab kasutajal sisestada GitHubi kasutajanime ning p\u00e4rib seej\u00e4rel selle kasutaja avalikke andmeid, nagu nimi, ID, avalike repode arv ja profiililink. Andmete hankimine on as\u00fcnkroonne ja sisaldab minu poolt lisatud veat\u00f6\u00f6tlust, mis kuvab vastavad [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2269","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages\/2269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/comments?post=2269"}],"version-history":[{"count":7,"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages\/2269\/revisions"}],"predecessor-version":[{"id":2309,"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/pages\/2269\/revisions\/2309"}],"wp:attachment":[{"href":"https:\/\/vladislavkudriashev23.thkit.ee\/WP\/wp-json\/wp\/v2\/media?parent=2269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}