Build an EmployeeCard component in React to display name, designation and work experience of a person. Pass name, designation and work experience as props.
- The colour of “Designation:” should be green.
- The colour of “Experience:” should be blue.
Build a React component to display a button with custom styles and button text as ‘Start’. The styles should be passed as props.
Data
const backgroundColor = 'lightgreen'
const color = 'darkgreen'
const borderRadius = '5px'
const padding = '10px'
Build a React component to display a list of stationery items with a header. The items and header should be passed as props. Header should be “Stationery Items”.
Data
const items = ['pen', 'pencil', 'ruler', 'eraser']
Build a React component to display an image with a caption. The image and caption should be passed as props.
Data
const imageLink='https://cdn.pixabay.com/photo/2023/03/18/10/43/plum-blossoms-7860381_1280.jpg'
const caption = 'Spring Flowers'
Given the products data. Build a React component to display the name of all products as an unordered list on the DOM.
Data
const products = [
{ name: 'Perk', quantity: 10, sales: 7 },
{ name: 'Pepsi', quantity: 10, sales: 20 },
{ name: 'Coke', quantity: 18, sales: 50 },
{ name: 'Maggi', quantity: 41, sales: 22 },
{ name: '5Star', quantity: 7, sales: 9 },
]
Consider the products data from previous question and display all the product details as unordered list for which the number of sales is more than the quantity.
Given a student object with student name and the marks for english, maths and computers. If the total marks of a student is >= 225, the grade is A, >=180 the grade is B, >=150 the grade is C, otherwise the grade is D. Build a React Component that takes the student object as props and uses it to show all the students details, total marks and grade on the DOM as shown in the image below.
Data
const student = {
name: 'John Doe',
english: 90,
maths: 80,
computers: 70,
}
Build a React component to display all the employee details as unordered list on the DOM in the following format:
name: name, level: level, dept: dept, designation: designation, salary: salary
No need to pass as props.
Data
const employees = [
{
name: 'Jack Smith',
level: 2,
dept: 'Tech',
designation: 'Manager',
salary: 24000,
},
{
name: 'Mary Robbins',
level: 3,
dept: 'Fin',
designation: 'Manager',
salary: 28000,
},
{
name: 'Steve Williams',
level: 4,
dept: 'Ops',
designation: 'President',
salary: 35000,
},
{
name: 'Bob Andrews',
level: 1,
dept: 'Fin',
designation: 'Trainee',
salary: 16500,
},
{
name: 'Dave Martin',
level: 2,
dept: 'Fin',
designation: 'Manager',
salary: 21700,
},
{
name: 'Julia Clarke',
level: 3,
dept: 'Ops',
designation: 'Manager',
salary: 26900,
},
{
name: 'Kathy Jones',
level: 4,
dept: 'Tech',
designation: 'President',
salary: 42500,
},
{
name: 'Tom Bresnan',
level: 2,
dept: 'Tech',
designation: 'Manager',
salary: 22200,
},
]
Considering above data given in question 8, at the end of all the employee details, calculate and display the total salary expense of the company. Total Salary Expense: totalSalary
Considering above data given in question 8, display the details of employee with orange backgroundColor, who are at level 2.
Considering above data given in question 8, add a border around the employee details whose designation is “President”