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.

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...
icon
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
steps

Step by step

Solved in 2 steps with 2 images

Blurred answer
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY