Skip to content

Commit 87c4edf

Browse files
Update README.md
1 parent aca571d commit 87c4edf

File tree

1 file changed

+42
-2
lines changed

1 file changed

+42
-2
lines changed

README.md

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ You can **download code** from here via :
6363
< Component >
6464
< Border />
6565

66-
- **Assignment 2** : Create a simple React app for Resume building. It will be static website. You have to make components like **Resume** as top level and under it - **Skills**, **Education**, **Experience** etc as components. All resume data will be under 1 big JavaScript object like which you can us in components via props.
66+
- **Assignment 2** : Create a simple React app for **RESUME Builder**. It will be static website. You have to make components like **Resume** as top level and under it - **Skills**, **Education**, **Experience** etc as components. All resume data will be under 1 big JavaScript object like which you can us in components via props. You can fix the number of items in **Skills**, **Education**, **Experience** or any section. Example you can say that only 3 experience items is allowed.
6767

6868
```
6969
resume = {
@@ -85,4 +85,44 @@ You can **download code** from here via :
8585
### Related Videos :
8686
1. De-structuring Assignment : [Long Video](https://youtu.be/sNhqFofQhFs) | [Object De-structure Short Video](https://youtube.com/shorts/H3MKXE69_c8) | [Array De-structure Short Video](https://youtube.com/shorts/ONGyMq49kZY)
8787
2. Import/Export : [Long Video](https://youtu.be/7P5JUMc1cI4) | [Short Video](https://youtube.com/shorts/sUUOSWlwfM8)
88-
3. Spread Operator : [Long Video](https://youtu.be/X4Iv0TBHDQ4) | [Short Video](https://youtube.com/shorts/5dBZGyXutx8)s
88+
3. Spread Operator : [Long Video](https://youtu.be/X4Iv0TBHDQ4) | [Short Video](https://youtube.com/shorts/5dBZGyXutx8)
89+
90+
91+
## Video 3 - Conditional Rendering & Lists
92+
93+
94+
- **Assignment 1** : Make a simple component which can conditionally render a list with **number** or **alphabets** or ***bullets*** in HTML for number. e..g. use a prop like `layout` for this. Also use a prop `items` for array of items in list.
95+
```
96+
< List layout="numbered" items={items}>
97+
< Component layout="alpha" items={items}>
98+
< Component layout="bullet" items={items}>
99+
```
100+
101+
- **Assignment 2** : This is continuation of 2nd assignment in Video-2 **RESUME Builder**.
102+
1. In this part you have to make some conditional rendering. Suppose if any section doesn't exist you have to remove that section from **Resume**. Example if `skills` is empty array than don't display `skills` section in Resume.
103+
2. You have to use `map` in most places where there are arrays. Like **Skills**, **Education**, **Experience** if there are 3 entries, use `map` to display 3 experience items. You don't need fix number of items. Any array can have 1 to 10(or some Limit) any number of items. You can put some Limit, so that your layout is not affected.
104+
3. Conditionally put some styling to **Resume**. Like `light` theme or `dark` theme or any other way you can switch the CSS layouts.
105+
106+
```
107+
resume = {
108+
experience : [ { year:2012, company:'xyz', role:'something' }],
109+
education:[ ],
110+
skills : [ 'react js', 'node js']
111+
.....
112+
...
113+
}
114+
```
115+
116+
> You can choose any simple HTML layout and convert it to React Components
117+
118+
Example Link : [ Resume HTML ](https://codepen.io/emzarts/pen/OXzmym)
119+
120+
121+
122+
123+
### Related Videos :
124+
1. Ternary Operator : [Video](https://youtu.be/F_95TPUIA2c)
125+
2. Logical AND (&&) : [Video](https://youtu.be/7dXLYWWTRXI)
126+
3. Higher Order functions (map, filter, reduce) : [Video](https://youtu.be/oGpA98nNx6Y)
127+
4. Import/Export : [Long Video](https://youtu.be/7P5JUMc1cI4) | [Short Video](https://youtube.com/shorts/sUUOSWlwfM8)
128+

0 commit comments

Comments
 (0)