Updates

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+*.gif

package.json

@@ -6,8 +6,11 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "konva": "^7.1.3",
     "react": "^16.13.1",
+    "react-art": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-konva": "^16.13.0-6",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
     "styled-components": "^5.2.0"

src/components/calculate/index.js

@@ -1,40 +1,40 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import CalculateComponent from './calculateComponent';
+import CalculateComponent from "./calculateComponent";
 
 const CalculateContainer = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    background-color: #83D86F;
-    min-height: 70vh;
-    padding: 10vh 0 10vh 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  background-color: #83d86f;
+  min-height: 70vh;
+  padding: 10vh 0 10vh 0;
 `;
 
 const ComponentContainer = styled.div`
-    width: 80%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+  width: 80%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 `;
 
 const CalculateTitle = styled.h1`
-    color: white;
-    font-size: 4rem;
-    font-weight: bold;
-    margin-bottom: 20px;
+  color: white;
+  font-size: 4rem;
+  font-weight: bold;
+  margin-bottom: 20px;
 `;
 
 const CalculateDescription = styled.p`
-    color: white;
-    font-size: 1.75rem;
-    text-align: justify;
-    text-justify: auto;
+  color: white;
+  font-size: 1.75rem;
+  text-align: justify;
+  text-justify: auto;
 `;
 
 const CalculateA = styled.a`
-    color: white;
+  color: white;
 `;
 
 const Sub = styled.sub`
@@ -43,19 +43,32 @@ const Sub = styled.sub`
 `;
 
 function Calculate() {
-    const [step, setStep] = useState(1);
-
-    return (
-        <CalculateContainer>
-            <ComponentContainer>
-                <CalculateTitle>Calculate Your Impact</CalculateTitle>
-                <CalculateDescription>Find the carbon impact of a machine learning model computation by indicating indicating relevant configuration options.</CalculateDescription>
-                <br />
-                <CalculateDescription>Data obtained from <CalculateA href="https://iq.opengenus.org/floating-point-operations-per-second-flops-of-machine-learning-models/">OpenGenus IQ</CalculateA> and <CalculateA href="https://github.com/mlco2/impact/tree/master/data">MLCO<Sub>2</Sub> Impact</CalculateA>.</CalculateDescription>
-                <CalculateComponent step={step} setStep={setStep} />
-            </ComponentContainer>
-        </CalculateContainer>
-    )
+  const [step, setStep] = useState(1);
+
+  return (
+    <CalculateContainer>
+      <ComponentContainer>
+        <CalculateTitle>Calculate Your Impact</CalculateTitle>
+        <CalculateDescription>
+          Find the carbon impact of a machine learning model computation by
+          indicating indicating relevant configuration options.
+        </CalculateDescription>
+        <br />
+        <CalculateDescription>
+          Calculated using data from{" "}
+          <CalculateA href="https://iq.opengenus.org/floating-point-operations-per-second-flops-of-machine-learning-models/">
+            OpenGenus IQ
+          </CalculateA>{" "}
+          and{" "}
+          <CalculateA href="https://github.com/mlco2/impact/tree/master/data">
+            MLCO<Sub>2</Sub> Impact
+          </CalculateA>
+          .
+        </CalculateDescription>
+        <CalculateComponent step={step} setStep={setStep} />
+      </ComponentContainer>
+    </CalculateContainer>
+  );
 }
 
-export default Calculate;
+export default Calculate;