Javascript w3

In this example below you will see how to do a Javascript w3 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by dusanrandjelovic, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dusanrandjelovic ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Javascript w3</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

  
  
</head>

<body>

  <h2>JavaScript Array Sort</h2>

<p>Click the buttons to sort the array alphabetically or numerically.</p>

<button onclick="myFunction1()">Sort Alphabetically</button>
<button onclick="myFunction2()">Sort Numerically</button>

<p id="demo"></p>


<h2>JavaScript Array Sort</h2>

<p>Click the button (again and again) to sort the array in random order.</p>

<button onclick="myFunctio()">Try it</button>

<p id="dem"></p>


<h2>JavaScript Array Sort</h2>

<p>The lowest number is <span id="de"></span>.</p>


<h2>JavaScript Array Sort</h2>

<p>The highest number is <span id="demos"></span>.</p>


<h2>JavaScript Array Sort</h2>

<p>The highest number is <span id="najveci"></span>.</p>


<h2>JavaScript Array Sort</h2>

<p>The lowest number is <span id="najmanji"></span>.</p>


<h2>JavaScript Array Sort</h2>

<p>The highest number is <span id="najv"></span>.</p>


<h2>JavaScript Array Sort</h2>

<p>The lowest number is <span id="najm"></span>.</p>


<h2>JavaScript Array Sort</h2>

<p>Click the buttons to sort car objects on age.</p>

<button onclick="myFunct()">Sort</button>

<p id="broj"></p>


<h2>JavaScript Array Sort</h2>

<p>Click the buttons to sort car objects on type.</p>

<button onclick="myFun()">Sort</button>

<p id="demora"></p>


<p>Display the value of 10 > 9:</p>

<button onclick="my()">Try it</button>

<p id="kt"></p>


<p id="uf"></p>


<p>Display the Boolean value of undefined:</p>

<button onclick="nction()">Try it</button>

<p id="fal"></p>


<p>Input your age and click the button:</p>

<input id="age" value="18" />

<button onclick="ikor()">Try it</button>

<p id="vas"></p>


<h2>JavaScript Comparisons</h2>

<p>Input your age and click the button:</p>

<input id="ag" value="18" />

<button onclick="asad()">Try it</button>

<p id="cas"></p>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/dusanrandjelovic/javascript-w3-wqQvdj */
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;    

function myFunction1() {
    points.sort();
    document.getElementById("demo").innerHTML = points;
}
function myFunction2() {
    points.sort(function(a, b){return a - b});
    document.getElementById("demo").innerHTML = points;
}


var points = [40, 100, 1, 5, 25, 10];
document.getElementById("dem").innerHTML = points;    

function myFunctio() {
    points.sort(function(a, b){return 0.5 - Math.random()});
    document.getElementById("dem").innerHTML = points;
}


var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
document.getElementById("de").innerHTML = points[0];


var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
document.getElementById("demos").innerHTML = points[0];


var points = [40, 100, 1, 5, 25, 10];
document.getElementById("najveci").innerHTML = myArrayMax(points);

function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}


var points = [40, 100, 1, 5, 25, 10];
document.getElementById("najmanji").innerHTML = myArrayMin(points);

function myArrayMin(arr) {
    return Math.min.apply(null, arr);
}


var points = [40, 100, 1, 5, 25, 10];
document.getElementById("najv").innerHTML = myArrayMax(points);

function myArrayMax(arr) {
    var len = arr.length
    var max = -Infinity;
    while (len--) {
      if (arr[len] > max) {
        max = arr[len];
      }
    }
    return max;
}


var points = [40, 100, 1, 5, 25, 10];
document.getElementById("najm").innerHTML = myArrayMin(points);

function myArrayMin(arr) {
    var len = arr.length
    var min = Infinity;
    while (len--) {
      if (arr[len] < min) {
        min = arr[len];
      }
    }
    return min;
}


var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}]

displayCars();

function myFunct() {
    cars.sort(function(a, b){return a.year - b.year});
    displayCars();
}

function displayCars() {
  document.getElementById("broj").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}


var car = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}]

displayCar();

function myFun() {
    car.sort(function(a, b){
        var x = a.type.toLowerCase();
        var y = b.type.toLowerCase();
        if (x < y) {return -1;}
        if (x > y) {return 1;}
        return 0;
    });
    displayCar();
}

function displayCar() {
  document.getElementById("demora").innerHTML =
  car[0].type + " " + car[0].year + "<br>" +
  car[1].type + " " + car[1].year + "<br>" +
  car[2].type + " " + car[2].year;
}


function my() {
    document.getElementById("kt").innerHTML = 10 > 9;
}


var b1 = Boolean(100);
var b2 = Boolean(3.14);
var b3 = Boolean(-15);
var b4 = Boolean("Hello");
var b5 = Boolean('false');
var b6 = Boolean(1 + 7 + 3.14);

document.getElementById("uf").innerHTML =
"100 is " + b1 + "<br>" +
"3.14 is " + b2 + "<br>" +
"-15 is " + b3 + "<br>" +
"Any (not empty) string is " + b4 + "<br>" +
"Even the string 'false' is " + b5 + "<br>" +
"Any expression (except zero) is " + b6;


function nction() {
    var x;
    document.getElementById("fal").innerHTML = Boolean(x);
}


function ikor() {
    var age, voteable;
    age = document.getElementById("age").value;
    voteable = (age < 18) ? "Too young":"Old enough";
    document.getElementById("vas").innerHTML = voteable + " to vote.";
}


function asad() {
    var ag, voteable;
    ag = Number(document.getElementById("ag").value);
    if (isNaN(ag)) {
        voteable = "Input is not a number";
    } else {
        voteable = (ag < 18) ? "Too young" : "Old enough";
    }
    document.getElementById("cas").innerHTML = voteable;
}

Comments