├── README.md
├── css
└── style.css
├── index.html
└── js
└── main.js
/README.md:
--------------------------------------------------------------------------------
1 | # AmiiboComplexApi
2 | In this project im accessing a Nintendo API so i can pull characters and show their amiibo or card IMGs during the process i am accessing another API that guesses if the Amiibo name is male or female. So an example would be if I type in Mario a IMG pops up and a text where it says Male.
3 |
4 | # How It's Made:
5 | Tech used: HTML, CSS, JavaScript, two API's
6 |
7 | # Lessons Learned:
8 | I learn how to use Api's and how to get them to work with one another!
9 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | box-sizing: border-box;
3 | }
4 |
5 | body{
6 | background-color: #FF000B;
7 | text-align: center;
8 | }
9 |
10 | header{
11 | border: 4px solid #F8FFFF;
12 | color: #F8FFFF;
13 | margin-bottom: 1%;
14 | }
15 |
16 | input{
17 | background-color: transparent;
18 | height: 40px;
19 | color: #F8FFFF;
20 | font-size: 2rem;
21 | border: none;
22 | border-bottom: 4px solid #F8FFFF;
23 | }
24 |
25 | button{
26 | height: 40px;
27 | color: #F8FFFF;
28 | background-color: transparent;
29 | border-radius: 4px;
30 | font-size: 2rem;
31 | }
32 |
33 | ul{
34 | list-style: none;
35 | }
36 |
37 | li{
38 | font-size: 2rem;
39 | color: #F8FFFF;
40 | }
41 |
42 | img{
43 | width: 400px;
44 | height: 400px;
45 | }
46 |
47 | .box{
48 | text-align: center;
49 | }
50 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Amiibo
7 |
8 |
9 |
13 |
14 |
15 |
16 |
17 |
18 |
21 |
22 |
![]()
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | $("button").on("click",function(){
2 | var amiibo = $("#lookUp").val()
3 | var apiUrl = "http://www.amiiboapi.com/api/amiibo/?character="+ amiibo
4 | $.ajax({
5 | url:apiUrl,
6 |
7 | success: function(response){
8 | var game = response.amiibo
9 | console.log(response);
10 | game.forEach(function(peach){
11 | $("img").attr("src",peach.image)
12 |
13 | })
14 | },
15 |
16 | error:function(err){
17 | console.log("error")
18 | }
19 | });
20 |
21 | var apiUrl2 = "https://api.genderize.io/?name=" + amiibo
22 | $.ajax({
23 | url:apiUrl2,
24 | success: function(response){
25 | console.log(response)
26 | $('ul').append(''+response.gender+'')
27 | },
28 | error:function(err){
29 | console.log("error")
30 | }
31 | });
32 | });
33 |
--------------------------------------------------------------------------------