html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<title>Hailstone Numbers</title>
<meta charset="UTF-8">
<meta name="description" content="Hailstone Numbers">
<meta name="author" content="CYK">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Tangerine|Montserrat|Indie+Flower|Josefin+Sans|Quicksand' rel='stylesheet'>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<div class="container">
<form>
<p><input type="number" placeholder="Enter an integer" id="entry" onfocus="this.value=''"><input type="submit" value="SUBMIT"></p>
</form>
<div class="feedback">[The feedback will be here.]</div>
<!--<div><a href="https://www.sololearn.com/Discuss/1250151/?ref=app">What is this code about?</a></div>-->
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: Snow;
}
.container{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Montserrat;
}
form{
margin-top: 40px;
text-align: center;
}
input[type=number]{
background-color: MistyRose;
font-family: Quicksand;
height: 25px;
width: 60%;
font-size: 100%;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
jQuery(document).ready( function(){
$("form").submit( function(event){
var num = parseInt($("#entry").val());
var output = "", steps = 0;
while (num != 1){
output += num;
if (num % 2 == 0){
num = num / 2;
output += " is even ";
}
else{
num = num * 3 + 1;
output += " is odd ";
}
output += "==> it becomes: " + num + "<br\>";
steps++;
}
output += "<br/>We got to <b>1</b> after doing <b>" + steps + "</b> computations.";
event.preventDefault();
$(".feedback").html(output);
});
});
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run