Introduction:
Understanding the effects of gravity on different planets can be a fascinating journey into the realm of astrophysics. In this code tutorial, we will delve into the world of planetary weights and build a simple web application to calculate an individual’s weight on various planets. By the end of this tutorial, you will have a functioning web page that takes an Earth-weight input and displays the equivalent weights on Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, and Neptune.
Things You Will Learn:
- JavaScript: Working with objects, functions, and loops.
- HTML: Creating a user-friendly form for input.
- CSS: Styling the webpage for a visually appealing experience.
- Web Development: Integrating JavaScript, HTML, and CSS to build a cohesive project.
Video Tutorial:
Do take a look at my YouTube channel. Whether you are looking to start a new career or just looking to enhance your existing skill set, we have got you covered. Subscribe now and take your first step towards becoming a professional web developer!
Project Folder Structure:
Let us explore the project folder structure. The project folder consists of 3 files and images. The HTML file creates the elements required to build the structure and layout of our project. Next, the CSS file styles the elements we created with CSS. Finally, Javascript adds functionality to our project. The files used are:
- index.html
- style.css
- script.js
- images
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Weight On Each Planet</title>
<!-- Google Fontst -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Your Weight On Each Planet of Our Solar System</h1>
<div class="input">
<label for="earthWeight">Enter Your Weight On Earth(kg):</label>
<input type="number" id="earthWeight" placeholder="Weight" />
</div>
<button onclick="calculateWeights()">Calculate Weights</button>
<div id="result"></div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
Â
CSS:
Next, we style our code using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #10162e;
}
.container {
width: min(90%, 43.75em);
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
color: #ffffff;
}
h1 {
text-align: center;
margin-bottom: 2em;
font-weight: 600;
}
.input {
display: flex;
justify-content: center;
align-items: center;
}
input {
font-size: 1em;
width: 6.25em;
padding: 0.5em;
border: none;
outline: none;
background-color: #172b5c;
color: #ffffff;
}
button {
font-size: 1em;
display: block;
background-color: #45bfff;
color: #ffffff;
padding: 1em;
margin: 1em auto 2em auto;
border: none;
border-radius: 0.5em;
cursor: pointer;
}
#result {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.6em;
}
.planet-box {
padding: 1em;
background-color: #172b5c;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 0.5em;
}
.planet-box img {
width: 90%;
height: auto;
}
Â
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
//Gravitational acceleration on each planet (in m/s^2)
const gravitationalAccelerations = {
mercury: 3.7,
venus: 8.87,
earth: 9.81,
mars: 3.71,
jupiter: 24.79,
saturn: 10.44,
uranus: 8.69,
neptune: 11.15,
};
//Function to calculate weight on each planet
function calculateWeightOnPlanets(weightOnEarth) {
const weightsOnPlanets = {};
for (const planet in gravitationalAccelerations) {
const gravityOnPlanet = gravitationalAccelerations[planet];
const weightOnPlanet =
(weightOnEarth * gravityOnPlanet) / gravitationalAccelerations.earth;
weightsOnPlanets[planet] = weightOnPlanet;
}
return weightsOnPlanets;
}
//Function to handle button click and display results
function calculateWeights() {
const earthWeightInput = document.getElementById("earthWeight");
const resultDiv = document.getElementById("result");
const weightOnEarth = parseFloat(earthWeightInput.value);
if (!isNaN(weightOnEarth)) {
const weightsOnPlanets = calculateWeightOnPlanets(weightOnEarth);
let resultText = ``;
for (const planet in weightsOnPlanets) {
resultText += `<div class="planet-box">
<img src=${planet}.png>
<p>${
planet.charAt(0).toUpperCase() + planet.slice(1)
}<br>${weightsOnPlanets[planet].toFixed(2)}kg</p>
</div>`;
}
resultDiv.innerHTML = resultText;
} else {
resultDiv.innerHTML = "<p>Please enter a valid weight.</p>";
}
}
Â
Conclusion:
Congratulations! You’ve successfully created a planetary weight calculator using HTML, CSS, and JavaScript. This project not only enhances your coding skills but also provides a practical application of physics concepts. Feel free to customize and expand this project, perhaps by adding more planets or improving the user interface. Happy coding!
