ZuoTi.Pro
Question

Using HTML and JavaScript. For this assignment you should submit a single zip file that contains...

Using HTML and JavaScript.

For this assignment you should submit a single zip file that contains the following two files:

index.html

script.js

index.html should be a skeleton HTML page. So it should have the following tags:

doctype

html

head

meta

title

body

script

If you were to open index.html without including the associated JavaScript it should be entirely blank.

You should then use JavaScript to create all of the content of this page and append it to the body of the page. That content should include:

A 4x4 table

The top row should be a header row with header cells

The 4 header cells, from left to right should say "Header 1", "Header 2" ... "Header 4

The non header cells should contain their position. The upper left cell should contain the text "1, 1", the cell to its right "2, 1", the cell below it "1, 2" and so on.

4 directional buttons (up, down, left right)

A button labeled "Mark Cell"

When the page is loaded the upper left, non-header cell of the table should be 'selected'. This is denoted by it having a thicker border than the other cells. If you push the directional buttons other cells should be selected instead. So if you press the right button, cell 1,1 should no longer be selected and 2,1 should be selected instead.

If you are already on the top row and hit 'up' nothing should happen (you should not be able to move into the header cells). Likewise if you are all the way right and hit right or all the way at the bottom and hit down.

Hitting the "Mark Cell" button should permanently change the background of the selected cell to yellow. This should persist even after other cells are selected or marked.

Suggestion: If you are having a lot of trouble getting the page populated the way you want using JavaScript, just manually make the HTML so that you can continue to work on the rest of the assignment involving selecting and marking cells.

Note: When generating content for the page you will not get credit for simply using the innerHTML property of the body element to parse a string of HTML content. The purpose is to use the process of creating and appending element nodes to the document.

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
       <title>Table Cell Movement</title>
</head>
   <body>

       <script>          
          
           // global variables
           var table, upKey, downKey, leftKey, rightKey, markButton;
          
           // to store current positions of highlighted cell
           var currentPositionR = 1, currentPositionC = 1;
          
           // create non-header table cell
           function getDataCell(text) {
               var td = document.createElement('td');
               var tdText = document.createTextNode(text);
               td.appendChild(tdText);
               td.style.width ='90px';
               td.style.height ='50px';
               return td;
           }
          
           // create a header table cell
           function getHeaderCell(text) {
               var th = document.createElement('th');
               var thText = document.createTextNode(text);
               th.appendChild(thText);
               return th;
           }
          
           // create a button
           function getButton(text) {
               var bt = document.createElement('button');
               var btText = document.createTextNode(text);
               bt.appendChild(btText);
               return bt;
           }
          
           // find the cell with row and column index
           function findCell(r, c) {
               // if on the edges
               if(r < 1 || r > 3 || c < 1 || c > 3)
                   return undefined;
                  
               // taking r direct, just to ignore header row
               var tRow = table.childNodes[r];
              
               var tCell = tRow.childNodes[c-1];
              
               return tCell;
           }
          
           // Create the html content on page
           function createHtmlLayout() {      
               // construct table
               table = document.createElement('table');
              
               var thRow = document.createElement('tr');
               for (var i = 1; i < 4; i++){
                   thRow.appendChild(getHeaderCell('Header ' + i));
               }
               table.appendChild(thRow);
              
               for (var i = 1; i < 4; i++){
                   var tr = document.createElement('tr');   
                   for(var j=1; j<4; j++) {
                       tr.appendChild(getDataCell(i + ',' + j));
                   }
                   table.appendChild(tr);
               }  
               table.style.border = "1px solid blue";
               document.body.appendChild(table);
              
               // To get new lines
               document.body.appendChild(document.createElement('br'));
               document.body.appendChild(document.createElement('br'));
              
               // Create the buttons
               upKey = getButton("Up");
               downKey = getButton("Down");
               leftKey = getButton("Left");
               rightKey = getButton("Right");
               markButton = getButton("Mark Cells");
              
               // put the buttons on page
               document.body.appendChild(upKey);
               document.body.appendChild(downKey);
               document.body.appendChild(leftKey);
               document.body.appendChild(rightKey);
              
               document.body.appendChild(document.createElement('br'));
               document.body.appendChild(document.createElement('br'));
              
               document.body.appendChild(markButton);
           }
          
           // create structure
           createHtmlLayout();
          
           // fucntion which removes border from current cell
           // and add to the new cell
           function removeAndAddBorder(current, next) {
               current.style.border = "none";              
               next.style.border = "2px solid black";
           }
          
           // define listeners
           upKey.addEventListener("click", function(){
               // get Up cell
               var tCell = findCell(currentPositionR - 1, currentPositionC);
               if(tCell != undefined) {
                   removeAndAddBorder(findCell(currentPositionR, currentPositionC), tCell);                  
                   currentPositionR--;
               }
           });
          
           downKey.addEventListener("click", function(){
               // get Down cell
               var tCell = findCell(currentPositionR + 1, currentPositionC);
               if(tCell != undefined) {
                   removeAndAddBorder(findCell(currentPositionR, currentPositionC), tCell);                  
                   currentPositionR++;
               }
           });
          
           leftKey.addEventListener("click", function(){
               // get Left cell
               var tCell = findCell(currentPositionR, currentPositionC - 1);
               if(tCell != undefined) {
                   removeAndAddBorder(findCell(currentPositionR, currentPositionC), tCell);                  
                   currentPositionC--;
               }
           });
          
           rightKey.addEventListener("click", function(){
               // get Right cell
               var tCell = findCell(currentPositionR, currentPositionC + 1);
               if(tCell != undefined) {
                   removeAndAddBorder(findCell(currentPositionR, currentPositionC), tCell);                  
                   currentPositionC++;
               }
           });
          
           markButton.addEventListener("click", function(){
               // get Right cell
               var tCell = findCell(currentPositionR, currentPositionC);
               if(tCell != undefined) {
                   tCell.style.backgroundColor = "yellow";
               }
           });          
          
           // Mark the 1, 1 cell at the start
           removeAndAddBorder(findCell(currentPositionR, currentPositionC), findCell(currentPositionR, currentPositionC));  
          
       </script>
   </body>
</html>


Output:
Header 1 eader2 Header 3 1.1 1.2 1.3 2.1 2.2 2.3 3,1 3.3 Up Down Left Right Mark Cells

0 0
Add a comment
Know the answer?
Add Answer to:
Using HTML and JavaScript. For this assignment you should submit a single zip file that contains...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Write a calculator program using JavaScript in HTML in the same HTML file. (There will only...

    Write a calculator program using JavaScript in HTML in the same HTML file. (There will only be 1 HTML file containing everything that you use for this program.) *************JavaScript Functions should be written in the HTML <head> .............. </head> tag, **************** (Please be mindful of the formatting of the text of your program. Meaning that do not copy paste everything in a single line. Add clear comments for a better understanding of your program) as follows Assignment: create a form...

  • Javascript to edit a HTML file. Where to begin? <!doctype html> <html>    <head>      <meta charset="utf-8">      <title>TODO:...

    Javascript to edit a HTML file. Where to begin? <!doctype html> <html>    <head>      <meta charset="utf-8">      <title>TODO: Change The Title</title>    </head>    <body>      <h1></h1>      <p>First paragraph.</p>      <p class="intro">Second <span>paragraph</span>.</p>      <button id="start">Start</button>      <main> </main>      <!--       Test 6: DOM Programming       You MAY consult the notes for week 7, but you MAY NOT discuss this test or       your code with any other students.  All work must be your own.       Instructions:              1. Put all solution code in a file named solution.js.  When you upload your          solution to...

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" />...

    This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" /> </head> <body> <script type ="text/javascript"> //declare a variable and store text in it var x = "JavaScript is fun"; //write the variable 5 times document.write(x + x + x + x + x); //store 5 as string in variable x x = "5"; //store 3 as string in variable y var y = "3"; //write the value x + y to the document document.write("<br>");...

  • 1. Site Header (10 points) As a top-level header (h1) put your name, left aligned In the upper-ri...

    1. Site Header (10 points) As a top-level header (h1) put your name, left aligned In the upper-right corner of the page, put a div with a large text size (about h1 size) a. b. i. This div should have a black background and white text ii. In this div, you should put the step number that you believe to have completed of the quiz, updating it before you submit All of the rest of the elements shall be left-aligned....

  • in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript...

    in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 5 Hands-on Project 5-2 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hands-on Project 5-2</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 5-2 </h1> </header> <article> <h2>Change of address form</h2> <form> <fieldset id="contactinfo"> <label for="addrinput"> Street Address </label> <input type="text" id="addrinput" name="Address" /> <label for="cityinput"> City </label> <input type="text" id="cityinput" name="City"...

  • html css javascript Using a custom element should be approached with caution because you are inventing...

    html css javascript Using a custom element should be approached with caution because you are inventing a tag. True False

  • Fake News This exercise is about modifying the content of a page in your web browser using Javascript. As we have said, Javascript has access to the current page via the Document Object Model or DOM....

    Fake News This exercise is about modifying the content of a page in your web browser using Javascript. As we have said, Javascript has access to the current page via the Document Object Model or DOM. In your browser, the variable document represents the current document and your code can use it to read and write to the current page. In this exercise we will use the developer tools Javascript console to write Javascript to access parts of the main...

  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...

  • As part of this assignment we are using the base Gallery HTML and writing JavaScript code...

    As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT