Determine percentage and classification using a pair of functions

My goal is to display the level as a number along with a progress bar that ranges from 0 to 99 based on the current level.

After researching online, I came across a math formula for leveling which is:

constant * Math.sqrt(xp);

In order to achieve this, I am working on creating two functions - one to calculate the current level and another to calculate the current percentage (for displaying the progress bar).

Here are the functions I have created so far:

function calculateLevel(xp: number): number {
  return 3/2 * Math.sqrt(xp);
}

However, I am facing some difficulties with the following function:

// should return a value between 0-99 
function calculatePercentage(xp: number): number {
  let currentLevel = calculateLevel(xp);
  
  // To calculate the progress
  // we need to find the total xp needed to move from this level to the next 
  // and then subtract the currentXP from it
  // example calculation
  let percentage = Math.floor(50.85);
  return percentage;
}

Answer №1

The currentLevel parameter is not being utilized properly. It should be implemented in the following manner:

let levelPercent = Math.floor(currentLevel);

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

"Employing a Backend Task Runner for a jQuery-Based Mobile Application

Currently, I am utilizing jQuery Mobile in conjunction with HTML5 to provide support for Android and iOS devices. Is there a control or technology that functions similarly to a background worker? My goal is to send data to the server without interrupting t ...

How can you implement window.scrollTo animation in JavaScript without using jQuery?

Despite my efforts to find a solution written in JavaScript, I keep getting answers related to jQuery. So, how can I implement animation using window.scrollTo in pure JavaScript? I tried using setInterval but it didn't work. Any assistance on this mat ...

Marker drawing line animation in SVG format

I'm currently working on creating an animated growing arrow. The path is being drawn correctly, but the marker arrow appears instantly at the end. Can someone guide me on how to attach a marker to the end of the path so that it moves along with it? &l ...

Issue with using third-party package types in Angular library creation

My project involves creating a custom voice recognition library, and I have decided to utilize 3rd party package types called @types/dom-speech-recognition. However, upon attempting to integrate these types into my service, the compiler raised errors indic ...

Discovering ways to extract precise information from a JSON response through API using AJAX. The structure of the JSON data appears unusual and

This sample code contains a thesaurus of synonyms. The search term is "refund". Below are the provided codes: <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> </head> ...

unable to retrieve cookies that have been set on the backend

My frontend is currently running on localhost:3000, while the backend, built with NestJS, is running on localhost:3006. When a user signs up or logs in, I am setting a cookie as follows: const setCookie = context.res.cookie('cookie-data', { ...

What method can be used to determine a number that is nonzero?

Defining the type of Result has presented some challenges for me. It should adhere to one of the following patterns: type Result<Some> = { code: 0; some_result: ...} // or type Result = { code: NonZero; message: string} How can I properly type this? ...

What is the purpose of utilizing import and require() in Node.js programming?

Currently, I am analyzing the source code found at "Type definitions for Express 4.16" and stumbled upon this interesting line (#18): import serveStatic = require("serve-static"); I couldn't help but wonder why the above code is necessary or being u ...

Guide on comparing an object against an array and retrieving a specific output

If I were to create a data structure like this: const carObj = {"1234":"Corvette","4321":"Subaru","8891":"Volvo"}; And also have an array that contains the IDs: const myArray = [1234, 4321, 8891, ...

Apollo GraphQL has initiated the detection of a new subscription

My approach involves utilizing graphql-ws for subscribing to GraphQL events. I rely on the Observable interface to listen to these events. Although I can use the error callback to identify when a subscription fails to start, it is challenging to determine ...

What is causing my text to not appear in a single line?

Can someone help me figure out why my register and login options are overlapping? I'm pretty new to this so it might be a simple fix. Also, I'm trying to get the dropdown menu to appear right below the login text, but I'm facing some issues ...

Getting the values of $scope variables from AngularJS in the controller to the view

I have a simple scope variable on my AngularJS Controller. It is assigned a specific endpoint value like this: $scope.isItAvailable = endpoint.IS_IT_AVAILABLE; How can I properly use it in my view (HTML) to conditionally show or hide an element using ng- ...

Receiving an error with React Proptypes when using the union type Breakpoint

Struggling to assign the correct proptype to the material-ui Breakpoint type. The breakpoint values are: export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; In my App.tsx file, I have the following ...

Is it possible for me to return a function reference as a response to an API call?

Is it possible to return a function reference or function as a response to an API call from an Express server when using AngularJS as the front-end framework? I attempted to send the response object like this: {per: true, listEvnts: events} where events i ...

Adjust the tooltip image alignment to be offset from the cursor and appear at the bottom of the page

After creating a code snippet for image tooltips on text hover, I encountered an issue on my website where the bottom of the page expanded to accommodate the images. Is there a simple way to align the cursor at the bottom of the image when scrolling to the ...

The error message, "Property 'message' is not found on type 'ErrorRequestHandler<ParamsDictionary, any, any, ParsedQs, Record<string, any>>.ts(2339)", indicates that the requested property is not present in the specified type

Hello there! Recently, I implemented a custom error handling middleware in my Node.js TypeScript application. However, I encountered an issue where it is showing an error stating that 'message' does not exist on type 'ErrorRequestHandler&apo ...

When a Javascript function marked as async is executed, it will return an object

Async function is returning [object Promise] instead of the desired real value. Interestingly, I can see the value in the console log. It seems like this behavior is expected from the function, but I'm unsure how to fix my code. This code snippet is ...

Preserving form data using JavaScript exclusively upon submission

Hey there! I'm facing a little issue with a Form that has multiple checkboxes and a piece of JavaScript code designed to save the state of each checkbox when the user hits submit. My problem is that, currently, the checkbox state is being saved even i ...

How come an <a> tag is nabbing mouse clicks from a <canvas> element?

I have been experimenting with creating a 3D piano using three.js. Here is a snippet of the code I am currently working on: let renderer, camera, scene, light, keys, selectedKey; init(); render(); function init() { // Code for initializing renderer, ...

Refresh Image with Node.js

Seeking guidance in the right direction! I have a NodeJS application that is currently displaying an image sourced from a local directory. This image, stored locally, undergoes updates periodically through an OpenCV script. However, I am facing an issue w ...