Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit fc969a8

Browse files
pramit-maratthapramit-marattha
authored
fan wiki search (#77)
1 parent 0dff8ee commit fc969a8

File tree

16 files changed

+12229
-12
lines changed

16 files changed

+12229
-12
lines changed

‎fan-wiki-react-web-app-project/README.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
![under_construction](https://user-images.githubusercontent.com/37651620/93677983-a7942e00-facc-11ea-8b6d-b57e73dc73bf.png)
1+
# Getting Started with Create React App
22

33
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
44

@@ -8,23 +8,23 @@ In the project directory, you can run:
88

99
### `yarn start`
1010

11-
Runs the app in the development mode.<br />
11+
Runs the app in the development mode.\
1212
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
1313

14-
The page will reload if you make edits.<br />
14+
The page will reload if you make edits.\
1515
You will also see any lint errors in the console.
1616

1717
### `yarn test`
1818

19-
Launches the test runner in the interactive watch mode.<br />
19+
Launches the test runner in the interactive watch mode.\
2020
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
2121

2222
### `yarn build`
2323

24-
Builds the app for production to the `build` folder.<br />
24+
Builds the app for production to the `build` folder.\
2525
It correctly bundles React in production mode and optimizes the build for the best performance.
2626

27-
The build is minified and the filenames include the hashes.<br />
27+
The build is minified and the filenames include the hashes.\
2828
Your app is ready to be deployed!
2929

3030
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
@@ -47,24 +47,24 @@ To learn React, check out the [React documentation](https://reactjs.org/).
4747

4848
### Code Splitting
4949

50-
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
50+
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
5151

5252
### Analyzing the Bundle Size
5353

54-
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
54+
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
5555

5656
### Making a Progressive Web App
5757

58-
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
58+
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
5959

6060
### Advanced Configuration
6161

62-
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
62+
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
6363

6464
### Deployment
6565

66-
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
66+
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
6767

6868
### `yarn build` fails to minify
6969

70-
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
70+
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

‎fan-wiki-react-web-app-project/package.json

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "fan-wiki-react-web-app-project",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@testing-library/jest-dom": "^5.11.4",
7+
"@testing-library/react": "^11.1.0",
8+
"@testing-library/user-event": "^12.1.10",
9+
"react": "^17.0.1",
10+
"react-dom": "^17.0.1",
11+
"react-scripts": "4.0.1",
12+
"web-vitals": "^0.2.4"
13+
},
14+
"scripts": {
15+
"start": "react-scripts start",
16+
"build": "react-scripts build",
17+
"test": "react-scripts test",
18+
"eject": "react-scripts eject"
19+
},
20+
"eslintConfig": {
21+
"extends": [
22+
"react-app",
23+
"react-app/jest"
24+
]
25+
},
26+
"browserslist": {
27+
"production": [
28+
">0.2%",
29+
"not dead",
30+
"not op_mini all"
31+
],
32+
"development": [
33+
"last 1 chrome version",
34+
"last 1 firefox version",
35+
"last 1 safari version"
36+
]
37+
}
38+
}

‎fan-wiki-react-web-app-project/public/favicon.ico

15 KB
Binary file not shown.

‎fan-wiki-react-web-app-project/public/index.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<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+
14+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15+
16+
<title>Wiki Search</title>
17+
</head>
18+
<body>
19+
<noscript>You need to enable JavaScript to run this app.</noscript>
20+
<div id="root"></div>
21+
22+
</body>
23+
</html>

‎fan-wiki-react-web-app-project/public/logo192.png

5.22 KB
Loading

‎fan-wiki-react-web-app-project/public/logo512.png

9.44 KB
Loading

‎fan-wiki-react-web-app-project/public/manifest.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "logo192.png",
12+
"type": "image/png",
13+
"sizes": "192x192"
14+
},
15+
{
16+
"src": "logo512.png",
17+
"type": "image/png",
18+
"sizes": "512x512"
19+
}
20+
],
21+
"start_url": ".",
22+
"display": "standalone",
23+
"theme_color": "#000000",
24+
"background_color": "#ffffff"
25+
}

‎fan-wiki-react-web-app-project/public/robots.txt

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
3+
Disallow:

‎fan-wiki-react-web-app-project/src/App.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React,{useState} from 'react';
2+
import WikiSearchResults from "./components/WikiSearchResults";
3+
import "./styles/App.css";
4+
5+
function App() {
6+
const [wikiSearch,setWikiSearch] = useState("");
7+
const [searchName,setSearchName] = useState([]);
8+
const [searchLinks,setSearchLinks] = useState([]);
9+
10+
async function btnSearch(){
11+
const url = `https://en.wikipedia.org/w/api.php?action=opensearch&search=${wikiSearch}&format=json&origin=*`;
12+
const response = await fetch(url);
13+
const jsonResponse = await response.json();
14+
// console.log(JSON.stringify(jsonResponse, null , 3));
15+
// console.log(jsonResponse);
16+
setSearchName(jsonResponse[1]);
17+
setSearchLinks(jsonResponse[3]);
18+
}
19+
20+
return (
21+
<div className="App">
22+
<div className="wrapper">
23+
<div className="searchBo">
24+
<h1 className="ws-search">Fan Wiki Search</h1>
25+
<input className="searchBox" value={wikiSearch} onChange={e => setWikiSearch(e.target.value)} placeholder="Search anything...." />
26+
<button className="btn draw-border" onClick={btnSearch}>Search</button>
27+
{searchName.map((value, i) => <WikiSearchResults name={value} link={searchLinks[i]} key={i + value} />)}
28+
</div>
29+
</div>
30+
</div>
31+
)
32+
}
33+
34+
export default App

‎fan-wiki-react-web-app-project/src/assets/favicon.ico

15 KB
Binary file not shown.

‎fan-wiki-react-web-app-project/src/assets/wikki.png

288 KB
Loading

‎fan-wiki-react-web-app-project/src/components/WikiSearchResults.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import "../styles/results.css";
3+
4+
function WikiSearchResults(props) {
5+
return (
6+
<div className="resultsBox">
7+
<h2>{props.name}</h2>
8+
<a href={props.link}><div>{props.link}</div></a>
9+
</div>
10+
)
11+
}
12+
13+
export default WikiSearchResults

‎fan-wiki-react-web-app-project/src/index.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
ReactDOM.render(
6+
<React.StrictMode>
7+
<App />
8+
</React.StrictMode>,
9+
document.getElementById('root')
10+
);
11+

‎fan-wiki-react-web-app-project/src/styles/App.css

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@1,700&display=swap");
2+
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@1,700&family=Finger+Paint&display=swap");
3+
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
font-size: 19px;
9+
border: none;
10+
font-family: "Cormorant Infant", serif;
11+
}
12+
13+
ul,
14+
ol {
15+
list-style: none;
16+
}
17+
18+
html,
19+
body {
20+
height: 100%;
21+
}
22+
23+
body {
24+
background: #1f1a25;
25+
background-image: url("../assets/wikki.png");
26+
background-repeat: no-repeat;
27+
background-attachment: fixed;
28+
background-position: center;
29+
}
30+
/*
31+
.wrapper {
32+
width: 100vw;
33+
height: 100vh;
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
}
38+
39+
.searchBox {
40+
border: 2px solid teal;
41+
border-radius: 15px;
42+
padding: 2em;
43+
}
44+
*/
45+
.ws-search {
46+
text-align: center;
47+
padding: 0.4em;
48+
font-size: 29px;
49+
}
50+
51+
.wrapper {
52+
position: fixed;
53+
height: 225px;
54+
width: calc(100vw - 2.5em);
55+
bottom: 1.25rem;
56+
left: 0;
57+
right: 0;
58+
background: #6d78bf;
59+
padding: 1.25em;
60+
margin: 0 auto;
61+
border-radius: 10px;
62+
transition: all linear 0.2s;
63+
}
64+
.wrapper:focus-within {
65+
height: 100vh;
66+
width: 100vw;
67+
bottom: 0;
68+
border-radius: 0;
69+
}
70+
71+
.searchBox {
72+
width: 80%;
73+
padding: 1.25em;
74+
border-radius: 10px;
75+
font-size: 1rem;
76+
margin: 0 0 1em 0;
77+
}
78+
79+
.draw-border {
80+
box-shadow: inset 0 0 0 4px #58afd1;
81+
color: #58afd1;
82+
-webkit-transition: color 0.25s 0.0833333333s;
83+
transition: color 0.25s 0.0833333333s;
84+
position: relative;
85+
border-radius: 30px;
86+
}
87+
.draw-border::before,
88+
.draw-border::after {
89+
border: 0 solid transparent;
90+
border-radius: 30px;
91+
92+
box-sizing: border-box;
93+
content: "";
94+
pointer-events: none;
95+
position: absolute;
96+
width: 0;
97+
height: 0;
98+
bottom: 0;
99+
right: 0;
100+
}
101+
.draw-border::before {
102+
border-bottom-width: 4px;
103+
border-left-width: 4px;
104+
}
105+
.draw-border::after {
106+
border-top-width: 4px;
107+
border-right-width: 4px;
108+
}
109+
.draw-border:hover {
110+
color: #ffe593;
111+
}
112+
.draw-border:hover::before,
113+
.draw-border:hover::after {
114+
border-color: #ffe593;
115+
-webkit-transition: border-color 0s, width 0.25s, height 0.25s;
116+
transition: border-color 0s, width 0.25s, height 0.25s;
117+
width: 100%;
118+
height: 100%;
119+
}
120+
.draw-border:hover::before {
121+
-webkit-transition-delay: 0s, 0s, 0.25s;
122+
transition-delay: 0s, 0s, 0.25s;
123+
}
124+
.draw-border:hover::after {
125+
-webkit-transition-delay: 0s, 0.25s, 0s;
126+
transition-delay: 0s, 0.25s, 0s;
127+
}
128+
129+
.btn {
130+
background: none;
131+
border: none;
132+
cursor: pointer;
133+
line-height: 1.5;
134+
font-family: "Finger Paint", cursive;
135+
padding: 1em 3em;
136+
letter-spacing: 0.05rem;
137+
border-radius: 30px;
138+
}
139+
.btn:focus {
140+
outline: 2px dotted #55d7dc;
141+
}

‎fan-wiki-react-web-app-project/src/styles/results.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.resultsBox {
2+
padding: 0.3em;
3+
border: 1px solid rgb(193, 186, 186);
4+
border-radius: 15px;
5+
box-shadow: inset 0 0 10px;
6+
}
7+
8+
.resultsBoxHeader {
9+
margin: 0;
10+
}

0 commit comments

Comments
 (0)