MEAN & MERN Stack Assignments

 Create a new React app and implement routing.

 Create simple User management app and perform                  1. Add a new User in AddUser component . ( userObj = { name:"xxx", email :"xxxx"} ) . Note: "username" should be unique . When we try to add new user, first it should check a user is already exists  . If username already exists , it should render"Duplicate username"in "AddUser" component.                 2.  Display Users list in a table ( UsersList component )                    2. Delete  an existing User from table ( Provide a separate delete button for each row ) NOTE: When a user is either added or removed, the User count( in UserCount component ) should reflect count of remaining users.

 Design the following Use registration form using CSS & Bootstrap. Apply the following validation rules. 1. All fields are required 2. Min length of "first_name " & "last_name"  field is 4 and max is 6 3. Phone number length should be 10 Note: The form can be submitted only if it passes  all validation rules mentioned.

 Create " Adduser " component and add User registration form to it with username , date of birth and city fields.  Validation rules:         All fields are mandatory         Username should have min length of 4 characters and max of 8 characters. Note: After a new user, the table should render the latest data

    Take a counter in Parent component and increment & decrement its value from Child component.

 Make API call to  "  https://jsonplaceholder.typicode.com/users " , get data into "Users" component and display it as 4 cards in a row (Bootstrap grid of cards). Add " Add User " button to each card. When we click on "Add user" button, the user count need to be incremented by one in "Usercount" component.

 1.Design the following UI 2.Create the following Layout 

 1. Consider the following component hierarchy . Root component have 6 Products components as children. Create one Product component and reuse it for 6 times , each time passing different data as props( product image, name, brand, price) The final UI should have 3 products in each row. Use CSS flex. Use the following products array for sample data set [   {     id: 1,     title: "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",     price: 109.95,     description: "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",     category: "men's clothing",     image: "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",     rating: {       rate: 3.9,       count: 120     }   },   {     id: 2,     title: "Mens Casual Premium Slim Fit T-Shirts ",     price: 22.3,     description: "Slim-fitting style, contrast raglan long sleeve, three-button henl

 1.Get data from  the API "  https://jsonplaceholder.typicode.com/todos " and   display the data in both table and grid of cards format 2. Read a number as input from user and print the factors of it on web page. 3. Read two numbers as input from user and create a simple calculator to perform arithmetic operations and the result can be printed on webpage.

 1. Create a promise which can be either fulfilled or rejected after 5 secs   2. Revise HTML elements like table, div,  span,  img etc...and design the following layout using HTML and CSS

 1. Define the following array of object in a module and export it.      employees= [    {       name:"raju",       age:34,       skills:["reactjs","angular","nodejs"],       address:{          street:"kphb",          city:"hyderabad"       }    },    {       name:"bhanu",       age:36,       skills:["reactjs","angular","nodejs"],       address:{          street:"miyapur",          city:"hyderabad"       }    },    {       name:"vikas",       age:40,       skills:["java","angular","python"],       address:{          street:"koyambed",          city:"chennai"       }    },    {       name:"varun",       age:58,       skills:["reactjs","python","nodejs"],       address:{          street:"time square",          city:"warangal"       }    },    {      

 1. Consider the following string                 aaaabbababababbbbabababaaaa          Find frequency of "a" and "b".   Note- Frequency means, the no of times that specific character has                   appeared. 2. Write a function to receive a string of multiple words as argument          and then print the no of words in that string.          Example:               Input : how are you all               Output: 4

1. Find sum of elements of an array  2. Consider the following array       [ 1 ,2 , 3, 4 ]       Create new array by adding 10 to first element, 20 to second element , 30 to third element and so on using map() method.          [1,2,3,4 ]======>[ 11,22,33,44] 3. Consider the following array of students marks          [               { name:"ravi", marks :{ maths: 89, physics : 70 , chemistry :88}},             { name:"bhanu", marks :{ maths: 98, physics : 50 , chemistry :68}},             { name:"kiran", marks :{ maths: 50, physics : 82 , chemistry :94}},         ]     Find the names of students who got highest marks in maths , physics and chemistry. 

 1. Create Employee class and add properties name, age, basic and add getSalary method to its prototype. Create 5 Employee objects and print their salaries.  2. Create Product class and add properties brand, price, model and add getDiscountPrice method to its prototype. Create 5 Products objects and print their discount price. Note: For each object of these 5 , send different discount percentages as argument Read the following articles: https://www.w3schools.com/js/js_object_constructors.asp https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes

1. Create student, bus , employee and mobile objects with all possible properties  2. Create Student object with properties roll number, name, marks(array),address and method to compute aggregate of marks 3. Create product object with properties product number, product name, model, price and a method to return discount price by receiving the discount percentage as argument.

1. Take a number array and find the sum of elements of it. 2. Take a number array and print even numbers of it 3. Take a number array and print prime  numbers of it

1. Write a program to find big number of given two numbers 2. Write a program to find big one in given three numbers 3. Write a function to find the factors of a given number 4. Write a function to check given number is prime or not      (Hint: Prime number have only two factors) 5. Write a function to print even factors of given number 6. Write a function to receive a number as arg and return sum of its            digits          INPUT : 1234           OUTPUT : 10 (1+2+3+4)

 1. Write a program to implement Arithmetic operations 2. Write a program to test unary increment & decrement operators       (Note your observations in comments) 3. Write a program to verify comparison operators 4. Write a program to find difference between == and === operators        (Note your observations in comments)

1. Design the following web page using bootstrap   2. Create a grid of three product cards. Place an image, name ,small description and a button(Specifications) in each card.   When the "Specification button" is clicked, it should invoke a modal which contains the complete information the product like Price, Brand,Model no. etc.. 

 1.Open  https://www.udemy.com/ webapp  2. Identify vertical & Horizontal cards in that WebApp  3. Create a webpage with those vertical & Horizontal cards  and use same images by             copying their CDN links

  Create the following template using Bootstrap Grid layout

    Design the following layout using Bootstrap & CSS flex  

 Design the following Responsive layout using HTML & CSS and check its view in Tab and mobile

 Create 3 components ( AddTodo , ToDoList and ToDoCount ) and nest them into Root component. Whenever a new Todo item is added, it should appear in ToDoList component and count need to be updated in ToDoCount Component without page refresh.(Use BehaviourSubject for angular app / Redux for React app)

 Make an API call to   https://jsonplaceholder.typicode.com/users    and get data to a component. Post names of users into a dropdown and by selecting the name of a specific user, it should display the data of that user as a list below it.