-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
143 lines (90 loc) · 3.23 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
// API APOD + BOTOES
const apiKey = "vdu70esjaX6AvxMuTIa4UnmHFVY261gUE5AqlmDV";
const url = "https://api.nasa.gov/planetary/apod?";
let container = document.querySelector("main");
let button = document.getElementById("fetch-image");
button.addEventListener("click", () => {
getImage("normal");
});
let hdButton = document.getElementById("fetch-hd");
hdButton.addEventListener("click", () => {
getImage("hd");
});
function getImage(value) {
let imageContainer = document.querySelector(".image-container");
imageContainer.remove();
let newImageContainer = document.createElement("div");
newImageContainer.classList.add("image-container");
container.append(newImageContainer);
let dateInput = document.querySelector(".details-input input");
let date = dateInput.value;
let request = new XMLHttpRequest();
request.open("GET", url + "date=" + date + "&api_key=" + apiKey, true);
request.send();
request.onload = function () {
if (request.status === 200) {
let data = JSON.parse(request.responseText);
let imageUrl;
if (value === "hd") {
imageUrl = data.hdurl;
} else {
imageUrl = data.url;
}
let image = document.createElement("img");
image.src = imageUrl;
newImageContainer.append(image);
} else {
window.alert("Coloque um formato de data correto! Ex: (2023-09-16).");
}
};
}
// Botao auto scroll down home
const botao = document.querySelector('#botao-arrow')
botao.addEventListener('click', () => {
window.scroll({top: window.innerHeight, behavior: "smooth"})
botao.style.display = 'none'
});
// VOU UTILIZAR SCRIPTS ABAIXO AINDA!!!!
// ------------------------------------------------------------------------------------>
// FADE DE ROLAGEM
/* let sections = document.querySelectorAll("#principal");
window.onscroll = function fadeIn() {
sections.forEach(section => {
let sectionSize = section.getBoundingClientRect();
let bottomPart = sectionSize.bottom;
if (window.scrollY >= bottomPart) {
section.style.opacity = "1";
section.style.transform = "translateX(0)";
section.style.transition = "1s ease-in-out";
} else {
section.style.opacity = "0";
section.style.transform = "translateX(-10px)";
section.style.transition = "1s ease-in-out";
}
});
} */
// --------------------------------------------------------------------------------->
// outra tentativa de scroll
// $(function() {
/* $('.scroll-down').click (function() {
$('html, body').animate({scrollTop: $('section.ok').offset().top }, 'slow');
return false;
});
}); */
// ---------------------------------------------------------------------------------->
// smooth
/*
const body = document.body,
jsScroll = document.getElementsByClassName('principal')[0],
height = jsScroll.getBoundingClientRect().height - 1,
speed = 0.05
var offset = 0
body.style.height = Math.floor(height) + "px"
function smoothScroll() {
offset += (window.pageYOffset - offset) * speed
var scroll = "translateY(-" + offset + "px) translateZ(0)"
jsScroll.style.transform = scroll
raf = requestAnimationFrame(smoothScroll)
}
smoothScroll()
*/