Skip to content

Commit 47c23fc

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1413 from Avdhesh-Varshney/solarModel
[SSoC 2.0] Solar System Model Ready
2 parents 67ca101 + 81413a7 commit 47c23fc

7 files changed

Lines changed: 577 additions & 0 deletions

File tree

‎Projects/Solar System Model/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# **Morse Code Convertor**
2+
---
3+
4+
5+
## **Description 📃**
6+
- This program enhance the knowledge of css
7+
- This front end is just a look of Solar system model
8+
- Adding responsiveness even for the mobile devices
9+
- Adding data of all the solar bodies
10+
- On hovering will flash the data on screen
11+
- Moving planets continuously around the sun
12+
13+
<br>
14+
15+
16+
## **Tech Stack 🎮**
17+
- HTML
18+
- CSS
19+
- JavaScript
20+
21+
<br>
22+
23+
24+
## **Demo Video 📸**
25+
26+
https://github.com/TusharKesarwani/Front-End-Projects/assets/114330097/d28bc841-3516-4e4c-b8ea-6d345f4fa6d7
27+
28+
<br>
29+
30+
31+
## **Author**
32+
33+
[Avdhesh Varshney](https://github.com/Avdhesh-Varshney)
34+

‎Projects/Solar System Model/favicon.ico‎

15 KB
Binary file not shown.

‎Projects/Solar System Model/index.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<!-- Logo of the website -->
9+
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
10+
11+
<!-- Title of the website -->
12+
<title>Solar System Model</title>
13+
14+
<!-- Stylesheet -->
15+
<link rel="stylesheet" href="./style.css">
16+
</head>
17+
18+
<body>
19+
<!-- Heading section -->
20+
<section class="font-style">
21+
<h1 class="head">Solar System</h1>
22+
<p class="author">
23+
Created with ❤️ by <a href="https://github.com/Avdhesh-Varshney">Avdhesh Varshney</a>
24+
</p>
25+
</section>
26+
27+
<!-- data of the planets -->
28+
<div class="data">
29+
<span class="text"></span>
30+
</div>
31+
32+
<!-- Planets section -->
33+
<section>
34+
<!-- Pluto -->
35+
<div class="solarBody plu-orbit">
36+
<div class="rcrcl pluto"></div>
37+
</div>
38+
39+
<!-- Neptune -->
40+
<div class="solarBody nep-orbit">
41+
<div class="rcrcl neptune"></div>
42+
</div>
43+
44+
<!-- Uranus -->
45+
<div class="solarBody ura-orbit">
46+
<div class="rcrcl uranus"></div>
47+
</div>
48+
49+
<!-- Saturn -->
50+
<div class="solarBody sat-orbit">
51+
<div class="rcrcl saturn"></div>
52+
</div>
53+
54+
<!-- Jupiter -->
55+
<div class="solarBody jup-orbit">
56+
<div class="rcrcl jupiter"></div>
57+
</div>
58+
59+
<!-- Mars -->
60+
<div class="solarBody mar-orbit">
61+
<div class="rcrcl mars"></div>
62+
</div>
63+
64+
<!-- Earth -->
65+
<div class="solarBody ear-orbit">
66+
<div class="rcrcl earth"></div>
67+
</div>
68+
69+
<!-- Venus -->
70+
<div class="solarBody ven-orbit">
71+
<div class="rcrcl venus"></div>
72+
</div>
73+
74+
<!-- Mercury -->
75+
<div class="solarBody mer-orbit">
76+
<div class="rcrcl mercury"></div>
77+
</div>
78+
79+
<!-- Sun -->
80+
<div class="solarBody sun rcrcl centered"></div>
81+
</section>
82+
83+
<!-- Javascript file -->
84+
<script src="./script.js"></script>
85+
</body>
86+
87+
</html>

‎Projects/Solar System Model/script.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
// Data of the Solar Bodies
2+
3+
const solarBodiesData = {
4+
"sun": {
5+
name: "Sun",
6+
speed: "0 km/h<br>( Orbit Velocity )",
7+
size: "4,370,005 km<br>( Equatorial Circumference )",
8+
distance: "0 km<br>( From The Sun )"
9+
},
10+
11+
"mer-orbit": {
12+
name: "Mercury",
13+
speed: "170,503 km/h<br>( Orbit Velocity )",
14+
size: "15,329 km<br>( Equatorial Circumference )",
15+
distance: "57,909,227 km<br>( From The Sun )"
16+
},
17+
18+
"ven-orbit": {
19+
name: "Venus",
20+
speed: "126,074 km/h<br>( Orbit Velocity )",
21+
size: "38,024 km<br>( Equatorial Circumference )",
22+
distance: "108,209,475 km<br>( From The Sun )"
23+
},
24+
25+
"ear-orbit": {
26+
name: "Earth",
27+
speed: "107,218 km/h<br>( Orbit Velocity )",
28+
size: "40,075 km<br>( Equatorial Circumference )",
29+
distance: "149,598,262 km<br>( From The Sun )"
30+
},
31+
32+
"mar-orbit": {
33+
name: "Mars",
34+
speed: "86,677 km/h<br>( Orbit Velocity )",
35+
size: "21,296 km<br>( Equatorial Circumference )",
36+
distance: "227,943,824 km<br>( From The Sun )"
37+
},
38+
39+
"jup-orbit": {
40+
name: "Jupiter",
41+
speed: "47,002 km/h<br>( Orbit Velocity )",
42+
size: "439,363 km<br>( Equatorial Circumference )",
43+
distance: "778,340,821 km<br>( From The Sun )"
44+
},
45+
46+
"sat-orbit": {
47+
name: "Saturn",
48+
speed: "34,701 km/h<br>( Orbit Velocity )",
49+
size: "365,882 km<br>( Equatorial Circumference )",
50+
distance: "1,426,666,422 km<br>( From The Sun )"
51+
},
52+
53+
"ura-orbit": {
54+
name: "Uranus",
55+
speed: "24,477 km/h<br>( Orbit Velocity )",
56+
size: "159,354 km<br>( Equatorial Circumference )",
57+
distance: "2,870,658,186 km<br>( From The Sun )"
58+
},
59+
60+
"nep-orbit": {
61+
name: "Neptune",
62+
speed: "19,566 km/h<br>( Orbit Velocity )",
63+
size: "154,704 km<br>( Equatorial Circumference )",
64+
distance: "4,498,396,441 km<br>( From The Sun )"
65+
},
66+
67+
"plu-orbit": {
68+
name: "Pluto",
69+
speed: "17,064 km/h<br>( Orbit Velocity )",
70+
size: "4,493 km<br>( Equatorial Circumference )",
71+
distance: "5,906,380,000 km<br>( From The Sun )"
72+
}
73+
};
74+
75+
// Global variables
76+
let data = document.querySelector('.data');
77+
let text = document.querySelector('.text');
78+
79+
let allSolarBodies = document.querySelectorAll('.solarBody');
80+
81+
// Targeting all the solar bodies
82+
allSolarBodies.forEach(body => {
83+
// Adding event listener on all the solar bodies
84+
body.addEventListener('mouseenter', event => {
85+
let solarBody = event.target.classList[1];
86+
87+
// Adding data
88+
text.innerHTML = `Name - ${solarBodiesData[solarBody].name}<br><br>
89+
Speed - ${solarBodiesData[solarBody].speed}<br><br>
90+
Size - ${solarBodiesData[solarBody].size}<br><br>
91+
Distance - ${solarBodiesData[solarBody].distance}`;
92+
93+
// Changing opacity of the data on hovering
94+
data.style.opacity = 1;
95+
});
96+
97+
// Removing data after mouse arrow is removed
98+
body.addEventListener('mouseleave', ()=> {
99+
data.style.opacity = 0;
100+
});
101+
});

0 commit comments

Comments
 (0)