Added more functionality in Vector Calculator

Calculators/Vector-Calculator/index.html

@@ -23,6 +23,15 @@ <h1>Vector Calculator</h1>
         X:<input type="text" id="bx">
         Y:<input type="text" id="by">
     </div>
+    <div class="operation">
+        <!-- Added dropdown for selecting operation -->
+        <label for="operation">Operation:</label>
+        <select id="operation">
+            <option value="add">Add</option>
+            <option value="subtract">Subtract</option>
+            <option value="dot">Dot Product</option> 
+        </select>
+    </div>
     <button id="calc" onmouseup="calc();">Calculate</button>
     <div id="results"></div>
 

Calculators/Vector-Calculator/script.js

@@ -9,18 +9,38 @@ function calc() {
 	ay = parseInt(document.getElementById("ay").value);
 	bx = parseInt(document.getElementById("bx").value);
 	by = parseInt(document.getElementById("by").value);
+
+	const operation = document.getElementById("operation").value;
+
 	if (isNaN(ay) || isNaN(bx) || isNaN(by)) {
 		alert("Please enter proper values for x and y");
 		return;
 	}
-	var cx = ax + bx;
-	var cy = ay + by;
-	var cxdot = ax * bx;
-	var cydot = ay * by;
-	var angle = radToDeg(Math.atan(cy / cx));
-	// A + B, angel = tan^-1(y/x)
-	var easyAnswerHighlight = '<div id="vectC" style="display:inline;"> \ <div id="vectCchild" style="display:inline; -moz-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -ms-user-select: none; user-select: none;"> \ Vector C = \ </div> \ <' + cx + ", " + cy + '></div><br> \
-	<div id="vectCDot" style="display:inline;"> \ <div id="vectCDotchild" style="display:inline; -moz-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -ms-user-select: none; user-select: none;"> \ Vector C Dot = \ </div> \ <' + cxdot + ", " + cydot + '></div><br> \
-	<div id="angle" style="display:inline;"> \ <div id="angleChild" style="display:inline; -moz-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -ms-user-select: none; user-select: none;"> \ Angle = \ </div> \ '  + angle + '</div>';
-	document.getElementById("results").innerHTML = easyAnswerHighlight;
+	let result, angleResult;
+    switch (operation) {
+        case "add":
+            const cx_add = ax + bx;
+            const cy_add = ay + by;
+            result = `Vector C Add = <${cx_add}, ${cy_add}>`;
+            break;
+        case "subtract":
+            const cx_subtract = ax - bx;
+            const cy_subtract = ay - by;
+            result = `Vector C Subtract = <${cx_subtract}, ${cy_subtract}>`;
+            break;
+        case "dot":
+            const dotProduct = ax * bx + ay * by;
+            const magnitudeA = Math.sqrt(ax * ax + ay * ay);
+            const magnitudeB = Math.sqrt(bx * bx + by * by);
+            const cosineTheta = dotProduct / (magnitudeA * magnitudeB);
+            const angleRadians = Math.acos(cosineTheta);
+            const angleDegrees = radToDeg(angleRadians);
+            result = `Vector C Dot = ${dotProduct}`;
+            angleResult = `Angle between vectors = ${angleDegrees} degrees`;
+            break;
+        default:
+            result = "Invalid operation";
+    }
+    document.getElementById("results").innerHTML = result + "<br>" + (angleResult ? angleResult : "");
+
 } 

Calculators/Vector-Calculator/style.css

@@ -50,12 +50,6 @@ input {
 	line-height: 25px;
 }
 
-/*#results:hover{
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -o-transform: scale(1.2);
-	transform: scale(1.2);
-}*/
 .vect {
 	display: block;
 	font-size: 24px;
@@ -65,4 +59,21 @@ input {
 
 .vect>p {
 	font-weight: bold;
-}
+}
+
+.operation {
+	margin: 35px 0;
+}
+
+.operation label {
+	color: #C5EBFE;
+	font-size: 24px;
+}
+
+.operation select {
+	border: 0;
+	border-radius: 5px;
+	font-size: 16px;
+	padding: 10px;
+	margin: 10px;
+}