I only know that when I add the numbers for a square or rectangle it shows that my shape is a parallellogram

Question

My code is not working properly and I have no idea what is wrong or how to fix it.

I only know that when I add the numbers for a square or rectangle it shows that my shape is a parallelogram.

I have tried my code and the output is showing incorrectly. I have also looked at YouTube videos but nothing is helping me.

let side1 = prompt("Please enter the side of the shape");
let side2 = prompt("Please enter the side of the shape");
let side3 = prompt("Please enter the side of the shape");
let side4 = prompt("Please enter the side of the shape");

let corner1 = prompt("Please enter the corners of the shape");
let corner2 = prompt("Please enter the corners of the shape");
let corner3 = prompt("Please enter the corners of the shape");
let corner4 = prompt("Please enter the corners of the shape");

if (
  side1 === side2 &&
  side2 === side3 &&
  side3 === side4 &&
  ((corner1 === corner2) === corner3) === corner4
) {
  console.log(`The shape is a Square`);
} else if (
  side1 === side3 &&
  side2 === side4 &&
  ((corner1 < 90 && corner3 > 90 && corner2 < 90 && corner4 > 90) ||
    (corner1 > 90 && corner3 < 90 && corner2 > 90 && corner4 < 90))
) {
  console.log(`The shape is a Rhombus`);
} else if (
  side1 === side3 &&
  side2 === side4 &&
  corner1 === corner3 &&
  corner2 === corner4
) {
  console.log(`The shape is a Parallelogram`);
} else if (
  side1 === side3 &&
  side2 === side4 &&
  corner1 === corner2 &&
  corner3 === corner4
) {
  console.log(`The shape is a Rectangle`);
} else console.log("Your shape is weird");

Answer 1

The issue is in ((corner1 === corner2) === corner3) === corner4, which should be expressed the same way the similar test is done for the sides in your code, i.e.:

corner1 === corner2 && corner2 === corner3 && corner3 === corner4

otherwise, you can use Array.prototype.every to test if multiple values are all equal, by comparing the first value to every other one:

[corner2, corner3, corner4].every(v => v === corner1)

which can be done to the sides as well:

[side2, side3, side4].every(v => v === side1)

The reason ((corner1 === corner2) === corner3) === corner4 is wrong is because corner1 === corner2 will evaluate to a boolean value of true or false, and then that value will be compared with corner3, which ends up evaluating true === corner3 or false === corner3 (depending on the value of corner1 === corner2), and because you are using strict equality (===), the values are only equal if their types are equal, and so the result of the second comparison will be false, which leads to the final comparison of false === corner4, and similarly, due to type mismatch, that will be false as well. However, even if non-strict comparison is used (==), you will fall into type coercion, wherein in your case, the boolean values get converted into integers (true to 1 and false to 0).

Answer 2

In order to fully define a quadrilateral you need to set only 5 quantities. Below I chose to ask for the four side-lengths and one angle:

function shape(){
 const s=[...document.querySelectorAll("#inp input")].map(e=>+e.value)
 console.log(s[0]==s[2]&&s[1]==s[3]
  ? s[1]==s[2] 
     ? s[4]==90 ? "square" : "rhombus"
     : s[4]==90 ? "rectangle" : "parallelogram"
  : "quadrilateral");

// As the side lengths are subject to certain conditions
// you could also check whether the
// parameters entered are valid:
["sin","cos"].forEach(f=>s[f]=s[1]*Math[f](s[4]*Math.PI/180));

if(Math.sqrt(s.sin**2 + (s.cos-s[0])**2)>s[2]+s[3])
  console.log("The parameters entered lead to invalid geometry");
}
document.getElementById("inp").addEventListener("input",shape);
shape();

input {width:40px}

<div id="inp">4 side lengths:<br>
<input type="text" value="20">
<input type="text" value="20">
<input type="text" value="20">
<input type="text" value="20"><br>
angle between first two sides:<br>
<input type="text" value="70">
</div>