Skip to content

Commit b591985

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #416 from anjupriya-v/main
Emoji Search App
2 parents f2b9301 + 5b5b95a commit b591985

File tree

17 files changed

+48133
-0
lines changed

17 files changed

+48133
-0
lines changed

‎Emoji Search App/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Emoji Search App
2+
## Developed using React.js
3+
4+
## Live Demo:
5+
$ https://emoji-search-application.herokuapp.com/

‎Emoji Search App/package-lock.json

Lines changed: 38538 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Emoji Search App/package.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "emoji-search-app",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@testing-library/jest-dom": "^5.14.1",
7+
"@testing-library/react": "^11.2.7",
8+
"@testing-library/user-event": "^12.8.3",
9+
"react": "^17.0.2",
10+
"react-dom": "^17.0.2",
11+
"react-scripts": "4.0.3",
12+
"web-vitals": "^1.1.2"
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+
}

‎Emoji Search App/public/favicon.ico

25.4 KB
Binary file not shown.

‎Emoji Search App/public/index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
14+
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
15+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
16+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
17+
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
18+
crossorigin="anonymous"></script>
19+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
20+
<title>Emoji Search App</title>
21+
</head>
22+
<body>
23+
24+
<div id="root"></div>
25+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
26+
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
27+
crossorigin="anonymous"></script>
28+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
29+
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
30+
crossorigin="anonymous"></script>
31+
</body>
32+
</html>

‎Emoji Search App/public/manifest.json

Lines changed: 25 additions & 0 deletions
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+
}

‎Emoji Search App/public/robots.txt

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

‎Emoji Search App/src/App.css

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
.emojiCard {
2+
display: flex;
3+
align-items: center;
4+
justify-content: center;
5+
flex-direction: column;
6+
width: 170px;
7+
height: 170px
8+
}
9+
10+
h3 {
11+
color: white;
12+
text-align: center;
13+
font-family: serif;
14+
}
15+
.noMatches {
16+
width: 100vw;
17+
}
18+
.navbar-nav, .nav-item {
19+
display: inline-block;
20+
}
21+
.nav-link {
22+
cursor: pointer;
23+
}
24+
.nav-item {
25+
margin: 5px;
26+
}
27+
.heading {
28+
text-align: center;
29+
color: white;
30+
margin-top: 2.5em;
31+
}
32+
p {
33+
font-size: initial;
34+
position: absolute;
35+
z-index: 1;
36+
bottom: 0px;
37+
left: 4px;
38+
padding: 4px !important;
39+
border-radius: 5px 5px 5px 5px;
40+
font-weight: bolder;
41+
background-color: rgba(0, 119, 255, .2);
42+
color: #07f;
43+
}
44+
.modal-body {
45+
text-align: center;
46+
}
47+
.card {
48+
cursor: pointer;
49+
border-radius: 8px 8px 8px 8px;
50+
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
51+
background-color: rgb(39, 37, 37) !important;
52+
}
53+
.emojiCard:active {
54+
box-shadow: 0 5px #666;
55+
transform: translateY(4px);
56+
}
57+
input {
58+
border-top: none !important;
59+
border-left: none !important;
60+
border-right: none !important;
61+
box-shadow: none!important;
62+
outline: none !important;
63+
color: white !important;
64+
border-radius: none !important;
65+
border-bottom-color: white !important;
66+
background-color: rgb(0, 0, 0) !important;
67+
}
68+
.emoji {
69+
font-size: 1.5em;
70+
color: white;
71+
}
72+
.input-group-text {
73+
background-color: black !important;
74+
border: none;
75+
}
76+
i {
77+
color: white;
78+
}
79+
.navbar {
80+
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;
81+
background-color: rgb(39, 37, 37);
82+
}
83+
.nav-link {
84+
color: white!important;
85+
}
86+
.aboutLink{
87+
color: rgb(163, 163, 163) !important
88+
}
89+
.aboutLink:active{
90+
color: white!important;
91+
}
92+
.fade-in {
93+
animation: fadeIn ease 0.6s;
94+
-webkit-animation: fadeIn ease 0.6s;
95+
-moz-animation: fadeIn ease 0.6s;
96+
-o-animation: fadeIn ease 0.6s;
97+
-ms-animation: fadeIn ease 0.6s;
98+
}
99+
@keyframes fadeIn {
100+
0% {
101+
opacity: 0;
102+
}
103+
100% {
104+
opacity: 1;
105+
}
106+
}
107+
@-moz-keyframes fadeIn {
108+
0% {
109+
opacity: 0;
110+
}
111+
100% {
112+
opacity: 1;
113+
}
114+
}
115+
@-webkit-keyframes fadeIn {
116+
0% {
117+
opacity: 0;
118+
}
119+
100% {
120+
opacity: 1;
121+
}
122+
}
123+
@-o-keyframes fadeIn {
124+
0% {
125+
opacity: 0;
126+
}
127+
100% {
128+
opacity: 1;
129+
}
130+
}
131+
@-ms-keyframes fadeIn {
132+
0% {
133+
opacity: 0;
134+
}
135+
100% {
136+
opacity: 1;
137+
}
138+
}

‎Emoji Search App/src/App.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, { Component } from 'react';
2+
import EmojiList from './emojiList.json';
3+
import './App.css';
4+
import Navbar from './Components/Navbar'
5+
class App extends Component {
6+
constructor(props) {
7+
super(props);
8+
this.state = {
9+
emojiList: EmojiList,
10+
inputValue: "",
11+
title: ""
12+
}
13+
this.searchEmoji = this.searchEmoji.bind(this);
14+
this.copyToClipboard = this.copyToClipboard.bind(this);
15+
}
16+
searchEmoji = (e) => {
17+
this.setState({ inputValue: e.target.value })
18+
}
19+
copyToClipboard = (title, symbol) => {
20+
navigator.clipboard.writeText(symbol);
21+
this.setState({ title: title })
22+
setTimeout(() => {
23+
this.setState({ title: "" })
24+
}, 4000)
25+
}
26+
render() {
27+
return (<React.Fragment>
28+
<Navbar />
29+
<div className="container ">
30+
<h1 className="heading pb-5">🦄 Emoji Search App</h1>
31+
<div className="col-md-6 mb-4 mx-auto">
32+
<div className="input-group md-form form-sm form-2 pl-0">
33+
<div className="input-group-append" >
34+
<span className="input-group-text amber lighten-3" id="basic-text1"><i className="fa fa-search text-grey"
35+
aria-hidden="true"></i></span>
36+
</div>
37+
<input className="form-control my-0 py-1 " onChange={(e) => { this.searchEmoji(e) }} type="text" placeholder="Search for an emoji" aria-label="Search"></input>
38+
</div>
39+
</div>
40+
<div className="row mx-auto ">
41+
{
42+
this.state.emojiList.filter(value => {
43+
return value.keywords.toLowerCase().includes(this.state.inputValue.toLowerCase())
44+
}).map(el => {
45+
return <div className="card emojiCard m-3 card-columns mx-auto d-flex justify-content-center " data-toggle="tooltip" data-placement="bottom" title="Click here to Copy" onClick={() => this.copyToClipboard(el.title, el.symbol)}>
46+
<div className="emoji">
47+
<span className="emoji" ref={(copyEmoji) => this.copyEmoji = copyEmoji}>
48+
{el.symbol}
49+
</span>
50+
{this.state.title === el.title && <p className="fade-in " >Copied!</p>}
51+
</div>
52+
</div>
53+
})
54+
}
55+
</div>
56+
</div>
57+
</React.Fragment>
58+
);
59+
}
60+
}
61+
export default App;

‎Emoji Search App/src/App.test.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { render, screen } from '@testing-library/react';
2+
import App from './App';
3+
4+
test('renders learn react link', () => {
5+
render(<App />);
6+
const linkElement = screen.getByText(/learn react/i);
7+
expect(linkElement).toBeInTheDocument();
8+
});

0 commit comments

Comments
 (0)