<!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>
<img src="images/profilpic.jpg" alt="Profil" title="Profil" height="150">
</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">
</div>
<div class="line">
<label>Über mich: </label>
<textarea name="uber" 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">
<img src="images/hiking.webp" alt="Wanderung" title="Wanderung" height="150">
<img src="images/yellow_jacked.webp" alt="Wanderung" title="Wanderung" width="250" height="150">
<img src="images/dog_human.jpg" alt="Hund" title="Hund" width="250" height="150">
</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>