diff --git a/src/App.css b/src/App.css
index 5779901..83bad87 100644
--- a/src/App.css
+++ b/src/App.css
@@ -18,5 +18,17 @@
#root > div {
flex: 1 1 0;
- padding: 2rem;
+ padding: 1rem 2rem;
+}
+
+button {
+ font-family: inherit;
+ font-size: inherit;
+ font-weight: inherit;
+}
+
+h1 {
+ font-size: 1.3rem;
+ font-weight: 700;
+ margin-block: 1rem;
}
diff --git a/src/App.tsx b/src/App.tsx
index 7fc848e..3ce3b98 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,32 @@
import "./App.css";
import ScoreCard from "./components/ScoreCard.tsx";
import SummaryCard from "./components/SummaryCard.tsx";
+import data from "./assets/data.json";
+
+export type DataEntry = {
+ category: string;
+ score: number;
+ icon: string;
+};
+
+export type ScoreCardProps = {
+ score: number;
+ message: string;
+ description: string;
+};
+
+const overviewData: ScoreCardProps = {
+ score: 76,
+ message: "Great",
+ description:
+ "You scored higher than 65% of people who have taken these tests.",
+};
export default function App() {
return (
<>
-
-
+
+
);
}
diff --git a/src/components/ScoreCard.tsx b/src/components/ScoreCard.tsx
index f9bcef1..839ee9d 100644
--- a/src/components/ScoreCard.tsx
+++ b/src/components/ScoreCard.tsx
@@ -1,5 +1,7 @@
import styled from "styled-components";
import { gradient, neutral } from "./colors.json";
+import changeAlpha from "./alpha";
+import { ScoreCardProps } from "../App";
const StyledDiv = styled.div`
color: ${neutral.white};
@@ -18,45 +20,72 @@ const StyledDiv = styled.div`
flex: 1 1 200px;
}
- .circle {
- width: 50%;
- aspect-ratio: 1/1;
- border-radius: 100%;
- background: linear-gradient(
- 0deg,
- ${gradient["persian-blue"]},
- ${gradient["violet-blue"]}
- );
- display: grid;
- place-items: center;
- @media screen and (max-width: 768px) {
- width: 200px;
- }
+ h1 {
+ color: ${changeAlpha(neutral["white"], 75)};
}
+
span {
display: block;
margin: 0.5rem;
}
+
+ #result-title {
+ font-size: 2rem;
+ font-weight: 700;
+ }
+ #result-description {
+ color: ${changeAlpha(neutral["white"], 75)};
+ width: 75%;
+ margin-block-end: 1.5rem;
+ }
`;
-export default function ScoreCard() {
+export default function ScoreCard(props: ScoreCardProps) {
return (
- Your result
-
- Great
-
- Scored higher than 65% of people who have taken these tests.
-
+ Your Result
+
+ {props.message}
+ {props.description}
);
}
-function Score() {
+const Circle = styled.div`
+ width: 66%;
+ aspect-ratio: 1/1;
+ border-radius: 100%;
+ background: linear-gradient(
+ 0deg,
+ ${gradient["persian-blue"]},
+ ${gradient["violet-blue"]}
+ );
+ margin: 1rem;
+ position: relative;
+ display: grid;
+ place-items: center;
+ @media screen and (max-width: 768px) {
+ width: 200px;
+ }
+
+ #result-score {
+ font-size: 4rem;
+ font-weight: 800;
+ position: absolute;
+ transform: translateY(-6.66%);
+ }
+ #result-percent {
+ color: ${changeAlpha(neutral["white"], 50)};
+ position: absolute;
+ bottom: 15%;
+ }
+`;
+
+function Score({ score }: { score: number }) {
return (
-
- 76
- of 100
-
+
+ {score}
+ of 100
+
);
}
diff --git a/src/components/SummaryCard.tsx b/src/components/SummaryCard.tsx
index cf59db3..848834e 100644
--- a/src/components/SummaryCard.tsx
+++ b/src/components/SummaryCard.tsx
@@ -1,7 +1,7 @@
import styled from "styled-components";
-import { primary, gradient, neutral } from "./colors.json";
-
-console.log(primary);
+import Progressbar from "./SummaryProgessbars";
+import { gradient, neutral } from "./colors.json";
+import { DataEntry } from "../App";
const StyledDiv = styled.div`
color: ${neutral["dark-gray-blue"]};
@@ -9,7 +9,7 @@ const StyledDiv = styled.div`
flex-direction: column;
`;
-export default function SummaryCard() {
+export default function SummaryCard({ data }: any) {
return (
Summary
diff --git a/src/components/SummaryProgessbars.tsx b/src/components/SummaryProgessbars.tsx
new file mode 100644
index 0000000..d29445b
--- /dev/null
+++ b/src/components/SummaryProgessbars.tsx
@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import { primary, neutral } from "./colors.json";
+import changeAlpha from "./alpha";
+
+type ProgressbarProps = {
+ icon: string;
+ category: string;
+ score: number;
+};
+
+const Graph = styled.div<{ $color: string }>`
+ display: flex;
+ padding: 0.5rem;
+ color: ${(props) => props.$color};
+ background-color: ${(props) => changeAlpha(props.$color, 10)};
+`;
+
+export default function Progressbar({
+ icon,
+ category,
+ score,
+}: ProgressbarProps) {
+ const colorsArr = Object.keys(primary);
+
+ const barColor = (i: number) => {
+ while (i >= colorsArr.length) {
+ i -= colorsArr.length;
+ }
+ return colorsArr[i % colorsArr.length];
+ };
+
+ return (
+
+ 
+ {category}
+
+ {score}
+ 100
+
+
+ );
+}
diff --git a/src/components/alpha.ts b/src/components/alpha.ts
new file mode 100644
index 0000000..479783a
--- /dev/null
+++ b/src/components/alpha.ts
@@ -0,0 +1,12 @@
+/**
+ * Gets the hsla value and changes the last property
+ *
+ * I am aware this is a hilariously overengineered solution,
+ * and I'm proud of it.
+ */
+export default function changeAlpha(color: string, alphaVal: number): string {
+ const params: string[] = color.split(", ");
+ let transparency: number = alphaVal / 100;
+ params[3] = transparency.toString() + ")";
+ return params.join(", ");
+}
diff --git a/src/components/colors.json b/src/components/colors.json
index c9de63b..57413bd 100644
--- a/src/components/colors.json
+++ b/src/components/colors.json
@@ -1,20 +1,20 @@
{
"primary": {
- "light-red": "hsl(0, 100%, 67%)",
- "orange-yellow": "hsl(39, 100%, 56%)",
- "green-teal": "hsl(166, 100%, 37%)",
- "cobalt-blue": "hsl(234, 85%, 45%)"
+ "light-red": "hsla(0, 100%, 67%, 1)",
+ "orange-yellow": "hsla(39, 100%, 56%, 1)",
+ "green-teal": "hsla(166, 100%, 37%, 1)",
+ "cobalt-blue": "hsla(234, 85%, 45%, 1)"
},
"gradient": {
- "light-slate-blue": "hsl(252, 100%, 67%)",
- "light-royal-blue": "hsl(241, 81%, 54%)",
+ "light-slate-blue": "hsla(252, 100%, 67%, 1)",
+ "light-royal-blue": "hsla(241, 81%, 54%, 1)",
"violet-blue": "hsla(256, 72%, 46%, 1)",
"persian-blue": "hsla(241, 72%, 46%, 0)"
},
"neutral": {
- "white": "hsl(0, 0%, 100%)",
- "pale-blue": "hsl(221, 100%, 96%)",
- "light-lavender": "hsl(241, 100%, 89%)",
- "dark-gray-blue": "hsl(224, 30%, 27%)"
+ "white": "hsla(0, 0%, 100%, 1)",
+ "pale-blue": "hsla(221, 100%, 96%, 1)",
+ "light-lavender": "hsla(241, 100%, 89%, 1)",
+ "dark-gray-blue": "hsla(224, 30%, 27%, 1)"
}
}
diff --git a/src/index.css b/src/index.css
index d911284..f023a7d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -26,9 +26,3 @@ body {
min-width: 320px;
min-height: 100dvh;
}
-
-button {
- font-family: inherit;
- font-size: inherit;
- font-weight: inherit;
-}