Proyecto: Obtener el valor de los inputs

Los IDs de los elementos HTML están registrados como variables gloables, esto NO es un beta, está respaldado por el standard de HTML 5.

<div>
  <input id="$carbs" value="340">
</div>

Luego podemos acceder al elementos simplemente escribiendo el ID en la terminal o en JavaScript.

console.log($carbs.value) // => 340

No hay necesidad de selectores para IDs.

Es un poquito triste que en un curso de programación funcional en los tiempos que corren se use jQuery para acceder a los elementos del DOM. Entiendo que si usas Bootstrap ya te lo tienes que traer pero aún así… 😦

No megusta usar jQuery entiendo que por facilidad y practicidad se utilize pero en caso estoy utilizando JS puro por lo que el codigo queda de la siguiente manera.

const compose = (...functions) => data =>
    functions.reduceRight((value, func) => func(value), data)

const $DESCRIPTION = document.getElementById("description");
const $CALORIAS = document.getElementById("calorias");
const $CARBOIDRATOS = document.getElementById("carboidratos");
const $PROTEINAS = document.getElementById("proteinas");

Nota: Como una buena práctica estoy utilizando el signo $ para identificar de manera más fácil las referencias al DOM.

Como se muestra en la imagen al igual que con jQuery puedo tener acceso a las propiedades del los inputs, por cierto en ves de utilizar document.getElementById("calorias"); podria a ver utilizado document.querySelector("#calorias");

yo lo hice de la siguente manera, espero que les ayude

const data = {
    'description': document.getElementById('description').value,
    'calories': document.getElementById('calories').value,
    'carbs': document.getElementById('carbs').value,
    'protein': document.getElementById('protein').value
  }

let inputs = document.getElementsByTagName(‘input’)

let {
desc,
cal,
carb,
prote } = inputs

JQuery ya no se usa, dejo el código de la clase en JavaScript Vanilla:

// VARIABLES DE LOS INPUTS
let Description = document.getElementById('Descripcion');
let Calories = document.getElementById('Calorias'); 
let Carbs = document.getElementById('Carbs');
let Proteinas = document.getElementById('Protein');

// VALORES DE LOS INPUTS
Description.value;
Calories.value;
Carbs.value;
Proteinas.value;

Curso para pasar de JQuery a JavaScript: https://platzi.com/cursos/jquery-js/

me hubiera gustado que se use JS puro en el proyecto

Porque no definir las variables como const (Para que sean inmutables)?

document.querySelector(’#carbs’)

js

const $Calories = document.getElementById ("Calories");
const $description = document.getElementById ("description");
const $carbs = document.getElementById ("carbs");
const $Protein = document.getElementById ("Protein");

console.log (`Calories: ${$Calories.value}`);```

html

              <input type="text" class="form-control mb-2 mr-sm-2" placeholder="Description" id= "Description">
          </div>
          <div class="col">
              <input type="number" min="0" class="form-control mb-2 mr-sm-2" placeholder="Calories" id= "Calories">
          </div>
          <div class="col">
              <input type="number" min="0" class="form-control mb-2 mr-sm-2" placeholder="Carbs" id= "carbs">
          </div>
          <div class="col">
              <input type="number" min="0" class="form-control mb-2 mr-sm-2" placeholder="Protein" id= "Protein">
          </div>```

Lo hecho en esta clase con el Js actual
podemos tener solo un apuntador (CONST)
y separar las variables mediante comas
por cuestiones de demostrar la sustitucion
de JQuery use querySelector pero en la
practica es mejor usar getElementById
ya que el navegador lo renderiza mucho mas
rapido

const $description = document.querySelector("#description").value,
      $calories = document.querySelector("#calories").value,
      $carbs = document.querySelector("#carbs").value,
      $protein = document.querySelector("#protein").value;

En 2022 y durante el transcurso del curso no usare nada de Jquery desarrollare el programa con API Web actuales para el manejo del DOM esto como reto personal para tambien practicar mi manejo del DOM por lo que recomiendo lo mismo

En las ultimas actualizacion de Vanilla Js, ya no es necesario el uso de JQuery para trabajar con el DOM, podemos utilizar el seleccionador de esta forma

document.querySelector("#description").value

//Guardado en variable
const description = document.querySelector("#description").value;

Jquery Vs. VanillaJs
$(’#description’) Vs. document.getElementById(‘description’)

Listo

const $description = document.querySelector('#description');
const $carbs = document.querySelector('#description');
const $calories = document.querySelector('#description');
const $protein = document.querySelector('#description');```

Este curso ya tiene tiempo que lo tome, pero se me parecio interesante aplicarlo utilizando TypeScript, ya que seria bueno para iniciar a practicar

Yo declaré los elementos de esta forma por si le gusta a alguien:)

let d = document,
    $description = d.getElementById('description'),
    $calories = d.getElementById('calories'),
    $carbs = d.getElementById('carbs'),
    $protein = d.getElementById('protein')

Si estan utilizando el editor Visual Studio Code, les recomiendo las siguientes extensiones!

LiveServer
CodeRunner

Si no quieres usar Jquery:

let description = document.getElementById('description')
let calories = document.getElementById('calories')
let carbs = document.getElementById('carbs')
let protein = document.getElementById('protein')

description.value

Bien, aunque como aclaración, aquí no estamos obteniendo los valores, sino que estamos obteniendo los inputs tal cual