Visualize Array Methods

Developer
Dirk Drijkoningen
Size
2,809 Kb
Views
4,048
  1. Visualize Array Methods Previews
  2. Visualize Array Methods HTML Codes
  3. Visualize Array Methods CSS Codes
  4. Visualize Array Methods JS Codes

How do I make an visualize array methods?

A simple way to visualize some of the most usable array methods. Used to explain a part of a vanilla javascript course.. What is a visualize array methods? How do you make a visualize array methods? This script and codes were developed by Dirk Drijkoningen on 27 January 2023, Friday.

Visualize Array Methods Previews
IQ Test

Visualize Array Methods - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Visualize Array Methods</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2 class="center">Visualizing array methods</h2>
<p class="nl center" style="margin-left:0;">Toon array methoden</p>
<div class="container"> <div class="box">0</div> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div>
</div>
<br style="clear:both;" /><br/>
<button id="btnIndexOf">indexOf(3)</button> Test if value is present and return the position in the array.<br/><span class="nl">Test als de waarde in de array bestaat en geeft de positie in de array.</span><br/><br/>
<button id="btnShift">shift()</button> Removes the first value of the array.<br/><span class="nl">Verwijderd de eerste waarde in de array.</span><br/><br/>
<button id="btnUnShift">unshift(value)</button> Adds a value on the first position in the array.<br/><span class="nl">Voegt een waarde toe op de eerste positie in de array.</span><br/><br/>
<button id="btnPop">pop()</button> Remove the last value in the array.<br/><span class="nl">Verwijder de laatste waarde in de array.</span><br/><br/>
<button id="btnPush">push(value)</button> Adds a value on the last position in the array.<br/><span class="nl">Voegt een waarde toe op de laatste positie in de array.</span><br/><br/>
<button id="btnLeft">push(shift())</button> Shift all values to the left in the array.<br/><span class="nl">Verschuif al de waarden in de array naar links.</span><br/><br/>
<button id="btnRight">pop(unshift())</button> Shift all values to the right in the array.<br/><span class="nl">Verschuif al de waarden in de array naar rechts.</span><br/><br/>
<button id="btnSort">sort()</button> Sort the array values.<br/><span class="nl">Sorteer de waarden in de array.</span><br/><br/>
<button id="btnReverse">reverse()</button> Reverse the array values.<br/><span class="nl">Zet de array in omgekeerde volgorde.</span><br/><br/>
<button id="btnReset">RESET</button> Reset the array to the start value. (Not a method)<br/><span class="nl">Stel de array terug in op zijn beginwaarden. (Geen methode)</span><br/><br/> <script src="js/index.js"></script>
</body>
</html>

Visualize Array Methods - Script Codes CSS Codes

* { box-sizing: border-box; font-family: Arial;
}
.center { text-align: center;
}
.container { width: 768px; margin: 0 auto;
}
.box { float: left; width: 64px; height: 64px; line-height: 64px; text-align: center; font-size: 2em; font-weight: bold; border: 5px solid #03A9F4; border-radius: 8px; background-color: #40C4FF; margin: 0 8px 8px 0;
}
.nl { font-size: 0.8em; font-weight: bold; margin-left: 100px;
}
.nl::before { content: "NL: ";
}
button { width: 96px; border: 0px; padding: 4px; border-radius: 4px; background-color: #03A9F4;
}
button:hover { background-color: #40C4FF; cursor: pointer;
}

Visualize Array Methods - Script Codes JS Codes

var testArray = [0, 1, 2, 3, 4, 5];
document.getElementById("btnIndexOf").addEventListener("click", function() { if (testArray.indexOf(3) == -1) { alert("3 is not in the array anymore!"); } else { alert("3 is on position " + testArray.indexOf(3) + " of the array!"); }
});
document.getElementById("btnShift").addEventListener("click", function() { testArray.shift(); updateContainer();
});
document.getElementById("btnPop").addEventListener("click", function() { testArray.pop(); updateContainer();
});
document.getElementById("btnUnShift").addEventListener("click", function() { testArray.unshift(Math.floor(Math.random()*10)); updateContainer();
});
document.getElementById("btnPush").addEventListener("click", function() { testArray.push(Math.floor(Math.random()*10)); updateContainer();
});
document.getElementById("btnLeft").addEventListener("click", function() { testArray.push(testArray.shift()); updateContainer();
});
document.getElementById("btnRight").addEventListener("click", function() { testArray.unshift(testArray.pop()); updateContainer();
});
document.getElementById("btnSort").addEventListener("click", function() { testArray.sort(); updateContainer();
});
document.getElementById("btnReverse").addEventListener("click", function() { testArray.reverse(); updateContainer();
});
document.getElementById("btnReset").addEventListener("click", function() { testArray = [0, 1, 2, 3, 4, 5]; updateContainer();
});
function updateContainer(){ var container = document.getElementsByClassName("container"); container[0].innerHTML = ""; testArray.forEach(function(item,index){ container[0].innerHTML += "<div class='box'>"+item+"</div>"; });
}
Visualize Array Methods - Script Codes
Visualize Array Methods - Script Codes
Home Page Home
Developer Dirk Drijkoningen
Username RedJokingInn
Uploaded January 27, 2023
Rating 3
Size 2,809 Kb
Views 4,048
Do you need developer help for Visualize Array Methods?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dirk Drijkoningen (RedJokingInn) Script Codes
Name
DataTables custom row buttons
DataTables Excel cell style
Functie 2 resultaten
Bootstrap Dynamic Modal
DataTables percentage bar renderer plugin v1.1
Horizontal rule decorations
Fixed table header
Functie en array
Calculating column totals with DataTables
Testtekening
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!