Home » Function that takes an input between 0 and 5 and outputs an array of 5 elements that will be used for generating 5 stars in the UI [closed]

Function that takes an input between 0 and 5 and outputs an array of 5 elements that will be used for generating 5 stars in the UI [closed]

Solutons:


For a JavaScript solution, create an array of size 5 for the output. Then loop through every index. If the given number is larger than the current index, output 100. If the number minus the index is between 0 and 1, then output the decimal part times 100. If none of those conditions are true, then output 0.

function createStars(n) {
  const output = Array(5);
  for (let i = 0; i < 5; i++) {
    let num = n - i;
    if (num >= 1) output[i] = 100;
    else if (num >= 0) output[i] = num*100;
    else output[i] = 0;
  }
  return output;
}

console.log(createStars(3.5));
console.log(createStars(4.7)); // The only reason that this is [100,100,100,100,70.00000000000001] is because of floating point precision errors

A TypeScript solution would be the exact same, except just with added typedefs.

function createStars(n: number): [number, number, number, number, number] {
  const output: [number, number, number, number, number] = [0,0,0,0,0];
  for (let i = 0; i < 5; i++) {
    let num = n - i;
    if (num >= 1) output[i] = 100;
    else if (num >= 0) output[i] = num*100;
    else output[i] = 0;
  }
  return output;
}

console.log(createStars(3.5));
console.log(createStars(4.7)); // The only reason that this is [100,100,100,100,70.00000000000001] is because of floating point precision errors

You could multiply the wanted value with 100 and take a minimum value or 100 for mapping and subtract this value from the wanted result.

function createStars(v) {
    v *= 100;
    return Array.from({ length: 5 }, () => {
        const r = Math.min(v, 100);
        v -= r;
        return r;
    })
}

console.log(...createStars(3.5));    // [100, 100, 100, 50, 0]
console.log(...createStars(1.6667)); // [100, 66.67, 0, 0, 0]

And here’s a TypeScript solution, which is just the JavaScript solutions with added typedefs.

function createStars(v: number): number[] {
    v *= 100;
    return Array.from({ length: 5 }, () => {
        const r = Math.min(v, 100);
        v -= r;
        return r;
    })
}

console.log(...createStars(3.5));    // [100, 100, 100, 50, 0]
console.log(...createStars(1.6667)); // [100, 66.67, 0, 0, 0]

Related Solutions

What are the available Signals in Java

Eventually I brute forced the single to 5 character length signals and got these: BREAK (21) SEGV (11) ILL (4) FPE (8) TERM (15) ABRT (22) INT (2) The code: Set<String> signals = new HashSet<>(); String currentSignalStr; for (char i = 'A'; i <=...

Understanding unique keys for array children in React.js

You should add a key to each child as well as each element inside children. This way React can handle the minimal DOM change. In your code, each <TableRowItem key={item.id} data={item} columns={columnNames}/> is trying to render some children inside them...

most efficient AABB vs Ray collision algorithms

Andrew Woo, who along with John Amanatides developed the raymarching algorithm (DDA) used ubiquitously in raytracers, wrote "Fast Ray-Box Intersection" (alternative source here) which was published in Graphics Gems, 1990, pp. 395-396. Rather than being built...

What is the difference between #!/bin/sh and #!/bin/bash?

bash and sh are two different shells. Basically bash is sh, with more features and better syntax. Most commands work the same, but they are different. Having said that, you should realize /bin/sh on most systems will be a symbolic link and will not invoke sh....

How to pass password to mysql command line

The mysql client utility can take a password on the command line with either the -p or --password= options. If you use -p, there must not be any blank space after the option letter: $ mysql -pmypassword I prefer the long options in scripts as they are...

how to leave a gap in select list from left [closed]

Maybe you were after something like: <select style="padding: 0 0 0 10px"> <option>Male</option> <option>female</option> <option>other</option> </select> jsFiddle example here. Is that what you wanted? Edit: After...

How to use multiple condition in one foreach loop?

Use two loops: foreach ($products as $product) { foreach ($categories as $category) { // using $product and $category } } I had the same question today as the OP. I figured I can split up the problem by first merging the two arrays and then performing the...

Why do Primitive Data Types have a Fixed Size?

As low-level programming languages, the designs of C and C++ closely follow what common hardware is capable of. The primitive building blocks (fundamental types) correspond to entities that common CPUs natively support. CPUs typically can handle bytes and words...

how do i count the words in a string list

Shouldn't it be string[] words = s.Split(' '); Even if we say your word is s.Split(' '); then it should be string[] words = word not string[]=word And to count how much words are in that array just do int howManyWords = words.Length; Also if you want to go...

Data from text file to dataframe

Here you go! It's really fast. For a file with ~11 million lines (made by copying and pasting your sample file over and over again), it took about 22 seconds on my machine, and produced a dataframe with 2.2 million rows. Note: I wasn't sure quite how to handle...

Unexpected output when creating a List of Lists in Java

You are adding all the integers to the same inner list (the one that you create at the start of your method with the statement List<Integer> l1 = new ArrayList<Integer>();). You should create a new List before adding elements to it: for(int i=1;...

how to calculation cost time [closed]

I think I understand what you're asking. You just want to have a new dataframe that calculates the time difference between the three different entries for each unique order id? So, I start by creating the dataframe: data = [...

how to disable button on change using jquery

you can do this as am assuming a image and am checking the resolutions and then i disable or enable the button as per requirements and also am clearing selected image so user can't upload the wrong format . <script> var _URL = window.URL ||...

Detect and uninstall antivirus

You could try the following, from https://community.spiceworks.com/scripts/show/3161-detect-and-remove-software-powershell: ################################################ # Powershell Detect and Remove software script # # # # V1.0 - Gav #...

return statement in c ??? why this function always returning 20?

You have a problem in your code. Change scanf("%d",arr[i]); To scanf("%d",&arr[i]); This is done because scanf expects an argument of type int* but you provide argument arr[i] which is of type int. Also add a check that ends the program if user inputs a...

How to add Bootstrap? [closed]

By adding the CDN <html> <head> <title>Cube</title> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet"...