html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<title>React app (created by Calvin) Sept 2019</title>
</head>
<body>
<div id="app"><div class="flex justify-center mt-4">Loading ....</div></div>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</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 {
margin: 0;
width: 100%;
}
.title {
font-size: 1.5rem;
text-align: center;
}
.name {
margin: 2px;
padding: 0;
margin-bottom: 10px;
}
.img {
width: 50%;
height: auto;
float: left;
border-radius: 5px;
margin-right: 10px;
}
.drink {
border: 1px solid #ddd;
border-radius: 10px;
padding: 5px;
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
26
27
28
//</script><script type="text/babel">
const {useState, useEffect} = React;
let drinks = [{
"id": "11000",
"name": "Mojito",
"preparation": "Muddle mint leaves with sugar and lime juice. Add a splash of soda water and fill the glass with cracked ice. Pour the rum and top with soda water. Garnish and serve with straw.",
"image": "https:\/\/www.thecocktaildb.com\/images\/media\/drink\/rxtqps1478251029.jpg"
}, {
"id": "11001",
"name": "Old Fashioned",
"preparation": "Place sugar cube in old fashioned glass and saturate with bitters, add a dash of plain water. Muddle until dissolved.\r\nFill the glass with ice cubes and add whiskey.\r\n\r\nGarnish with orange twist, and a cocktail cherry.",
"image": "https:\/\/www.thecocktaildb.com\/images\/media\/drink\/vrwquq1478252802.jpg"
}, {
"id": "11002",
"name": "Long Island Tea",
"preparation": "Combine all ingredients (except cola) and pour over ice in a highball glass. Add the splash of cola for color. Decorate with a slice of lemon and serve.",
"image": "https:\/\/www.thecocktaildb.com\/images\/media\/drink\/ywxwqs1439906072.jpg"
}, {
"id": "11003",
"name": "Negroni",
"preparation": "Stir into glass over ice, garnish and serve.",
"image": "https:\/\/www.thecocktaildb.com\/images\/media\/drink\/qgdu971561574065.jpg"
}, {
"id": "11004",
"name": "Whiskey Sour",
"preparation": "Shake with ice. Strain into chilled glass, garnish and serve. If served 'On the rocks', strain ingredients into old-fashioned glass filled with ice.",
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run