Add score bar

Author: ihong0

website/src/components/posts/CollegeAdmissions/essay/EssayContainer.js

@@ -186,6 +186,7 @@ export default function EssayContainer() {
   return (
     <div className="essay-container">
       <div className="essay-container essay-background">
+        <div>The score is {essayScore.toFixed(2)}</div>
         <div>
           <ScoreBar essayScore={essayScore} />
         </div>

website/src/components/posts/CollegeAdmissions/essay/ScoreBar.js

@@ -1,7 +1,15 @@
 import React from "react";
+import "./essay.css";
 
 export default function ScoreBar(props) {
+  const scale = 2;
+  const shift = 0;
+  let scaledScore = props.essayScore * scale + shift;
+  scaledScore = scaledScore < 0 ? 0 : scaledScore > 100 ? 100 : scaledScore;
+
   return (
-    <div>The score is {props.essayScore.toFixed(2)} (Will be a bar later)</div>
+    <div class="score-bar">
+      <div class="score-bar-circle" style={{ left: scaledScore + "%" }}></div>
+    </div>
   );
 }

website/src/components/posts/CollegeAdmissions/essay/essay.css

@@ -11,6 +11,26 @@
   border-radius: 15px;
 }
 
+.score-bar {
+  display: block;
+  height: 5px;
+  width: 450px;
+  background: white;
+  position: relative;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.score-bar-circle {
+  position: absolute;
+  height: 20px;
+  width: 20px;
+  border-radius: 10px;
+  background: black;
+  left: 50%;
+  top: -7.5px;
+}
+
 .written-essay {
   margin: 2vh 0;
   background-color: white;