How to output concatenated text with JavaScript, HTML, and Vue

Question

Try to figure out how to output concatenated text from this javascript code. The script draws a quarter circle proportional to the size of the bar and display the value of pi at three decimal places.

The script needs to display "Number of bars = " + numberOfBars. I've spent some time researching how to to this. I was wondering what is the best approach.

Here is the code so far.

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div style="clear: left">
                <div 
                    v-for="(y, i) in bars()"
                    :key="i"
                    :style="{ width: scale, height: numberOfBars * scale, float: 'left', borderTop: (y * scale) + 'px solid blue' }"
                >
                </div>
                PI = {{ bars().reduce((a, b) => Math.PI.toFixed(3) /* TODO: replace "10" with correct expression */, 0) }}
            </div>
        </div>


        <script>

const app = new Vue({
    el: '#app',
    methods: {
        bars () {
            const bars = []
            for (let i = 0; i < this.numberOfBars; i++) {
                bars.push(Math.sqrt(this.numberOfBars * this.numberOfBars - i * i))
            }
            return bars
        },
    },
    data () {
        return {
            scale: 2,
            numberOfBars: 30,
        }
    },
})
        </script>   
    </body>
</html>

What do I need to add to get the following output? The code already displays the quarter circle and the value of pie on the web browser. The last step is to display "number of bars = 30."

Changing your snippet back to a code-block doesn't make it work, can you post working code? I'm guessing you want to add + 'px' to your width/height inline styles? — Dan Knights
– Dan Knights, Commented Oct 31, 2020 at 9:46

Dan Knights · Accepted Answer · 2020-10-31 09:52:06Z

Going off your image example, you want this:

const app = new Vue({
  el: '#app',
  methods: {
    bars() {
      const bars = []
      for (let i = 0; i < this.numberOfBars; i++) {
        bars.push(Math.sqrt(this.numberOfBars * this.numberOfBars - i * i))
      }
      return bars
    },
  },
  data() {
    return {
      scale: 2,
      numberOfBars: 30,
    }
  },
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <div style="clear: left">
    <div v-for="(y, i) in bars()" :key="i" :style="{ width: scale + 'px', height: numberOfBars * scale + 'px', float: 'left', borderTop: (y * scale) + 'px solid blue' }">
    </div>
    Number of bars = {{ numberOfBars }}
    <br>
    PI = {{ bars().reduce((a, b) => Math.PI.toFixed(3) /* TODO: replace "10" with correct expression */, 0) }}
  </div>
</div>

Though, all I added was Number of bars = {{ numberOfBars }}.

I also added '+ px' to your width/height styles as the snippet doesn't work otherwise.

Collectives™ on Stack Overflow

How to output concatenated text with JavaScript, HTML, and Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related