Assignment Recall the W3 Schools website JavaScript example on the following topics from last assignment for this problem (http://www.w3schools.com/js/default.asp):
· JS Home
· JS Introduction
· JS Where To
· JS Output
· JS Syntax
· JS Statements
· JS Comments
· JS Variables
· JS Operators
· JS Arithmetic
· JS Assignment
Additionally, review the W3 Schools website JavaScript examples on the following topics:
· JS Data Types
· JS Functions
· JS Where To
· JS Objects
· JS Scope
· JS Strings
· JS String Methods
· JS Numbers
· JS Number Methods
· JS Math
Once you have a working understanding of the concepts reviewed in these examples, take your multiplication table from Assignment #03 with the well-separated style-sheets. Then, write a JavaScript that draws the table instead of including the mark-up within the HTML document itself (the HTML file simple contains a call to the JS that is responsible for writing the mark-up that produces the multiplication table. The HTML, CSS, and JS should all be in different files and together in a zipped folder for submission. When the HTML file is opened, connectivity to the script and associated styles should occur naturally as long as the files are together in the folder.
The table does not have to change shape, although considering the way to make this solution scale for a custom-dimension table request would be wise since the next assignment will call for this. For this assignment though, the emphasis should be on the connectivity between the different files that go into drawing the webpage and blindly producing the mark-up to draw the table with JS. Some of the topics you have been asked to review are not necessarily needed to complete this assignment, but since they will be topics of great emphasis in upcoming assignments, exposure to these ideas now and an attempt to incorporate some of them into your assignment submission is an excellent idea and strongly encouraged.
Table from assignment 3:
<!DOCTYPE html>
<html lang="en">
<head>
<!--title for web page -->
<title>HTML Table Markup</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--embedded style sheet -->
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<div class="monthcalender">
<!--multiplication table -->
<h1>Multiplication table</h1>
<table border="1">
<tr>
<th>NO</th>
<th>Multiply By</th>
<th>Result</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>9</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>16</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>125</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>36</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>49</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>64</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>81</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>100</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>121</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td>144</td>
</tr>
</table>
</div>
<div class="calender">
<!-- Month calender -->
<h1>Month Calender</h1>
<table>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THR</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
HTML FILE: It does not contain the markup for the multiplication table.The multiplication table will be created dynamically through javascript.The javascript file is attached with this and is named "t.js".If you change the name then aslo change the name in the script tag in the head.Put both the files in same folder and it will work.
<!DOCTYPE html>
<html lang="en">
<head>
<!--title for web page -->
<title>HTML Table Markup</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--embedded style sheet -->
<script type="text/javascript"
src="t.js"></script>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<div class="monthcalender">
<!--multiplication table -->
<h1>Multiplication table</h1>
<script>table();</script>
</div>
<div class="calender">
<!-- Month calender -->
<h1>Month Calender</h1>
<table>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THR</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
JAVASCRIPT FILE:It contains the logic for creating table dynamically.It uses document.write() function which is used to write.To create html tags we used " ".So the table tags are created automatically using loop.You can modify the size by changing the variable in loop. Save it with "t.js" in the same folder.
function table(){
document.write("<table border='1px'>");
for(var i= 1; i < 13; i++) {
document.write("<tr>");
for(var j= 1;j<4; j++) {
if(j===1||j===2)
{
document.write("<td>"+i+"</td>");
}
else
{
document.write("<td>"+i*i+"</td>");
}
}
document.write("</tr>");
}
document.write("</table>");
}
Assignment Recall the W3 Schools website JavaScript example on the following topics from last assignment for...
Overview The purpose of this assignment is to explore the manner in which CSS styles can be transported into an external file. Assignment You may find the W3 Schools examples on this process useful (http://www.w3schools.com/css/css_howto.asp). Once you have a working understanding of how to move your stylesheet outside of the HTML file and into a CSS file, remove and style information from your Weekly Assignment #02's HTML file and move it to an externally attached CSS file. When you are...
Kindly assist in fixing the error i got when I pasted my codes to validate it. The error is in bold. Error: Table column 2 established by element th has no cells beginning in it. From line 53, column 25; to line 55, column 40 <tr> <th colspan="2"> <!DOCTYPE HTML> <html lang="en"><!-- language is English--> <head> <meta charset="utf-8"/> <title>DA Website</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div id="wrapper"> <!-- start html...
I'm having trouble to link the .js file to the html so changes for the html to be made in the .js file <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>:JavaScript, HTML and jQuery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- this is so I don't have to give you a separate CSS file --> <style> .hidden {display: none;} .menu { width: 100px;} </style> </head> <body> <div class="container"> <h1>Assignment 2: JavaScript, HTML and jQuery</h1> <p>To complete this...
How do I make these sheets into three different tabs for one website? This is all using HTML. - Chade's Bicycle Company <!DOCTYPE html> <html> <head> <img src="Chade'sLogo.png"> </head> <body bgcolor= "white"> <center> Welcome to Chade's Bicycle Company!</center> <center> We aim towards making our customers happy. </center> <br> <center> Chade's Bicycle Company </center> <center>2900 Bicycle Ave.</center> <center>Seattle, Washington</center> <center>98101</center> <br> <center><img src="HappyCustomer.png" alt="Satisfied customers"></center> <br> <p align="right">Our mission statement:</p> <p align="right">Bicycles have always been a </p> <p align="right">positive part of...
Hello Ive been tryting to add the CDN of jquery to my html code and I keep getting an error Need help with this : Navigate to www.code.jquery.com in your Chrome browser. On this page, you'll find different stable versions of jQuery. Select uncompressed for jQuery Core 3.3.1. Copy the <script> tag that is given to you. In store_hours.html, paste that tag directly above your body's closing tag. This is the jQuery CDN. After you paste this code into...
I have to make a pixel art maker using javascript. HTML and CSS were already provided. I only had to do the JavaScript part. Every time I run the HTML folder nothing happens when I choose the width, height, and color. This is my code: (ONLY JS IS SUPPOSED TO BE FIXED). JS: // Select color input // Select size input const colorPicker = document.getElementsById('colorPicker'); const rowNum = document.getElementsById('inputHeight'); const cellNum = document.getElementById('inputWidth'); const pixelCanvas = document.getElementById('pixelCanvas'); const form =...
I need help incorporating javascript into my page. The Lessons page has a message box (not an alert box) that becomes visible/invisible when the mouse is moved over/off the small, red hyperlink on the last line that says, "note." The note is 10pt, red, and italic. The message box contains the text, "Students who pre-pay for the entire term will have the registration fee waved." It is 150px wide, with an "azure" background and a black border. It has 5px...
JAVASCRIPT/JQUERY Hello I would like some help understanding jQuery. Here are the directions: Write a program that creates the following table: Course Course Name Day Time IMS115 Windows 10 Monday 6 PM IMS215 Office 2016 Wednesday 5 PM MIS200 Java Thursday 9 AM MTH105 Business Math Saturday 10 AM Using jQuery, select every other odd row and change the font color to blue and make it bold. And here is my code: Chapter4.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="Chapter4.css">...
Overview The purpose of this assignment is to diagnostically determine your current proficiency level with typical HTML table markup. Assignment Review the W3 Schools Website (http://www.w3schools.com/html/html_tables.asp) and go over the tutorials on the following HTML tags: * <table> * <tr> * <td> Once you have seen how these tags work in conjunction with one another, explore CSS and the various ways attributes can be manipulated to change the width and style of table borders in addition to the physical dimensions...
Below is the code created for a previous assignment. I now need to create functions to validate the name, age, and item selection in an external JavaScript file. Specifically, check for the following: The user has entered a name Age is a number between 18 and 110 An item is selected Ensure that a handler returns true if the input is acceptable and false otherwise. Add an onSubmit attribute to the form tag so that a validation failure prevents the...