Skip to content

Commit b37a1d9

Browse files
TingluoHuangTingluoHuang
authored
Merge pull request #2 from TingluoHuang/users/tihuang/joke
add joke.
2 parents 2362ffa + 555f549 commit b37a1d9

File tree

2 files changed

+68
-37
lines changed

2 files changed

+68
-37
lines changed

‎public/index.html

+48-33
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,30 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
3+
4+
<head>
5+
<!-- Global site tag (gtag.js) - Google Analytics -->
6+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-169214932-1"></script>
7+
<script>
8+
window.dataLayer = window.dataLayer || [];
9+
function gtag() {
10+
dataLayer.push(arguments);
11+
}
12+
gtag('js', new Date());
13+
gtag('config', 'UA-169214932-1');
14+
</script>
15+
16+
<meta charset="utf-8" />
17+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
18+
<meta name="viewport" content="width=device-width, initial-scale=1" />
19+
<meta name="theme-color" content="#000000" />
20+
<meta name="description" content="Web site created using create-react-app" />
21+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
22+
<!--
1423
manifest.json provides metadata used when your web app is installed on a
1524
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1625
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
26+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
27+
<!--
1928
Notice the use of %PUBLIC_URL% in the tags above.
2029
It will be replaced with the URL of the `public` folder during the build.
2130
Only files inside the `public` folder can be referenced from the HTML.
@@ -24,24 +33,29 @@
2433
work correctly both with client-side routing and a non-root public URL.
2534
Learn how to configure a non-root public URL by running `npm run build`.
2635
-->
27-
<title>Binary JSON Formatter</title>
28-
29-
<!-- FontAwesome 5 Imports -->
30-
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
31-
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/regular.css" integrity="sha384-z3ccjLyn+akM2DtvRQCXJwvT5bGZsspS4uptQKNXNg778nyzvdMqiGcqHVGiAUyY" crossorigin="anonymous">
32-
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/fontawesome.css" integrity="sha384-u5J7JghGz0qUrmEsWzBQkfvc8nK3fUT7DCaQzNQ+q4oEXhGSx+P2OqjWsfIRB8QT" crossorigin="anonymous">
33-
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
34-
35-
<!-- Material UI Imports -->
36-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700">
37-
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
38-
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Source+Code+Pro' rel='stylesheet' type='text/css'>
39-
40-
</head>
41-
<body>
42-
<noscript>You need to enable JavaScript to run this app.</noscript>
43-
<div id="root"></div>
44-
<!--
36+
<title>Binary JSON Formatter</title>
37+
38+
<!-- FontAwesome 5 Imports -->
39+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
40+
integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
41+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/regular.css"
42+
integrity="sha384-z3ccjLyn+akM2DtvRQCXJwvT5bGZsspS4uptQKNXNg778nyzvdMqiGcqHVGiAUyY" crossorigin="anonymous">
43+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/fontawesome.css"
44+
integrity="sha384-u5J7JghGz0qUrmEsWzBQkfvc8nK3fUT7DCaQzNQ+q4oEXhGSx+P2OqjWsfIRB8QT" crossorigin="anonymous">
45+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
46+
47+
<!-- Material UI Imports -->
48+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700">
49+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
50+
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Source+Code+Pro'
51+
rel='stylesheet' type='text/css'>
52+
53+
</head>
54+
55+
<body>
56+
<noscript>You need to enable JavaScript to run this app.</noscript>
57+
<div id="root"></div>
58+
<!--
4559
This HTML file is a template.
4660
If you open it directly in the browser, you will see an empty page.
4761
@@ -51,5 +65,6 @@
5165
To begin the development, run `npm start` or `yarn start`.
5266
To create a production bundle, use `npm run build` or `yarn build`.
5367
-->
54-
</body>
55-
</html>
68+
</body>
69+
70+
</html>

‎src/components/JSONFormatter/JSONFormatter.jsx

+20-4
Original file line numberDiff line numberDiff line change
@@ -82,20 +82,36 @@ export class JSONFormatter extends Component {
8282

8383
getJSONData() {
8484
// eslint-disable-next-line
85-
var outputText, outputClass;
85+
var outputText;
8686
try {
8787
outputText = this.formatJSON(this.state.inputText);
88-
outputClass = 'output-good';
88+
if (outputText === "") {
89+
outputText = this.state.jobText;
90+
}
8991
}
9092
catch (err) {
9193
// JSON.parse threw an exception
92-
outputText = 'It looks like there was an error with your JSON---\n\n' + err.message;
93-
outputClass = 'output-error';
94+
outputText = 'It looks like there was an error with your input---\n\n' + err.message;
9495
}
9596

9697
return outputText
9798
}
9899

100+
getJoke() {
101+
fetch('https://geek-jokes.sameerkumar.website/api?format=json')
102+
.then((response) => response.json())
103+
.then((responseJson) => {
104+
this.setState({ jobText: responseJson.joke })
105+
})
106+
.catch((error) => {
107+
console.error(error);
108+
});
109+
}
110+
111+
componentWillMount() {
112+
this.getJoke();
113+
}
114+
99115
UNSAFE_componentWillMount() {
100116
this.setState({
101117
inputText: ""

0 commit comments

Comments
 (0)