Add files via upload

divesh4 · web-flow · commit 2161d087642c · 2022-08-12T23:29:13.000+05:30
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+</head>
+<body>
+    <link rel="stylesheet" href="style.css">
+    <h3>triangle drawer & its properties</h3>
+    <canvas id="mycanvas" width="900" height="580" style="border:1px solid black; display: block;"></canvas>
+    <div id="box">
+       
+            <div>Enter side1</div>
+            <input type="text" id="a"> 
+            
+            <div> Enter side2</div>
+            <input type="text" id="b">
+
+            <div>Enter side3</div>
+            <input type="text" id="c"><br>
+
+       <br><button onclick="fun1()">check</button><br>
+       <div> angle A</div>
+       <div id="angles1" class="ang"></div>
+       <div> angle B </div>
+       <div id="angles2" class="ang"></div>
+       <div> angle C</div>
+       <div id="angles3" class="ang"></div>
+       <div>sum of angles A + B + C</div>
+       <div id="angles4" class="ang"></div>
+       <div>value of s</div>
+       <div id="angles5" class="ang"></div>
+       <div>area</div>
+       <div id="angles6" class="ang"></div>
+        
+    </div>
+            
+
+   <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,61 @@
+
+function fun1(){
+let a = parseInt(document.getElementById('a').value);
+let b = parseInt(document.getElementById('b').value);
+let c = parseInt(document.getElementById('c').value);
+    let s = (a+b+c)/2;
+    let w1 = a*20;
+    let w2 = b*20;
+    let w3 = c*20;
+    let rough1 = ((c*c+a*a-b*b)/(2*c*a));
+    let rough2 =((c*c+b*b-a*a)/(2*b*c));
+    let rough3 = ((a*a+b*b-c*c)/(2*a*b));
+    const pi = Math.PI;
+    let B = Math.acos( rough1 );
+    let A = Math.acos(  rough2); 
+    let C = Math.acos(  rough3);
+    let area = Math.sqrt(s*(s-a)*(s-b)*(s-c));
+    let ans1=(A*180/pi);
+    let ans2=(B*180/pi);
+    let ans3 = (C*180/pi);
+    let g = Math.sin(C);
+    let h = g*w2;
+    let g2 = Math.cos(C);
+    let h2 = g2*w2;
+
+
+
+    document.getElementById("angles1").innerHTML = ans1;
+    document.getElementById("angles2").innerHTML = ans2;
+    document.getElementById("angles3").innerHTML = ans3;
+    document.getElementById("angles4").innerHTML = ans1+ans2+ans3;
+    document.getElementById("angles5").innerHTML = s;
+    document.getElementById("angles6").innerHTML = area;
+
+var d = document.getElementById("mycanvas");
+var ctx = d.getContext("2d");
+
+
+
+ctx.beginPath();
+ctx.moveTo(200,550);
+ctx.lineTo(200+w1,550);
+ctx.lineTo(200+w1-h2,550-h);
+ctx.lineTo(200,550);
+ctx.closePath();
+
+
+
+ctx.lineWidth = 3;
+ctx.strokeStyle = "#666666"
+ctx.stroke();
+
+ctx.fillStyle = "#FFCC00";
+ctx.fill();
+
+
+// ctx.font = "100px 'Courier New', Courier, monospace";
+// ctx.filltext("A",200+w1-h2,550-h);
+// ctx.filltext("B",200,550);
+// ctx.filltext("B",200+w1,550);
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,68 @@
+
+body{
+    background-color: rgb(215, 226, 255);
+}
+input{
+    outline:none;
+    width: 190px;
+    height: 14px;
+    margin: 10px;
+
+
+}
+#box{
+    position: absolute;
+    top: 50px;
+    left: 1000px;
+    background-color: transparent;
+}
+#side1{
+    width: 100px;
+    background-color: rgb(0, 0, 0);
+    height: 3px;
+    transform: rotateZ(0);
+    transform-origin: top right;
+    border-radius: 40%;
+}
+
+#side2{
+    width: 100px;
+    background-color: rgb(26, 54, 145);
+    height: 3px;
+    transform: rotateZ(0);
+    border-radius: 40%;
+
+}
+#side3{
+    width: 100px;
+    background-color: rgb(128, 0, 0);
+    height: 3px;
+    transform: rotateZ(0);
+    transform-origin: top left;
+    border-radius: 40%;
+
+}
+#triangle{
+    display: flex;
+    margin-top: 200px;
+}
+.ang{
+    margin-bottom: 5px;
+}
+div{
+    background-color: rgb(22, 178, 206);
+    color: rgb(0, 34, 0);
+    width: 200px;
+    height: 20px;
+    padding: 2px 10px;
+
+}
+button{
+    margin: 10px;
+    padding: 10px 20px;
+    border: none;
+    background-color: rgb(29, 59, 94);
+    color: white;
+    border-radius: 5px;
+    
+}
