Every day Hands on Exercises / Assignments

Day wise hands on exercises/ assignments Day 1: HTML Hands on Exercises Date:04-10-2021 1.Create a web page to display your name, designation, location. 2. Create a web page to show about yourself in 3, 4 paragraphs. 3. Create a web page to display some nature images and Describe those images. 4.create a web page about college anniversary celebrations Divide your page in 4, 5 div elements . In the 1st div, put the heading of college , and display other details about the college. In the second div put images of the college. In third div put details of celebrations in paragraphs In the fourth div display the guest list. Use style attribute for doing color, background color, font etc, To emphasise some special content use elements like , 5. Create a web app on Indian cultural festivals. Use semantic elements for lay out of the page. Define an external style sheet and link with the page. Your app should have indexpage, cultural page, about us page. You should navigate among these pages. Each festival Should represent with images and description.Alignment also to be done for elements. ************************************************ 

 Day 2 HTML CSS Hands on exercises: 05-10-2021 

 Create a website for a Fashion designer show to Show different categories of apparels. The website will have the following pages: Indexpage/homepage, apparels page, about us page, Contact us page. In the home /index page is the landing page of your website. You can design this page dashboard with navigation to other pages. Show your firm's image/ logo, describe the firm. Apparels page will display different apparels/ dresses which Are available including their description and price, designer name. Contact us page will have a form collecting users details like name, email, phone, some message. About us. page will have information about your firm and address. Use an external stylesheet for styling. 2.Apply a box model to elements in the above website.text- decoration, text-transform, transformation methods(),text shadow to headings in your web pages. **************************************************** 

 Day 3 Hands On Exercises Date:6-10-2021 

 1.Create a web page where you can display different types of graphics by using canvas, svg elements. Display a rectangle with 300X200 pixel size with background color light green and display “ I am a rectangle”. Display a circle with 100 radius , border width 5pxls, border color orange, fill the circle with purple color. 2. Create a webpage where you can display different gradient styles. Define a rectangle shape with 500X250 size, apply linear and radial gradient by using different methods of gradient techniques. 3. Create a web page, place some elements with id attributes. Write javascript code to display some content on these elements. Use all kinds of content displays. 4. Define x, y variables and assign some values to them. Write expressions for adding, multiplying, difference, division of x,y. Show values in separate elements. 5. Create an object of Trainees having properties like this: traineeName,education,joining_date,location. Display the data in an HTML element. 6. Create an array of toys having names of toys and display it on an element. 7. Create a string variable assign a long sentence to it. Use string length property to count no.of characters in the string. Use slice(), substring() and substr() to getany substring from the long string. Replace a sub string with a new string. Concatenate 2 string with concatenate(). 8. Create a object of student with name, rolno, mathsmarks, sciencmarks, englishmarks as property, define studentdetail property with a function which will calculate total marks and display all details of the student. ***************************************************** 

 Day 4 Hands on exercise on javascript: 07-10-2021 1.Write a js function to calculate simple interest of principal amount, at a given interest rate and for a number of years of duration. Show simple interest and total amount by using string interpolation technique. 2.Write a function which will take an array of colors(names) and print all the colors on an element. Use pop(), push(),shift(), unshift() then again show the colors after each method. 3.Write a function to accept an array of animals as parameter. Use the splice() to add a new animal at location 3 and show them. Again use splice() to add 3 new animals at location 2 and remove 2 existing animals and show the result. 4. Create a website for an electronics products company. They will sell TVs, Mobiles, Air conditioners, Washing machines, Laptops etc,. Create Index/ home page for dashboard of the website with header having logo and name of the company. Create a navigation bar with links to all web pages of the site. Below that put a description about the company along some images. In the products page show all the products with images , description, price details. In the service page describe what different services will be done and cost or free. In the about us page put the address of the company. In the contact us page collect the user details by using a form. Use an external stylesheet and external javascript file for styling and behaviour of the webpages. ***********************************************************************

 Day 5 Hands on exercises Date:08-10-2021. 

 1. Open REPL in cmd prompt. Create a function which will take 2 parameters firstname, lastname. Return fullname. 2. Create a node.js file which creates a server and shows your name. 3. Create a user defined module having a function which calculates the sum of two numbers. Define another function which will take two arrays and return elements of two arrays as a single array. Create module consuming files and execute the same. ****************************************************************

 Day 6 hands on exercises: Date: 11-10-2021

 1. Create a folder with the name “HelloDemos”. Change to this directory and create an “ExpressHandsonApp” folder which is the app folder. Use command to create the app. Add dependencies of express to this app. Write a code to create a server and run it. Write HTTP methods like: get(), post() with path and call back functions. Define 4 independent call back functions. Use these call back functions in get() as an array. *********************************************************************** 

 Day 7 : hands on exercises Date: 12/10/2021 

 Create a new express app with my app with a skeleton of the by using express dependencies. You can add in routes folder route methods for about us , contacus. Add view pages in the view folder which are connected to the route methods. Display image on home page. Put some description in headings , paragraphs on the home page. In about us display address, contact us you can put some form to capture user information. Create an Employee table with id (pK), empname, designation,salary, city columns. Insert 10 employees' data into the table. Select all rows and columns from the table. Select employees of a particular city. Select employees of a particular designation. Select employees who are getting more than 30K. Select employees who are getting salaries between a range. Show all the employees by sorting based on their salary. Show all the employees by sorting based on designation. ****************************************************************** 

 Day 8: Hands on exercises on sql: Date 13-10-2021 

 Create a department table with id,deptname, location columns. Create a myEmployee table with empid, empname,jobrole,city, dept_id columns . dept_id column should reference deptid column of department table. Insert data into department table and myemployee tables. Select data from both tables independetly. Create a join to fetch empname,jobrole,deptname,location from two tables. Create an express app to get connected with MySql database accessing table rows in a database schema. Display all the rows. Display specific row by using id. **********************************************************

 Day 9 hands on exercises: date: 14/10/2021 

 Create an Crud operations app in Express. Write code to connect to the mysql database. Add a router file which contains methods to get all rows from the tables, get a single row based on id, insert a row into the table, update a column value in a row based on id, delete a row from the table based on id.

******************************************************************