0
$(document).ready(function() {
$('form').submit(function(e) {
e.preventDefault();
var answerValue = $('#answer').val();
answerValue = answerValue.toLowerCase();
if (answerValue == 'rafael') {
$('body').append('<span class="notice">Acertou!</span>');
} else {
$('body').append('<span class="notice">Tente novamente!</span>');
}
});
});
.notice {
position:absolute;
top:0;
left:0;
display:block;
width:100%;
background:#fafafa;
font-size:1.4em;
text-align:center;
padding:.5em;
color:#328580;
font-weight:700;
}
body {
background:#335778;
}
* { box-sizing:border-box }
.answer {
padding-left:2em;
text-align:center;
display:block;
margin-bottom:.5em;
font-size:2em;
letter-spacing:8px;
&::first-letter {
position:relative;
margin-right:-3.6em;
}
}
form {
width:320px;
border:1px solid #fafafa;
margin:5em auto 0;
padding:2em;
background:#fafafa;
color:#444;
border-radius:3px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<span class="answer">
Quem sou eu?
</span>
<input id="answer" type="text" placeholder="Enter Above Word">
<input type="submit" value="submit">
</form>
</body>
</html>
I wanted the progress bar to interact through a hit or error corresponding to a question at each hit a percentage of the bar increases and at each error it decreases using the above code!
What progress bar?
– Woss
But this code is completely different from the one in question. Please do the [tour] and read the [Ask] guide. Also read about making a [mcve].
– Woss
This progress bar https://codepen.io/anon/pen/KvdgYo I want its interaction according to accuracy and response error if you view the code above and run you will visualize a question system if you hit appears a hit message so it happens when you miss.
– Rafael Silva