Skip to content

Instantly share code, notes, and snippets.

@SabriHakuli

SabriHakuli/index.html

Created August 12, 2018 22:35
Show Gist options
  • Save SabriHakuli/0ff2a0fd951a3a6bc913f8c1908f5327 to your computer and use it in GitHub Desktop.
Save SabriHakuli/0ff2a0fd951a3a6bc913f8c1908f5327 to your computer and use it in GitHub Desktop.
Download ZIP
Input Challenge // source https://jsbin.com/quyinetatu
Raw
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>
Raw
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;
}
Raw
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment