Empieza por ac谩

1

Mi primera l铆nea de c贸digo

Fundamentos de Programaci贸n

2

驴Qu茅 es HTML/CSS/JS?

3

JavaScript no es Java

4

Primeros pasos en el navegador con alert

5

HTML, CSS, JavaScript de verdad

6

Los apuntes de Freddy en PDF

Primer proyecto: Peso en otro planeta

7

Peso en otro planeta

8

Obteniendo datos del usuario

9

Flujo y condicionales

Segundo proyecto: Dibujando con Canvas

10

C贸mo funcionan Window y Document

11

El DOM: nuestro lugar de trabajo en la web

12

Dibujando en el DOM

13

Qu茅 son las Funciones en JavaScript

14

Ciclos while y for en JavaScript

15

Eventos y Formularios en HTML y JavaScript

16

Detectar eventos del teclado con JavaScript

17

Dibujar en canvas con las flechas del teclado

Tercer proyecto: Villa platzi

18

Funciones matem谩ticas y n煤meros aleatorios en JavaScript

19

Uso y carga de im谩genes en Canvas

Cuarto proyecto: Pakimanes

20

Divisi贸n, m贸dulo y residuo en JavaScript

21

Clases y Arrays en JavaScript

Quinto proyecto: Cajero autom谩tico

22

Diagrama de Flujo del Cajero Autom谩tico

23

Implementaci贸n del Cajero Autom谩tico

Sexto proyecto: Cliente/Servidor

24

Primer servidor web con express

25

Modelo Cliente/Servidor

Programaci贸n de Hardware y Electr贸nica con Arduino

26

驴C贸mo funciona un circuito electr贸nico?

27

驴C贸mo programar un Arduino?

28

Programaci贸n de circuitos con C, Arduino y Sketch

29

C贸mo programar un Arduino con Javascript y Node

30

Construye un Robot con JavaScript

31

Robot para riego de plantas en Arduino, Javascript y Node

Materiales de apoyo

32

Las mejores notas de los estudiantes

33

驴Cu谩l lenguaje de programaci贸n aprender primero?

34

La Web con Visi贸n Profesional

Contenido Bonus

35

Qu茅 son tablas de verdad y compuertas l贸gicas

Recap Curso Gratis de Programaci贸n B谩sica

36

Recap Programaci贸n b谩sica

37

Recap Programaci贸n b谩sica ENG

A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Peso en otro planeta

7/37
Recursos

驴Cu谩nto pesas en la Tierra? Vamos a calcular tu peso en otro planeta

Creemos nuestro primer algoritmo que nos permita saber nuestro peso en otro planeta, luego escribamos esto聽en c贸digo usando JavaScript.

Ejemplo del c贸digo para calcular tu peso en otros planetas

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Peso en otro planeta</title>
    <style type="text/css">
      body
      {
          background-color: green;
          color: white;
          font-family: Helvetica;
      }
      strong
      {
          color: red;
      }
    </style>
  </head>
  <body>
    <h1>Descrube tu peso en otros planetas que no son la tierra</h1>
    <p>Para eso no tienes que indicar <strong> tu peso</strong></p>
      <script type="text/javascript">
				alert("Nos tienes que dar tu peso");
 			 var peso = prompt("Dinos tu peso actual")
  // planetas a trabajar: todos los del sistema solar
  		var g_mercurio = 3.7;
  	var g_venus = 8.87;
		var g_tierra = 9.8;
  	var g_marte = 3.711;
  	var g_jupiter = 28.4;
 	  var g_saturno = 10.44;
  	var g_urano = 8.7;
 	  var g_neptuno = 11.15;
  	var g_pluton = 0.62;
pesoenjupiter = g_jupiter * peso / g_tierra
pesoenjupiter = parseInt(pesoenjupiter);
document.write("tu peso en jupiter es " + pesoenjupiter);
  // ensayo y error

      </script>
  </body>
</html>

Recuerda:

  • Los t铆tulos se pueden agregar con las etiquetas h1,h2,h3,h4,h5,h6
  • Podemos declarar variables sin asignarles alg煤n valor.
  • En JavaScript tenemos funciones especiales que manipulan numeros una de esas funciones se llama parseInt, esta me permite redondear un numero con muchos decimales.
  • Cuando nosotros estamos asignando algo primero ocurre lo de la derecha de la asignacion y luego ocurre lo de la izquierda es decir primero la operacion ocurre y luego se le asigna a la variable.

Funci贸n ParseInt

La funci贸n parseInt() nos sirve para convertir una cadena o n煤mero con punto decimal a un n煤mero entero.

var cadena = "12";
var numero_punto_decimal = 22.2;
var numero_entero = parseInt(cadena) + parseInt(numero_punto_decimal);

Aporte creado por: Brayan Mamani, Carlos Galeano, Ervic

Aportes 1842

Preguntas 467

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

馃搶 La funci贸n parseInt() nos sirve para convertir una cadena o n煤mero con punto decimal a un n煤mero entero.

var cadena = "12";
var numero_punto_decimal = 22.2;
var numero_entero = parseInt(cadena) + parseInt(numero_punto_decimal);
Si quieren tener dos decimales utilicen :

peso_final = parseFloat(peso_final).toFixed(2);

// el numero entre par茅ntesis nos indica cuantos decimales queremos.

Apuntes de clase:

  • Podemos declarar variables sin asignarles alg煤n valor.
  • En JavaScript tenemos funciones especiales que manipulan numeros una de esas funciones se llama parseInt, esta me permite redondear un numero con muchos decimales.
  • Cuando nosotros estamos asignando algo primero ocurre lo de la derecha de la asignacion y luego ocurre lo de la izquierda es decir primero la operacion ocurre y luego se le asigna a la variable.
  • Los titulos se pueden agregar con la etiquetas h1,h2,h3,鈥
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Peso en otro planeta</title>
    <style type="text/css">
      body
      {
          background-color: green;
          color: white;
          font-family: Helvetica;
      }
      strong
      {
          color: red;
      }
    </style>
  </head>
  <body>
    <h1>Descrube tu peso en otros planetas que no son la tierra</h1>
    <p>Para eso no tienes que indicar <strong> tu peso</strong></p>
      <script type="text/javascript">
				alert("Nos tienes que dar tu peso");
 			 var peso = prompt("Dinos tu peso actual")
  // planetas a trabajar: todos los del sistema solar
  		var g_mercurio = 3.7;
  	var g_venus = 8.87;
		var g_tierra = 9.8;
  	var g_marte = 3.711;
  	var g_jupiter = 28.4;
 	  var g_saturno = 10.44;
  	var g_urano = 8.7;
 	  var g_neptuno = 11.15;
  	var g_pluton = 0.62;
pesoenjupiter = g_jupiter * peso / g_tierra
pesoenjupiter = parseInt(pesoenjupiter);
document.write("tu peso en jupiter es " + pesoenjupiter);
  // ensayo y error

      </script>
  </body>
</html>

Este es mi aporte a la clase 馃槈

LES COMPARTO UN RESUMEN DE LOS TEMAS DADOS HASTA EL MOMENTO COMO PARA HACER UN R脕PIDO REPASO CON LOS COMENTARIOS RESPECTIVOS. ESPERO QUE LES SIRVA. SALUDOS.

<!-- .HTML -->
<!-- COMENTARIO EN .HTML -->
<!DOCTYPE html>
<html>
<head>
<title> T铆tulo de la p谩gina </title>
<!-- .CSS -->
<style>
/* COMENTARIOS EN .CSS /
/
ATRIBUTOS DE ETIQUETA BODY /
body
{
background-color: #AAAAFF; /
ASIGNO COLOR DE FONDO DEL BODY /
color: white; /
ASIGNO COLOR A LAS LETRAS DEL BODY /
font-family: Helvetica; /
ASIGNO FORMATO DE LETRAS DEL BODY /
}
/
ATRIBUTOS DE ETIQUETA STRONG (NEGRITA) /
strong
{
background-color: #FFAAAA; /
ASIGNO COLOR DE DE FONDO A LETRAS EN STRONG (NEGRITA) */
}
</style>
<!-- FIN .CSS -->
<head>
<body>
<p> 鈥減arrafo鈥 <strong>negrita</strong> 鈥減arrafo鈥
</p>
<!-- .JS (JAVA SCRIPT) -->
<script>
// COMENTARIOS EN .JS
alert(鈥渆scribir algo鈥); // MUESTRA MENSAJE EN VENTANA DE PANTALLA
alert(鈥渆scribir algo鈥 + var); // MUESTRA MENSAJE EN VENTANA DE PANATALLA Y VALOR DE VARIABLE
var x = 1; // ASIGNA UN VALOR A UNA VARIABLE
nombre = prompt(鈥溌緾u谩l es tu nombre?鈥); // PIDE AL USUARIO INGRESAR DATOS Y GUARDA EN VARIABLE
document.write(鈥渆scribo algo鈥 + var); // ESCRIBO ALGO EN EL BODY Y MUESTRO VALOR DE VARIABLE
var = parseInt(var); // FUNCION QUE REDONDEA EL VALOR DE UNA VARIABLE
document.write(var); // ESCRIBO SOLAMENTE EL VALOR DE UNA VARIABLE
// COMENTARIO SE PUEDEN REALIZAR TODO TIPO DE OPERACIONES MATEMATICAS ENTRE LAS VARIABLES
<h1> TITULO </h1> // LOS TITULOS DE PUEDEN AGREGAR CON LAS ETIQUETAS h1,h2,h3,h4,h4,h5,h6
</script>
<!-- FIN .JS (JAVA SCRIPT) -->

</body>
</html>
<!-- FIN .HTML -->

Si al incrustar c贸digo JS directamente en un archivo .html la aplicaci贸n no te detecta estas variables, es necesario decirle al programa que lo reconozca. Clic en la parte inferior derecha del programa y selecciona 鈥渁uto detect鈥.

Cuando comenz贸 a explicar la regla de tres simple hasta me hizo dudar de mi conocimiento. Le puse pausa al v铆deo y volv铆 a investigar. Yo dije 鈥淧ero como es posible que Freddy no sepa la regla de tres simple鈥, luego le di play de nuevo y ustedes ya saben鈥 馃槀

Aqu铆 hay m谩s sobre las funciones de matem谩ticas de Javascript: https://www.w3schools.com/js/js_math.asp

Qu茅 lindo est谩 el curso, estoy aprendiendo desde cero! Pero @Freddy te pido que nos tengas compasi贸n en el examen! 馃槂

me llevo 2 horas (en las que intente de todo) encontrar un error a la hora de cerrar <title> </titlt> ese peque帽o error hacia que el buscador no leyera todo lo dem谩s y me aparec铆a toda la pag en blanco

moraleja, antes de intentar de todo revisa bien el c贸digo letra por letra jajaja

Hola todos!

Hasta ahora me ha encantado la manera de ense帽ar de Freddy, es r谩pido y conciso. He ido haciendo todo paso por paso tal como 茅l lo explica pero desde las clases anteriores he tenido un problema: cuando agrego un script (al final justo antes de cerrar el body) siempre se ejecuta antes de cargar la p谩gina, es decir, act煤a como si yo hubiese puesto el script al inicio del body.

驴C贸mo puedo solucionar esto?, 驴tendr谩 que ver con el Atom? Por favor su ayuda. Muchas gracias,

P.

para la negrita tambien sirve <b>鈥</b> por <strong>

Empec茅 este ejercicio para aprender Javascript y a medida que fu铆 avanzando durante el curso fu铆 agregando nuevas funcionalidades al programa, este es el resultado:

fue todo un reto, desde la programaci贸n hasta el dise帽o y como extra mejor茅 mi ingl茅s ya que decid铆 programarlo en ese idioma. Debajo de la imagen dejar茅 el codigo

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <style media="screen">
    html
    {
      width: 100%;
      height: 100%;
    }
    body
    {
      min-width: 100vh;
      min-height: 100vh;
      margin: 0%;
      padding: 0;
      padding-left: 5%;
      padding-right: 5%;
      margin-top: 0;
      padding-top: 0;
      background-color: #224042;
      color: white;
    }
    .firstTitle
    {
      font-family: "coolvetica";
      src: url("../fonts/Coolvetica Rg.otf" format("truetype"));
      font-weight: normal;
      font-style: normal;
      font-size: 25pt;
      background: linear-gradient(to right, #177780, #2decfe);
      -webkit-background-clip: text;
      color: transparent;
      text-align: center;
    }
    /*generated with Input range slider CSS style generator (version 20211225)
    https://toughengineer.github.io/demo/slider-styler*/
    input[type=range].styled-slider
    {
      height: 5px;
      width: 100%;
      -webkit-appearance: none;
      background: #224042;
    }

    /*progress support*/
    input[type=range].styled-slider.slider-progress
    {
      --range: calc(var(--max) - var(--min));
      --ratio: calc((var(--value) - var(--min)) / var(--range));
      --sx: calc(0.5 * 20px + var(--ratio) * (100% - 20px));
    }

    input[type=range].styled-slider:focus
    {
      outline: none;
    }

    /*webkit*/
    input[type=range].styled-slider::-webkit-slider-thumb
    {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 1em;
      background: #ffffff;
      border: none;
      box-shadow: 0 0 0 4px #224042;
      margin-top: calc(10px * 0.5 - 20px * 0.5);
    }

    input[type=range].styled-slider::-webkit-slider-runnable-track
    {
      height: 10px;
      border: none;
      border-radius: 10px;
      background: #224042;
      box-shadow: inset 1px 1px 2px #0e1a1a,inset -1px -1px 2px #36666a;
      box-shadow: none;
    }

    input[type=range].styled-slider::-webkit-slider-thumb:hover
    {
      background: #ffffff;
    }

    input[type=range].styled-slider:hover::-webkit-slider-runnable-track
    {
      background: #224042;
    }

    input[type=range].styled-slider::-webkit-slider-thumb:active
    {
      background: linear-gradient(to right, #177780 , #2DECFE);
    }

    input[type=range].styled-slider:active::-webkit-slider-runnable-track
    {
      background: #224042;
    }

    input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track
    {
      background: linear-gradient(to right, #177780 , #2DECFE) 0/var(--sx) 100% no-repeat, #224042; box-shadow: inset 1px 1px 2px #0e1a1a,inset -1px -1px 2px #36666a;;
    }

    input[type=range].styled-slider.slider-progress:hover::-webkit-slider-runnable-track
    {
      background: linear-gradient(to right, #177780 , #2DECFE) 0/var(--sx) 100% no-repeat, #224042;
    }

    input[type=range].styled-slider.slider-progress:active::-webkit-slider-runnable-track
    {
      background: linear-gradient(to right, #177780 , #2DECFE) 0/var(--sx) 100% no-repeat, #224042;
    }

    /*mozilla*/
    input[type=range].styled-slider::-moz-range-thumb
    {
      width: 20px;
      height: 20px;
      border-radius: 1em;
      background: #ffffff;
      border: none;
      box-shadow: 0 0 0 4px #224042;
    }

    input[type=range].styled-slider::-moz-range-track
    {
      height: 10px;
      border: none;
      border-radius: 10px;
      background: #224042; box-shadow: inset 1px 1px 2px #0e1a1a,inset -1px -1px 2px #36666a;;
      box-shadow: none;
    }

    input[type=range].styled-slider::-moz-range-thumb:hover
    {
      background: #ffffff;
    }

    input[type=range].styled-slider:hover::-moz-range-track
    {
      background: #224042;
    }

    input[type=range].styled-slider::-moz-range-thumb:active
    {
      background: linear-gradient(to right, #177780 , #2DECFE);
    }

    input[type=range].styled-slider:active::-moz-range-track
    {
      background: #224042;
    }

    input[type=range].styled-slider.slider-progress::-moz-range-track
    {
      background: linear-gradient(to right, #177780 , #2DECFE) 0/var(--sx) 100% no-repeat, #224042; box-shadow: inset 1px 1px 2px #0e1a1a,inset -1px -1px 2px #36666a;;
    }

    input[type=range].styled-slider.slider-progress:hover::-moz-range-track
    {
      background: linear-gradient(to right, #177780 , #2DECFE) 0/var(--sx) 100% no-repeat, #224042;
    }

    input[type=range].styled-slider.slider-progress:active::-moz-range-track
    {
      background: linear-gradient(to right, #177780 , #2DECFE) 0/var(--sx) 100% no-repeat, #224042;
    }

    /*ms*/
    input[type=range].styled-slider::-ms-fill-upper
    {
      background: transparent;
      border-color: transparent;
    }

    input[type=range].styled-slider::-ms-fill-lower
    {
      background: transparent;
      border-color: transparent;
    }

    input[type=range].styled-slider::-ms-thumb
    {
      width: 20px;
      height: 20px;
      border-radius: 1em;
      background: #ffffff;
      border: none;
      box-shadow: 0 0 0 4px #224042;
      margin-top: 0;
      box-sizing: border-box;
    }

    input[type=range].styled-slider::-ms-track
    {
      height: 10px;
      border-radius: 10px;
      background: #224042; box-shadow: inset 1px 1px 2px #0e1a1a,inset -1px -1px 2px #36666a;;
      border: none;
      box-shadow: none;
      box-sizing: border-box;
    }

    input[type=range].styled-slider::-ms-thumb:hover
    {
      background: #ffffff;
    }

    input[type=range].styled-slider:hover::-ms-track
    {
      background: #224042;
    }

    input[type=range].styled-slider::-ms-thumb:active
    {
      background: linear-gradient(to right, #177780 , #2DECFE);
    }

    input[type=range].styled-slider:active::-ms-track
    {
      background: #224042;
    }

    input[type=range].styled-slider.slider-progress::-ms-fill-lower
    {
      height: 10px;
      border-radius: 10px 0 0 10px;
      margin: -undefined 0 -undefined -undefined;
      background: linear-gradient(to right, #177780 , #2DECFE);
      border: none;
      border-right-width: 0;
    }

    input[type=range].styled-slider.slider-progress:hover::-ms-fill-lower
    {
      background: linear-gradient(to right, #177780 , #2DECFE);
    }

    input[type=range].styled-slider.slider-progress:active::-ms-fill-lower
    {
      background: linear-gradient(to right, #177780 , #2DECFE);
    }
    #travelSystem
    {
      font-family: "Gill Sans";
      src: url("../fonts/Gill Sans.otf" format("truetype"));
      font-weight: normal;
      font-style: normal;
      font-size:18px;
      color: white;
    }
    #showResult
    {
      background: #224042;
      font-family: "coolvetica";
      src: url("../fonts/Coolvetica Rg.otf" format("truetype"));
      font-weight: normal;
      font-style: normal;
      font-size: 18pt;
      background: linear-gradient(to right, #177780, #2decfe);
      -webkit-background-clip: text;
      color: transparent;
    }

    #weigthNumber
    {
      text-align: center;
      height: 20px;
    }

    #buttonDiv
    {
      width: 100%;
      text-align: center;
    }
    .mercuryDiv, .venusDiv, .marsDiv, .jupiterDiv, .saturnDiv, .uranusDiv, .neptuneDiv
    {
      float: left;
      width: 14.28%;
      height: 25vh;
      text-align: center;
      position: relative;
    }

    input[type=radio]
    {
      height: 20vh;
      width: 20vh;
      border: none;
      opacity: 0;
    }

    .mercuryImage, .venusImage, .marsImage, .jupiterImage, .neptuneImage
    {
      background-image: url("planetImage3.png");
      background-size: 55%, 55%;
      background-position: center;
      background-repeat: no-repeat;
      height: 20vh;
      width: 20vh;
      border-radius: 100%;
    }
    .saturnImage, .uranusImage
    {
      background-image: url("planetImage4.png");
      background-size: 70%, 70%;
      background-position: center;
      background-repeat: no-repeat;
      height: 20vh;
      width: 20vh;
      border-radius: 100%;
    }
    .mercuryImage:focus-within, .venusImage:focus-within, .marsImage:focus-within, .jupiterImage:focus-within, .neptuneImage:focus-within
    {
      background-image: url("planetImage1.png");
      background-size: 55%, 55%;
      background-position: center;
      background-repeat: no-repeat;
      height: 20vh;
      width: 20vh;
      border-radius: 100%;
    }

    .saturnImage:focus-within, .uranusImage:focus-within
    {
      background-image: url("planetImage2.png");
      background-size: 70%, 70%;
      background-position: center;
      background-repeat: no-repeat;
      height: 20vh;
      width: 20vh;
      border-radius: 100%;
    }

    .mercurySet, .venusSet, .marsSet, .jupiterSet, .saturnSet, .uranusSet, .neptuneSet
    {
      background:  #224042;
      box-shadow:  12px 12px 25px #182d2f,
                 -12px -12px 25px #2c5355;
      height: 20vh;
      width: 20vh;
      border-radius: 100%;
      text-align: center;
      margin-left: 3.21vh;
    }

    .mercurySet:focus-within, .venusSet:focus-within, .marsSet:focus-within, .jupiterSet:focus-within, .saturnSet:focus-within, .uranusSet:focus-within, .neptuneSet:focus-within
    {
      background: #224042;
      box-shadow: inset 12px 12px 25px #1d3638,
                inset -12px -12px 25px #274a4c;
      height: 20vh;
      width: 20vh;
      border-radius: 100%;
      text-align: center;
      margin-left: 3.21vh;
    }

    #ready
    {
      background: #224042;
      font-family: "coolvetica";
      src: url("../fonts/Coolvetica Rg.otf" format("truetype"));
      font-weight: normal;
      font-style: normal;
      font-size: 18pt;
      text-align: center;
      margin-top: 6vh;
      border-radius: 92px;
      width: 33vh;
      height: 11vh;
      border: none;
      outline: none;
      box-shadow:  20px 20px 60px #0e1a1a,
                 -20px -20px 60px #36666a;
      background: linear-gradient(to right, #177780, #2decfe);
      -webkit-background-clip: text;
      color: transparent;
    }
    #ready:active
    {
      background: #224042;
      box-shadow:  inset 20px 20px 60px #0e1a1a,
                  inset -20px -20px 60px #36666a;
      color: #0e1a1a;
    }
    .resultsAndInfo
    {
      width: 100%;
      height: 25vh;
      margin-top: 6vh;
    }
    .imagePlanet
    {
      width: 27.9%;
      height: 100%;
      border-radius: 30px;
      margin-right: 6vh;
      float: left;
      box-shadow:  20px 20px 60px #0e1a1a,
                  -20px -20px 60px #36666a;
      background-size: 100%, 100%;
      object-fit: contain;
      text-align: center;
      background-position: center;
    }
    #infoPlanet
    {
      font-family: "Gill Sans";
      src: url("../fonts/Gill Sans.otf" format("truetype"));
      font-weight: normal;
      font-style: normal;
      font-size:15pt;
      height: auto;
    }

    </style>
    <title>how heavy you are in another planet?</title>
  </head>
  <body>
    <h1 class="firstTitle">choose your weigth and Planet<h1>
    <form id="travelSystem" action="index.html" method="post">
      <input type="range" id="earthWeight" min="0" max="500" step="1" class="styled-slider slider-progress" value="0">
      <br>
      <div id="weigthNumber">
      </div>
      <br>
      <div class="planetsDiv">
        <div class="mercuryDiv">
          <div class="mercurySet">
            <div class="mercuryImage">
              <input type="radio" name="Mercury" value="1" id="mercuryInput">
              <br>
              <label for="">Mercury </label>
            </div>
          </div>
        </div>
        <div class="venusDiv">
          <div class="venusSet">
            <div class="venusImage">
              <input type="radio" name="Venus" value="2" id="venusInput">
              <br>
              <label for="">Venus</label>
            </div>
          </div>
        </div>
        <div class="marsDiv">
          <div class="marsSet">
            <div class="marsImage">
              <input type="radio" name="mars" value="3" id="marsInput">
              <br>
              <label for="">Mars</label>
            </div>
          </div>
        </div>
        <div class="jupiterDiv">
          <div class="jupiterSet">
            <div class="jupiterImage">
              <input type="radio" name="jupiter" value="4" id="jupiterInput">
              <br>
              <label for="">Jupiter</label>
            </div>
          </div>
        </div>
        <div class="saturnDiv">
          <div class="saturnSet">
            <div class="saturnImage">
              <input type="radio" name="Saturn" value="5" id="saturnInput">
              <br>
              <label for="">Saturn </label>
            </div>
          </div>
        </div>
        <div class="uranusDiv">
          <div class="uranusSet">
            <div class="uranusImage">
              <input type="radio" name="Uranus" value="6" id="uranusInput">
              <br>
              <label for="">Uranus </label>
            </div>
          </div>
        </div>
        <div class="neptuneDiv">
          <div class="neptuneSet">
            <div class="neptuneImage">
              <input type="radio" name="Neptune" value="7" id="neptuneInput">
              <br>
              <label for="">Neptune</label>
            </div>
          </div>
        </div>
      </div>
      <br>
    </form>
    <div id="buttonDiv">
      <input type="button" name="listo" value="Let's Start!" id='ready'>
    </div>
    <div class="resultsAndInfo" id="resultsAndInfo">
      <div class="imagePlanet" id="imagePlanet">
      </div>
      <p id="infoPlanet"></p>
      <p id="showResult"></p>
    </div>
  </body>
  <script type="text/javascript">
  //Gravity of planets

  var gravityMercury = 3.7;
  var gravityVenus = 8.87;
  var gravityEarth = 9.8;
  var gravityMars = 3.7;
  var gravityJupiter = 24.8;
  var gravitySaturn = 10.44;
  var gravityUranus = 8.87;
  var gravityNeptune = 11.15;

  // This arrays save the planet's data for showing up on screen
  var infoPlanetScreen = [];
  var infoMercury = ["Mercury", "3.8 m/s虏", "35.98 million miles", "58d 15h 30m", "url(Mercury.jpg)"]
  var infoVenus = ["Venus", "8.87 m/s虏", "67.24 million miles", "116d 18h 0m", "url(Venus.jpg)"]
  var infoMars = ["Mars", "3.7 m/s虏", "141.6 million miles", "1d 0h 37m", "url(Mars.jpg)"]
  var infoJupiter = ["Jupiter", "24.8 m/s虏", "483.8 million miles", "0d 9h 56m", "url(Jupiter.jpg)"]
  var infoSaturn = ["Saturn", "10.44 m/s虏", "890.8 million miles", "0d 10h 42m", "url(Saturn.jpg)"]
  var infoUranus = ["Uranus", "24.8 m/s虏", "1.784 million miles", "0d 17h 14m", "url(Uranus.jpg)"]
  var infoNeptune = ["Neptune", "11.15 m/s虏", "2.793 million miles", "0d 16h 6m", "url(Neptune.jpg)"]

  var weigthMercury;
  var weigthVenus;
  var weigthEarth;
  var weigthMars;
  var weigthJupiter;
  var weigthSaturn;
  var weigthUranus;
  var weigthNeptune;
  var weigthResult;

  var planet;
  var gravity;

  var boxMercury = document.getElementById("mercuryInput");
  var boxVenus = document.getElementById("venusInput");
  var boxMars = document.getElementById("marsInput");
  var boxJupiter = document.getElementById("jupiterInput");
  var boxSaturn = document.getElementById("saturnInput");
  var boxUranus = document.getElementById("uranusInput");
  var boxNeptune = document.getElementById("neptuneInput");
  var weigthSelector = document.getElementById("earthWeight");
  var weigthNumber = document.getElementById("weigthNumber");
  var planetInfo = document.getElementById("resultsAndInfo");
  var planetView = document.getElementById("imagePlanet");

  var travel = document.getElementById("ready");
  var result = document.createElement("div");
  var information = document.createElement("div");
  var weigthNumberChooser = document.createElement("div");

  var astroInput = document.querySelector("#earthWeight");
  var showResult = document.getElementById("showResult");
  var infoPlanet = document.getElementById("infoPlanet")

  mercuryInput.addEventListener("click", checkMercury);
  venusInput.addEventListener("click", checkVenus);
  marsInput.addEventListener ("click", checkMars);
  jupiterInput.addEventListener ("click", checkJupiter);
  saturnInput.addEventListener("click", checkSaturn);
  uranusInput.addEventListener("click", checkUranus);
  neptuneInput.addEventListener("click", checkNeptune);
  travel.addEventListener ("click", traveling);

  astroInput.addEventListener("input", updateValue);

  function updateValue(e) // this function takes the range's value that's choosed by the user
  {
    weigthEarth = parseInt(e.target.value);

    weigthNumber.textContent = e.target.value + " lb.";
    weigthNumber.appendChild(weigthNumberChooser);
  }

  // check's functions was made it to user's can choose only one planet on screen
  function checkMercury()
  {
    venusInput.checked = false;
    marsInput.checked = false;
    jupiterInput.checked = false;
    saturnInput.checked = false;
    uranusInput.checked = false;
    neptuneInput.checked = false;

    planet = "Mercury";
  }
  function checkVenus()
  {
    mercuryInput.checked = false;
    marsInput.checked = false;
    jupiterInput.checked = false;
    saturnInput.checked = false;
    uranusInput.checked = false;
    neptuneInput.checked = false;

    planet = "Venus";
  }
  function checkMars()
  {
    mercuryInput.checked = false;
    venusInput.checked = false;
    jupiterInput.checked = false;
    saturnInput.checked = false;
    uranusInput.checked = false;
    neptuneInput.checked = false;

    planet = "Mars";
  }
  function checkJupiter()
  {
    mercuryInput.checked = false;
    venusInput.checked = false;
    marsInput.checked = false;
    saturnInput.checked = false;
    uranusInput.checked = false;
    neptuneInput.checked = false;

    planet = "Jupiter";
  }
  function checkSaturn()
  {
    mercuryInput.checked = false;
    venusInput.checked = false;
    marsInput.checked = false;
    jupiterInput.checked = false;
    uranusInput.checked = false;
    neptuneInput.checked = false;

    planet = "Saturn";
  }
  function checkUranus()
  {
    mercuryInput.checked = false;
    venusInput.checked = false;
    marsInput.checked = false;
    jupiterInput.checked = false;
    saturnInput.checked = false;
    neptuneInput.checked = false;

    planet = "Uranus";
  }
  function checkNeptune()
  {
    mercuryInput.checked = false;
    venusInput.checked = false;
    marsInput.checked = false;
    jupiterInput.checked = false;
    saturnInput.checked = false;
    uranusInput.checked = false;

    planet = "Neptune";
  }

  function operation()
  {
    // this function makes the numeric operation of user's weigth with planet's gravity choosed and shows the result on screen

    weigthResult = parseInt((weigthEarth * gravity) / gravityEarth);
    result.textContent = "your weigth on " + planet + " is: " + weigthResult + " lb.";
    showResult.appendChild(result);
  }

  function info() //this function use the created arrays before to show data about planets choosed
  {
    information.textContent = "Planet: " + infoPlanetScreen[0] + "\\n" + "Gravity: " + infoPlanetScreen[1] + "\\n" + "Distance from Sun: " + infoPlanetScreen[2] + "\\n" + "Day length: " + infoPlanetScreen[3] + "\\n";
    infoPlanet.appendChild(information);
    information.innerHTML = information.innerHTML.replace(/\\n/g, '<br />');
  }

  function views() // this function shows pictures of planets choosed on screen
  {
    planetView.style.backgroundImage = infoPlanetScreen[4];
  }

  function traveling()
  {
    // this function put's the variables choosed on variables to operate
    //and shows on screen while get active the other functions created before
    switch (planet) {
      case "Mercury":
              weigthResult = weigthMercury;
              gravity = gravityMercury;
              infoPlanetScreen = infoMercury;
              info();
              operation();
              views();
        break;
        case "Venus":
                weigthResult = weigthVenus;
                gravity = gravityVenus;
                infoPlanetScreen = infoVenus;
                info();
                operation();
                views();
        break;
        case "Mars":
                weigthResult = weigthMars;
                gravity = gravityMars;
                infoPlanetScreen = infoMars;
                info();
                operation();
                views();
        break;
        case "Jupiter":
                weigthResult = weigthJupiter;
                gravity = gravityJupiter;
                infoPlanetScreen = infoJupiter;
                info();
                operation();
                views();
        break;
        case "Saturn":
                weigthResult = weigthSaturn;
                gravity = gravitySaturn;
                infoPlanetScreen = infoSaturn;
                info();
                operation();
                views();
        break;
        case "Uranus":
                weigthResult = weigthUranus;
                gravity = gravityUranus;
                infoPlanetScreen = infoUranus;
                info();
                operation();
                views();
        break;
        case "Neptune":
                weigthResult = weigthNeptune;
                gravity = gravityNeptune;
                infoPlanetScreen = infoNeptune;
                info();
                operation();
                views();
        break;
      default:
      result.textContent = "ERROR you just must choose a planet ";
      document.getElementById('showResult').appendChild(result);
      }
    }

  for (let e of document.querySelectorAll('input[type="range"].slider-progress'))
  {
    e.style.setProperty('--value', e.value);
    e.style.setProperty('--min', e.min == '' ? '0' : e.min);
    e.style.setProperty('--max', e.max == '' ? '500' : e.max);
    e.addEventListener('input', () => e.style.setProperty('--value', e.value));
  }

  </script>
</html>

si ven esos codigos en los titulos y h1 ? son emoticones de planetas y cohetes en html los pueden buscar en emoji tierra donde hay emoticones hecho codigo saludos 馃槃

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>&#127758; tu peso en otros planetas &#129680;</title>
</head>
<body>
    <h1>
        tu peso en otro planeta
    </h1>
            <p>
                en la tierra pesas distinto que en otros planetas &#128640; 
            </p>
    <script>
        var g_tierra = 9.8;
        var g_marte = 3.7;
        var g_jupiter = 24.8;
        var peso = 56;
        var peso_final;
        peso_final = peso * g_marte / g_tierra;
        peso_final = parseInt (peso_final);
        document.write(peso_final);
    </script>
</body>
</html>

Siento que me ensa帽an con peras y manzanas :3 me parece bien 馃槃

Para dejar 2 decimales.
peso_final = parseFloat(peso_final).toFixed(2);

鉂わ笍

Yo: Prestando atenci贸n.
Freddy: Esto es un error!
Yo: Chale, verdad.

Mi Atom no funciona bien, porq literalmente hize todo lo que explico freedy en su atom y a mi me sale diferente en esa pagina en blanco

Hola compa帽eros, note algo incorrecto en la f贸rmula de Freddy.
Freddy esta usando la palabra 鈥減eso鈥 para describir el concepto de 鈥渕asa鈥; cuando tu te 鈥減esas鈥 en un bascula el resultado que te arroja es tu masa, ya que el resultado esta expresado en unidades de masa (kilogramos, libras etc). Tu masa no depende de la gravedad de la tierra, es por eso que no se puede resolver con la regla de tres que explica Freddy. Lo que si depende de la aceleraci贸n de la gravedad del planeta en que te encuentres es el peso, y se expresa, en unidades del Sistema Internacional como kilogramo por metro sobre segundo al cuadrado (kgm/s^2) que es igual a un Newton (1N).
La formula correcta para saber el peso de un objeto es : masa por la aceleraci贸n de la gravedad (m
a), de esta forma te quedara en unidades de fuerza (Newtons) ya que kg(m/s^2) = 1N.
Es importante utilizar la formula correcta porque, aunque el c贸digo funcione el resultado que le arrojara al usuario es incorrecto.
Si alguien encuentra alg煤n error en mi procedimiento por favor h谩ganmelo saber, saludos.

a modo de retroalimentaci贸n, si una persona tiene una masa de 77kg (lo que reporta la balanza) su peso es de 77*9.8, el factor de conversi贸n que usa freddy es para cuando tenemos un dato que es de peso, pero 77 kg es un dato de masa

Hola Freddy y Platzi!! aprend铆 HTML y PHP en 2010 y lo hac铆a con bloc de notas! Por cuestiones del destino (oportunidad laboral), me dediqu茅 a la rama de la infraestructura IT durante casi 5 a帽os. (Y agridulcemente suspend铆 la programaci贸n en mi vida). Hace 2 a帽os he vuelto a involucrarme en el mundo del software, primero con base de datos y testing, y ahora estoy muy feliz de volver a programar con todos los jugetes!!
Me encanta la metodolog铆a de Platzi, me parece super que ense帽es con mini proyectos interesantes!

Apenas tengo 13 a帽os y ya estoy queriendo aprender a programar :3, ojala sea posible

a mi no se me ejecuta java script y est谩 igual que en el video

En realidad el peso es la masa (kg) x gravedad (m/s虏). Por lo que la ecuaci贸n --> peso_final = peso * g_marte / g_tierra es incorrecta. A lo que 茅l llama peso en realidad es la masa. Soy consciente de que est谩 hecho con fines did谩cticos pero creo que era necesario remarcarlo.

no se si hay etiquetas adicionales para crear fuentes para los titulos

es mas simple sacar a parte cuanto masas y luego multiplicar tu masa por la gravedad de dichos astros.

Hola, les envi贸 el c贸digo HTML, el Js y la imagen de del dise帽o donde quiero mostrar los resultados en cada imputs del HTML (disculpen la identaci贸n).

<div class="container ">
    <div class="row">
	<div class="colmd-4">
		<p">Metabolismo Basal</p>		<hr>
<form action="" id="formulario">
    <div class="for-group mb-3">		<label for="nombre">Sexo:</label><br>
	<input type="radio"  name="sexo" id="mujer" value="Mujer"> Mujer
<input type="radio"  name="sexo" id="hombre" value="Hombre"> Hombre
</div>
<div>
<label for="nombre">Peso corporal</label>
<input type="number" class="form-control"
name="peso" id="peso2">
</div>	
<div>
<label for="nombre">Estatura (Talla o Altura)</label>
<input type="number"  name="estatura" id="talla2"></div>
<div class="for-group mb-2">
<label for="nombre">Edad</label>
<input type="number" name="edad" id="edad2">
	</div>
<p >Tu metabolismo basal es:</p>
<input type="text"id="resultado2" readonly>
					
<input type="submit" value="Calcular" id="submit" >	
</div>
</form>

El c贸digo Js tome el ID del form, declare variables tomando el ID respectivo de cada imput para obtener su valor n煤merico, los imputs son de tipo 鈥渘umber鈥, declare 3 constantes con sus respectivos valores. Cree la funci贸n 鈥渕etabolismoHombre鈥 y les pase sus par谩metros seg煤n las variables globales declaradas. Ejecute la funci贸n de una suma algebraica pidiendo el resultado a tarv茅s de un 鈥渞eturn鈥 pero no me mostraba ning煤n valor. Le pase a cada par谩metro su valor num茅rico (cosa que no deber铆a ser porque pens茅 que los obtendr铆a declar谩ndolos con variables al antes de la funci贸n) .

Al pasarle esos par谩metros manualmente y actualizar el navegador me mostr贸 el resultado en el imput que est谩 antes del bot贸n de ""Calcular, lo que quiere decir que realizo la funci贸n sin haber clickleado el bot贸n, cosa que est谩 mal.

Para finalizar, les env铆o la nueva imagen donde se muestra el resultado de la funci贸n.

Estaba muy animado al principio cuando creia tener la soluci贸n, pero luego de tratar de hacer c谩lculos no obtengo los resultados esperados, s茅 que la programaci贸n puede llegar a ser frustrante y la emoci贸n de haber hecho algo bien se vuelve ef铆mera cuando algo no da resultados positivos. De la alegr铆a se pasa a la frustraci贸n鈥 Disculpen tanto texto.

![]()```
<code>
var formulario = document.getElementById(鈥榝ormulario鈥),
peso = parseFloat(document.getElementById(鈥榩eso2鈥).value),
talla = parseFloat(document.getElementById(鈥榯alla2鈥).value),
edad = parseFloat(document.getElementById(鈥榚dad2鈥).value),
constante1 = 10,
constante2 = 6.25,
constante3 = 5,

<div class=鈥渃ol-md-4 col-xl-4鈥>
<p class=鈥減x-2 py-2 mt-5 h2 bg-primary text-white text-center鈥> MB y Actividad f铆sica </p>
</div>

<div class=鈥渃ol-md-3 col-xl-3鈥> <p>Tu valoraci贸n</p>
<p>El resultado de tu MB es:</p>
<input type=鈥渢ext鈥 id=鈥渞esultado2鈥 class=鈥渇orm-control mb-2鈥 readonly="">
</div>
</div>
</div>
</div>
<code>


	mb_hombre = 5;
 
function metabolismoHombre(peso, constante1, constante2, talla, constante3, edad, mb_hombre){
   var resultado = ((constante1*peso) + (constante2 * talla) - (constante3 * edad) + mb_hombre);
	return resultado;
	}
 
formulario.addEventListener('submit', metabolismoHombre);
 
var mostrar = metabolismoHombre (80,10,6.25,168,5,41,5);
mostrar = (mostrar.toFixed(2));
mostrar = document.getElementById('resultado2').value = mostrar;``

Buenas, el script con las variables no me funciona, incluso copiando y pegando exactamente lo mismo.

No estamos gordos, Solo que nos equivocamos de planeta 鈥

Hola, vengo a compartirles mi progreso, empeze con platzi en agosto y he estado muy contento aprendiendo la ruta de desarrollo web, estaba practicando lo poco que se hasta ahora y me acorde de esta clase por lo que quise intentar hacer este mismo programa pero con los conocimientos que se hasta ahorita c:, les dejo el repositorio del proyecto y la pagina de github pages 馃槃, no se rindan y nunca paren de aprender 鉂わ笍
Peso en otros planetas | repositorio
Peso en otros planetas | pagina web

Cuando se declaran un conjunto de variables de forma consecutiva se puede realizar de la siguiente manera:
<script>
var g_tierra = 9.8,
g_marte = 3.7,
g_jupiter = 24.8;

</script>
Separando las variables por una coma, de esta forma te ahorraras escibir la palabra var tantas veces como variables tengas.

Realmente se hace muy sencillo para quienes tienen bases algebraicas, sin embargo Freddy tiene una gran pedagog铆a para ense帽ar!

Que padre es aprender as铆, todo es tan amigable y efectivo, poco a poco despierta la pasi贸n por la materia.

Yo me decid铆 por Visual Code!!!

La masa es diferente del peso, en ese caso la masa es 77 kg y el peso es la masa por la gravedad, es decir aproximadamente 770 Newtons (Newton = kg*m/seg2). Es decir, as铆 yo vaya a marte o jupiter, voy a tener la misma masa (77 kg) pero si un peso diferente que ser铆a para marte 285 Newtons y jupiter 1910 Newtons. No se puede decir que si voy a marte mi masa ser谩 29 kg porque la materia estar铆a desapareciendo, esa ecuaci贸n es una regla de tres pero que no se aplica en la vida real debido al balance de materia.

estuve probando peso_final = parseInt(peso_final); en otra l铆nea que no fuera donde la puso Freddy y (contrario a lo que el dice) no funciona en cualquier lado, y tiene sentido que no funcione, ya que esa operaci贸n que hace con parseInt debe ir despu茅s de haber calculado el n煤mero y antes de mostarlo en pantalla.

Para los que no le sale el c贸digo en color, solo borren la etiqueta de cierre en script 鈥>鈥 y la agregan nuevamente. Saludos!!

Un tip interesante es que en Visual Studio Code (Y supongo que en otros editores tambi茅n) al escribir hmlt se abre un men煤 desplegable y al clickear en algunas de las opciones como HTML:5 se autorellena todas las etiquetas b谩sicas

Estaba emocionado con el curso pero tengo dos puntos que me parecen importantes que los trabajen los del equipo de Platzi.

  1. hacer un video explicando la funcionalidad del programa Atom, su configuraci貌n y dem脿s. muchos de los que estamos aqu矛 somos nuevos y es la primera vez que entramos al mundo de la programaci貌n. El instructor si bien expone bien, lo hace de manera acelerada y aqui va mi segunda inconformidad. Leyendo comentarios veo que a muchos como a mi les pas贸 que el el paso de colocar el alert o el document.write, y recargar la pagina nada sucedi贸. revis茅 el lenguaje y todo esta conforme a lo que se muestra en pantalla y sin embargo, no aparecian las alertas. de esta manera imposible avanzar ya que en el curso el instructor no se toma unos minutos para aclarar esas dudas y errores que son comunes y que novatos como es mi caso no sabemos resolver. Muy mal eso por parte de este curso.

Hola.
驴Por qu茅 cuando recargo mi archivo no me deja ver la p谩gina hasta que acepto el alert? Yo veo que aqu铆 aparece la p谩gina cargada cuando aparece el alert

El c贸digo del ejemplo con comentarios sobre la funci贸n de algunas etiquetas:

<!DOCTYPE html> <!-- Esto es una buena practica para indicar el est谩ndar de HTML 5. No es necesario si no lo quieren agregar. -->
<html>
<head> <!-- Contiene todos los elementos no visuales de la pagina. -->
<title>Tu peso en un lugar donde pesas menos</title> <!-- <title/> Sirve para poner un titulo a tu p谩gina. -->
</head>

<body> <!-- Contiene todos los elementos visibles de la pagina -->
<h1>Tu peso en otro planeta</h1> <!-- Es una de las etiquetas para agregarle un titulo al contenido de tu p谩gina -->
<p>En la tierra pesas distinto que en Marte o J煤piter</p> <!-- Etiqueta para agregar un p谩rrafo -->

<script> // <script/> Es utilizada para definir un c贸digo JavaScript.//
var g_tierra = 9.8; // var declara una variable.//
var g_marte = 3.7;
var g_jupiter = 24.8;
var peso = 77;
var peso_final;
peso_final = peso * g_marte / g_tierra; // se esta declarando el valor de peso_final//
peso_final = parseInt(peso_final); // se utiliza parseInt para convertir un n煤mero con decimales en un n煤mero entero//
document.write(peso_final); // document.write es una funci贸n que escribe strings dentro de html, es como body pero dentro de JavaScript //
</script>
</body>
</html>

disculpen tengo un problema pasa que el alert me sale antes que el texto de fondo y este no me carga hasta que acepto la alerta (y el alert lo pongo abajo de las variables)

Me aparece primero el alert y hasta darle aceptar no carga lo de la p谩gina. 驴que hago?

La magia de JavaScript!!

Genial video!
Me pase horas buscando errores en el c贸digo porque no me sal铆a el peso,
para darme cuenta despu茅s,
que al cerrar, hab铆a escrito mal </scirpt>
馃ぃ

El peso es una fuerza, lo mas correcto seria la masa

Yo utilizo el block de notas xP jejeje

Queda mas gracioso si en el titulo pones 鈥淐omo p茅rder peso MUY RAPIDO鈥

En Atom no me sale colores en las var, alguien sabe porque?

Gracias

En atom no me cambia el color de palabras reservadas como var, que se puede hacer?

En el video confunde peso con masa.

Gran v铆deo, f谩cil de entender.

<!DOCTYPE html>
<Html>
<head>
<title>Tu peso en un lugar donde pesas menos</title>
</head>
<body>
<h1>Tu peso en otro planeta</h1>
<p>En la tierra pesas distinto que en Marte o Jupiter</p>
<script>
var g_tierra = 9.8;
var g_marte = 3.7;
var g_Jupiter = 24.8;
var peso = 77;
var peso_final;
peso_final = peso * g_marte / g_tierra;
peso_final = parseInt(peso_final);
document.write(peso_final);
</script>
</body>
</html>

Interesante

Oigan peso(se mide en Newton)y masa(se mide en kilogramos) es diferente, el peso en la operaci贸n de tu masa total(Kg) multiplicado por la aceleraci贸n de la gravedad del lugar donde est茅s.

yo si sabia que la regla de 3 simple tenia un error
like si tambien te diste cuenta XD

Me pasa que con Atom a veces no me reconoce las funciones, tengo que copiar el codigo y abrir un nuevo documento para que me las reconozca, alguien sabe por qu茅?

Realmente agradezco mucho que en este curso no solo se imparta conocimiento, tambi茅n experiencia al estudiante al hacer los proyectos. GRACIAS鈥

esto no es una pregunta pero les va a servir a algunas personas
Descarguen visual studio code es mejor que atom
luego descarguen unas cuantas extensiones y sera mucho mejor
(aqui les digo las mejores extensiones : beautify, live server entre otras)

C贸mo supo que no estaba poniendo atenci贸n D:

<!DOCTYPE html>
<html>
<head>
<title>Tu peso en un lugar donde pesas menos</title>
<style>
body
{
background-color: darkorange;
}
</style>
</head>
<body>
<h1>Tu peso en otro planeta</h1>
<p>En la tierra pesas distinto que en Marte y Jupiter</p>
<script>
var g_tierra = 9.8;
var g_marte = 3.7;
var g_jupiter = 24.8;
var peso = 45;
var peso_final;
peso_final = peso * g_marte / g_tierra;
peso_final = parseInt(peso_final);
document.write(peso_final);
</script>
</body>
</html>

Curioso
Puse el alert(鈥減eso_final鈥); y me apareci贸 el aviso ese texto pero volv铆 a escribir como muestra el video alert(peso_final); y me pasareci贸 el numero. La diferencia fue quitar las comillas.

que bueno

Comparto mi c贸digo 馃槂

Este video deber铆a ser el 7 y el 7 el 8

LAs lecciones 8 y 7 est谩n al rev茅s, para que por favor la corrijan.

Estoy escribiendo el c贸digo como Freddy lo instruye, pero de repente los colores de la etiqueta desaparecen en Atom. Solo veo letras grises, ya no con color. Aparece cuando escribo 鈥樷>" de la etiqueta <script. Despu茅s de que ya no veo los colores de todas las etiquetas鈥 Alguien sabe c贸mo recuperar los colores. Para su aclaraci贸n: he descargado el paquete de script en Atom

estoy asi jaja
listo siguiente video

Para hacer muy r谩pido la estructura html hagan esto:
Video

ejercicio de la clase

<code> 
<!DOCTYPE html>

<html>

<head>
  <title>Calcule su peso a su planeta de destino.</title>

  <STYLE type="text/css">
    .pesoCalculado {

      background-color: dodgerblue;
      color: white;
    }
  </STYLE>

</head>

<body>

  <h1>Descubra su peso en alg煤n planeta del sistema Solar.</h1>
  <p>Recuerde que su peso, var铆a de acuerdo a la gravedad del planeta; en la tierra, la gravedad equivale a 9.8 m/seg al
    cuadrado.</p>

  <script type="text/javascript">

    var g_tierra = 9.8;
    var g_marte = 3.7;
    var g_jupiter = 24.8;

    //var peso = 40;
    var peso = prompt('Digite su peso actual: ');
    var peso_final;

    peso_final = peso * g_marte / g_tierra;

    document.write('<p class="pesoCalculado">Su peso en marte es: </p>' + parseInt(peso_final));

  </script>

</body>

</html>

Se utilizan mal los terminos masa y peso.

Si escriben " html:5 " al iniciar el script, se abre un c贸digo predeterminado que incluye iDOCTYPE html, html, head, title y body. De esta manera agilizan un poco el proceso de escritura.

Dentro de var puedo agregar todos los datos? O cada dato debe tener su var? Ejemplo: var x = 1; y = 2; z = x + y; O debe ir: var x = 1; Var y = 2; Var z = x + y;

Uso VSCode y lo que hago es guardar primero el HTML y al escribir htm鈥 sale la opcion HTML5, le doy click y se hace la estructura sola

馃憞馃徎

por si quieren realizar el ejercicio con la gravedad de todos los planetas (incluido la luna), a continuaci贸n les dejo las que yo us茅:
var g_mercurio = 3.8;
var g_venus = 8.9;
var g_tierra = 9.8;
var g_marte = 3.7;
var g_jupiter = 23.1;
var g_saturno = 9;
var g_urano = 8.6;
var g_neptuno = 11;
var g_pluton = 0.6;
var g_luna = 1.7;

Opinando por opinar porque esto es totalmente nuevo para mi.

les comparto mis anotaciones para la realizaci贸n de esta actividad, espero les sirva c:

En este proyecto haremos un programa capaz de calcular el peso que indique el usuario en diferentes gravedades de tres diferentes planetas (Tierra, Marte, J煤piter)

Datos necesarios para su realizaci贸n:
鈥 Peso de la gravedad en la tierra.- 9.8 m/s2
鈥 Peso de la gravedad en Marte.- 3.7 m/s2
鈥 Peso de la gravedad en J煤piter.- 24.8 m/s2

En esta actividad deber铆as hacer que el programa sea capaz de hacer una regla de tres usando los datos seleccionados por el usuario para realizar la operaci贸n y as铆 dar el resultado

Nota.- Si quieres agregar t铆tulos, 茅stos se pueden agregar utilizando la etiqueta 鈥<h1>鈥, el tama帽o del titulo depender谩 del numero que se utilice, siendo as铆 el 1 el titulo de mayor tama帽o

Nota 2.- En la programaci贸n se puede usar una notaci贸n num茅rica muy compleja

As铆 como tenemos alerts y documents.write, en JavaScript tambi茅n tenemos funciones especiales que manipulan n煤meros y una de estas funciones es 鈥減arseInt鈥 que su funci贸n es que si nosotros anotamos un numero con muchas decimales 茅ste codigo lo va a redondear, y este comando puede agregarse en cualquier parte del Script
Una forma de esto ser铆a como la siguiente

<script>
var g_tierra = 9.8;
var g_Marte = 3.7;
var g_jupiter= 24.8;
var peso = 77;
var peso_final;
peso_final = peso * g_Marte / g_tierra;
peso_final = parseInt (peso_final);
document.write(peso_final);
</script>

Para JavaScript existen dos tipos de variables num茅ricas, las de tipo flotante (con decimal) y las variables de numero entero, entonces lo que hace parseInt es que convierte las variables de tipo flotante en variables de tipo entero, a su vez, hay otras funciones que te dejan un numero especifico de decimales, parseInt convierte incidentalmente cualquier dato que parezca un numero en un numero entero

parse_Int
convierte la variables flotantes en variables de tipo entero, de esa manera le quita los decimales

La formula correcta es (Peso en Tierra/9.8)*gravedad del otro planeta

queda (Kg/m/s2)*m/s2
se van los m/s2 por descarte y el resultado queda en KG, yo lo hice asi desde 0 y quede satisfecho, saludos

Para los que no les sirva el script deben hacer lo siguiente:

Deben instalar este paquete desde Atom, van a settings y luego a install, en la barra buscan script y presionan el bot贸n Install.
Luego de eso cierran y abren el programa , 隆y problema resuelto!

Atom en el video del curso

Atom en mi ordenador

No se por qu茅 en el Atom del curso var, =, los n煤meros de gravedad, parseInt; document.write quedan con color y en mi atom no.

驴Alguien me puede explicar como puedo hacer para que salgan con los colores del atom del curso?

Cunado escribo el <script> me invalida lo dem谩s, osea le quita el color al c贸digo que le sigue. Alguna ayuda?

mi aporte para la clase

<!DOCTYPE html>
<html>
  <head>
    <title>Gravedad en marte</title>
    <style>
    body
    {
      background-color:black;
      color: white;
    }

    strong
    {
      background-color: white;

      /* NOTE: este es el color de la palabra planeta */
      color: #1aedb8;
    }

    </style>
  </head>
  <body>
    <!-- NOTE: h2 y h3 son m谩s peque帽os -->
    <h1>Peso en otro <strong>planeta</strong></h1>
    <script>

      var G_marte= 3.7
      var G_tierra= 9.8;
      var Peso= 56;
      var Peso_marte= Peso * G_marte / G_tierra

      Peso_marte= parseInt(Peso_marte);
      document.write("su peso en marte es "  + Peso_marte + "kg");

    </script>
  </body>
</html>

todo iba bien hasta que tuve problemas con </script>, que puedo hacer?

驴C贸mo se escribe un salto de linea en document.write("");?

Al momento de crear el codigo document.write en la pantalla no me aparece el valor del peso final , sino: peso_final. Que estoy haciendo mal? desde hace rato estoy buscando el video en donde Fredy explic贸 la manera practicar todo el proceso desde la consola del navegador pero ya no me aparece. Ayuda por favor!!!

me funciona pero siempre me sigue saliendo el alert primero que todo el body

parseInt(nombre de la variable); // sirve para redondear el numero resultante

parseInt para desaparecer decimales

Son los primeros pasos, pero estoy muy emocionado por comenzar este camino. Apenas son unas peque帽as lineas de c贸digo pero me emociona ver el potencial que tienen. Des茅enme suerte.

Friendly reminder de que la gravedad no es fuerza, es aceleraci贸n. 馃檪

osea que poner h1 significa que sale en negrita y mas grande como titulo principal?

驴Cu谩l es tu peso antes de cuarentena y depuesto de cuarentena? jaja

Ahora veo porque los programadores deben de saber matem谩ticas.
parseInt es un buen ejemplo.

la gravedad es constante, asi que mi peso depende de la masa, no de la constante!!!