Practice Question: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TECH 3500 - Final Exam</title> <link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet"> <style> .myStyle { font-family: 'caveat'; font-size:40px; text-shadow: 4px 4px 2px rgba(150, 150, 150, 1); text-align: center; color:purple; } h1 { color: orange; } blockquote { color: white; } .holder{ overflow-x:hidden; } .exam-name{ text-align: center; } .btn { color:dodgerblue; } #class-name{ font-size:40px; color: orange; text-align: center; } .container{ margin: 0 auto; max-width: 100%; padding: 0 13px; } #header{ background: url(http://eve.kean.edu/~ykumar/TECH3500_FA2021/backgroundFA2021.png) center/cover no-repeat fixed; min-height: 100vh; position: relative; } #header .container{ max-width: 1110px; padding: 0 16px; } .flex{ display: flex; align-items: center; justify-content: center; } .header-top{ justify-content: space-between; height: 126px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .header-top button{ width: 25px; height: 25px; } .head-top-left-icon button{ margin-right: 15px; } .head-top-right-icon button{ margin-left: 15px; } .head-top-left-icon button:last-child{ margin-right: -15px; } </style> </head> <body> <div class = "holder"> <header id = "header"> <div class = "container"> <div class = "header-top flex"> <div class = "exam-name flex"> <p class='myStyle flex'>TECH*3500 Final</p> </div> </div> <div class = "header-main">  <div class = "header-main-content"> <div class = "header-main-list"> <div class = "header-main-item" data-id = "1"> <h1>Computer Hardware</h1> <p class="myStyle"><blockquote cite="https://en.wikipedia.org/wiki/Computer_hardware">Computer hardware includes the physical parts of a computer, such as the case, central processing unit (CPU), monitor, mouse, keyboard, computer data storage, graphics card, sound card, speakers and motherboard. </blockquote> <a href = "#" class = "btn" id='MyButton1'>discover more</a> </div> <div class = "header-main-item" data-id = "2"> <h1>Software</h1> <p class = "myStyle"><blockquote cite="https://en.wikipedia.org/wiki/Software">Software is a collection of instructions that tell a computer how to work. This is in contrast to hardware, from which the system is built and actually performs the work.</p> </blockquote> <a href = "#" class = "btn" id='MyButton2'>discover more</a> </div> <div class = "header-main-item" data-id = "3"> <h1>Biometric Devices</h1> <p class = "myStyle"></p><blockquote cite="https://en.wikipedia.org/wiki/Biometric_device">A biometric device is a security identification and authentication device. Such devices use automated methods of verifying or recognising the identity of a living person based on a physiological or behavioral characteristic. These characteristics include fingerprints, facial images, iris and voice recognition.</p> </blockquote> <a href = "#" class = "btn" id='MyButton3'>discover more</a> </div> </div> </div>  </div> </div> </header> <script> //your code here </script> </body> </html>Perform the following steps (you can only change the HTML/CSS properties and content through JS, do not add / change any HTML or CSS properties manually). It is allows to add ids, classes, buttons and function on click to existing HTML elements. After each step test your code to verify this works as expected.1) Create a JavaScript function, that will change color of the words 'Biometric Devices' to Red (color) on page load. 2) Add a function, that will add a dashed border to the element having text TECH*3500 in it on button click. 3) Append a new heading 1 having text 'Data Storage' to the bottom of the Web Page programmatically. 4) Select all blockquotes using Selectors and add a word 'Department' to them on button click. 5) find the first element having class 'header-main-item' and change it's background to yellow on button click. 6) Programmatically add a text 'This was completed by YourFirstName YourLastName on CurrentDate at CurrentTime to the bottom of the page. on page load.

Answer: Updated Source Code: <!DOCTYPE html> <html lang="en"> <head>…

Practice Question: TECH 3500 - Final Exam TECH*3500 Final Computer Hardware Computer hardware includes the physical parts of a computer, such as the case, central processing unit (CPU), monitor, mouse, keyboard, computer data storage, graphics card, sound card, speakers and motherboard. discover more Software Software is a collection of instructions that tell a computer how to work. This is in contrast to hardware, from which the system is built and actually performs the work. discover more Biometric Devices A biometric device is a security identification and authentication device. Such devices use automated methods of verifying or recognising the identity of a living person based on a physiological or behavioral characteristic. These characteristics include fingerprints, facial images, iris and voice recognition. discover more Perform the following steps (you can only change the HTML/CSS properties and content through JS, do not add / change any HTML or CSS properties manually). It is allows to add ids, classes, buttons and function on click to existing HTML elements. After each step test your code to verify this works as expected. 1) Create a JavaScript function, that will change color of the words 'Biometric Devices' to Red (color) on page load. 2) Add a function, that will add a dashed border to the element having text TECH*3500 in it on button click. 3) Append a new heading 1 having text 'Data Storage' to the bottom of the Web Page programmatically. 4) Select all blockquotes using Selectors and add a word 'Department' to them on button click. 5) find the first element having class 'header-main-item' and change it's background to yellow on button click. 6) Programmatically add a text 'This was completed by YourFirstName YourLastName on CurrentDate at CurrentTime to the bottom of the page. on page load.

Practice Question: TECH 3500 - Final Exam TECH3500 Final Computer Hardware Computer hardware includes the physical parts of a computer, such as the case, central processing unit (CPU), monitor, mouse, keyboard, computer data storage, graphics card, sound card, speakers and motherboard. discover more Software Software is a collection of instructions that tell a computer how to work. This is in contrast to hardware, from which the system is built and actually performs the work. discover more Biometric Devices A biometric device is a security identification and authentication device. Such devices use automated methods of verifying or recognising the identity of a living person based on a physiological or behavioral characteristic. These characteristics include fingerprints, facial images, iris and voice recognition. discover more Perform the following steps (you can only change the HTML/CSS properties and content through JS, do not add / change any HTML or CSS properties manually). It is allows to add ids, classes, buttons and function on click to existing HTML elements. After each step test your code to verify this works as expected. 1) Create a JavaScript function, that will change color of the words 'Biometric Devices' to Red (color) on page load. 2) Add a function, that will add a dashed border to the element having text TECH3500 in it on button click. 3) Append a new heading 1 having text 'Data Storage' to the bottom of the Web Page programmatically. 4) Select all blockquotes using Selectors and add a word 'Department' to them on button click. 5) find the first element having class 'header-main-item' and change it's background to yellow on button click. 6) Programmatically add a text 'This was completed by YourFirstName YourLastName on CurrentDate at CurrentTime to the bottom of the page. on page load.

Computer Networking: A Top-Down Approach (7th Edition)

7th Edition

ISBN:9780133594140

Author:James Kurose, Keith Ross

Publisher:James Kurose, Keith Ross

Chapter1: Computer Networks And The Internet

Section: Chapter Questions

Problem R1RQ: What is the difference between a host and an end system? List several different types of end...

See similar textbooks

Related questions

Question

Practice Question:

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>TECH 3500 - Final Exam</title>
	<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
	<style>
	.myStyle {
	font-family: 'caveat';
	font-size:40px;
	text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
	text-align: center;
	color:purple;
	}
	h1 {
	color: orange;
	}
	blockquote {
	color: white;
	}
	.holder{
	overflow-x:hidden;
	}
	.exam-name{
	text-align: center;
	}
	.btn {
	color:dodgerblue;
	}
	#class-name{
	font-size:40px;
	color: orange;
	text-align: center;
	}
	.container{
	margin: 0 auto;
	max-width: 100%;
	padding: 0 13px;
	}
	#header{
	background: url(http://eve.kean.edu/~ykumar/TECH3500_FA2021/backgroundFA2021.png) center/cover no-repeat fixed;
	min-height: 100vh;
	position: relative;
	}
	#header .container{
	max-width: 1110px;
	padding: 0 16px;
	}
	.flex{
	display: flex;
	align-items: center;
	justify-content: center;
	}
	.header-top{
	justify-content: space-between;
	height: 126px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}
	.header-top button{
	width: 25px;
	height: 25px;
	}
	.head-top-left-icon button{
	margin-right: 15px;
	}
	.head-top-right-icon button{
	margin-left: 15px;
	}
	.head-top-left-icon button:last-child{
	margin-right: -15px;
	}
	</style>
	</head>
	<body>
	<div class = "holder">
	<header id = "header">
	<div class = "container">
	<div class = "header-top flex">
	<div class = "exam-name flex">
	<p class='myStyle flex'>TECH*3500 Final</p>
	</div>
	</div>

	<div class = "header-main">
	<!-- header main content -->
	<div class = "header-main-content">
	<div class = "header-main-list">
	<div class = "header-main-item" data-id = "1">
	<h1>Computer Hardware</h1>
	<p class="myStyle"><blockquote cite="https://en.wikipedia.org/wiki/Computer_hardware">Computer hardware includes the physical parts of a computer, such as the case, central processing unit (CPU), monitor, mouse, keyboard, computer data storage, graphics card, sound card, speakers and motherboard.
	</blockquote>
	<a href = "#" class = "btn" id='MyButton1'>discover more</a>
	</div>
	<div class = "header-main-item" data-id = "2">
	<h1>Software</h1>
	<p class = "myStyle"><blockquote cite="https://en.wikipedia.org/wiki/Software">Software is a collection of instructions that tell a computer how to work. This is in contrast to hardware, from which the system is built and actually performs the work.</p>
	</blockquote>
	<a href = "#" class = "btn" id='MyButton2'>discover more</a>
	</div>
	<div class = "header-main-item" data-id = "3">
	<h1>Biometric Devices</h1>
	<p class = "myStyle"></p><blockquote cite="https://en.wikipedia.org/wiki/Biometric_device">A biometric device is a security identification and authentication device. Such devices use automated methods of verifying or recognising the identity of a living person based on a physiological or behavioral characteristic. These characteristics include fingerprints, facial images, iris and voice recognition.</p>
	</blockquote>
	<a href = "#" class = "btn" id='MyButton3'>discover more</a>
	</div>
	</div>
	</div>
	<!-- end of header main content -->
	</div>
	</div>
	</header>
	<script>
	//your code here
	</script>
	</body>
	</html>

Perform the following steps (you can only change the HTML/CSS properties and content through JS, do not add / change any HTML or CSS properties manually). It is allows to add ids, classes, buttons and function on click to existing HTML elements. After each step test your code to verify this works as expected.

1) Create a JavaScript function, that will change color of the words 'Biometric Devices' to Red (color) on page load.

2) Add a function, that will add a dashed border to the element having text TECH*3500 in it on button click.

3) Append a new heading 1 having text 'Data Storage' to the bottom of the Web Page programmatically.

4) Select all blockquotes using Selectors and add a word 'Department' to them on button click.

5) find the first element having class 'header-main-item' and change it's background to yellow on button click.

6) Programmatically add a text 'This was completed by YourFirstName YourLastName on CurrentDate at CurrentTime to the bottom of the page. on page load.

Expert Solution