SabriHakuli/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Input Challenge</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <style id="jsbin-css">
html {
	background-color: #000;
	transition: 2s;
}

html:hover {
	background-color: #ce2222;
	transition: 2s;
}

#input {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  transition: .3s;
  margin-left: -100px;
}

button {
  position: fixed;
  top: 35%;
  left: 50%;
  margin-top: -50px;
  transition: .3s;
  margin-left: -100px;

  background:#1AAB8A;
  border: none;
  color: #fff;
  font-size:1.6em;
  height: 60px;
  cursor:pointer;
  transition:800ms ease all;
}

button:hover {
	background: #fff;
	color: #000;
	border-radius: 3px;
}

#input input {
	background-color:;
	border: 0px;
	border-radius: 3px;
	transition: 1s;
    padding: .5rem;
}

#input input:hover {
	background-color: #fff;
	transition: 1s;
}

#submit {
	width: 70px;
	color: #403434;
	transition: .2s;
	background-color: ;
	cursor: pointer;
}

#submit:hover {
	width: 90px;
	background-color: #403434;
	transition: .2s;
}

#Rezultati {
  position: fixed;
  top: 55%;
  left: 50%;
  margin-top: -50px;
  transition: .3s;
  margin-left: -100px;
  color: #fff;
  font-size: 50px;
}
</style>
</head>
  <body>
<div id="container">
    <button type="button" onclick="document.getElementById('input').style.display='block'">Click Me!</button>
    <div id="input" style="display:none">
     <input type="text" id="display-name" name="ip-display" required placeholder="Please Enter Your Name" />
     <input type="submit" id="submit" onclick="myFunction()" value="Submit"  />
    </div>
    <div id="Rezultati"></div>
</div>
 <script src="myscripts.js"></script>
  <script id="jsbin-javascript">
function myFunction() {
  var x = document.getElementById('display-name').value;
	  if (x == "") {
	        alert("Name must be filled out");
	        return false;
	  } else {
	  	document.getElementById('Rezultati').innerHTML = "Hi there " + x;
	  }
}
</script>


<script id="jsbin-source-css" type="text/css">html {
	background-color: #000;
	transition: 2s;
}

html:hover {
	background-color: #ce2222;
	transition: 2s;
}

#input {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  transition: .3s;
  margin-left: -100px;
}

button {
  position: fixed;
  top: 35%;
  left: 50%;
  margin-top: -50px;
  transition: .3s;
  margin-left: -100px;

  background:#1AAB8A;
  border: none;
  color: #fff;
  font-size:1.6em;
  height: 60px;
  cursor:pointer;
  transition:800ms ease all;
}

button:hover {
	background: #fff;
	color: #000;
	border-radius: 3px;
}

#input input {
	background-color:;
	border: 0px;
	border-radius: 3px;
	transition: 1s;
    padding: .5rem;
}

#input input:hover {
	background-color: #fff;
	transition: 1s;
}

#submit {
	width: 70px;
	color: #403434;
	transition: .2s;
	background-color: ;
	cursor: pointer;
}

#submit:hover {
	width: 90px;
	background-color: #403434;
	transition: .2s;
}

#Rezultati {
  position: fixed;
  top: 55%;
  left: 50%;
  margin-top: -50px;
  transition: .3s;
  margin-left: -100px;
  color: #fff;
  font-size: 50px;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">function myFunction() {
  var x = document.getElementById('display-name').value;
	  if (x == "") {
	        alert("Name must be filled out");
	        return false;
	  } else {
	  	document.getElementById('Rezultati').innerHTML = "Hi there " + x;
	  }
}</script></body>
</html>

## jsbin.quyinetatu.css
html {
	background-color: #000;
	transition: 2s;
}

html:hover {
	background-color: #ce2222;
	transition: 2s;
}

#input {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  transition: .3s;
  margin-left: -100px;
}

button {
  position: fixed;
  top: 35%;
  left: 50%;
  margin-top: -50px;
  transition: .3s;
  margin-left: -100px;

  background:#1AAB8A;
  border: none;
  color: #fff;
  font-size:1.6em;
  height: 60px;
  cursor:pointer;
  transition:800ms ease all;
}

button:hover {
	background: #fff;
	color: #000;
	border-radius: 3px;
}

#input input {
	background-color:;
	border: 0px;
	border-radius: 3px;
	transition: 1s;
    padding: .5rem;
}

#input input:hover {
	background-color: #fff;
	transition: 1s;
}

#submit {
	width: 70px;
	color: #403434;
	transition: .2s;
	background-color: ;
	cursor: pointer;
}

#submit:hover {
	width: 90px;
	background-color: #403434;
	transition: .2s;
}

#Rezultati {
  position: fixed;
  top: 55%;
  left: 50%;
  margin-top: -50px;
  transition: .3s;
  margin-left: -100px;
  color: #fff;
  font-size: 50px;
}

## jsbin.quyinetatu.js
function myFunction() {
  var x = document.getElementById('display-name').value;
	  if (x == "") {
	        alert("Name must be filled out");
	        return false;
	  } else {
	  	document.getElementById('Rezultati').innerHTML = "Hi there " + x;
	  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Input Challenge</title>
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
	<style id="jsbin-css">
	html {
	background-color: #000;
	transition: 2s;
	}

	html:hover {
	background-color: #ce2222;
	transition: 2s;
	}

	#input {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	transition: .3s;
	margin-left: -100px;
	}

	button {
	position: fixed;
	top: 35%;
	left: 50%;
	margin-top: -50px;
	transition: .3s;
	margin-left: -100px;

	background:#1AAB8A;
	border: none;
	color: #fff;
	font-size:1.6em;
	height: 60px;
	cursor:pointer;
	transition:800ms ease all;
	}

	button:hover {
	background: #fff;
	color: #000;
	border-radius: 3px;
	}

	#input input {
	background-color:;
	border: 0px;
	border-radius: 3px;
	transition: 1s;
	padding: .5rem;
	}

	#input input:hover {
	background-color: #fff;
	transition: 1s;
	}

	#submit {
	width: 70px;
	color: #403434;
	transition: .2s;
	background-color: ;
	cursor: pointer;
	}

	#submit:hover {
	width: 90px;
	background-color: #403434;
	transition: .2s;
	}

	#Rezultati {
	position: fixed;
	top: 55%;
	left: 50%;
	margin-top: -50px;
	transition: .3s;
	margin-left: -100px;
	color: #fff;
	font-size: 50px;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<button type="button" onclick="document.getElementById('input').style.display='block'">Click Me!</button>
	<div id="input" style="display:none">
	<input type="text" id="display-name" name="ip-display" required placeholder="Please Enter Your Name" />
	<input type="submit" id="submit" onclick="myFunction()" value="Submit" />
	</div>
	<div id="Rezultati"></div>
	</div>
	<script src="myscripts.js"></script>
	<script id="jsbin-javascript">
	function myFunction() {
	var x = document.getElementById('display-name').value;
	if (x == "") {
	alert("Name must be filled out");
	return false;
	} else {
	document.getElementById('Rezultati').innerHTML = "Hi there " + x;
	}
	}
	</script>


	<script id="jsbin-source-css" type="text/css">html {
	background-color: #000;
	transition: 2s;
	}

	html:hover {
	background-color: #ce2222;
	transition: 2s;
	}

	#input {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	transition: .3s;
	margin-left: -100px;
	}

	button {
	position: fixed;
	top: 35%;
	left: 50%;
	margin-top: -50px;
	transition: .3s;
	margin-left: -100px;

	background:#1AAB8A;
	border: none;
	color: #fff;
	font-size:1.6em;
	height: 60px;
	cursor:pointer;
	transition:800ms ease all;
	}

	button:hover {
	background: #fff;
	color: #000;
	border-radius: 3px;
	}

	#input input {
	background-color:;
	border: 0px;
	border-radius: 3px;
	transition: 1s;
	padding: .5rem;
	}

	#input input:hover {
	background-color: #fff;
	transition: 1s;
	}

	#submit {
	width: 70px;
	color: #403434;
	transition: .2s;
	background-color: ;
	cursor: pointer;
	}

	#submit:hover {
	width: 90px;
	background-color: #403434;
	transition: .2s;
	}

	#Rezultati {
	position: fixed;
	top: 55%;
	left: 50%;
	margin-top: -50px;
	transition: .3s;
	margin-left: -100px;
	color: #fff;
	font-size: 50px;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">function myFunction() {
	var x = document.getElementById('display-name').value;
	if (x == "") {
	alert("Name must be filled out");
	return false;
	} else {
	document.getElementById('Rezultati').innerHTML = "Hi there " + x;
	}
	}</script></body>
	</html>