es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Haciendo que varios párrafos aparezcan como uno.

16 Jul, 2023 Programación

Estoy tratando de crear una herramienta que calcule qué tamaño de skateboard necesitarías según tu tamaño de zapato. Aquí está el código:

const shoeSizeInput = document.getElementById('shoeSize')
const shoeSizeResult = document.getElementById('resultSize')

shoeSizeInput.addEventListener('input', (event) => {
  const shoeSize = parseInt(event.target.value)
  let boardSize = '?'

  switch (true) {
    case 0 <= shoeSize && shoeSize <= 7:
      boardSize = '7.75'
      break;
    case shoeSize === 8 || shoeSize === 9:
      boardSize = '8'
      break;
    case shoeSize === 10 || shoeSize === 11:
      boardSize = '8.25'
      break;
    case shoeSize === 12 || shoeSize === 13:
      boardSize = '8.38'
      break;
    case 14 <= shoeSize && shoeSize <= 20:
      boardSize = '8.5'
      break;
  }
  shoeSizeResult.textContent = boardSize
})

La mayoría de las personas eligen el tamaño de su tabla de acuerdo a sus preferencias, pero haré una herramienta a continuación para elegir una talla de tabla que se ajuste mejor a tu tamaño de zapato. Las tallas de tabla más populares son 7.75, 8, 8.25, 8.38 y 8.5.


debería ser tu talla de tabla ideal.

Todo el código funciona, pero el problema es que el primer párrafo, la etiqueta y luego el párrafo después de eso están en diferentes líneas, pero me gustaría organizarlo de manera que parezca un solo párrafo, por ejemplo: Si tu tamaño de zapato es: 12, 8.25 sería el tamaño de tabla ideal.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para organizar el código de manera que aparezca como un solo párrafo, puedes envolver los elementos de etiqueta e input en un contenedor de span o div y aplicar la propiedad CSS display: inline-block al contenedor. Además, puedes eliminar las etiquetas de párrafo que rodean la segunda oración y combinarla con el resultado del input. Aquí tienes el código HTML y CSS actualizado:

    <div class="board-tool">
  La mayoría de las personas eligen el tamaño de su tabla según sus preferencias, pero a continuación haré una herramienta para elegir un tamaño de tabla que se ajuste mejor a tu número de calzado. Los tamaños de tabla más populares son 7.75, 8, 8.25, 8.38 y 8.5.
  <div class="input-container">
    <span>Si tu número de calzado es:</span><input id="shoeSize" type="number" class="shoe">
  </div>
  <p id="resultSize"></p>
</div>

    .shoe {
  width: 50px;
  height: 15px;
  border-radius: 5px;
  margin-left: 10px;
}

.input-container {
  display: inline-block;
}

.board-tool {
  font-size: 1.5rem;
}

    Con esta actualización, los elementos de etiqueta e input aparecerán en la misma línea, dando la apariencia de una sola oración. El resultado del input también se mostrará en una nueva línea sin las etiquetas de párrafo.

Comments are closed.