{"id":1511,"date":"2025-05-13T00:40:20","date_gmt":"2025-05-12T21:40:20","guid":{"rendered":"https:\/\/bilimbilgi.com\/?p=1511"},"modified":"2025-05-13T00:40:59","modified_gmt":"2025-05-12T21:40:59","slug":"sifre-goster-veya-gizle-uygulamasi","status":"publish","type":"post","link":"https:\/\/bilimbilgi.com\/?p=1511","title":{"rendered":"\u015eifre g\u00f6ster veya gizle uygulamas\u0131"},"content":{"rendered":"\n<p>Uygulama 3 farkl\u0131 dosyadan olu\u015fuyor. <\/p>\n\n\n\n<p>\u0130lk dosya index ad\u0131ndaki html dosyas\u0131d\u0131r. \u015eifre g\u00f6ster veya gizle uygulamas\u0131 i\u00e7in kullan\u0131c\u0131 ad\u0131 ve \u015fifre i\u00e7in input elementleri kullan\u0131lm\u0131\u015ft\u0131r. \u015eifre g\u00f6ster ve gizle i\u00e7in checbox elementi kullan\u0131lm\u0131\u015ft\u0131r. Bu elementler id&#8217;si giris olan div i\u00e7ine ekran\u0131n \u00fcstten ve yandan ortalanacak \u015fekilde yerle\u015ftirilmi\u015ftir.<\/p>\n\n\n\n<p>\u0130kinci dosya style ad\u0131ndaki css dosyas\u0131d\u0131r. index adl\u0131 html dosyas\u0131na harici olarak eklenmi\u015ftir. Koyu tema renkleri kullan\u0131lm\u0131\u015ft\u0131r.<\/p>\n\n\n\n<p>\u00dc\u00e7\u00fcnc\u00fc dosya ise  script ad\u0131ndaki java script dosyas\u0131d\u0131r. De\u011fi\u015fkenler tan\u0131mlanm\u0131\u015ft\u0131r. Daha sonra id&#8217;si goster olan chexbox elementine t\u0131klan\u0131nca ne olaca\u011f\u0131 t\u0131klanmad\u0131\u011f\u0131nda ne olaca\u011f\u0131 if else ile yap\u0131lm\u0131\u015ft\u0131r.<\/p>\n\n\n\n<p>index.html dosyas\u0131 a\u015fa\u011f\u0131daki gibidir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"tr\">\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  &lt;title>Anasayfa&lt;\/title>\n  &lt;link rel=\"stylesheet\" href=\"style.css\">\n&lt;\/head>\n&lt;body>\n&lt;div class=\"ana\">\n  &lt;div class=\"giris\">\n    &lt;input type=\"password\" id=\"sifre\" placeholder=\"\u015eifrenizi giriniz\">\n    &lt;div class=\"sifregizle\">&lt;input type=\"checkbox\" id=\"goster\">&lt;p>\u015eifreyi g\u00f6ster&lt;\/p>&lt;\/div>\n\n    &lt;\/div>\n    &lt;script src=\"script.js\">\n\n    &lt;\/script>\n\n&lt;\/div>\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>style.css dosyas\u0131 a\u015fa\u011f\u0131daki gibidir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>*{\n  padding: 0;\n  margin: 0;\n}\n\n.ana {\n  width: 100%;\n  height: 100vh;\n  position: relative;\n  background-color: #181818;\n}\n\n.giris {\n  width: 350px;\n  height: auto;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50% , -50%);\n  position: absolute;\n  background-color: #242424;\n  padding: 20px 25px;\n  color: #E0E0E0;\n\n}\n\n#sifre {\n  width: 100%;\n  font-size: 30px;\n  padding: 8px 0px;\n  outline: none;\n  border-width: 0px 0px 2px 0px;\n  color: #E0E0E0;\n\n}\n\n.sifregizle {\n  display: flex;\n  margin-top: 10px;\n}\n\n.sifregizle p {\n  margin-left: 10px;\n  font-size: 18px;\n  color: #E0E0E0;\n}\n\n.sifregizle input&#91;type=\"checkbox\"] {\n  width: 16px;\n}<\/code><\/pre>\n\n\n\n<p>script.js dosyas\u0131 a\u015fa\u011f\u0131daki gibidir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let sifre = document.getElementById('sifre');\nlet goster = document.getElementById('goster');\n\ngoster.onclick = function() {\n  if(goster.checked) {\n    sifre.type = 'text';\n  }else {\n    sifre.type = 'password';\n  }\n};<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Uygulama 3 farkl\u0131 dosyadan olu\u015fuyor. \u0130lk dosya index ad\u0131ndaki html dosyas\u0131d\u0131r. \u015eifre g\u00f6ster veya gizle uygulamas\u0131 i\u00e7in kullan\u0131c\u0131 ad\u0131 ve[&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[785],"tags":[],"class_list":["post-1511","post","type-post","status-publish","format-standard","hentry","category-html-css-js"],"_links":{"self":[{"href":"https:\/\/bilimbilgi.com\/index.php?rest_route=\/wp\/v2\/posts\/1511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bilimbilgi.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bilimbilgi.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bilimbilgi.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bilimbilgi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1511"}],"version-history":[{"count":1,"href":"https:\/\/bilimbilgi.com\/index.php?rest_route=\/wp\/v2\/posts\/1511\/revisions"}],"predecessor-version":[{"id":1512,"href":"https:\/\/bilimbilgi.com\/index.php?rest_route=\/wp\/v2\/posts\/1511\/revisions\/1512"}],"wp:attachment":[{"href":"https:\/\/bilimbilgi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bilimbilgi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bilimbilgi.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}