CS202 Assignment 3 Solution and Discussion

zareen

Assignment No. 03
Semester: Fall 2019
CS202: Fundamentals of Front-End Development Total Marks: 20

Due Date: 16/01/2020

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.
 Assignment is copied(partial or full) from any source (websites, forums, students, etc)

Note: You have to upload .html file which contain required code. Assignment in any other format (extension) will not be accepted and will be awarded with zero marks.

Objective:

The objective of this assignment is to provide hands on experience of:

 jQuery implementation
 Event handling in jQuery
 Apply CSS through jQuery

Guidelines:

 Code should be properly indented.
 You will use only Notepad to make the html file
 You will not use any other software to make .html file

For any query about the assignment, contact at [email protected]

Assignment

Problem Statement:

You are required to write jQuery code which will fulfill requirements given below.

Requirements and Solution Instructions:
• Watch the video given in the assignment folder and apply the jQuery.
• Find the attached HTML Design file to put required jquery code in this file.
• Click on the heading and the related text should be displayed under the heading as displayed in video.
• Click on the buttons to change the header and footer as shown in video.

Tips:
• The CSS of each element is implemented through ID. So access all required element through ID in jQuery.

For any query about the assignment, contact at [email protected]

BEST OF LUCK!

zareen

Check Solution Result

zareen

<!DOCTYPE html>
<html>
<head>
	<title>Front End Development- Assignmnet-03  Created by : BC170201325 Asad Iqbal</title>
	<script
	  src="https://code.jquery.com/jquery-3.4.1.min.js"
	  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
	  crossorigin="anonymous"></script>
		<script>
		$(document).ready(function(){
		  $("#flip1").click(function(){
		    $("#panel1").slideToggle();
		  });
		});
		</script>

                <script>
		$(document).ready(function(){
			$("#flip2").click(function(){
			$("#panel2").slideToggle();
			});
		});
		</script>

		<script>
		$(document).ready(function(){
		  $("#flip3").click(function(){
		    $("#panel3").slideToggle();
		  });
		});
		</script>

		<script>
		$(document).ready(function(){
		  $("#flip4").click(function(){
		    $("#panel4").slideToggle();
		  });
		});
		</script>

		<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $(".header").toggleClass("yellow");
  });
});
</script>


<script>
$(document).ready(function(){
  $("#btn2").click(function(){
    $(".footer").toggleClass("yellow");
  });
});
</script>


	<style>


body{
	font-family: Helvetica;
	background-color: white;
	margin: 0;
	padding: 0;
}

	.header, .footer{
		background-color: #69BE28;
		color: white;
		text-align: center;
		width: 100%;
		float: left;
		height: 70px;

	}

	#body{
		padding: 25px;
		background-color: #f0e9e9;
		width: 80%;
		clear: both;
		margin: 0 auto;

	}
	.heading {
  padding: 20px;
  margin: 20px;
  text-align: center;
  background-color: #616161;
  color: white;
  border: solid 1px #c3c3c3;
}


	.allText{
		font-size: 18px;
		color: white;
		margin: 30px;
		background-color: #69BE28;
		text-align: justify;
		font-weight: normal;
		line-height: 1.5;
		padding: 20px;

	}






	#btn1, #btn2{
		background-color: white;
		  color: black;
		  border: 2px solid #69BE28;

			padding: 20px;
			margin: 20px;


	}
	#btn1:hover	, #btn2:hover {
  background-color: #69BE28;
  color: white;
  transition: 1s;
}
	.yellow {

  background-color: yellow;
  color: black;


}


</style>




</head>
<body>

<div class="header" >
	<h1>Virtual University of Pakistan</h1>
</div>

<div id="body">

	<div id="flip1" class="heading">CHANCELLOR'S MESSAGE</div>
	<div id="panel1" class="allText">
	One of the major challenges being faced by the education sector of Pakistan is lack of qualified faculty vis-a-vis demand. Effective utilization of Information and Communication Technology (ICT) tools provide a practical solution to this issue while maintaining the highest and internationally acceptable education standards.

	Virtual University of Pakistan is pioneer in the use of ICTs for imparting the quality education to its students all over the country including the remote areas and Pakistani overseas diaspora. With its highly flexible mode of education, Virtual University enables its students to manage studies at their own convenience and provides opportunities to harness their untapped talents.
	<br>
	Virtual University of Pakistan is playing its due role in promoting education in the country. I hope that the University will continue to ensure best quality in education and research.
	<br>
	I wish this institute success in the years ahead.
	<br>
	Dr. Arif Alvi <br>
	President of the Islamic Republic of Pakistan<br>
	Chancellor, Virtual University of Pakistan </div>


	<div id="flip2" class="heading">VISION</div>
	<div id="panel2" class="allText">To become an internationally acclaimed technology based university that improves access to higher education while maintaining the highest quality standards</div>


	<div id="flip3" class="heading">Mission</div>
	<div id="panel3" class="allText">To become an internationally acclaimed technology based university that improves access to higher education while maintaining the highest quality standards</div>

	<div id="flip4" class="heading">Introduction</div>
	<div id="panel4" class="allText">The University opened its virtual doors in 2002 and in a short span of time its outreach has reached over one hundred cities of the country with more than one hundred and ninety associated institutions providing infrastructure support to the students. Pakistani students residing overseas in several other countries of the region are also enrolled in the University's programs.</div>


	<button id="btn1">Toggle Header </button>
	<button id="btn2">Toggle Footer </button>
</div>

</div>



<div class="footer">
	<h1>Virtual University of Pakistan</h1>
</div>




</body>
</html>

Check Solution Result

zareen

zareen

zareen

CS202 Assignment 3 Solution and Discussion

SOLVED CS202 Assignment 2 Solution and Discussion Spring 2020
CS202 - Fundamentals of Front End Development • assignment 2 cs202 discussion solution spring 2020 • • zaasmi

SOLVED CS202 Assignment 2 Solution and Discussion
CS202 - Fundamentals of Front End Development • cs202 assignment 2 solution discussion fall 2019 • • zareen

MTH633 Assignment 2 Solution and Discussion
MTH633 - Group Theory • mth633 assignment 2 solution discussion fall 2019 • • zareen

ZOO501 Assignment 2 Solution and Discussion
ZOO501 - Developmental Biology • zoo501 assignment 1 solution discussion fall 2019 • • zareen

SOLVED MGT611 Assignment 1 Solution and Discussion
MGT611 - Business & Labor Law • mgt611 assignment 1 solution discussion fall 2019 • • zareen

CS202 Assignment 1 Solution and Discussion
CS202 - Fundamentals of Front End Development • cs202 assignment 1 solution discussion spring 2020 • • zaasmi

STA406 Assignment 4 Solution and Discussion
STA406 - Statistical Inference • sta406 solution discussion fall 2019 assignment 4 • • zareen

SOLVED PSY403 Assignment 1 Solution and Discussion
PSY403 - Social Psychology • psy403 assignment 1 solution discussion fall 2019 • • zareen

100% Off on Your FEE Join US! Ask Me How?

CS202 Assignment 3 Solution and Discussion

SOLVED CS202 Assignment 2 Solution and Discussion Spring 2020 CS202 - Fundamentals of Front End Development • assignment 2 cs202 discussion solution spring 2020 • • zaasmi

SOLVED CS202 Assignment 2 Solution and Discussion CS202 - Fundamentals of Front End Development • cs202 assignment 2 solution discussion fall 2019 • • zareen

MTH633 Assignment 2 Solution and Discussion MTH633 - Group Theory • mth633 assignment 2 solution discussion fall 2019 • • zareen

ZOO501 Assignment 2 Solution and Discussion ZOO501 - Developmental Biology • zoo501 assignment 1 solution discussion fall 2019 • • zareen

SOLVED MGT611 Assignment 1 Solution and Discussion MGT611 - Business & Labor Law • mgt611 assignment 1 solution discussion fall 2019 • • zareen

CS202 Assignment 1 Solution and Discussion CS202 - Fundamentals of Front End Development • cs202 assignment 1 solution discussion spring 2020 • • zaasmi

STA406 Assignment 4 Solution and Discussion STA406 - Statistical Inference • sta406 solution discussion fall 2019 assignment 4 • • zareen

SOLVED PSY403 Assignment 1 Solution and Discussion PSY403 - Social Psychology • psy403 assignment 1 solution discussion fall 2019 • • zareen

100% Off on Your FEE Join US! Ask Me How?

SOLVED CS202 Assignment 2 Solution and Discussion Spring 2020
CS202 - Fundamentals of Front End Development • assignment 2 cs202 discussion solution spring 2020 • • zaasmi

SOLVED CS202 Assignment 2 Solution and Discussion
CS202 - Fundamentals of Front End Development • cs202 assignment 2 solution discussion fall 2019 • • zareen

MTH633 Assignment 2 Solution and Discussion
MTH633 - Group Theory • mth633 assignment 2 solution discussion fall 2019 • • zareen

ZOO501 Assignment 2 Solution and Discussion
ZOO501 - Developmental Biology • zoo501 assignment 1 solution discussion fall 2019 • • zareen

SOLVED MGT611 Assignment 1 Solution and Discussion
MGT611 - Business & Labor Law • mgt611 assignment 1 solution discussion fall 2019 • • zareen

CS202 Assignment 1 Solution and Discussion
CS202 - Fundamentals of Front End Development • cs202 assignment 1 solution discussion spring 2020 • • zaasmi

STA406 Assignment 4 Solution and Discussion
STA406 - Statistical Inference • sta406 solution discussion fall 2019 assignment 4 • • zareen

SOLVED PSY403 Assignment 1 Solution and Discussion
PSY403 - Social Psychology • psy403 assignment 1 solution discussion fall 2019 • • zareen