Skip to content

Commit cf4d80e

Browse files
CatsudemoCatsudemo
committed
Basic squirtle homework complete
1 parent de0c03c commit cf4d80e

4 files changed

Lines changed: 150 additions & 0 deletions

File tree

‎Week2/homework/squirtle-squad/SquirtleSquad.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="stylesheet" href="squirtle.css" />
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
8+
<title>Meet the Squirtle Squad</title>
9+
</head>
10+
<body>
11+
<section class="section">
12+
<h2>Introducing the Squirtle Squad</h2>
13+
<br />
14+
<div id="quoteSpace"></div>
15+
16+
<div id="poke-selector"></div>
17+
<script type="text/javascript" src="./squirtle-sprites.js"></script>
18+
<div id="footer">Made for FooCoding Javascript 2.</div>
19+
</section>
20+
</body>
21+
</html>

‎Week2/homework/squirtle-squad/squirtle-sprites.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/* eslint-disable */
2+
3+
console.log('im fucking awawke');
4+
/*
5+
Call this function to get a JSON string of the data
6+
(simulates calling a server to retrieve data)
7+
*/
8+
function fetchPokemonData() {
9+
return `{"abilities":[{"ability":{"name":"rain-dish","url":"https://pokeapi.co/api/v2/ability/44/"},"is_hidden":true,"slot":3},{"ability":{"name":"torrent","url":"https://pokeapi.co/api/v2/ability/67/"},"is_hidden":false,"slot":1}],"base_experience":63,"forms":[{"name":"squirtle","url":"https://pokeapi.co/api/v2/pokemon-form/7/"}],"height":5,"held_items":[],"id":7,"is_default":true,"location_area_encounters":"https://pokeapi.co/api/v2/pokemon/7/encounters","name":"squirtle","order":10,"species":{"name":"squirtle","url":"https://pokeapi.co/api/v2/pokemon-species/7/"},"sprites":{"back_default":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/7.png","back_female":null,"back_shiny":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/7.png","back_shiny_female":null,"front_default":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png","front_female":null,"front_shiny":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/7.png","front_shiny_female":null},"stats":[{"base_stat":43,"effort":0,"stat":{"name":"speed","url":"https://pokeapi.co/api/v2/stat/6/"}},{"base_stat":64,"effort":0,"stat":{"name":"special-defense","url":"https://pokeapi.co/api/v2/stat/5/"}},{"base_stat":50,"effort":0,"stat":{"name":"special-attack","url":"https://pokeapi.co/api/v2/stat/4/"}},{"base_stat":65,"effort":1,"stat":{"name":"defense","url":"https://pokeapi.co/api/v2/stat/3/"}},{"base_stat":48,"effort":0,"stat":{"name":"attack","url":"https://pokeapi.co/api/v2/stat/2/"}},{"base_stat":44,"effort":0,"stat":{"name":"hp","url":"https://pokeapi.co/api/v2/stat/1/"}}],"types":[{"slot":1,"type":{"name":"water","url":"https://pokeapi.co/api/v2/type/11/"}}],"weight":90}`;
10+
}
11+
12+
/*Code goes below */
13+
14+
function parsemon() {
15+
let pokeProperties = JSON.parse(fetchPokemonData());
16+
let justSprites = Object.keys(pokeProperties.sprites)
17+
.map(key => pokeProperties.sprites[key])
18+
.filter(sprite => sprite);
19+
return justSprites;
20+
}
21+
22+
let unorderedSprites = parsemon();
23+
let sprites = unorderedSprites.reverse();
24+
25+
const mySpriteSpot = document.querySelector('#poke-selector');
26+
27+
const div = document.createElement('div');
28+
div.setAttribute('class', 'wrapper');
29+
30+
for (sprite in sprites) {
31+
const eachSpriteDiv = document.createElement('div');
32+
eachSpriteDiv.id = sprite;
33+
eachSpriteDiv.setAttribute('class', 'box');
34+
35+
// const name = document.createElement('h4');
36+
// name.innerText = `This is sprite ${sprite}`;
37+
// eachSpriteDiv.appendChild(name);
38+
// console.log(name);
39+
40+
const picture = document.createElement('IMG');
41+
picture.src = sprites[sprite];
42+
eachSpriteDiv.appendChild(picture);
43+
44+
div.appendChild(eachSpriteDiv);
45+
46+
mySpriteSpot.appendChild(div);
47+
48+
console.log('Name is' + name + 'sprite is' + sprites[sprite]);
49+
}

‎Week2/homework/squirtle-squad/squirtle.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
@import url('https://fonts.googleapis.com/css?family=Abel');
2+
@import url('https://fonts.googleapis.com/css?family=Karla');
3+
body {
4+
background-image: url('water-background.jpg');
5+
font-family: Karla;
6+
margin: 40px;
7+
color: #f4f4ed;
8+
font-size: 30px;
9+
}
10+
11+
h4 {
12+
text-decoration: underline;
13+
}
14+
15+
a:visited {
16+
color: turquoise;
17+
}
18+
19+
section {
20+
position: absolute;
21+
left: 0;
22+
right: 0;
23+
margin-left: auto;
24+
margin-right: auto;
25+
width: 85%;
26+
height: auto;
27+
background-color: #084c61;
28+
text-align: center;
29+
}
30+
31+
.wrapper {
32+
font-family: Abel;
33+
text-align: left;
34+
padding-top: 25px;
35+
padding-bottom: 25px;
36+
font-size: 20px;
37+
display: grid;
38+
align-items: center;
39+
grid-template-columns: 1fr 1fr 1fr 1fr;
40+
grid-gap: 10px;
41+
background-color: #2e2c2f;
42+
color: #444;
43+
}
44+
45+
.box {
46+
background-color: #084c61;
47+
color: #c6c5b9;
48+
border-radius: 5px;
49+
font-size: 100%;
50+
max-width: 400px;
51+
min-height: 200px;
52+
}
53+
54+
img {
55+
width: auto;
56+
height: 200px;
57+
padding: 10px;
58+
margin: 10px;
59+
}
60+
61+
#footer {
62+
font-size: 20px;
63+
padding: 20px;
64+
}
65+
66+
@media screen and (max-width: 600px) {
67+
img {
68+
display: none;
69+
}
70+
@media only screen and (max-width: 800px) {
71+
.wrapper {
72+
display: grid;
73+
align-items: center;
74+
grid-template-columns: 1fr 1fr;
75+
}
76+
.box {
77+
height: 400px;
78+
}
79+
}
80+
}

‎Week2/homework/squirtle-squad/water-background.jpg‎

2.29 MB
Loading

0 commit comments

Comments
 (0)