Lim

calc-frontend/src/App/RoutesList.tsx

@@ -4,31 +4,41 @@ import RootLayout from "./RootLayout";
 
 import Home from "../pages/Home";
 
+import QuadraticLim from "../components/Quadratic/QuadraticLim";
 import QuadraticDeriv from "../components/Quadratic/QuadraticDeriv";
 import QuadraticInt from "../components/Quadratic/QuadraticInt";
 
+import CubicLim from "../components/Cubic/CubicLim";
 import CubicDeriv from "../components/Cubic/CubicDeriv";
 import CubicInt from "../components/Cubic/CubicInt";
 
+import CosineLim from "../components/Cosine/CosineLim";
 import CosineDeriv from "../components/Cosine/CosineDeriv";
 import CosineInt from "../components/Cosine/CosineInt";
 
+import SineLim from "../components/Sine/SineLim";
 import SineDeriv from "../components/Sine/SineDeriv";
 import SineInt from "../components/Sine/SineInt";
 
+import TangentLim from "../components/Tangent/TangentLim";
 import TangentDeriv from "../components/Tangent/TangentDeriv";
 import TangentInt from "../components/Tangent/TangentInt";
 
+import NatLogLim from "../components/NatLog/NatLogLim";
 import NatLogDeriv from "../components/NatLog/NatLogDeriv";
 import NatLogInt from "../components/NatLog/NatLogInt";
 
+import LineLim from "../components/Line/LineLim";
 import LineDeriv from "../components/Line/LineDeriv";
 import LineInt from "../components/Line/LineInt";
 
+import EulerLim from "../components/Euler/EulerLim";
 import EulerDeriv from "../components/Euler/EulerDeriv";
 import EulerInt from "../components/Euler/EulerInt";
+
 import ErrorPage from "../pages/ErrorPage";
 
+//import CustomLim from "../pages/CustomLimit";
 import CustomInt from "../pages/CustomIntegral";
 import CustomDeriv from "../pages/CustomDerivative";
 
@@ -47,6 +57,16 @@ const RoutesList =
 
     <Route path='/dashboard' element={<Dashboard />} />
 
+    {/*<Route path='/limits/custom' element={<CustomLim />} /> */}
+    <Route path='/limits/quadratic' element={<QuadraticLim />} />
+    <Route path='/limits/cubic' element={<CubicLim />} />
+    <Route path='/limits/logarithmic' element={<NatLogLim />} />
+    <Route path='/limits/exponential' element={<EulerLim />} />
+    <Route path='/limits/linear' element={<LineLim />} />
+    <Route path='/limits/sine' element={<SineLim />} />
+    <Route path='/limits/cosine' element={<CosineLim />} />
+    <Route path='/limits/tangent' element={<TangentLim />} />
+
     <Route path='/derivatives/custom' element={<CustomDeriv />} />
     <Route path='/derivatives/quadratic' element={<QuadraticDeriv />} />
     <Route path='/derivatives/cubic' element={<CubicDeriv />} />

calc-frontend/src/components/Cosine/CosineLim.tsx

@@ -0,0 +1,26 @@
+import { useLayoutEffect, useRef } from "react";
+// import CosineLimGraph from "./CosineLimGraph"
+
+function CosineLim() {
+
+  const container = useRef(null);
+
+  useLayoutEffect(() =>{
+    //@ts-ignore
+    let MQ = MathQuill.getInterface(2);
+    MQ.StaticMath(container.current, { })
+
+  }, []);
+
+ return (
+
+    <div className="flex">
+      <div ref={container} className="center-header">
+      \lim_&#123;x\to0&#125;\cos(x)
+      </div>
+    </div>
+
+  )
+}
+
+export default CosineLim

calc-frontend/src/components/Cubic/CubicLim.tsx

@@ -0,0 +1,26 @@
+import { useLayoutEffect, useRef } from "react";
+// import CubicLimGraph from "./CubicLimGraph"
+
+function CubicLim() {
+
+  const container = useRef(null);
+
+  useLayoutEffect(() =>{
+    //@ts-ignore
+    let MQ = MathQuill.getInterface(2);
+    MQ.StaticMath(container.current, { })
+
+  }, []);
+
+ return (
+
+    <div className="flex">
+      <div ref={container} className="center-header">
+      \lim_&#123;x\to0&#125; \quad x^&#123;3&#125;
+      </div>
+    </div>
+
+  )
+}
+
+export default CubicLim

calc-frontend/src/components/Euler/EulerLim.tsx

@@ -0,0 +1,26 @@
+import { useLayoutEffect, useRef } from "react";
+// import EulerLimGraph from "./EulerLimGraph"
+
+function EulerLim() {
+
+  const container = useRef(null);
+
+  useLayoutEffect(() =>{
+    //@ts-ignore
+    let MQ = MathQuill.getInterface(2);
+    MQ.StaticMath(container.current, { })
+
+  }, []);
+
+ return (
+
+    <div className="flex">
+      <div ref={container} className="center-header">
+      \lim_&#123;x\to0&#125; \quad e^&#123;x&#125;
+      </div>
+    </div>
+
+  )
+}
+
+export default EulerLim

calc-frontend/src/components/Line/LineLim.tsx

@@ -0,0 +1,26 @@
+import { useLayoutEffect, useRef } from "react";
+// import LineLimGraph from "./LineLimGraph"
+
+function LineLim() {
+
+  const container = useRef(null);
+
+  useLayoutEffect(() =>{
+    //@ts-ignore
+    let MQ = MathQuill.getInterface(2);
+    MQ.StaticMath(container.current, { })
+
+  }, []);
+
+ return (
+
+    <div className="flex">
+      <div ref={container} className="center-header">
+      \lim_&#123;x\to0&#125;\quad x
+      </div>
+    </div>
+
+  )
+}
+
+export default LineLim

calc-frontend/src/components/NatLog/NatLogLim.tsx

@@ -0,0 +1,26 @@
+import { useLayoutEffect, useRef } from "react";
+// import NatLogLimGraph from "./NatLogLimGraph"
+
+function NatLogLim() {
+
+  const container = useRef(null);
+
+  useLayoutEffect(() =>{
+    //@ts-ignore
+    let MQ = MathQuill.getInterface(2);
+    MQ.StaticMath(container.current, { })
+
+  }, []);
+
+ return (
+
+    <div className="flex">
+      <div ref={container} className="center-header">
+      \lim_&#123;x\to0&#125;\ln(x)
+      </div>
+    </div>
+
+  )
+}
+
+export default NatLogLim

calc-frontend/src/components/Quadratic/QuadraticLim.tsx

@@ -0,0 +1,26 @@
+import { useLayoutEffect, useRef } from "react";
+// import QuadraticLimGraph from "./QuadraticLimGraph"
+
+function QuadraticLim() {
+
+  const container = useRef(null);
+
+  useLayoutEffect(() =>{
+    //@ts-ignore
+    let MQ = MathQuill.getInterface(2);
+    MQ.StaticMath(container.current, { })
+
+  }, []);
+
+ return (
+
+    <div className="flex">
+      <div ref={container} className="center-header">
+      \lim_&#123;x\to0&#125; \quad x^&#123;2&#125;
+      </div>
+    </div>
+
+  )
+}
+
+export default QuadraticLim

calc-frontend/src/components/Sine/SineLim.tsx

@@ -0,0 +1,26 @@
+import { useLayoutEffect, useRef } from "react";
+// import SineLimGraph from "./SineLimGraph"
+
+function SineLim() {
+
+  const container = useRef(null);
+
+  useLayoutEffect(() =>{
+    //@ts-ignore
+    let MQ = MathQuill.getInterface(2);
+    MQ.StaticMath(container.current, { })
+
+  }, []);
+
+ return (
+
+    <div className="flex">
+      <div ref={container} className="center-header">
+      \lim_&#123;x\to0&#125;\sin(x)
+      </div>
+    </div>
+
+  )
+}
+
+export default SineLim

calc-frontend/src/components/Tangent/TangentLim.tsx

@@ -0,0 +1,26 @@
+import { useLayoutEffect, useRef } from "react";
+// import TangentLimGraph from "./TangentLimGraph"
+
+function TangentLim() {
+
+  const container = useRef(null);
+
+  useLayoutEffect(() =>{
+    //@ts-ignore
+    let MQ = MathQuill.getInterface(2);
+    MQ.StaticMath(container.current, { })
+
+  }, []);
+
+ return (
+
+    <div className="flex">
+      <div ref={container} className="center-header">
+      \lim_&#123;x\to0&#125;\tan(x)
+      </div>
+    </div>
+
+  )
+}
+
+export default TangentLim

calc-frontend/src/pages/Home.tsx

@@ -105,42 +105,42 @@ function Home() {
         </i>
       </div>
       <div className="mt-2 flex flex-wrap gap-2">
-          <Link to="/derivatives/linear" className = "link-box">
+          <Link to="/limits/linear" className = "link-box">
                   <div className="link-title2"><span ref={d18} style={{ cursor: 'pointer' }}> x </span>
                   </div>
               </Link>
 
-            <Link to="/derivatives/quadratic" className = "link-box">
+            <Link to="/limits/quadratic" className = "link-box">
                   <div className="link-title2"><span ref={d19} style={{ cursor: 'pointer' }}>x^{2}</span>
                   </div>
               </Link>
 
-            <Link to="/derivatives/exponential" className = "link-box">
+            <Link to="/limits/exponential" className = "link-box">
                   <div className="link-title2"> <span ref={d20} style={{ cursor: 'pointer' }}>{"e^{x}"}</span>{/*Expnential*/}
                   </div>
               </Link>
 
-            <Link to="/derivatives/logarithmic" className = "link-box">
+            <Link to="/limits/logarithmic" className = "link-box">
                   <div className="link-title2"><span ref={d21} style={{ cursor: 'pointer' }}>ln(x)</span>{/*Log*/}
                   </div>
               </Link>
 
-            <Link to="/derivatives/sine" className = "link-box">
+            <Link to="/limits/sine" className = "link-box">
                   <div className="link-title2"><span ref={d22} style={{ cursor: 'pointer' }}>sin(x)</span>{/*Sine*/}
                   </div>
               </Link>
 
-              <Link to="/derivatives/cosine" className = "link-box">
+              <Link to="/limits/cosine" className = "link-box">
                   <div className="link-title2"><span ref={d23} style={{ cursor: 'pointer' }}>cos(x)</span>{/*Cos*/}
                   </div>
               </Link>
 
-              <Link to="/derivatives/tangent" className = "link-box">
+              <Link to="/limits/tangent" className = "link-box">
                   <div className="link-title2"><span ref={d24} style={{ cursor: 'pointer' }}>tan(x)</span>{/*Tan*/}
                   </div>
               </Link>
 
-              <Link to="/derivatives/custom" className = "link-box">
+              <Link to="/limits/custom" className = "link-box">
                   <div className="link-title2"><span ref={d25} style={{ cursor: 'pointer' }}>Custom</span>{/*Custom*/}
                   </div>
               </Link>