Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Exercise side #20

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Exercise side #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e9d1820
exerciseSide commit test
abishan1 Feb 1, 2022
9608b3d
New Push 2/25/22
abishan1 Feb 26, 2022
eeee083
New Push 2/25/22
abishan1 Feb 26, 2022
5a41e7e
added the styling and text to the Exercise Side
abishan1 Mar 7, 2022
b986b5a
Merge branch 'main' into exerciseSide
8BitRobot Mar 27, 2022
1b6ab5d
Merge branch 'exerciseSide' of https://github.com/uclaacm/pen-pals in…
abishan1 May 4, 2022
d75747e
Finished parts 2 and 3 of the Exercise Side ticket
abishan1 May 6, 2022
546c2e3
Finished parts 2 and 3 of the Exercise Side ticket
abishan1 May 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions src/components/shared/ExerciseSide.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,25 @@

import '../../styles/ExerciseSide.scss';
// import AxisExercise from './Exercises/AxisExercise'; // from Arush's code

function ExerciseSide(): JSX.Element {
return <section id="exercise-side-container"></section>;
return (
<section id = "exercise-side-container">
<div id = "exercise-box">

<h1> Type the correct numbers into the blanks below! </h1>
<h1> A = (2,0) </h1>
<h1> B = (-2,0) </h1>
<h1> C = (-1,0) </h1>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few small things:

  1. Given the layout of the text in the designs, it makes more sense in my opinion to have the actual "exercises," i.e. the problems they have to solve, in their own div (perhaps with its own ID of level-exercise-prompts or similar?). This would allow you to add the additional spacing between the actual heading of the exercise (the main prompt at the top) and the questions without adding some arbitrary spacing between text items 1 and 2. In addition, it would make it easier to dynamically render exercises, for when we do that in the future.
  2. Generally it's bad practice to overuse headings, especially the h1 element which is reserved for top-level headings and the like. I suggest instead that you use p tags for all of these and style them as needed.
  3. The letters A, B, and C should be italicized; I suggest wrapping them in a span element and giving the span the appropriate styling for italics (I think it's something like "font-style: italic"?).


</div>


<button id = "button"> Check </button>

</section>
);
}

export default ExerciseSide;

export default ExerciseSide;
30 changes: 30 additions & 0 deletions src/styles/ExerciseSide.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,37 @@
@use '_colors.scss' as colors;


body {
font-family: "Quattrocento Sans", sans-serif;
}

#exercise-side-container {
background-color: colors.$bg-white;
flex-grow: 1;
height: 100%;

level {
color: white;
font-size: 1.875rem;
justify-content: center;
padding: 10px;
}

button {
background-color: green;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't forget to use the correct shade of green that's in the colors.scss file! You can see an example of how to use variables from that file by looking at line 9 of this file. Just check the colors.scss file for the variable name and include it according to the syntax from line 9. Also, there's no need for a border on this button as it's all one color; the Figma doesn't include any border either.

border: 1px solid #e1e4e8;
border-radius: 10px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar to the comment on colors, this should be 12px, not 10px.

color: white;
font-size: 1.5rem;
justify-content: center;
}

}

.exercise-box {
align-items: center;
display: flex;
height: 85%;
justify-content: center;
width: 100%;
}
1 change: 1 addition & 0 deletions tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,4 @@
},
"include": ["**/*.ts", "**/*.tsx"]
}