This repository has been archived by the owner on Oct 1, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
/
noodlefacts.html
101 lines (90 loc) · 3.42 KB
/
noodlefacts.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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<html>
<head>
<title>Noodle Facts</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/index.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Courgette">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fredoka One">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
body {
background: #111111;
margin: 10px;
}
div {
margin: 0;
}
h3 {
font-family: "Fredoka One";
}
.wrapper {
margin: 0;
padding: 20px;
}
#factsDiv {
border-radius: 20px;
background: white;
color: black;
}
#factsBtn {
background: black;
margin-top: 20px;
margin-bottom: 20px;
color: gold;
font-family: "Fredoka One";
}
#facts {
font-family: "Raleway";
font-weight: bold;
}
#factsImg {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="text-center bg-dark text-danger p-1">
<h3>Noodle Facts</h3>
</div>
<div class="container-fluid text-center bg-warning wrapper">
<div class="container text-dark col-sm-12 col-md-6 col-lg-8" id="factsDiv">
<img src="https://www.unicornpoint.net/img/ramen3.png" class="img-fluid" id="factsImg" />
<br>
<span id="facts"></span>
<script>
var facts = [
'It would only cost about $140 a year to eat ramen for every meal.',
'The first instant ramen was considered a luxury item.',
'Ramen noodles were the first ever noodles consumed in space.',
'One pack of ramen will bring you well over half the daily recommended amount of sodium.',
'Ramen is the Japanese pronunciation of the Chinese word lamein.',
'China consumes the most instant ramen.',
'In Japan, there are at least 22 different styles.',
'Momofuku Andu invented the idea of instant ramen.',
'The noodle length inside an instant ramen packet is 51 meters.',
'Miso ramen was born in Sapporo, Japan around the mid-1950s.',
'Today, there are over 35,000 ramen noodle restaurants in Japan!',
'There are four major kinds of Japanese noodles: Somen, Udon, Soba and Ramen.',
'Asian noodles are kneaded, often by hand, and then stretched and pulled into thin threads or rolled or sliced into flat ribbons.',
'A 4,000 year old bowl of noodles was unearthed in China.',
'The first noodles were made from millet.'
'Noodles were first found in a Chinese cookbook during the Eastern Han period (25CE-220CE).'
]
function newFact() {
var randomNumber = Math.floor(Math.random() * (facts.length));
document.getElementById('facts').innerHTML = facts[randomNumber];
}
newFact();
</script>
<br>
<button class="btn" id="factsBtn" onclick="newFact()">New Noodle Fact</button>
</div>
</div>
</body>
</html>