practica Html 4
-
script.js
function temperature(){
//To convert celcius to farenheit
//(CEL * 9/5) + 32
var c = document.getElementById("celsius").value;
var f = (c * 9/5) + 32
document.getElementById("fahrenheit").value = f
}
function weight(){
//To convert KGs to Pounds
// KG * 2.2
var kg = document.getElementById("kilo").value;
var p = kg * 2.2
document.getElementById("pounds").value = p
}
function distance(){
//To convert KMs to Miles
// KM * 0.62137
var km = document.getElementById("km").value;
var m = km * 0.62137
document.getElementById("miles").value = m
}
----------------------------------
Medidas.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<section id="home">
<header>
Unit Conversions
</header>
<nav>
<div class="topdiv">
<a href="#temperature"><button class="topmenu">Temperature</button></a>
<a href="#weight"><button class="topmenu">Weight</button></a>
<a href="#distance"><button class="topmenu">Distance</button></a>
</div>
</nav>
</section>
<div style="clear:both;"></div>
<div id="all-conversion-sections">
<section id="temperature" class="b temperature">
<div id="tmp">
<figure>
<img src="https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBMDeveloperSkillsNetwork-CD0101EN-SkillsNetwork/labs/Theia%20Labs/02%20-%20HTML5%20Elements/images/thermo.png" width="150px"/>
<figcaption>Celcius to Farenheit Conversion</figcaption>
</figure>
<article>
<fieldset>
<legend>Temperature</legend>
<label for="Temperature">Celsius</label> <br/>
<input type="number" id="celsius"> <br/>
<button id="temperature" onclick="temperature()"> Convert </button> <br/>
<input type="number" id="fahrenheit"> <br/>
<label for="Temperature">Fahrenheit</label>
</fieldset>
<aside>
To convert celsuis to fahrenheit yourself, use this formula replacing the `C` with your temperature in celsuis: (C × 9/5) + 32
</aside>
</article>
</div>
</section>
<div style="clear:both;"></div>
<section id="weight" class="b weight">
<div id="wgt">
<figure>
<img src="https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBMDeveloperSkillsNetwork-CD0101EN-SkillsNetwork/labs/Theia%20Labs/02%20-%20HTML5%20Elements/images/weight.png" width="150px"/>
<figcaption>Kilograms to Pound Conversion</figcaption>
</figure>
<article>
<fieldset>
<legend>Weight</legend>
<label for="Weight">KG</label> <br/>
<input type="number" id="kilo"> <br/>
<button id="weight" onclick="weight()"> Convert </button> <br/>
<input type="number" id="pounds"> <br/>
<label for="Weight">Pounds</label>
</fieldset>
<aside>
To convert kilograms to pounds yourself, use this formula replacing the `kg` with your weight in kilograms: kg x 2.205
</aside>
</article>
</div>
</section>
<div style="clear:both;"></div>
<section id="distance" class="b distance">
<div id="dst">
<figure>
<img src="https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBMDeveloperSkillsNetwork-CD0101EN-SkillsNetwork/labs/Theia%20Labs/02%20-%20HTML5%20Elements/images/speedo.png" width="150px"/>
<figcaption>Kilometers to Miles Conversion</figcaption>
</figure>
<article>
<fieldset>
<legend>Distance</legend>
<label for="Distance">KM</label> <br/>
<input type="number" id="km"> <br/>
<button id="distance" onclick="distance()"> Convert </button> <br/>
<input type="number" id="miles"> <br/>
<label for="Distance">Miles</label>
</fieldset>
<aside>
To convert kilometers to miles yourself, use this formula replacing the `km` with your distance in kilmeters: km ÷ 1.609
</aside>
</article>
</div>
</section>
<div style="clear:both;"></div>
</div>
<div id="go-home" class="iconbutton">
<a href="#home">
<img src="https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBMDeveloperSkillsNetwork-CD0101EN-SkillsNetwork/labs/Theia%20Labs/02%20-%20HTML5%20Elements/images/home.svg"/>
</a>
</div>
<footer>Learn more about HTML and CSS as a part of IBM Fullstack Cloud Developer Certification</footer>
</body>
</html>
Form_Validation.Html
<!DOCTYPE html>
<html>
<head>
<title>Contact Details</title>
<script type="application/javascript">
function checkdata(){
//Create references to the input elements we wish to validate
var username = document.getElementById("name");
var email_address = document.getElementById("email");
//Check if username field is empty
if(username.value == ""){
alert("Please enter the name");
username.focus();
return false;
}
//Check if email field is empty
if(email_address.value == ""){
alert("Please enter the email");
email_address.focus();
return false;
}
//If all is well return true.
return true;
}
</script>
</head>
<body>
<h2>Enter your contact details:</h2> <br>
<form id="form1" onsubmit="return checkdata()">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email Address:</label>
<input type="text" id="email" name="email">
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
=======================================
Solar_System.Html
<!DOCTYPE html>
<html>
<head>
<title>Solar System</title>
</head>
<body>
<h1>Solar System</h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Planets2013.svg" alt="Solar System image" height= "250px" width="700px">
<p>The solar system consists of the sun and everything that orbits the sun. This includes the eight planets and their moons, the dwarf planets, asteroids, comets and other small objects.
</p>
<p> All the planets and dwarf planets, the rocky asteroids, and the icy bodies in the Kuiper belt move around the Sun in elliptical orbits in the same direction that the Sun rotates. This motion is termed prograde, or direct, motion.
</p>
<p><strong><u> Planets in the solar system: </u></strong> </p>
<table>
<tr>
<th>No. </th>
<th>Planet Name </th>
<th>Distance from Sun (in million km)</th>
</tr>
<tr>
<td>1 </td> <td>Mercury</td> <td>57.91 m km</td>
</tr>
<tr>
<td>2 </td> <td>Venus</td> <td>108.2 m km</td>
</tr>
<tr>
<td>3 </td> <td>Earth</td> <td>149.6 m km</td>
</tr>
<tr>
<td>4 </td> <td>Mars</td> <td>227.9 m km</td>
</tr>
<tr>
<td>5 </td> <td>Jupiter</td> <td>778.5 m km</td>
</tr>
<tr>
<td>6 </td> <td>Saturn</td> <td>1.434 b km</td>
</tr>
<tr>
<td>7 </td> <td>Uranus</td> <td>2.871 b km</td>
</tr>
<tr>
<td>8</td> <td>Neptune</td> <td>4.495 billion km</td>
</tr>
</table>
</body>
</html>
Comments
Post a Comment