HTML&CSS&JavaScript gelişmiş Kayıt Ol ve Giriş yap kodu ;

Katılım
9 Ara 2020
Konular
71
Mesajlar
255
Çözümler
1
Tepki puanı
218
Puanları
2,110
bunu index.html'e atın
HTML:
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>js deneme 14</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <script src="" async defer></script>
        <script src="JavaScript/kayit.js"></script>
        <div style="right: 10px;position:fixed;">
            <button id="ac">Giriş yap!</button>
            <button id="ac2">Kayıt Ol!</button>
        </div>
        <dialog id="dg">
            <h2>Giriş Yap!</h2>
            <form action="">
                <p>
                    <input type="text" id="klnc2">
                </p>
                <p>
                    <input type="text" id="sifre2">
                </p>
                <p>
                    <input
                        id="grsy"
                        type="button"
                        value=" Giriş Yap!"
                        onclick="grs()"
                    >
                    <button id="kapat">Kapat!</button>
                </p>
            </form>
        </dialog>
        <dialog id="dg2">
            <h2>Kayıt Ol!</h2>
            <form action="">
                <p>
                    <input type="text" id="klnc">
                </p>
                <p>
                    <input type="text" id="sifre">
                </p>
                <p>
                    <input
                        id="kyto"
                        type="button"
                        value="Kayıt Ol!"
                        onclick="kyt()"
                    >
                    <button id="kapat2">Kapat!</button>
                </p>
            </form>
        </dialog>
        <script>
      

            var modal = document.querySelector("#dg");
            var modal2 = document.querySelector("#dg2");
        
            document.querySelector("#ac").onclick=function(){
                modal.showModal()
                return false;
            }
            document.querySelector("#ac2").onclick=function(){
                modal2.showModal()
                return false;
            }
            document.querySelector("#kapat").onclick=function(){
                modal.close();
                return false;
            
            }
            document.querySelector("#kapat2").onclick=function(){
                modal2.close();
                return false;
            }
        </script>
        <style>
            dialog::backdrop{
                background: #30333a;
            }
            input {
              
                border-radius: 15px;
            }
            dialog{
                width: 300px;
                height: 200px;
                text-align: center;
                border: 2px solid black;
            }
            button:hover{
                box-shadow: -10px 10px black;
                cursor:pointer;
                background:grey;
            }
            #kyto:hover{
                box-shadow: -10px 10px black;
                cursor:pointer;
                background:grey;
            }
            #grsy:hover{
                box-shadow: -10px 10px black;
                cursor:pointer;
                background:grey;
            }
            button{
                width: 100px;
                height: 40px;
                margin-left: 15px;
                border-radius: 15px;
                color:white;
                background: black;
            }
            #kyto{
                width: 100px;
                height: 40px;
                border-radius: 15px;
                color:white;
                background: black;
                cursor:pointer;
            }
            #grsy{
                width: 100px;
                height: 40px;
                border-radius: 15px;
                color:white;
                background: black;
                cursor:pointer;
            }
        </style>
    </body>
</html>
bunu da kayit.js'ye atın
JavaScript:
    var klnca=[]
    var sifrea=[]
    var ksa=[]
    function kyt() {

        var kullaniciadi = document.getElementById("klnc").value
        var sifre = document.getElementById("sifre").value
        var kon = klnca.includes(kullaniciadi)
        if(kon==true){
            alert("Bu kullanıcı adı daha önce kullanılmış.")
            document.getElementById("klnc").value=""
        } 
         else if(!kullaniciadi||!sifre){
        alert("Lütfen boşlukları doldurun.")
        } 
 
        else{
            klnca.push(kullaniciadi);
            sifrea.push(sifre);
            ksa.push(kullaniciadi+sifre);
            document.getElementById("klnc").value="";
            document.getElementById("sifre").value="";
            alert("Kayıt Başarılı!");
            modal2.close()
        }
       
    }
    var uws = 0

    function grs(){
        var uws = 0
        var k = document.getElementById("klnc2").value
        var s = document.getElementById("sifre2").value
        var kt = k+s
        var ktkn = ksa.includes(kt)
        if(ktkn==true){
            alert("Giriş Başarılı");
            modal.close();
            modal.close();
            document.getElementById("klnc2").value="";
            document.getElementById("sifre2").value="";
           
        }
else if(!k||!s){
        alert("Lütfen boşlukları doldurun.")
    }
        else{
            alert("Kullanıcı adı veya şifre yanlış")
            document.getElementById("sifre2").value=""
        }
       
    }
1610583272428.png

1610583287883.png

1610583300404.png
 
Katılım
13 Kas 2019
Konular
41
Mesajlar
398
Tepki puanı
291
Puanları
3,310
Gayet güzel bir kodlama olmuş ellerine sağlık.
 
Katılım
6 Ocak 2023
Konular
0
Mesajlar
2
Tepki puanı
0
Puanları
55
bunu yaptım çalıştı ama ana sayfada giriş yap butonunu değişmek istiyorum yani giriş yaptıktan sonra o button ismi değişsin ve giriş yapanın isimi olsun galiba olmaz ya
 
Katılım
6 Ocak 2023
Konular
0
Mesajlar
2
Tepki puanı
0
Puanları
55
ama yalnız bi hata var kayıt oluyorsun sonra giriş yapıyorsun sayfayı yeniliyosun ve giriş yaptığım zaman Kullanıcı Adi veya şifre yanlış diyor