Making multiple paragraphs show up as one-CodePudding

I am trying to make a tool that calculates your how big of a skateboard you would need depending on your shoe size. Here is the code:

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 
})

<div >
    <p>Most people pick their board size by prefrence but I will make a tool below to choose a board size that will fit your shoe size best. The most popular board sizes are 7.75, 8, 8.25, 8.38, and 8.5.</p>
    <label>If your shoe size is:</label><input id='shoeSize' type="number" >
    <p id="resultSize"></p><p>should be your ideal board size.</p>
  </div>

.shoe {
  width: 50px;
  height: 15px;
  border-radius: 5px;
  margin-left: 10px;
}
.board-tool {
  font-size: 1.5rem;
}

All of the code works but the issue is that the first paragraph, the label, and then the paragraph after that are all on different lines but I would like to organize it so that it looks like it is one paragraph for example: If your shoe size is: 12, 8.25 would be the ideal board size.

CodePudding user response：

p elements are 'paragraphs' so by default will start a newline.

You could just change those p elements into span elements.

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
})

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

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

<div >
  <p>Most people pick their board size by prefrence but I will make a tool below to choose a board size that will fit your shoe size best. The most popular board sizes are 7.75, 8, 8.25, 8.38, and 8.5.</p>
  <label>If your shoe size is:</label><input id='shoeSize' type="number" >
  <span id="resultSize">?</span><span> should be your ideal board size.</span>
</div>

CodePudding user response：

<p> elements are block items, <span> is for inline.

Or, though not suggested, you could modify the html to be inline elements instead of block elements by altering the css rules.

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
})

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

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

p.d-inline {
  display: inline
}

<div >
  <p>Most people pick their board size by prefrence but I will make a tool below to choose a board size that will fit your shoe size best. The most popular board sizes are 7.75, 8, 8.25, 8.38, and 8.5.</p>
  <p>If your shoe size is: <input id='shoeSize' type="number" >
    <span id="resultSize"></span>
    <span>should be your ideal board size.</span>
  </p>
</div>

<div>
  <p>this </p>
  <p>is </p>
  <p>block.</p>
</div>

<div>
  <p >this </p>
  <p >is </p>
  <p >inline.</p>
</div>

CodePudding user response：

Step 1:

change .board-tool to display: flex

Step 2:

change to flex-wrap: wrap and align-items: center

Step 3: give you last paragraph a margin-left of 10px

Code:

CSS:

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

.board-tool {
  font-size: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.resultLabel {
  margin-left: 10px;
}

HTML:

    <div >
    <p>Most people pick their board size by prefrence but I will make a tool below to choose a board size that will fit
        your shoe size best. The most popular board sizes are 7.75, 8, 8.25, 8.38, and 8.5.</p>
    <label>If your shoe size is:</label><input id='shoeSize' type="number" >
    <p id="resultSize"></p>
    <p >should be your ideal board size.</p>
</div>

No change in the javascript

For more information on flexbox visit W3Schools: Flexbox