├── README.md ├── img └── coracao.png ├── erro.html ├── css ├── reset.css └── style.css ├── index.html └── js └── main.js /README.md: -------------------------------------------------------------------------------- 1 | # projeto-APOD 2 | Criação de site utilizando API fornecida pela NASA 3 | -------------------------------------------------------------------------------- /img/coracao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicckm/projeto-APOD/HEAD/img/coracao.png -------------------------------------------------------------------------------- /erro.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Astronomy Picture of the Day 10 | 11 | 12 |
13 |

Astronomy Picture of the Day

14 |
15 |
16 |
17 | 18 |

Oops! Página não encontrada!

19 | 20 | Voltar para o site 21 |
22 |
23 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Astronomy Picture of the Day 11 | 12 | 13 |
14 |

Astronomy Picture of the Day

15 |
16 |
17 |
18 |
19 | 20 | 21 | 22 |
23 | 24 |

25 | 26 |

27 | 28 | 29 | 30 | 31 |

32 | 33 |

34 |
35 |
36 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | let data = document.querySelector("#data"); 2 | let imagem = document.querySelector(".imagem"); 3 | let descricao = document.querySelector("#descricao"); 4 | let form = document.querySelector("#form"); 5 | let video = document.querySelector(".video"); 6 | let titulo = document.querySelector("#titulo"); 7 | let copyright = document.querySelector("#copyrightAPI") 8 | 9 | 10 | // requisição API 11 | 12 | let reqAPI = new XMLHttpRequest(); 13 | let urlAPI = "https://api.nasa.gov/planetary/apod?api_key=Ybsgh0M67YWj8jz90WZHMAHc2eLtGBSrRal69AB5"; 14 | 15 | form.addEventListener("submit", function(event){ 16 | event.preventDefault(); 17 | 18 | let urlComData = `https://api.nasa.gov/planetary/apod?api_key=Ybsgh0M67YWj8jz90WZHMAHc2eLtGBSrRal69AB5&date=${this.elements.inputData.value}`; 19 | 20 | reqAPI.open("GET", urlComData); 21 | reqAPI.send(); 22 | }); 23 | 24 | reqAPI.open("GET", urlAPI); 25 | 26 | reqAPI.onload = function(){ 27 | 28 | if(reqAPI.status == 200){ 29 | let reqJSON = JSON.parse(reqAPI.responseText) 30 | 31 | let videoJSON = reqJSON.url; 32 | let dataJSON = reqJSON.date; 33 | let imagemJSON = reqJSON.url; 34 | let descricaoJSON = reqJSON.explanation; 35 | let tituloJSON = reqJSON.title; 36 | let copyrightJSON = reqJSON.copyright; 37 | 38 | titulo.textContent = tituloJSON; 39 | data.textContent = dataJSON; 40 | descricao.textContent = descricaoJSON; 41 | copyright.textContent = `Copyright: ${copyrightJSON}`; 42 | 43 | if(reqJSON.media_type == "image"){ 44 | video.classList.add("tiraDisplay"); 45 | imagem.src = imagemJSON; 46 | imagem.classList.remove("tiraDisplay"); 47 | 48 | } else { 49 | imagem.classList.add("tiraDisplay"); 50 | video.src = videoJSON; 51 | video.classList.remove("tiraDisplay"); 52 | } 53 | } else { 54 | window.location.href = "erro.html" 55 | } 56 | } 57 | 58 | reqAPI.send(); 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #e6e6e6; 3 | } 4 | 5 | header { 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | height: 100px; 10 | background-color: black 11 | } 12 | 13 | header h1 { 14 | font-size: 40px; 15 | text-align: center; 16 | color: white; 17 | } 18 | 19 | main { 20 | 21 | height: 100vh; 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | } 26 | 27 | .container { 28 | height: 100vh; 29 | width: 100vw; 30 | width: 940px; 31 | text-align: center; 32 | } 33 | 34 | #form label { 35 | display: block; 36 | padding-top: 20px; 37 | font-size: 30px; 38 | } 39 | 40 | #form input { 41 | margin: 15px 10px 0 0; 42 | outline: none; 43 | padding: 5px; 44 | border-radius: 5px; 45 | } 46 | 47 | #form button { 48 | background: black; 49 | border: none; 50 | color: white; 51 | padding: 9px; 52 | outline: none; 53 | border-radius: 5px; 54 | } 55 | 56 | #titulo { 57 | margin-top: 20px; 58 | font-size: 32px; 59 | } 60 | 61 | #data { 62 | font-size: 20px; 63 | padding: 15px 0; 64 | } 65 | 66 | .imagem { 67 | width: 600px; 68 | height: 400px; 69 | border-radius: 30px; 70 | display: inline-block; 71 | } 72 | 73 | .video { 74 | width: 600px; 75 | width: 600px; 76 | border-radius: 30px; 77 | display: inline-block; 78 | } 79 | 80 | #descricao { 81 | padding: 30px 0; 82 | font-size: 20px; 83 | } 84 | 85 | #copyrightAPI { 86 | margin-bottom: 120px; 87 | font-size: 20px; 88 | font-weight: bold; 89 | } 90 | 91 | .tiraDisplay { 92 | display: none; 93 | width: 0; 94 | height: 0; 95 | } 96 | 97 | footer { 98 | position: fixed; 99 | width: 100%; 100 | padding: 20px; 101 | bottom: 0; 102 | height: 50px; 103 | background-color: black; 104 | color: white; 105 | display: flex; 106 | justify-content: center; 107 | align-items: center; 108 | font-size: 20px; 109 | } 110 | 111 | footer p{ 112 | margin-right: 10px; 113 | margin-bottom: 3px; 114 | } 115 | 116 | #erro { 117 | margin: 30px 0; 118 | color: red; 119 | font-size: 30px; 120 | } 121 | 122 | .link { 123 | font-size: 23px; 124 | text-decoration: none; 125 | } 126 | 127 | .link:visited { 128 | color: black; 129 | } 130 | 131 | .link:hover { 132 | color: white; 133 | background: black; 134 | padding: 5px; 135 | border-radius: 5px; 136 | } 137 | 138 | .link:hover:visited { 139 | color: white; 140 | background: black; 141 | padding: 5px; 142 | border-radius: 5px; 143 | } 144 | 145 | @media(max-width: 768px) { 146 | header h1 { 147 | font-size: 25px; 148 | } 149 | 150 | .container{ 151 | height: 100vh; 152 | } 153 | 154 | #titulo { 155 | font-size: 26px; 156 | } 157 | 158 | .imagem, .video { 159 | width: 300px; 160 | height: 200px; 161 | } 162 | 163 | #descricao { 164 | margin: 0 10px; 165 | } 166 | 167 | #erro { 168 | font-size: 26px; 169 | } 170 | } --------------------------------------------------------------------------------