Skip to content

Commit 75c1c65

Browse files
sal-estradasal-estrada
committed
Update
-Add styling -Add dist. files -Update read.me -Remove unnecessary/repeated code
1 parent 0bf61df commit 75c1c65

File tree

8 files changed

+225
-101
lines changed

8 files changed

+225
-101
lines changed

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎.eslintrc‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"env": {
3+
"es6": true,
4+
"browser": true
5+
},
6+
"extends": [
7+
"eslint:recommended"
8+
],
9+
"rules": {
10+
"quotes": ["error", "single"]
11+
}
12+
}

‎README.md‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,34 @@
11
# Pokédex
22

3-
Project to search and view the first 151 Pokémon.
3+
Web application project to search and view the first 151 Pokémon (Generation 1).
44

55
## Description
66

77
This project allows the user to search for different pokemon according to different criteria, such as type, size, and color. It incorporates a chatbot which the client can inquire regarding different Generataion 1 Pokémon.
88

9+
### Key Features
10+
<ul>
11+
<li>Loads items from external API.</li>
12+
<li>View list of items and objects.</li>
13+
<li>Use modals for information to be displayed.</li>
14+
<li>Search bar to display pokemon filtering by name.</li>
15+
</ul>
16+
17+
### Languages and Tools
18+
<ul>
19+
<li>HTML</li>
20+
<li>CSS</li>
21+
<li>JavaScript</li>
22+
<li>jQuery</li>
23+
<li>Popper</li>
24+
<li>Bootstrap</li>
25+
</ul>
26+
27+
## API
28+
29+
* Restul Pokemon API [PokeApi](https://pokeapi.co/)
30+
931
## License
1032

1133
This project is licensed under the MIT License.
1234
Pokémon and Pokémon character names are trademarks of Nintendo.
13-
14-
## Acknowledgments
15-
16-
* [PokeApi](https://pokeapi.co/)

‎css/style.css‎

Lines changed: 135 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -4,66 +4,69 @@
44

55
ul {
66
list-style-type: none;
7-
}
8-
9-
.button {
10-
background-color: lightgray;
11-
border: none;
12-
color: black;
13-
text-align: center;
14-
font-size: 16px;
15-
text-decoration: none;
16-
padding: 16px 32px;
17-
margin: 4px;
18-
transition-duration: 0.4s;
19-
cursor: pointer;
7+
list-style: none;
208
width: 100%;
219
}
2210

23-
.modal {
24-
margin: auto;
25-
display: inline-block;
26-
box-sizing: border-box;
27-
background: #fff;
28-
padding: 15px;
29-
width: 100%;
30-
max-width: 700px;
31-
text-align: left;
11+
.pokedex {
12+
background: linear-gradient(145deg, #d32f2f, #b71c1c);
13+
border-radius: 15px;
14+
padding: 20px;
15+
box-shadow: 4px 4px 10px #7f0000 inset, -4px -4px 10px #ff5353 inset;
16+
max-width: 600px;
17+
margin: 40px auto;
18+
border: 6px solid #7f0000;
3219
}
3320

34-
.modal-close {
35-
float: right;
36-
/* -webkit-appearance: none; */
37-
border: 0;
38-
background: none;
39-
color: #777;
40-
text-decoration: underline;
21+
.pokedex-header {
22+
display: flex;
23+
justify-content: space-between;
24+
align-items: center;
25+
margin-bottom: 15px;
26+
padding: 10px 15px;
27+
background: #b71c1c;
28+
border-radius: 8px;
29+
box-shadow: inset 0 -4px 5px #7f0000;
4130
}
4231

43-
.modal h1 {
44-
margin-top: 0;
32+
.pokedex-header h1 {
33+
font-weight: bold;
34+
margin: 0;
35+
font-size: 1.8rem;
4536
}
4637

47-
.modal h1:first-letter {
48-
text-transform: capitalize;
49-
}
50-
.modal p {
51-
margin-bottom: 0;
38+
.search-container {
39+
background-color: #0288D1;
40+
padding: 20px;
41+
border-radius: 10px;
42+
color: #FFFFFF;
43+
margin: 20px;
44+
text-align: center;
5245
}
5346

54-
.pokemon-image {
55-
display: block;
56-
margin: 0 auto 10px auto;
57-
width: 120px;
58-
height: 120px;
47+
body {
48+
background-color: #D32F2F;
49+
color: #FFFFFF;
5950
}
6051

61-
button {
52+
.button {
53+
background: linear-gradient(145deg, #ff0000, #b30000);
54+
color: #fff;
55+
font-weight: bold;
56+
font-size: 1rem;
57+
border-radius: 6px;
58+
box-shadow: 2px 2px 6px #7f0000 inset;
59+
border: 2px solid #7f0000;
60+
padding: 12px;
61+
width: 100%;
62+
text-transform: capitalize;
63+
transition: background 0.3s ease;
6264
cursor: pointer;
6365
}
6466

65-
.button::first-letter {
66-
text-transform: capitalize;
67+
.button:hover {
68+
background: linear-gradient(145deg, #ff4444, #cc0000);
69+
box-shadow: 3px 3px 8px #ff6666 inset;
6770
}
6871

6972
button:hover {
@@ -76,3 +79,91 @@ button:active {
7679
filter: brightness(85%);
7780
border: none;
7881
}
82+
83+
.button::first-letter {
84+
text-transform: capitalize;
85+
}
86+
87+
#pokemon-search {
88+
width: 100%;
89+
/* max-width: 350px; */
90+
padding: 10px;
91+
border-radius: 6px;
92+
border: none;
93+
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
94+
font-weight: bold;
95+
font-size: 1rem;
96+
background: #ffe;
97+
color: #222;
98+
}
99+
100+
.modal-content {
101+
background: #222;
102+
color: #eee;
103+
border-radius: 15px;
104+
border: 5px solid #b71c1c;
105+
font-family: 'Arial Black', Arial, sans-serif;
106+
}
107+
108+
.modal-header, .modal-footer {
109+
border: none;
110+
background: #b71c1c;
111+
color: #ffff;
112+
font-weight: bold;
113+
font-size: 1.2rem;
114+
border-radius: 10px 10px 0 0;
115+
}
116+
117+
.modal-footer {
118+
border-radius: 0 0 10px 10px;
119+
}
120+
121+
.modal-img {
122+
margin: 10px auto;
123+
width: 150px;
124+
height: 150px;
125+
}
126+
127+
.pokemon-list .list-group-item {
128+
background: transparent;
129+
border: none;
130+
padding: 1%;
131+
margin-bottom: 10px;
132+
}
133+
134+
.pokemon-types,
135+
.pokemon-abilities {
136+
text-transform: capitalize;
137+
}
138+
139+
.pokemon-id {
140+
border-top: 5px solid white;
141+
width: 100%;
142+
padding-top: 4%;
143+
}
144+
145+
.modal-content {
146+
border: 10px solid white;
147+
}
148+
149+
span {
150+
color: white;
151+
background-color: black;
152+
border-radius: 10%;
153+
}
154+
155+
.modal h1 {
156+
margin-top: 0;
157+
}
158+
159+
.modal h1:first-letter {
160+
text-transform: capitalize;
161+
}
162+
163+
.modal p {
164+
margin-bottom: 0;
165+
}
166+
167+
button {
168+
cursor: pointer;
169+
}

‎dist/minified.css‎

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

‎dist/minified.js‎

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

‎index.html‎

Lines changed: 23 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,42 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Simple JS App</title>
77
<link
88
rel="stylesheet"
99
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
1010
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
1111
crossorigin="anonymous"
12-
/>
13-
<link rel="stylesheet" type="text/css" href="css/style.css" />
12+
>
13+
<link rel="stylesheet" type="text/css" href="dist/minified.css">
1414
</head>
1515
<body>
16-
<nav class="navbar navbar-expand-lg navbar-light bg-light">
17-
<a class="navbar-brand" href="#">Pokedex</a>
18-
<button
19-
class="navbar-toggler"
20-
type="button"
21-
data-toggle="collapse"
22-
data-target="#navbarNav"
23-
aria-controls="navbarNav"
24-
aria-expanded="false"
25-
aria-label="Toggle navigation"
26-
>
27-
<span class="navbar-toggler-icon"></span>
28-
</button>
29-
<div class="collapse navbar-collapse" id="navbarNav">
30-
<ul class="navbar-nav">
31-
<li class="nav-item active">
32-
<a class="nav-link" href="#"
33-
>Home <span class="sr-only">(current)</span></a
34-
>
35-
</li>
36-
<li class="nav-item">
37-
<a class="nav-link" href="#">Features</a>
38-
</li>
39-
<li class="nav-item">
40-
<a class="nav-link" href="#">Pricing</a>
41-
</li>
42-
<li class="nav-item">
43-
<a
44-
class="nav-link disabled"
45-
href="#"
46-
tabindex="-1"
47-
aria-disabled="true"
48-
>Disabled</a
49-
>
50-
</li>
51-
</ul>
52-
</div>
53-
</nav>
5416

55-
<h1>Pokedex</h1>
56-
57-
<ul class="pokemon-list list-group"></ul>
17+
<div class="container pokedex">
18+
<div class="pokedex-header">
19+
<h1>Pokédex</h1>
20+
</div>
21+
<div class="search-container mb-4">
22+
<input
23+
type="text"
24+
id="pokemon-search"
25+
placeholder="Search Pokemon..."
26+
class="form-control"
27+
>
28+
</div>
29+
<div class="row">
30+
<ul class="pokemon-list row"></ul>
31+
</div>
32+
</div>
5833
<div
5934
class="modal fade"
6035
id="exampleModal"
6136
tabindex="-1"
6237
role="dialog"
6338
aria-labelledby="exampleModalLabel"
64-
aria-hidden="true"
65-
style="display: none"
39+
aria-hidden="false"
6640
>
6741
<div class="modal-dialog" role="document">
6842
<div class="modal-content">
@@ -86,7 +60,7 @@ <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
8660
>
8761
Close
8862
</button>
89-
<button type="button" class="btn btn-primary">Save changes</button>
63+
<button type="button" class="btn btn-primary">Pokeball</button>
9064
</div>
9165
</div>
9266
</div>
@@ -108,6 +82,6 @@ <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
10882
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
10983
crossorigin="anonymous"
11084
></script>
111-
<script src="js/scripts.js"></script>
85+
<script src="dist/minified.js"></script>
11286
</body>
11387
</html>

0 commit comments

Comments
 (0)