https://jayspacewebsite.web.app/code.js

1var mercury = document.getElementById("mercury")
2var venus = document.getElementById("venus")
3var earth = document.getElementById("earth")
4var mars = document.getElementById("mars")
5var jupiter = document.getElementById("jupiter")
6var saturn = document.getElementById("saturn")
7var uranus = document.getElementById("uranus")
8var neptune = document.getElementById("neptune")
9var mercuryDes = document.getElementById("mercury-des");
10var venusDes = document.getElementById("venus-des");
11var earthDes = document.getElementById("earth-des");
12var marsDes = document.getElementById("mars-des");
13var jupiterDes = document.getElementById("jupiter-des");
14var saturnDes = document.getElementById("saturn-des");
15var uranusDes = document.getElementById("uranus-des");
16var neptuneDes = document.getElementById("neptune-des");
17
18var selected = "";
19var link = "";
20var keys = [];
21
22
23const planets = [mercury, venus, earth, mars, jupiter, saturn, uranus, neptune]
24console.log(planets)
25
26function positionPlanets() {
27    var planetLeft = -50;
28    for (i = 0; i < 8; i++) {
29        var planet = planets[i]
30        planet.style.left = planetLeft + "px";
31        planet.style.transformOrigin = `${(Math.abs(planetLeft)+100+'px')} 0px`;
32        // console.log(`"${(Math.abs(planetLeft)+100+'px')} 0px"`)
33        planetLeft += -50;
34    }
35}
36
37function checkForHover() {
38    function stopAnimation(pl, plDes){
39        pl.style.animationPlayState = "paused";
40        var position = pl.getBoundingClientRect();
41        plDes.style.display = "block";
42        var fragment = document.createDocumentFragment();
43        fragment.appendChild(plDes);
44        document.getElementById("planets").appendChild(fragment);
45        var wl = pl.clientWidth;
46        var hl = pl.clientHeight;
47        var wd = plDes.clientWidth;
48        var hd = plDes.clientHeight;
49        var pt = plDes.style.paddingTop;
50        plDes.style.left = (position.left+hl)+"px";
51        plDes.style.top = (position.top-hd)+"px";
52
53        selected = pl.id;
54        console.log(selected.id)
55    }
56    function startAnimation(pl, plDes){
57        plDes.style.display = "none";
58        pl.style.animationPlayState = "running";
59
60        selected = "";
61    }
62    mercury.onmouseover = () => {stopAnimation(mercury, mercuryDes)}
63    venus.onmouseover = () => {stopAnimation(venus, venusDes)}
64    earth.onmouseover = () => {stopAnimation(earth, earthDes)}
65    mars.onmouseover = () => {stopAnimation(mars, marsDes)}
66    jupiter.onmouseover = () => {stopAnimation(jupiter,jupiterDes)}
67    saturn.onmouseover = () => {stopAnimation(saturn, saturnDes)}
68    uranus.onmouseover = () => {stopAnimation(uranus, uranusDes)}
69    neptune.onmouseover = () => {stopAnimation(neptune, neptuneDes)}
70
71    mercury.onmouseout = () => {startAnimation(mercury, mercuryDes)}
72    venus.onmouseout = () => {startAnimation(venus, venusDes)}
73    earth.onmouseout = () => {startAnimation(earth, earthDes)}
74    mars.onmouseout = () => {startAnimation(mars, marsDes)}
75    jupiter.onmouseout = () => {startAnimation(jupiter, jupiterDes)}
76    saturn.onmouseout = () => {startAnimation(saturn, saturnDes)}
77    uranus.onmouseout = () => {startAnimation(uranus, uranusDes)}
78    neptune.onmouseout = () => {startAnimation(neptune, neptuneDes)}
79}
80
81document.addEventListener("click", () => {
82    if (!selected == "") {
83        //location.replace(`./sub-des/${selected}/main.html`)
84        window.open(`./sub-des/${selected}/main.html`, "_self")
85    }
86})
87
88// document.addEventListener("keydown", (e) => {
89//     if (e.keyCode != 13 || e.keyCode != 32) {
90//         link += String.fromCharCode(e.keyCode);
91//         console.log(link);
92//     } else if (e.keyCode == 32) {
93//         link += "+";
94//     } else {
95//         window.open(link);
96//     }
97// })
98
99checkForHover();
100positionPlanets();