basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    Es wird vor dem Absenden geschaut ob alle Felder ausgefüllt sind

    Code

                                        
                                    
    <!DOCTYPE html>
    <html lang="de">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Instagram 2.0</title>
        <style>
    :root{
       --bright: #e0c2a5;
       --brown: #684536;
       --background: #fffee9;
       --cream: #f3ecc5;
    }
    @font-face {
       font-family: Open Sans;
       src: url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap");
    }  
    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }
    body{
      display:flex;
      flex-direction:column;
      background:var(--background);
    }
    header {
      display:flex;
      flex-direction:row;
      justify-content:flex-start;
      margin-left:50px;
      padding: 30px 0;
    }
    header h1 {
      font-family: Open Sans;
      font-size: 40px;
    }
    nav ul {
      height: 60px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      background: var(--bright);
      margin-bottom: 3px;
      align-content: space-around;
      align-items: center;
    }
    nav ul li{
      flex:1;
      list-style:none;
      text-align:center;
    }
    nav ul li a{
      text-align:center;
      text-decoration:none;
      color:black;
      font-size:20px;
    }
    a:hover{
      color:var(--brown);  
    }
    div.label {   
      font-family: Open Sans;
      font-size: 20px;
      background:var(--bright);
      padding: 15px;
    }
    main{
      padding-top: 1%;
      display: flex;
      flex-direction:column;
    }
    .ueber {
      display: flex;
      flex-direction: column;
      align-items: center;
      height:90px;
      padding:30px 0 40px 0;
    }
    h2{
      font-family: Open Sans;
      font-size: 20px;
    }
    .line {
      display: flex;
      flex-direction: column;
      background: var(--cream);
      align-content: stretch;
      align-items: center;
      margin:5px 0;
    }
    p {
      font-family: Open Sans;
    }
    footer{
      display:flex;
    }
          textarea{
            width:100%;
            min-height:100px;
          }
    footer img{
      width:calc(100% / 3);
      text-align:center;
      max-height:50px;
    }
        </style>
    </head>
    <body>
       <header>
          <h1> <a href="instagram-clone_schlachter.html"> Gramml</a></h1> 
       </header>
       <nav>
          <ul id="navibereich">
              <li id="navi01"> <a href="profil.html"> Mein Profil </a> </li>
              <li id="navi02"> <a href="instagram-clone_schlachter.html"> Entdecken</a> </li>
              <li id="navi03"> <a href="upload.html">Upload Picture</a> </li>
          </ul>
       </nav>
       <div class="label">
           <label>Suche:</label>
           <input id="textsuxhe" type="text"/>
       </div>
       <main>
         <div class="ueber">
            <h2>Lukas_W3br</h2> 
         </div>
         <div class="line" id="Eingabe">
            <div class="field">
               <input id="Vorname" type="text" name="Vorname" placeholder="Vorname" />
            </div>
            <div class="field">
               <input id="Nachname" type="text" name="Nachname" placeholder="Nachname" />
            </div>
            <div class="field">
               <input id="Geburtstag" type="date" name="Geburtstag" placeholder="Geburtsdatum" />
            </div>
            <div class="line">
               <label>Über mich: </label> 
               <textarea name="Über" id="ueber" placeholder="Über mich:"> </textarea>
            </div>
            <div class="line">   
               <p> <input id="check" type="checkbox" name="AGB" value="News"> Datenschutzerklärung und AGB akzeptieren. </p> 
            </div>
            <div class="line">
               <button id="enter" class=" button" type="submit">Speichern</button>
            </div>
         </div>
       </main>
       <footer class="LukasBilder">
       </footer>
    <script>
    var VornameInput = document.getElementById("Vorname");
    var NachnameInput = document.getElementById("Nachname");
    var GeburtstagInput = document.getElementById("Geburtstag");
    var ueberMichInput = document.getElementById("ueber");
    var che= document.getElementById("check");
    var minlenge=5;
    var but=document.getElementById("enter");
    but.addEventListener("click",function(){
      var error='';
        if (VornameInput.value=='') {
            //console.log("Vorname:", VornameInput.value);
            error+="\nBitte gebe dein Vorname ein ! ";
        }
        if (NachnameInput.value=='') {
            //console.log("Nachname:", NachnameInput.value);
            error+="\nBitte gebe dein Nachname ein ! ";
        }
        if (!GeburtstagInput.value) {
            // console.log("Geburtstag :", GeburtstagInput.value);
            error+="\nBitte gebe dein geburtstag ein ! ";
        }
        if (ueberMichInput.value=='') {
       // console.log('UeberMich: gebe mindestenst '+minlenge+' zeichen in über mich ein'); 
            error+='\nÜeber Mich: gebe mindestenst '+minlenge+' zeichen in über mich ein !';
        }else{
            var menge=lange();
            error+=menge;
        }
        function lange(){
           if(ueberMichInput.value.length<=minlenge){
              //console.log("Lenge text", ueberMichInput.value.length+1);
            return "\nDu must noch mindestens "+(minlenge-ueberMichInput.value.length+1)+" an zeichen Über dich angeben angeben !";
           }else{
           }
        }
        if(check.checked==false){
           error+="\nSie müssen die datenschutz checkbox noch anklicken !";
        }
        console.log(error+'='+error.length)
        if(error=='undefined' || error==null || error==''){
           
        alert('alle,daten richtig ausgefüllt');
        }else if(error.length>10){
            alert(error);
        }
    })
    </script>
    </body>
    </html>