assessment_software's Introduction
assessment_software's People
assessment_software's Issues
archived cards
icon
TextField Component
TextField component is a component to hold text. It should have these attributes with their functions:
- id - a unique identifier for the text
- Value - is the content of the text field
- Variant - Standard(blank line), Filled(with shade background), Outlined(with borders)
- placeholder - grey text inside the field to describe the content
- autofocus
- classes - override CSS with custom
- color - set the color of the text field
- error - a boolean that is set to true and maybe brings a color change or error message display
- onChange - takes a callback and calls callback whenever there is a change to the value
- required - mark required accordingly
- type=text/email/password
path display
It should take two arrays. One is for a list of paths, and the other is for the link and display of those paths. The first one should always be bold, and the following path should be grey. And it should use a backslash to separate the path. Each path should be clickable and should be able to navigate back.
dialog box
Create a folder that will contain all types of dialogue boxes. There were will be three components. First, dialog box that only shows message passed to it as an attribute. Second, success dialog with message, and two buttons(the first button is cancel and the second button's title is passed as an attribute.).
practice storybook
cover this track from this https://storybook.js.org/tutorials/intro-to-storybook/angular/en/get-started/
implement home(courses) page
Buttons component
help flag
implement archived(/archived) page
implement course page(course/#course_name)
File upload input
tables
move all component to their own folder
implement pagination component
Read on how to implement a pagination component. Read the states you need for a successful pagination. Refer to the API for this material UI pagination. Include the important things. Material UI doc Must have API to include from material UI (classes, count(numOfPages), onChange, page(curPage))
nav bar
Implement the nav bar. it should look like the design below. in addition, it should float at the top, exactly shown in the screenshot. It should have a mechanism to add nav bars titles and addresses using arrays. It should change selected menus when clicked. By default, the first one is the selected bar.
assignment cards
implement routing
Implement routing for these pages:
- home(courses),
- archived(/archived),
- assignment detail page(course/#course_name/assignment/#assignment_name),
- change password(change_password),
- course page(course/#course_name),
- add assignment(course/#course_name/add assignment),
- edit assignment(course/#course_name/edit assignment),
- student list(course/#course_name/student_list),
- sign in page(/signin)
- 404 page not found
Task detail:
- create page folder
- inside the page folder create folder for each page
- for each page create a component and add dummy
<p>Page Name</p>
inside each page - create routing for each page based on the address provided above
- given the address in the browser address bar, it should successfully navigate to the pages created
- if the page doesn't exit, it should navigate to 404 page
Use this guide: link to guide
profile avatar with drop down
implement change password(change_password)
Textarea input
course card and assignment card click issue fix
The course card currently gets clicked even if you click it outside. The reason is both are wrapped by tag which takes the how line.
in the CSS, add inline-block
for example for the course card:
.course-box{
@apply **inline-block** font-sans font-bold rounded-md p-4 w-max relative border-solid border-2 border-gray-100 text-left;
}
Date picker
implement , assignment detail page(course/#course_name/assignment/#assignment_name)
implement add course dialog
implenet the add course dialog form. it should use angular form. here is link to the tutorial
course cards
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.