What is the best way to represent the amount of water consumed from milliliters in a visual

I need assistance in displaying the calculated amount of cups using cup icons. Keep in mind that one icon represents 220 ml.

My objective is to reach 3.60 liters of water intake. This equates to approximately 16.36 cups.

Is there anyone who can assist me with this? I would like it to be shown as 16 cup icons.

.col-xl-4.mb-5
           
                p Goal: {{ waterIntake }} litres
                p Cups: {{ cupsIntake }}

waterIntake() {
      var currentWeight = this.goalWeight;
      var water = currentWeight * 0.03;
      let text = water.toFixed(2);
      return text;
    },

cupsIntake() {
        var currentWeight = this.goalWeight;
        var water = currentWeight * 30;
        let litres = water.toFixed(1);
        let cups = water / 220;
        return cups;
      },
javascriptvue.jsvuejs2

Answer №1

If you want to display a list of icons using v-for in a specific range, make sure that the return value of your cupsIntake() function is an integer and that cupsIntake() is a computed property. 

<i v-for="cup in cupsIntake" :key="cup" class="fas fa-glass-whiskey" />

To ensure the accuracy of your data based on your business logic, consider adding Math.round or Math.ceil to your cupsIntake() function.

return Math.round(cups);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to transform an Array or Object into a new Object mapping?

When using the map method in JavaScript, it typically returns an Array. However, there are instances where I would like to create an Object instead. Is there a built-in way or a simple and efficient implementation to achieve this? Solutions using jQuery ar ...

javascriptjqueryperformance

Transforming an array of HashMaps into a JSON object within a servlet and showcasing it on a JSP page

Looking to extract all table rows and store them in an array of hashmaps, then convert them into a JSON object to be sent to a JSP page using Ajax and jQuery. Struggling with displaying the content on the JSP page. I've written the code below but need ...

javajavascriptjqueryjsonjsp

Error encountered while attempting to install ungit on Windows XP: Unable to locate file directory in C:/Documents

Ungit seems like the ideal tool to gain a better understanding of git, thanks to its graphical interface that simplifies the process. I came across this video explanation which is very helpful in grasping how git functions, even if you don't intend to ...

javascriptnode.jsgitwindows-xpnpm

Vuex malfunctioning

I have a Vuex setup that resembles the following: state: { loadedUsers: [ { id: 10, classId: 1, name: 'X' }, { id: 11, classId: 1, name: 'Y' }, { id: 13, classId: 2, name: 'Z' } ] } getters: { loadedUsers (s ...

vue.jsvuejs2vue-componentvue-routervuex

There seems to be an issue with the hidden field value not being properly set within the

I created a function called getConvertionValue. Inside this function, I make an ajax call to the getCurrencyConvertion function in the controller. function getConvertionValue(from, to) { if (from != to) { $.ajax({ url: base_url + 'admin/o ...

javascriptphpjqueryajaxcodeigniter

Obtain a multiline match using regular expressions

Is there a way to use regex to match only multi-line strings without matching single-line strings as well? Here is the current regex I am using: Regex ('|"|`)[\s\S]*?(\1) Test string "not a match" "need to match&qu ...

javascriptregex

What is the best way to insert HTML elements in front of other HTML elements using a form and jQuery?

I am looking to insert new HTML elements before existing ones using a form and jQuery: Here is the initial HTML Code: <div class="main-content"> <h2 class="main-content-header">Projekte</h2> <div class="project-content"> ...

javascriptjqueryhtml

Exploring ways to incorporate mouse movements into this simple JavaScript script

I have recently decided to convert my JavaScript code into jQuery code to incorporate mouse events. After downloading the latest version of jQuery and renaming it as "jquery.js," I made modifications to my manifest.json file by adding "jquery.js." However, ...

javascriptjquerymouseeventmousemove

What is the best way to create a responsive div containing multiple images?

I am working on a slider and my approach is to create a div and insert 4 images inside it. The images will be stacked one above the other using position: absolute, with a width of 1013px, max-width of 100%, and height set to auto for responsiveness. The is ...

javascripthtmlcss

Having trouble with Laravel 5.5 and ajax file uploads?

I am encountering an issue with Laravel 5.5 while trying to get an ajax file. I can successfully receive the file using $_FILES, but $request->file() is not working as expected. Here is the code in question. Below are the HTML & Ajax elements: <htm ...

javascriptphpjqueryajaxlaravel-5

What is the best way to run code once an action is complete in Vue.js?

Is there a way to run code after an action has finished in vue js? For example, here is my login action: login: async ({commit},loginDTO)=>{ return commit('login',loginDTO); } Here is my login mutation: login:(state, loginDTO)= ...

vue.jsactiontoastr

Combining two JSON objects in JavaScript is simple when their IDs correspond to each other in both objects

I have a query related to merging two different objects from the database, both in JSON format. These two objects share two key/value pairs: IRBId = ... and id = ..., which can be seen in the examples below: OBJ 1 { "data":{ "IRBs":{ "n ...

javascriptjson

Utilizing Node.js and ExpressJS with the integration of external JavaScript files for enhanced functionality

Currently learning NodeJS and working on a basic "class" file that I have saved in an external JS file. How can I make this file accessible for all my routing files and other external JS files that I want to load? /classes/music/usermanager.js function U ...

javascriptnode.jsexpress

When rendering inside *.map in React, the first object of the array may not be rendered

When the SearchCard component is being rendered, it seems to be skipping the first object in the array- const cardArrayTrackSearch = this.state.searchtrack.map((user, i) => { return ( <SearchCard key={i} reload={th ...

javascriptarraysreactjscomponents

Gulp: Adding to Dest without Overwriting

I have the following code snippet: gulp.task('concat-uglify-js', function() { return gulp.src(src + 'js/*.js') .pipe(concat('angular-filemanager.min.js')) .pipe(uglify()) .pipe(gulp.dest(dst)) }); gulp.task(&ap ...

javascriptangularjsnode.jsgruntjsgulp

Converting an Array of Strings into Objects

I need to convert an array of strings, each with comma separated values, into an array of objects. Here is an example: var myarray = [ "a1,b1,c1,d1", "a2,b2,c2,d2", "a3,b3,c3,d3" ] This should be transformed into: [ { "field1": "a1", "fiel ...

javascriptdestructuring

Determining if there is a common element in two arrays to yield a true outcome

In my Ionic app built with Angular 1.x, I am dealing with two arrays containing numbers: var arr1 = [1,32,423,43,23,64,232,5,67,54]; var arr2 = [11,32,1423,143,123,64,2232,35,467,594]; The common numbers in these arrays are 32 and 64. I need a JavaScript ...

javascriptangularjsarraysalgorithmionic-framework

Phonegap application functioning smoothly on computer, encountering issues on mobile device

Hey there! I recently developed a phonegap app that retrieves JSON data from a YQL link and presents it to the user. It works perfectly on Google Chrome desktop, but my client mentioned that it doesn't work on his Android 2.3 device. Could you help me ...

javascriptandroidhtmlcordova

Looking for a simple method to convert JSON object properties into an array?

Is there a simple method for extracting only the values of the properties within the results object in the given JSON data? let jsonData = {"success":true, "msg":["Clutch successfully updated."], "results":{"count_id":2, ...

javascriptjson

The function _plugins_vuetify__WEBPACK_IMPORTED_MODULE_136__.default is not usable as a constructor

I have created a Vue application using vue cli 3 and incorporated Vuetify. To optimize the size of my bundle, I decided to modify the way Vuetify is imported: The versions I am working with are vuetify 1.5.5 and vue 3.7.0 import Vue from 'vue'; ...

javascriptvue.jswebpackvuetify.js