File tree Expand file tree Collapse file tree
30DaysOfJavaScript/assets
43 - Getting Started with APIs Expand file tree Collapse file tree Original file line number Diff line number Diff line change 1+ btn_generate . addEventListener ( "click" , function ( ) {
2+ fetch ( "https://api.thecatapi.com/v1/images/search?limit=5&page=10&order=Desc" )
3+ . then ( function ( response ) {
4+ return response . json ( )
5+ } )
6+ . then ( function ( data ) {
7+ console . log ( data )
8+ let newImg = null
9+ data . forEach ( function ( image ) {
10+ newImg = document . createElement ( "img" )
11+ newImg . src = image . url
12+ newImg . classList . add ( 'gallery__img' )
13+ gallery . appendChild ( newImg )
14+ } )
15+ } )
16+ } )
Original file line number Diff line number Diff line change 1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge ">
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
7+ < title > Kitties API</ title >
8+ < link rel ="stylesheet " href ="styles.css ">
9+ </ head >
10+ < body >
11+ < div class ="container ">
12+ < h1 > Kitties Gallery</ h1 >
13+ < button id ="btn_generate " class ="btn "> Get 5 New Kitties</ button >
14+ < div id ="gallery " class ="gallery "> </ div >
15+ </ div >
16+ < footer >
17+ < p >
18+ By < a href ="https://github.com/alexventuraio "> Alex Ventura</ a >
19+ </ p >
20+ </ footer >
21+ < script src ="app.js "> </ script >
22+ </ body >
23+ </ html >
Original file line number Diff line number Diff line change 1+ @import url ('https://fonts.googleapis.com/css?family=Open+Sans&display=swap' );
2+
3+ : root {
4+ --error-color : # dc3545 ;
5+ --success-color : # 28a745 ;
6+ --warning-color : # ffc107 ;
7+ }
8+
9+ * {
10+ margin : 0 ;
11+ padding : 0 ;
12+ box-sizing : border-box;
13+ }
14+
15+ body {
16+ font-family : 'Open Sans' , sans-serif;
17+ font-size : 16px ;
18+ background-color : # 19172e ;
19+ display : flex;
20+ flex-direction : column;
21+ justify-content : center;
22+ align-items : center;
23+ min-height : 100vh ;
24+ }
25+
26+ .container {
27+ background-color : rgba (255 , 255 , 255 , 0.05 );
28+ padding : 1em ;
29+ border-radius : 5px ;
30+ box-shadow : 0 2px 5px rgba (0 , 0 , 0 , 0.3 );
31+ width : 90% ;
32+ text-align : center;
33+ }
34+
35+ h1 {
36+ color : # fff ;
37+ margin-bottom : 20px ;
38+ }
39+
40+ .gallery {
41+ display : grid;
42+ grid-template-columns : repeat (5 , 1fr );
43+ grid-template-rows : repeat (5 , 10vw );
44+ grid-gap : 15px ;
45+ }
46+
47+ .gallery__img {
48+ width : 100% ;
49+ height : 100% ;
50+ object-fit : cover;
51+ }
52+
53+ .btn {
54+ text-transform : uppercase;
55+ width : 400px ;
56+ height : 35px ;
57+ outline : none;
58+ border : none;
59+ margin : 20px 0 ;
60+ font-size : 18px ;
61+ border-radius : 3px ;
62+ background-color : white;
63+ cursor : pointer;
64+ transition : all 300ms ease;
65+ }
66+
67+ .btn : hover {
68+ color : # fff ;
69+ background-color : # 5c1ed5 ;
70+ cursor : pointer;
71+ }
72+
73+ .btn : focus {
74+ outline : none;
75+ }
76+
77+ footer {
78+ color : pink;
79+ font-size : 1rem ;
80+ padding : 22px ;
81+ line-height : 3vh ;
82+ margin-top : 30px ;
83+ }
84+
85+ footer a {
86+ color : inherit;
87+ }
88+
89+ footer a : visited {
90+ color : inherit;
91+ }
Original file line number Diff line number Diff line change @@ -107,6 +107,9 @@ Repo containing all the projects made in 30 Days while completing the <b>30 Days
107107## [ Day 38 - Snake Game] ( https://30daysofjs.netlify.app/32%20-%20Snake%20Game/index.html )
108108![ Snake Game] ( https://github.com/swapnilsparsh/30DaysOfJavaScript/blob/master/30DaysOfJavaScript/assets/38.png )
109109
110+ ## [ Day 43 - Getting Started with APIs] ( https://30daysofjs.netlify.app/43%20-%20Getting%20Started%20with%20APIs/index.html )
111+ ![ Getting Started with APIs] ( https://github.com/swapnilsparsh/30DaysOfJavaScript/blob/master/30DaysOfJavaScript/assets/43.png )
112+
110113## [ Day 44 - Infinite Scroll] ( https://30daysofjs.netlify.app/44%20-%20infinite%20scroll/index.html )
111114![ Feedback UI] ( https://github.com/swapnilsparsh/30DaysOfJavaScript/blob/master/30DaysOfJavaScript/assets/44.png )
112115## License
Original file line number Diff line number Diff line change @@ -287,6 +287,12 @@ <h4>Gradient Generator</h4>
287287
288288 </ div >
289289
290+ < div class ="item ">
291+ < a target ="_blank " href ="43 - Getting Started with APIs/index.html ">
292+ < img src ="30DaysOfJavaScript/assets/43.png " alt ="Getting Started with APIs " />
293+ < h4 > Getting Started with APIs</ h4 >
294+ </ a >
295+ </ div >
290296 < div class ="item ">
291297 < a target ="_blank " href ="44 - Infinite Scroll/index.html ">
292298 < img src ="30DaysOfJavaScript/assets/44.png " alt ="Infinite Scroll " />
You can’t perform that action at this time.
0 commit comments