Skip to content

Commit

Permalink
(CI) format code
Browse files Browse the repository at this point in the history
  • Loading branch information
Zero to Mastery committed Oct 22, 2023
1 parent c06364f commit da88356
Show file tree
Hide file tree
Showing 3 changed files with 164 additions and 108 deletions.
181 changes: 94 additions & 87 deletions Art/Shubhamkashyap1601/solar.html
View file
Original file line number Diff line number Diff line change
@@ -1,100 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Solar System</title>

</head>
<body>
<div class="orbit orbit-mercury"></div>
<div class="orbit orbit-venus"></div>
<div class="orbit orbit-earth"></div>
<div class="orbit orbit-mars"></div>
<div class="orbit orbit-jupiter"></div>
<div class="orbit orbit-saturn"></div>
<div class="orbit orbit-uranus"></div>
<div class="orbit orbit-neptune"></div>

<div class="sun"></div>
<div class="planet mercury"></div>
<div class="planet venus"></div>
<div class="planet earth"></div>
<div class="planet mars"></div>
<div class="planet jupiter"></div>
<div class="planet saturn"></div>
<div class="planet uranus"></div>
<div class="planet neptune"></div>
<div class="stars"></div>


<div id="planet-info"></div>

<script>
const planets = document.querySelectorAll('.planet');
const planetNames = ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'];
const distances = [100, 160, 220, 280, 360, 460, 560, 640]; // Orbital distances from the sun
const speeds = [0.1, 0.07, 0.05, 0.03, 0.01, 0.008, 0.005, 0.003]; // Orbital speeds of the planets

const planetInfo = document.getElementById('planet-info');

function displayPlanetName(index) {
planetInfo.textContent = planetNames[index];
}

function hidePlanetName() {
planetInfo.textContent = '';
}

planets.forEach((planet, index) => {
planet.addEventListener('mouseover', () => {
displayPlanetName(index);
});

planet.addEventListener('mouseout', () => {
hidePlanetName();
});
});
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Solar System</title>
</head>
<body>
<div class="orbit orbit-mercury"></div>
<div class="orbit orbit-venus"></div>
<div class="orbit orbit-earth"></div>
<div class="orbit orbit-mars"></div>
<div class="orbit orbit-jupiter"></div>
<div class="orbit orbit-saturn"></div>
<div class="orbit orbit-uranus"></div>
<div class="orbit orbit-neptune"></div>

<div class="sun"></div>
<div class="planet mercury"></div>
<div class="planet venus"></div>
<div class="planet earth"></div>
<div class="planet mars"></div>
<div class="planet jupiter"></div>
<div class="planet saturn"></div>
<div class="planet uranus"></div>
<div class="planet neptune"></div>
<div class="stars"></div>

<div id="planet-info"></div>

<script>
const planets = document.querySelectorAll('.planet');
const planetNames = [
'Mercury',
'Venus',
'Earth',
'Mars',
'Jupiter',
'Saturn',
'Uranus',
'Neptune'
];
const distances = [100, 160, 220, 280, 360, 460, 560, 640]; // Orbital distances from the sun
const speeds = [0.1, 0.07, 0.05, 0.03, 0.01, 0.008, 0.005, 0.003]; // Orbital speeds of the planets

const planetInfo = document.getElementById('planet-info');

function displayPlanetName(index) {
planetInfo.textContent = planetNames[index];
}

function orbitPlanets() {
let time = performance.now();
function hidePlanetName() {
planetInfo.textContent = '';
}

planets.forEach((planet, index) => {
const distanceX = distances[index];
const distanceY = distances[index] * 0.6; // Adjust the Y-axis distance for elliptical orbit
const speed = speeds[index];
const angle = (time * speed) / 20; // Convert time to seconds and adjust speed
const x = distanceX * Math.cos(angle);
const y = distanceY * Math.sin(angle);
planet.style.transform = `translate(${x}px, ${y}px)`;
});
planet.addEventListener('mouseover', () => {
displayPlanetName(index);
});

requestAnimationFrame(orbitPlanets);
}
planet.addEventListener('mouseout', () => {
hidePlanetName();
});
});

orbitPlanets();
function orbitPlanets() {
let time = performance.now();

function createRandomStars() {
const numberOfStars = 100; // Adjust the number of stars as desired
const starsContainer = document.querySelector('.stars');
planets.forEach((planet, index) => {
const distanceX = distances[index];
const distanceY = distances[index] * 0.6; // Adjust the Y-axis distance for elliptical orbit
const speed = speeds[index];
const angle = (time * speed) / 20; // Convert time to seconds and adjust speed
const x = distanceX * Math.cos(angle);
const y = distanceY * Math.sin(angle);
planet.style.transform = `translate(${x}px, ${y}px)`;
});

for (let i = 0; i < numberOfStars; i++) {
const star = document.createElement('div');
star.className = 'star';
star.style.left = `${Math.random() * 100}vw`;
star.style.top = `${Math.random() * 100}vh`;
star.style.width = `${Math.random() * 80}px`;
star.style.height = star.style.width;
// Generate a random twinkling time between 0.5s and 2s
const twinklingTime = Math.random() * 5 + 0.5;
star.style.animation = `twinkle ${twinklingTime}s infinite`;
requestAnimationFrame(orbitPlanets);
}

starsContainer.appendChild(star);
orbitPlanets();

function createRandomStars() {
const numberOfStars = 100; // Adjust the number of stars as desired
const starsContainer = document.querySelector('.stars');

for (let i = 0; i < numberOfStars; i++) {
const star = document.createElement('div');
star.className = 'star';
star.style.left = `${Math.random() * 100}vw`;
star.style.top = `${Math.random() * 100}vh`;
star.style.width = `${Math.random() * 80}px`;
star.style.height = star.style.width;
// Generate a random twinkling time between 0.5s and 2s
const twinklingTime = Math.random() * 5 + 0.5;
star.style.animation = `twinkle ${twinklingTime}s infinite`;

starsContainer.appendChild(star);
}
}
}

createRandomStars();
</script>
</body>
createRandomStars();
</script>
</body>
</html>
89 changes: 69 additions & 20 deletions Art/Shubhamkashyap1601/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,18 @@ body {
opacity: 0.5;
animation: twinkle 1s infinite;
background: url('star.png') no-repeat center center/contain;

}

@keyframes twinkle {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.sun {
width: 80px;
Expand All @@ -57,14 +62,38 @@ body {
pointer-events: none;
}

.orbit-mercury { width: 210px; height: 126px; }
.orbit-venus { width: 330px; height: 198px; }
.orbit-earth { width: 450px; height: 270px; }
.orbit-mars { width: 570px; height: 342px; }
.orbit-jupiter { width: 730px; height: 438px; }
.orbit-saturn { width: 930px; height: 558px; }
.orbit-uranus { width: 1130px; height: 678px; }
.orbit-neptune { width: 1290px; height: 774px; }
.orbit-mercury {
width: 210px;
height: 126px;
}
.orbit-venus {
width: 330px;
height: 198px;
}
.orbit-earth {
width: 450px;
height: 270px;
}
.orbit-mars {
width: 570px;
height: 342px;
}
.orbit-jupiter {
width: 730px;
height: 438px;
}
.orbit-saturn {
width: 930px;
height: 558px;
}
.orbit-uranus {
width: 1130px;
height: 678px;
}
.orbit-neptune {
width: 1290px;
height: 774px;
}

.planet {
width: 20px;
Expand All @@ -84,11 +113,31 @@ body {
font-size: 24px;
color: white; /* Set the text color to white */
}
.mercury { background-color: #D3D3D3; }
.venus { background-color: #FFD700; }
.earth { background-color: #6495ED; }
.mars { background-color: #FF4500; }
.jupiter {width:50px; height:50px ; background-color: #D2691E; }
.saturn {width:40px; height:40px ; background-color: #FFA500; }
.uranus { background-color: #00CED1; }
.neptune { background-color: #000080; }
.mercury {
background-color: #d3d3d3;
}
.venus {
background-color: #ffd700;
}
.earth {
background-color: #6495ed;
}
.mars {
background-color: #ff4500;
}
.jupiter {
width: 50px;
height: 50px;
background-color: #d2691e;
}
.saturn {
width: 40px;
height: 40px;
background-color: #ffa500;
}
.uranus {
background-color: #00ced1;
}
.neptune {
background-color: #000080;
}
2 changes: 1 addition & 1 deletion include.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2235,7 +2235,7 @@ let cards = [
author: 'Priyanshu Prajapati',
githubLink: 'https://github.com/PentesterPriyanshu'
},
{
{
artName: 'Solar System',
pageLink: './Art/Shubhamkashyap1601/solar.html',
imageLink: './Art/Shubhamkashyap1601/solar.gif',
Expand Down

0 comments on commit da88356

Please sign in to comment.