You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-**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.
@@ -98,7 +99,7 @@ You can **download code** from here via :
98
99
< List layout="bullet" items={items}/>
99
100
```
100
101
101
-
-**Assignment 2** : This is continuation of 2nd assignment in Video-2 **RESUME Builder**.
102
+
-**Assignment 2** : This is continuation of previous assignment **RESUME Builder**
102
103
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
104
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
105
3. Conditionally put some styling to **Resume**. Like `light` theme or `dark` theme or any other way you can switch the CSS layouts.
@@ -126,3 +127,123 @@ You can **download code** from here via :
126
127
3. Higher Order functions (map, filter, reduce) : [Video](https://youtu.be/oGpA98nNx6Y)
-**Assignment 1** : Make a simple page with 1 Image, 1button, 1 form Input text box and try to apply these events .
135
+
136
+
- Image : **onMouseOver** : when you hover on image. Image should increase in size. Think of any way where you can do it. Also, try that when you "move out" the mouse, it should be back to normal size.
137
+
- Button : **onDoubleClick**: when you doubleClick a button. show some alert box. Also make a console.log for single click event. Is console.log printed twice on double click ? check this ?
138
+
- Input Textbox : **onFocus**, **onBlur** are 2 events which occur when you enter or exit an input text box by click of mouse etc. Use it to display some console.log, which print "focused on the textbox", "out of textbox".
139
+
- **onCopy, onCut, onPaste** are 3 events which you can use on any text value etc. try to use it on a paragraph and just alert the user that something is copied, cut or pasted.
140
+
141
+
-**Assignment 2** : Make a custom event called **onClose**. this event should close the current browser tab. you can apply it to a button on click or anywhere.
142
+
143
+
-**Assignment 3** : Using **event bubbling** concept print the name of Parents to Child of any clicked element. It should be order in "GrandParent >Parent > Child" this kind of order. Where "Child" represents the current clicked element.
144
+
145
+
-**Assignment 4** : Make a form using `` < Form> `` tag and put an textbox and button inside this form. try to click the button after entering into textbox. Does form reloads ? Can you try to stop is using `e.preventDefault`. Try it.
146
+
147
+
-**Assignment 5** : use an Input Textbox : after you enter some text. try to press **ENTER** button and show the an alert or console.log. You can capture the **onKeyPress** event, button how you will you make it work only for "Enter" ? It should not work on pressing of other keys. [*Hint: Explore the synthetic event object*]
148
+
149
+
150
+
-**Assignment 6** : This is continuation of previous assignment **RESUME Builder**.
151
+
1. Add a **print** button to print the current resume. You can use a DOM method ``window.print`` to print the PDF.
152
+
153
+
154
+
-**Assignment 7** : Can you try the challenge of passing the function in one Prop like `onPlay` and the message inside that function to be accessed from other prop `message`[ As shown in Chapter Video ]
155
+
156
+
157
+
### Related Videos :
158
+
159
+
160
+
## Chapter 5 - State, useState Hooks
161
+
162
+
163
+
164
+
165
+
166
+
## Chapter 6 - Form , Synthetic Event Object & Lifting State up
167
+
168
+
**Assignment 1** : Try this challenge : https://beta.reactjs.org/learn/state-a-components-memory#challenges
169
+
170
+
171
+
-**Assignment 2** : **FILTERED LIST** : Make a **List** of something using an Array (a list can of cricket player /countries/ movie name etc). Now make this list it searchable, you have to put a **input textbox** at top of list. When you type in **textbox** it should only show you items matching from text typed. For example -
172
+
If you type only "in" it should show things like "India" / "China" as both have `in` in it.
173
+
-**Assignment 2.1** : **FILTERED LIST** : Make above **List** as separate components for List, Input form and pass the states from each other using concepts learnt till now.
174
+
175
+
-**Assignment 3** : **KEYBOARD BASED LIST** : Make a simple **List** from an input textbox.
176
+
177
+
- There should be no buttons, we will use only keyboard actions
178
+
- use **ENTER** to add a new item.
179
+
- when you click on an item, it should be selected (you can change style to show it is selected)
180
+
- If you press the **DELETE** key on the keyboard after selecting the list item it should delete that list item. If you have not selected any item the last item should be deleted.
181
+
- You can select list item and press **UP** arrow key to Move It Up. And you can press the **DOWN** key to move it down.
182
+
183
+
**Assignment 4** :
184
+
185
+
This is continuation of previous assignment **RESUME Builder**. Now you have to make a separate component which has a **FORM**. This form will have many **input boxes**. Each one related to one section. For example you can have one input box or **experience** section. Another input box for **skill** section and like this. Every input box should have an **Add** button in front of it. Once you press this add button that information is stored in the state , which you can update at top of the App level. Now this state should update the **Resume** you have built.
186
+
- first component will be your **RESUME** document which is only for reading purpose.
187
+
- second component will be this **FORM**
188
+
- you have to manage the state in between
189
+
- only Add functionality is required in this assignment
190
+
- you can change input boxes according to your need depending on your format of Resume. You can have multiple textboxes also for same section. Like for date + experience item etc.
191
+
192
+
193
+
194
+
## Chapter 7 - More state & useEffect hooks
195
+
196
+
197
+
**Assignment 4** :
198
+
199
+
This is continuation of previous assignment **RESUME Builder**.
200
+
- Add functionality to **delete** the items from resume.
201
+
- Add functionality to **update** the items from resume.
202
+
- you have to manage the state in between
203
+
- you can change input boxes according to your need depending on your format of Resume. You can have multiple textboxes also for same section. Like for date + experience item etc.
204
+
- Check the output can be printed perfectly in PDF.
205
+
206
+
207
+
## Chapter 8 - useReducer
208
+
209
+
**Assignment 1** : Try this challenge : https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer#challenges
0 commit comments