React Js Assignments

Module 1-JavaScript Basic

Q.1 Using console.log() print out the following statement: The quote 'There is
no exercise better for the heart than reaching down and lifting people up.' by
John Holmes teaches us to help one another. Using console.log() print out the
following quote by Mother Teresa:
Q.2 Check if typeof '10' is exactly equal to 10. If not make it exactly equal?
Q.3 Write a JavaScript Program to find the area of a triangle?
Q.4 Write a JavaScript program to calculate days left until next Christmas?
Q.5 What is Condition Statement?
Q.6 Find circumference of Rectangle formula : C = 4 * a ?
Q.7 WAP to convert years into days and days into years?
Q.8 Convert temperature Fahrenheit to Celsius? (Conditional logic Question)
Q.9 Write a JavaScript exercise to get the extension of a filename.?
Q.10What is the result of the expression (5 > 3 && 2 < 4)?
Q.11What is the result of the expression (true && 1 && "hello")?
Q.12What is the result of the expression true && false || false && true?
Q.13Check Number Is Positive or Negative in JavaScript?
Q.14Find the Character Is Vowel or Not ?
Q.15Write to check whether a number is negative, positive or zero?
Q.16Write to find number is even or odd using ternary operator in JS?
Q.17Write find maximum number among 3 numbers using ternary operator in JS?
Q.18Write to find minimum number among 3 numbers using ternary operator in
JS?
Q.19Write to find the largest of three numbers in JS?
Q.20Write to show
i. Monday to Sunday using switch case in JS?
ii. Vowel or Consonant using switch case in JS?
 (Conditional looping logic Question)
Q.21What are the looping structures in JavaScript? Any one Example?
Q.22Write a print 972 to 897 using for loop in JS?
Q.23Write to print factorial of given number?
Q.24Write to print Fibonacci series up to given numbers?
Q.25Write to print number in reverse order e.g.: number = 64728 ---> reverse
=82746 in JS?
Q.26Write a program make a summation of given number (E.g., 1523 Ans: - 11) in
JS?
Q.27 Write a program you have to make a summation of first and last Digit.
(E.g., 1234 Ans: - 5) in JS?
Q.28Use console.log() and escape characters to print the following pattern in JS?
11111
21248
3 1 3 9 27
4 1 4 16 64
5 1 5 25 125

Q.29Use pattern in console.log in JS?

1) 1
10
101
1010
10101

2) A
BCD
EF
GHIJ
KLMNO
3) 1
23
456
7 8 9 10
11 12 13 14 15

4) *
**
***
****
*****

Q.30 Accept 3 numbers from user using while loop and check each numbers
palindrome
Q.31 Write a JavaScript Program to display the current day and time in the
following format. Sample Output: Today is Friday. Current Time is 12 PM: 12 : 22
2?
Q.32Write a JavaScript program to get the current date?
Q.33Write a JavaScript program to compare two objects?
Q.34Write a JavaScript program to convert an array of objects into CSV string?
Q.35Write a JavaScript program to capitalize first letter of a string?
Q. 45 Write a JavaScript program to determine if a variable is array?
Q.46 Write a JavaScript program to clone an array?
Q.47 What is the drawback of declaring methods directly in JavaScript objects?
Q.48 Print the length of the string on the browser console using console.log()?
Q.49 Change all the string characters to capital letters using toUpperCase()
method?
Q.50 What is the drawback of declaring methods directly in JavaScript objects?
Q.51 Write a JavaScript program to get the current date. Expected Output :
mm-dd-yyyy, mm/dd/yyyy or dd-mm-yyyy, dd/mm/yyyy?
Q.52 Use indexOf to determine the position of the first occurrence of a in
30 Days Of JavaScript?
Q,53 Use lastIndexOf to determine the position of the last occurrence of a in 30
Days Of JavaScript?
Q.54 Form Validtion in JS?
Q.55 Form in Email, number, Password, Validation?
Q.56 Dynamic Form Validation in JS?
Q.57 how many type of JS Event? How to use it ?
Q.59 What is Bom vs Dom in JS?
Q.60 Array vs object defences in JS?
Q.61 Split the string into an array using split() Method?
Q.62 Check if the string contains a word Script using includes() method?
Q.63 Change all the string characters to lowercase letters using toLowerCase()
Method.
Q.64 What is Character at index 15 in ’30 Days of JavaScript’ string? Use charAt()
method.
Q.65 copy to one string to another string in JS?

● Create basic math operation in JS

● Create result
• Create a slider using JavaScript

● Change background using java script

● Create a hide show password functionalities.

● Create a form and apply validations as shown in below example.

● Create basic math operation in JS

● Create result
 Module – 2 Advance JavaScript
• Calculate subtotal price of quantity show in below image

• Create below form and do apply validation show in below image

• Create two containers and drag from one to another show in below
image

• Createt Email validation program show in below image

• Create Show and Hide password program show in below image

• Create Password Strength checker show in below image

• Create program to generate Random quote show in below image

• Create program to Export html table to excel show in below image

• Create Currency converter show in below image

• Delay function result using debouncing

• Achieve Throttling using below example (on mouse over display mouse
cordinates.)

• Create Simple Alarm Clock show in below image

• Create Responsive Light box Gallery shown in below image

• Create review Card slider shown in below image

• Create Login Logout system shown below

• Create Image Editor shown below and apply filters like

brightness,contrast etc.
• Perform Localstorage CRUD as below
 Module – 3 ReactJs

• CreateHello World React program show below

 Module – 4 Lists and Hooks
• Create counter app program shown below

• Create Login Lout React program as below

‘
• Create TODO app show in image below

• How to Create a List View in React Js?

• Create modal for Login and Registration show in below image.

• Move an element on mouse move using useState OR useEffect Hook

Module-5) React - Styling & Advance React
• Create Shopping site home page with Styled- component

• Peform crud using Fake API and Material UI

 Module 6) React Router
• Create React app with modules and lazy loading (Admin-user module with child router
and outlet)

• Perform Crud operation using json-server,axios,router

 Module-7) React - Applying Redux

• Cretae app for Reduc counter as shown below?

• Create CRUD using Redux-thunk , Json-server,axios,router

• Create a Single page application as show below.
• Create this portfolio page with at least three pages those all pages shold be opened without
refreshing the page also apply dark light there on toggle button