normal.html

---
layout: default
title: Normal Equation
---
<style media="screen">

</style>
    <script type="text/javascript">
      var str="";
      function func()
      {
        const dtm = document.querySelector('style');//changing the contents of style tag to chnage the css of grid that is for input matrix1
        dtm.innerHTML = `.matrix:before { left: -6px;border-right: 0;display: block;} .grid-container{display:grid;align:center;grid-template-columns: ${str};padding: 5px;width: 10px;} .matrix:after { right: -6px;border-left: 0;display: block;}.paragraphout{background-color: lightgrey;margin-top:25px;font-size: 18px;line-height: 28.5px;color:black;padding-left: 15px;padding-right: 30px;margin-right:40px;text-align:left;display: block;} #out{display:block}`;


        var fun = document.getElementById("proper").value;
        document.getElementById('y_value').innerHTML="The given function is  "+ fun.toString()+"<br><br>"+"On differentiating the Function we get,";

        var k = nerdamer(`diff(${fun},x)`);
        document.getElementById('1ST_diff').innerHTML="f'(x) = "+ k.toString()+"<br><br>"+"The tangent equation is :-";
        var x_value = document.getElementById('x_val').value;
        var m = nerdamer(k.toString()).evaluate({x:parseInt(x_value)});
        m=parseInt(m);
        let normal_slope = (-1/m).toFixed(2);
        var y = nerdamer(fun.toString()).evaluate({x:parseInt(x_value)});
        console.log(m.toString());

        document.getElementById('--ans--').innerHTML = "y -"+y.toString()+" = "+m.toString()+ "( x"+"-"+x_value.toString()+")";
        document.getElementById('final_ans').innerHTML = " Y  = "+m.toString()+"*x"+" - "+(parseInt(m*x_value-y)).toString();//+"-"+y.toString();
        document.getElementById('head_normal').innerHTML = "The normal equation is :-"
        document.getElementById('--ans--2').innerHTML = "y -"+y.toString()+" = "+normal_slope.toString()+ "( x"+"-"+x_value.toString()+")";
        document.getElementById('final_ans2').innerHTML = " Y  = "+normal_slope.toString()+"*x"+" - ("+(parseInt(normal_slope*x_value-y)).toString()+")";//+"-"+y.toString();


}

    </script>

             <div class="right">
    <div class="main-heading">
        <h2><strong>Normal of a fucntion</strong></h2>
    </div>
    <div class="paragraph">
      <br>
<p>Normal line is perpendicular to tangent line at a given point x.</p>
<p>We can get the slope of normal from tangent equation i.e by taking negaive of inverse slope of tangent line.</p>
<p>For Example if slope of tangent = M then slope of normal = -1/M ,therefore with slope and value of x we can easily find eqaution of normal </p>
    <br></div>
    <img style="height: 300px;width:400px;"src="normal.jpeg" alt="">
    <br>

    <br>
    <p >Now, Let's jump in to have fun with, <strong>Practically trying them...</strong></p>


    <h3><strong>Enter the function here:</strong></h3>
    <br>
    <div class="input">
      <input type="text" id="proper"   placeholder="x^3+2*x"><br></div><br><br>
    <h3><strong>Enter the x_value at which Tangent is required :</strong></h3>
    <br><div class="input">
      <input placeholder="x_value"type="number" id="x_val" name="" value="">
    </div><br><br>
    <a onclick="func()" href="#footer" class="submit">Submit</a>
<br><br>
<h3 id="out" style="font-weight: bold;" >OUTPUT SECTION:</h3>
<br>

          <div class="paragraphout">

              <br>
              <h4 id="y_value"></h4><br>
              <h4 id="1ST_diff"></h4><br>
              <h4 id="--ans--"></h4><br>
              <h4 id="final_ans"></h4><br>
              <h3 id="head_normal"></h3><br>
              <h4 id="--ans--2"></h4><br>
              <h4 id="final_ans2"></h4><br>


            </div>