6-3 Homework: Using Array Methods and Event Handlers to Populate Forms In this a
ID: 3757890 • Letter: 6
Question
6-3 Homework: Using Array Methods and Event Handlers to Populate Forms In this assignment you need to create an HTML page that meets the following requirements. The theme and content of the page can be of your choice. (Refer to New Perspectives on HTML, XHTML, and Dynamic HTML 5th edition Tutorial 13) 1) Create an HTML form. 2) Create and Initialize three arrays. 3) Use for-loops to populate those arrays. 4) Add an element to the end of one array. 5) Remove an element from the end of another array. 6) Add a new element to the beginning of one array. 7) Add at least one additional array method of your choice. 8) Convert an array to a string. 9) Use the converted string, assign to a string variable, and use it to populate a form field. 10) Create different functions to handle the operations of steps 4, 5, 6, and 7. (You can create additional array methods.) 11) Create four or more buttons on the form with different event handlers to start the above functions upon clicking them. 12) Create an additional button with an event handler to complete the operation in step 10
Explanation / Answer
Answer :
submit.js
var userName = [" bballking", " baller", " iball", " crossover",
" 365baller", " posterize", " hooper", " 3pointking",
" dudescore", " balldefender", " fullcourthops"];
function init()
{
var myButton = document.getElementById("btnSubmit");
myButton.onclick = registerName;
}
>
function registerName()
{
var newName = document.getElementById("userName").value.toLowerCase();
var message = "";
var result = document.getElementById("result");
var success = false;
if (newName == "")
{
alert("Please enter your username.");
return false;
}
for (var i = 0; i < userName.length; i++)
{
if (userName[i] == newName)
{
message = "Sorry, the Email " + userName[i] + " already exists. Try again";
result.innerHTML = message;
success = false;
return false;
}
else
{
message = "Great!! You've successfully joined our group as " + newName + ", Our community of members currently include: ";
result.innerHTML = message;
success = true;
}
}
if (success)
{
userName.push(newName);
}
result.innerHTML += "<br/>" + userName.sort();
}
formdocument.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>NBA Finals</title>
<script src="modernizr-1.5.js"></script>
<script src="https://www.java.com/js/deployJava.js"></script>
<script type="text/javascript" src="submit.js"></script>
<link href="lateststyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="NBAFinalsHeader.jpg" alt="NBAheader" />
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Teams</a></li>
<li><a href="#">Players</a></li>
<li><a href="#">Standings</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Online Store</a></li>
<li><a href="#">More</a></li>
</ul>
</nav>
<br> </br>
<br> </br>
<audio autoplay>
<source src="ESPNNBATheme.mp3" type="audio/mpeg">
<source src="ESPNNBATheme.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<table>
<tr>
<td>
<div class="content">
<h2>The NBA Finals</h2>
<p>
The <b>NBA Finals</b> is the championship series of the National Basketball Association.
It is played between the Western and Eastern champions of the Conference Finals. The first team
to win four games in the seven-game championship round is declared the champion and is awarded the
Larry O'Brien Championship Trophy. (Winners from 1946 to 1983 received the Walter A. Brown Trophy
redesigned in 1977 to the current form.) The NBA Finals has been played at the end of every NBA and
Basketball Association of America season in history, the first being held in 1947.
</p>
<h1>Here is a clip from the first NBA Finals in 1947:</h1>
<object data="rstfinalsinnbahistory.swf"
type="application/x-shockwave-flash" height="398">
<param name="movie" value="rstfinalsinnbahistory.swf" /> parameters
</object>
<h3>
Video courtesy of
<a href="https://www.youtube.com/watch?v=JkxCrtdPNSc">YouTube</a>.
</h3>
<p>
Between 1985 and 2013, the winner of the NBA Finals was determined through a 2–3–2 format: the first
and last two games of the series being played at the arena of the team who earned home court advantage
by having the better record during the regular season (the team with home-court went 21-8 between '85 & '13).
Most NBA Finals series were played under the 2–2–1–1–1 format (Games 1 and 2 at home for the higher seeded team,
Games 3 and 4 at home for the lower seeded team, Game 5 at the higher, Game 6 at the lower, and Game 7 at the higher)
prior to 1985; the Finals returned to this format in 2014. The series was named the BAA Finals from 1947 to 1949 and
then changed to the NBA World Championship Series from 1950 to 1982. The following two years, the league used Showdown
'83 and Showdown '84. It returned to NBA World Championship Series in 1985, before settling on NBA Finals in 1986.
</p>
<h1>Great moments in NBA Finals history:</h1>
<video width="600" controls>
<source src="GreatestMomentsinNBAFinalsHistory.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<h3>
Video courtesy of
<a href="https://www.youtube.com/watch?v=CXfeGu9jYDs">YouTube</a>.
</h3>
<h1>The Bill Russell NBA Finals "Most Valuable Player Award" recipient list:</h1>
<center>
<marquee bgcolor="#000000" scrollamount="2" direction="up" loop="true" width="25%">
<center>
<font color="#ffffff">
Shaquille O'Neal...... 2000<br />
Shaquille O'Neal...... 2001<br />
Shaquille O'Neal...... 2002<br />
Tim Duncan............ 2003<br />
Chauncey Billups...... 2004<br />
Tim Duncan............ 2005<br />
Dwayne Wade........... 2006<br />
Tony Parker........... 2007<br />
Paul Pierce........... 2008<br />
Kobe Bryant........... 2009<br />
Kobe Bryant........... 2010<br />
Dirk Nowitzki......... 2011<br />
LeBron James.......... 2012<br />
LeBron James.......... 2013<br />
Kawhi Leonard......... 2014<br />
</font>
</center>
</marquee>
</center>
<h1>
For an NBA Finals "flashback" below is a sample of music from the 1998 NBA Finals as aired by NBC:
</h1>
<audio controls="controls">
<source src="1998NBAFinals.wav" />
<source src="1998NBAFinals.mp3" />
<embed src="1998NBAFinals.wav" type="audio/wav"
height="20" width="250" />
</audio>
<h1>Here is the 2015 NBA Finals Preview:</h1>
<video width="600" controls>
<source src="2015NBAFinalsPreview.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<h3>
Video courtesy of
<a href="https://www.youtube.com/watch?v=V_bHOsxxRUs">YouTube</a>.
</h3>
</div>
</td>
</tr>
</table>
<center>
<script type="text/javascript">
var EasternConf = ["Brooklyn Nets", "New York Knicks", "Philadelphia 76ers",
"Toronto Raptors", "Chicago Bulls", "Cleveland Cavaliers", "Detroit Pistons",
"Indiana Pacers", "Milwaukee Bucks", "Atlanta Hawks", "Charlotte Hornets",
"Miami Heat", "Orlando Magic", "Washington Wizards"];
EasternConf.unshift("Boston Celtics");
document.write('<table>');
document.write('<tr><th><u>Eastern Conference Teams</u></th></tr>');
for(var i = 0; i < EasternConf.length; i++)
{
document.write('<tr><td>' + EasternConf[i] + '</td></tr>');
}
document.write('</table>');
</script>
<script type="text/javascript">
var WesternConf = [" ", "Dallas Mavericks", "Houston Rockets", "Memphis Grizzlies", "New Orleans Pelicans",
"San Antonio Spurs", "Denver Nuggets", "Minnesota Timberwolves", "Oklahoma City Thunder",
"Portland Trail Blazers", "Utah Jazz", "Golden State Warriors", "Los Angeles Clippers",
"Los Angeles Lakers", "Phoenix Suns", "Sacramento Kings", "Seattle Super Sonics"];
WesternConf.pop();
document.write('<table>');
document.write('<tr><th><u>Western Conference Teams</u></th></tr>');
for(var i = 0; i < WesternConf.length; i++)
{
document.write('<tr><td>' + WesternConf[i] + '</td></tr>');
}
document.write('</table>');
</script>
</center>
<center>
<h4>THE NBA <br>FINALS!!!</br>
Where Amazing Happens. . .</h4>
</center>
<center>
<script type="text/javascript">
var NBAChampions = [" ", "Boston Celtics (17)", "Los Angeles Lakers (16)", "Chicago Bulls (6)",
"San Antonio Spurs (5)", "Golden State Warriors (4)", "Detroit Pistons (3)",
"Miami Heat (3)", "Philadelphia 76ers (3)", "Houston Rockets (2)",
"New York Knicks (2)", "Atlanta Hawks (1)", "Baltimore Bullets (1)",
"Dallas Mavericks (1)", "Milwaukee Bucks (1)", "Oklahoma City Thunder (1)",
"Portland Trail Blazers (1)", "Sacramento Kings (1)"];
NBAChampions.push("Washington Wizards (1)");
NBAChampions.sort();
document.write('<table>');
document.write('<tr><th><u>NBA Champions & Number of Wins</u></th></tr>');
for(var i = 0; i < NBAChampions.length; i++)
{
document.write('<tr><td>' + NBAChampions[i] + '</td></tr>');
}
document.write('</table>');
</script>
</center>
<br></br>
<center>
<h><u>*Official Sponsors of the NBA*</u></h>
<p id="sponsors"></p>
<script type="text/javascript">
var NBASponsors = ["2K Sports", " American Express", " Adidas",
" Anheuser-Busch InBev", " AutoTrader.com", " BBVA",
" Cisco", " The Coca-Cola Company", " Diageo", " Foot Locker",
" Gatorade", " Harman", " Kaiser Permanente", " Kia Motors",
" Kumho Tire", " Nike", " Samsung", " SAP", " Spalding",
" Sprint", " State Farm", " Taco Bell"];
document.getElementById("sponsors").innerHTML = NBASponsors.valueOf();
</script>
</center>
<center>
<div
>
Mouse Over Me</div>
<script>
function mOver(obj)
{
obj.innerHTML = "The NBA Rules!!"
}
function mOut(obj)
{
obj.innerHTML = "Mouse Over Me"
}
</script>
</center>
<br>
<fieldset id="bestPlayer">
<p>Click the button to find out who is regarded by many as the best NBA player ever.</p>
<button>Click me</button>
<p id="demo2"></p>
<script>
function myFunction()
{
document.getElementById("demo2").innerHTML = "Michael Jordan";
}
</script>
</fieldset>
<br>
<form name="MailingList">
<fieldset id="mailingList">
<em><u>Would you like to join our online NBA community? Enter a username below...</u></em>
<br></br>
<label class="blockLabel">
Username:
<input type="text" id="userName" name="userName" />
<input type="button" id="btnSubmit" value="Register" />
<p id="result"></p>
</label>
</fieldset>
</form>
<br>
<fieldset id="currentTime">
<button>What time is it?</button>
<script>
function displayDate()
{
document.getElementById("demo3").innerHTML = Date();
}
</script>
<p id="demo3"></p>
</fieldset>
<br>
<fieldset id="currentTime">
<button id="myBtn">CLICK ME!!</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
alert("Thank you for visiting our site!!");
});
</script>
</fieldset>
</body>
</html>
lateststyles.css
nav {
position: relative;
top: 0px;
left: 100px;
}
nav ul li {
background-color: #136BB8;
border: 4px outset #EE174B;
-moz-border-radius: 20px;
-webkit-border-radius: 10px;
display: block;
float: left;
height: 30px;
line-height: 30px;
font-size: 14px;
font-weight: bold;
text-align: center;
margin: 0px 6px;
min-width: 50px;
padding: 0px 10px;
}
nav ul li a {
color: #FFF;
font-family: 'Lucida Grande', Verdana, sans-serif;
text-decoration: underline;
}
/*Heading/Body styles*/
h1 {
color: #136BB8;
text-align: center;
font-size: 18px;
}
h2 {
color: #F2B411;
text-align: left;
font-variant: small-caps;
}
h3 {
color: #EE174B;
text-align: center;
font-size: 14px;
}
p {
font-size: 15px;
text-align: justify;
}
body {
background-color: #000;
width: 950px;
margin: 0px auto;
font-family: 'Lucida Grande', Verdana, sans-serif;
color: #FFF;
}
/*Audio/Video styles*/
video, movie, audio, object {
border-color: #000;
display: block;
margin: 10px auto;
text-align: center;
width: 75%;
}
/*Rotate style*/
h4 {
font-size: 30px;
color: #F0B210;
width: 450px;
height: 110px;
background-color: #1D69BE;
-ms-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.