Using HTML/JavaScript Arrays and Loops Use a loop to create an array of 10 eleme

ID: 3917528 • Letter: U

Question

Using HTML/JavaScript

Arrays and Loops

Use a loop to create an array of 10 elements called numbers. The values of the elements of the arrays should be the numbers 1 to 10.

Use push to add the number 20 to the end of the array.

Use unshift to add the number 0 to the beginning of the numbers array.

Use splice to remove the numbers 5 and 8 from the array.

Use a loop to console log each of the individual values of the numbers array.

Cloning

Create an ordered list of 10 items.

Create button that when clicked will duplicate the same order list of items and append and display the duplicate list next the first order list

add an additional button named remove and when clicking remove button, it will remove the cloned items.

Template

Using the following object:

Create a template that displays the following fields

Name

Age

company

phone

Traversing

Use the attached html page below (traversing.html)

Add the code to the page that upon clicking the button:

will change the the color of the text in section 1 line 2

change the text in section 2 line 3

read the value to the console in section 3 line 1

Only use the one button that is provided and you should not change any of the class names.

https://www.filepicker.io/api/file/DyIwXmMASzK7vfwHRKq7

Explanation / Answer

Following is the answer:

Array and Loops:

var arr = [];
for (var i = 0; i < 10; i++) {
arr.push(i + 1);
}
arr.push(20);
arr.unshift(0);
arr.splice(arr.indexOf(5), 1);
arr.splice(arr.indexOf(8), 1);

for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}

Cloning:

index.html
<html>
<body>
<div id="SELECT">
1 2 3 4 5 6 7 8 9 10
</div>

<button id="remove">
remove
</button>
</body>
</html>

index.js
var j = 0;

function add() {
j++;
var select = document.getElementById("SELECT");
var clone = select.cloneNode(true);
document.getElementById("DIV").appendChild(clone);
}

function remove() {
var select = document.getElementById('DIV');
select.removeChild(select.lastChild);
}

document.getElementById('add').addEventListener('click', add, false);
document.getElementById('remove').addEventListener('click', remove, false);

Template:
var people =
[
{
"age": 24,
"name": "Jerry Hale",
"company": "PHOTOBIN",
"email": "jerryhale@photobin.com",
"phone": "+1 (980) 445-3351"
},
{
"age": 31,
"name": "Monique Dixon",
"company": "COMSTRUCT",
"email": "moniquedixon@comstruct.com",
"phone": "+1 (872) 497-3167"
},
{
"age": 37,
"name": "Joan Mccullough",
"company": "XYQAG",
"email": "joanmccullough@xyqag.com",
"phone": "+1 (933) 421-2529"
},
{
"age": 33,
"name": "Jacobs Mayer",
"company": "ISONUS",
"email": "jacobsmayer@isonus.com",
"phone": "+1 (818) 413-3992"
},
{
"age": 39,
"name": "Rosa Chandler",
"company": "SNACKTION",
"email": "rosachandler@snacktion.com",
"phone": "+1 (935) 474-2761"
},
{
"age": 26,
"name": "Crawford Mason",
"company": "NURPLEX",
"email": "crawfordmason@nurplex.com",
"phone": "+1 (890) 444-3896"
},
{
"age": 38,
"name": "Haney Carr",
"company": "KYAGORO",
"email": "haneycarr@kyagoro.com",
"phone": "+1 (920) 483-2898"
}
]

var text = "";
for (var i in people) {
console.log("NAME: ",people[i].name);
console.log("Age: ",people[i].age);
console.log("Company: ",people[i].company);
console.log("Email: ",people[i].email);
console.log("Phone: ",people[i].phone);
}

Traversing:

<!DOCTYPE html>
<html>

<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".container div:first-of-type p:nth-of-type(2)").css("background-color", "yellow");
$(".container div:nth-of-type(2) p:nth-of-type(3)").css("background-color", "yellow");
var text = $(".container div:nth-of-type(3) p:first-of-type").text();
console.log(text);
});
});
</script>
</head>
<hr>
<div class="container">
<h3>Section 1</h3>
<div class="y">
<p class="x">
this is text 1
</p>
<p class="x">
change the color of this text
</p>
<p class="x">
this is text 3
</p>
</div>
<hr>
<h3>Section 2</h2>
<div class="y">
<p class="x">
this is text 1

</p>
<p class="x">
this is text 2
</p>
<p class="x">
change this text
</p>
</div>
<hr>
<h3>Section 3</h3>
<div class="y">
<p class="x">
read me to the console
</p>
<p class="x">
this is text 2
</p>
<p class="x">
this is text 3
</p>
</div>

<button id="traverseBtn">click me</button>

</div>

</html>

Navigate

Using HTML/JavaScript Arrays Array Literals Creating Arrays: Create and empty ar

Using HTML/JavaScript Creating Arrays: Create and empty array named sabio.page.e

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Using HTML/JavaScript Arrays and Loops Use a loop to create an array of 10 eleme

Question

Explanation / Answer

Related Questions

Navigate