Egg size Prompt Box

Question

So I am currently doing an Assignment where I have to make a code that when someone opens the page, they input the weight of an egg and it comes back with what "size" it is.

I got the code working and I sent it to my teacher for feedback. However, she came back with telling me I should make the code more "Elegant and Efficient". But she did not instruct me how to do so. Any help on this topic will be greatly appreciated. Code is below

<script>
    var eggWeight = prompt("Please enter an egg weight in grams: ");
    parseInt(eggWeight);
    while (isNaN(eggWeight)) {
            eggWeight = prompt("This is not a valid number. Please an enter egg weight in grams: ");
            parseInt(eggWeight);
        }
    if (eggWeight > 69)
        alert('Jumbo');
    else if (eggWeight > 63 && eggWeight <= 69)
        alert('Extra Large');
    else if (eggWeight > 55 && eggWeight <= 63)
        alert('Large');
    else if (eggWeight > 48 && eggWeight <= 55)
        alert('Medium');
    else if (eggWeight > 42 && eggWeight <= 48)
        alert('Small');
    else
        alert('Peewee');
</script>

Answer 1

The parseInt(eggWeight); calls are not doing anything, because you are not using its return value. And since you aren't using the return value, the comparisons are all comparing a string against a number, which are only working by luck because the strings are automatically converted to numbers. Its always better to explicitly convert the strings to numbers by using parseInt properly and using its return value.

Another thing: Always use braces with if in order to avoid errors:

if (eggWeight > 69) {
    alert('Jumbo');
} else if (eggWeight > 63 && eggWeight <= 69) {
   /// etc...

Answer 2

Since you already checked > 69 , if you get to the next else if you don't need to check that it is && eggWeight <= 69, that is already known. The same applies to all of your <= checks, so you can just remove them.

Answer 3

This is a bit of an expansion from existing answers, applying some of the suggestions given before.

---

First, pick a style of quotes. Dont flip-flop between single and double quotes.

Here are 2 examples of it:

prompt("Please enter an egg weight in grams: ");
alert('Peewee');

Due to personal preferences, I will be sticking to single-quotes.

---

Something that everybody forgot was that everything can be turned into a function:

function getWeight()
{
    var eggWeight = prompt('Please enter an egg weight in grams: ');
    eggWeight = parseInt(eggWeight);
    while(isNaN(eggWeight))
    {
        eggWeight = prompt('This is not a valid number. Please enter an egg weight in grams: ');
        eggWeight = parseInt(eggWeight);
    }
    
    return eggWeight;
}

function getEggDesignation(eggWeight)
{
    if (eggWeight > 69)
        return 'Jumbo';
    else if (eggWeight > 63 && eggWeight <= 69)
        return 'Extra Large';
    else if (eggWeight > 55 && eggWeight <= 63)
        return 'Large';
    else if (eggWeight > 48 && eggWeight <= 55)
        return 'Medium';
    else if (eggWeight > 42 && eggWeight <= 48)
        return 'Small';
    else
        return 'Peewee';
}

function calculateEggDesignation()
{
    var eggWeight = getWeight();
    
    var designation = getEggDesignation(eggWeight);
    
    alert(designation);
}

This way, if you want to, say, receive input from a known element, you can just change the function related to gathering input.

---

You make absolutely no efforts at all to see if the prompt() was cancelled.

You can easily change it to detect if the result is null:

function getWeight()
{
    var eggWeight = prompt('Please enter an egg weight in grams: ');
    if(eggWeight === null)
    {
        return false;
    }
    eggWeight = parseInt(eggWeight);
    
    while(isNaN(eggWeight))
    {
        eggWeight = prompt('This is not a valid number. Please enter an egg weight in grams: ');
        if(eggWeight === null)
        {
            return false;
        }
        
        eggWeight = parseInt(eggWeight);
    }
    
    return eggWeight;
}

function getEggDesignation(eggWeight)
{
    [...]
}

function calculateEggDesignation()
{
    var eggWeight = getWeight();
    if(eggWeight === false)
    {
        // alert('You cancelled the calculation');
        return;
    }
    
    var designation = getEggDesignation(eggWeight);
    
    alert(designation);
}

The strict equality (===) operator is required, due to being possible to accept 0 as an input.

---

Now, focusing on the getEggDesignation() function, you can see a non-elegant if lasagna. Yuck.

You can try to change it to use an object with the minimum weight per "designation":

function getEggDesignation(eggWeight)
{
    var eggWeights = {
        70: 'Jumbo',
        64: 'Extra Large',
        56: 'Large',
        49: 'Medium',
        43: 'Small',
        0: 'Peewee'
    };

    var last_step = 0;
    var result = eggWeights[last_step];

    for(var k in eggWeights)
    {
        if(eggWeights.hasOwnProperty(k) && eggWeight >= k && k >= last_step)
        {
            result = eggWeights[k];
            last_step = k;
        }
    }
    
    return result;
}

Isn't it a beauty? 😍

An alternative could be:

function getEggDesignation(eggWeight)
{
    var eggWeights = {
        70: 'Jumbo',
        64: 'Extra Large',
        56: 'Large',
        49: 'Medium',
        43: 'Small',
        0: 'Peewee'
    };
    
    var newWeight = Object.keys(eggWeights)
        .map(function(weight){ return +weight; })
        .sort()
        .filter(function(weight){ return eggWeight >= weight; })
        .slice(-1);
    
    return eggWeights[newWeight];
}

Basically, it grabs the keys, converts to integers, sorts them (ascending), removes the ones that are higher than eggWeight and picks the last one.

This new value is then used to get the value from eggWeights.

Warning: Depending on the execution environment, you may need a polyfill for Object.keys(), for Array.prototype.map() and for Array.prototype.filter(). Possibly Array.prototype.sort() if you intend to run this on very old browsers.

For ES6:

If your execution environment is recent enough, you can just use arrow functions and const:

function getEggDesignation(eggWeight)
{
    const eggWeights = {
        70: 'Jumbo',
        64: 'Extra Large',
        56: 'Large',
        49: 'Medium',
        43: 'Small',
        0: 'Peewee'
    };
    
    const newWeight = Object.keys(eggWeights)
        .map(weight => +weight})
        .sort()
        .filter(weight => eggWeight >= weight})
        .slice(-1);
    
    return eggWeights[newWeight];
}

For compatibility sake, I will use the first alternative, despite needing a polyfill for Object.prototype.hasOwnProperty() for very old browsers.

---

Another thing I've noticed is that you do not validate the range of inputs at all.

I can say that my egg is a black hole (-10000) and you'll say it is a Peewee.

It's always good to verify if the value is acceptable.

Changing part of the getWeight() function:

while(isNaN(eggWeight) || eggWeight < 0)
{
    eggWeight = prompt('This is not a valid positive number. Please enter an egg weight in grams: ');
    [...]
}

---

The final code:

This is the final implementation, after all the changes:

function getWeight()
{
    var eggWeight = prompt('Please enter an egg weight in grams: ');
    if(eggWeight === null)
    {
        return false;
    }
    eggWeight = parseInt(eggWeight);
    
    while(isNaN(eggWeight) || eggWeight < 0)
    {
        eggWeight = prompt('This is not a valid positive number. Please enter an egg weight in grams: ');
        if(eggWeight === null)
        {
            return false;
        }
        
        eggWeight = parseInt(eggWeight);
    }
    
    return eggWeight;
}

function getEggDesignation(eggWeight)
{
    var eggWeights = {
        70: 'Jumbo',
        64: 'Extra Large',
        56: 'Large',
        49: 'Medium',
        43: 'Small',
        0: 'Peewee'
    };

    var last_step = 0;
    var result = eggWeights[last_step];

    for(var k in eggWeights)
    {
        if(eggWeights.hasOwnProperty(k) && eggWeight >= k && k >= last_step)
        {
            result = eggWeights[k];
            last_step = k;
        }
    }
    
    return result;
}

function calculateEggDesignation()
{
    var eggWeight = getWeight();
    if(eggWeight === false)
    {
        // alert('You cancelled the calculation');
        return;
    }
    
    var designation = getEggDesignation(eggWeight);
    
    alert(designation);
}

calculateEggDesignation();

Answer 4

Use form controls if in scope for the assignment

If it's in scope for the assignment, use an input field to take in the weight and an HTML element like a div or span to show the result. You could add a button to submit your response, or make it automatic. You can do this by hand or use a popular framework like React (though frameworks take a while to learn, so if you're short on time you might not want to go that route). But if you aren't expected to have learned form controls yet, then prompt and alert are fine. You'll need to judge that for yourself, asking your teacher if you're unsure.

Answer 5

There you go! It was the unnecessary over checking in the if statements. (the more efficient part)

const eggWeightString = prompt("Please enter an egg weight in grams: ");
let eggWeight = parseInt(eggWeightString);
while (isNaN(eggWeight)) {
  eggWeight = parseInt(
    prompt("This is not a valid number. Please an enter egg weight in grams: ")
  );
}

if (eggWeight > 69)
  alert('Jumbo');
else if (eggWeight > 63)
  alert('Extra Large');
else if (eggWeight > 55)
  alert('Large');
else if (eggWeight > 48)
  alert('Medium');
else if (eggWeight > 42)
  alert('Small');
else
  alert('Peewee');