CODEWITHSUNDEEP
javascripthtmlvue.js
minTwin
minTwin

Reputation: 1395

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

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."

enter image description here

Upvotes: 0

Views: 96

Answers (1)

Dan Knights
Dan Knights

Reputation: 8368

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.

Upvotes: 1

Related Questions