IT430 Assignment No. 02 Fall 2017 Discussion + Solution

Assignment No. 02

Semester: Fall 2017

IT430: E-Commerce

Total Marks: 15

Due Date:15/01/2018

Instructions:-

Please read the following instructions carefully before submitting assignment:

It should be clear that your assignment will not get any credit if:

§ The assignment is submitted after due date.

§ The submitted assignment does not open or file is corrupt.

§ Solution is copied from any other source.

Objective:-

The objective of this assignment is to;

§ Learn and practice basic concepts styling using CSS.

§ Learn the basic concepts of Java Script and use of functions.

§ Learn to use different class of CSS.

§ Create interactive button.

Assignment:-

Below are the two screenshots, the first one is taken before pressing the button and the second one is taken after pressing the button. You are required to design a page having such functionalities on single webpage.

Your Task:

The first box should have following things.

 Border should be 2px solid black with outline color #4CAF50 solid 10px having text moving in the box from left to right.

The second box should have following things.

 Background color should be light grey.

 Width should be 300px with border size 25px solid green in color.

 Padding and margin should be 25px.

 After the button is pressed the box opens and there is written roll numbers which are decreasing there size in each line upto 6.

 Use function to create the gradual decrease in size of Roll number using script code and call that function on button press to display the Roll numbers within the box.

Submission:

You are required to submit your solution through LMS in a zip folder having two files in it

 File saved with .html extension

 Code file saved in notepad or word file

Solution File :

Copy Code and Paste in Notepad and Save as Your Id with dot HTML Extension like bs00000000.html

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border: 2px solid black;
    outline: #4CAF50 solid 10px;
    margin: auto;    
    padding: 20px;
    text-align: center;
}
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
<script>
function Display(){
 document.getElementById("demo1").innerHTML = "Roll No. 1";
 document.getElementById("demo2").innerHTML = "Roll No. 2";
 document.getElementById("demo3").innerHTML = "Roll No. 3";
 document.getElementById("demo4").innerHTML = "Roll No. 4";
 document.getElementById("demo5").innerHTML = "Roll No. 5";
 document.getElementById("demo6").innerHTML = "Roll No. 6";
}
</script>
</head>
<body>

<p>
<marquee direction="right">Press the Button Below</Marquee></p>
<br>
<input type="button" Value= "Press" onclick="Display()">
<div>
<h1 id="demo1">
</h1>
<h2 id="demo2">
</h2>
<h3 id="demo3">
</h3>
<h4 id="demo4">
</h4>
<h5 id="demo5">
</h5>
<h6 id="demo6">
</h6>
</div>
</body>
</html>

You Can Also Download

Midterm Past papers, Finalterm Past papers,

Midterm papers Arslan, Midterm papers Moaaz, Midterm Papers Tariq,

Finalterm Papers Arslan, Finalterm Papers Moazz, Finalterm Papers Tariq

Current Assignments, Handouts, Viva's, PPT Slides, GDB's , Quizez, Short Notes, and Much More .

Tags : #IT430 Assignment Solution

Virtual Ustaad

Welcome to Our Site! - Virtual Ustaad This site is basically Design to help all Virtual University Students in their Study programs.its a plateform where you can get all your past papers which are made by Different Students of Virtual University. The Main purpose of this site to help and guide you by giving all materials, which will be helpful for you.

VU Activity

Midterm Papers

Final Papers

Others Students

Search Here All Mid & Final Papers