Various 1

Created: Fri 31 Dec 21 Updated on: Tue 21 May 24

TAGS: join()

Reactivity

The button has innerHTML including the counter which increase by one every click. However the variable counter does not update. It’s not reactive.

The paragraph is up to date because a function is invoked rewriting the paragraph’s innerHTML on every click so the new value of the variable counter is up to date.

click

The button runs this arrow function.

const btn1 = document.querySelector('#btn-1');

let counter = 0;

btn1.addEventListener('click', () => {
  counter = counter + 1;
  btn1.textContent = `Button pressed ${counter} times`;
});

Array methods

// primates

const primateBtn = document.getElementById("primate-btn");

const primateUl = document.getElementById("primates");

primateBtn.addEventListener("click", () => {
  primates.forEach((item) => {
    primateUl.innerHTML += `<li>${item}</li>`;
  });
});

And the Clear list code..

const primateClearBtn = document.getElementById('primate-clear');

primateClearBtn.addEventListener('click', () => {
  primateUl.innerHTML = '';
});

Joining arrays

Using .concat() can join two arrays.

used to join primates with leaves.

The button’s onclick attribute contains the following:

let leaves = ['oak', 'olive']; 
const joined = primates.concat(leaves); 
alert(joined);

join()

The .join() joins array items together using something in between each item.

alert(primates.join('\n'));

Note that the default behaviour for join() is to insert a comma and space between the array items.

Arrow function test

shows that an arrow function works if the <script> is declared first.

The code:

<script>
  const multiply = (x, y) => x * y;
</script>

alert(multiply(3, 4));

Date

DOM element

You can show a DOM element in the console using:
console.log(document.getElementById('newDiv')

View contents of: /static/js/pure-data.js

// This file contains no programming just objects, variables and arrays

const primates = [
  "mangabey",
  "drill",
  "colobus",
  "gelada",
  "linsang",
  "lutung",
  "talapoin",
  "tamarin",
  "titi",
  "guenon",
  "guereza",
  "kipunji",
  "grivet",
];

const viverids = ["binturong", "civet", "falanouc", "genet"];

const dinosaurs = [
  {
    name: "Baryonyx",
    meaning: "Heavy claw",
    family: "Spinosaur",
    period: "Early cretaceous",
    country: "UK",
    year: 1983,
  },
  {
    name: "Bolong",
    meaning: "long dragon",
    family: "Hadrosaur",
    period: "Early cretaceous",
    country: "China",
    year: 2010,
  },
  {
    name: "Opisthocoelicaudia",
    meaning: "posterior cavity tail",
    family: "Titansaur",
    period: "Late cretaceous",
    country: "Mongolia",
    year: 1965,
  },
  {
    name: "Coelophysis",
    meaning: "Hollow form",
    family: "theropod",
    period: "Late triassic",
    country: "USA",
    year: 1881,
  },
  {
    name: "Epidexipteryx",
    meaning: "Hu Yaoming's dragon",
    family: "theropod",
    period: "Jurassic",
    country: "Inner Mongolia",
  },
];

// Bond films using object constructor

function BondFilm(title, year, actor, num, bondGirl, imdb) {
  (this.title = title),
    (this.year = year),
    (this.actor = actor),
    (this.num = num),
    (this.bondGirl = bondGirl),
    (this.imdb = imdb);
}

const drNo = new BondFilm(
  "Doctor No",
  1962,
  "Sean Connery",
  1,
  "Ursula Andress",
  7.2
);

const fromRussiaWithLove = new BondFilm(
  "From Russia with Love",
  1963,
  "Sean Connery",
  2,
  "Daniela Bianchi",
  7.4
);

const goldfinger = new BondFilm(
  "Goldfinger",
  1964,
  "Sean Connery",
  3,
  "Honor Blackman",
  7.7
);

const thunderball = new BondFilm(
  "Thunderball",
  1965,
  "Sean Connery",
  4,
  "Claudine Auger",
  7
);

const youOnlyLiveTwice = new BondFilm(
  "You Only Live Twice",
  1967,
  "Sean Connery",
  5,
  "Akiko Wakabayashi",
  6.8
);

const onHerMajestysSecretService = new BondFilm(
  "On Her Majestys Secret Service",
  1969,
  "George Lazenby",
  6,
  "Diana Rigg",
  6.7
);

const diamondsAreForever = new BondFilm(
  "Diamonds are Forever",
  1971,
  "Sean Connery",
  7,
  "Jill St John",
  6.6
);

const liveAndLetDie = new BondFilm(
  "Live and Let Die",
  1973,
  "Roger Moore",
  8,
  "Jane Seymour",
  6.8
);

const theManWithTheGoldenGun = new BondFilm(
  "The Man with the Golden Gun",
  1974,
  "Roger Moore",
  9,
  "Britt Eckland",
  6.7
);

const theSpyWhoLovedMe = new BondFilm(
  "The Spy Who Loved Me",
  1977,
  "Roger Moore",
  10,
  "Barbara Bach",
  7.1
);

const moonraker = new BondFilm(
  "Moonraker",
  1979,
  "Roger Moore",
  11,
  "Lois Chiles",
  6.3
);

const forYourEyesOnly = new BondFilm(
  "For Your Eyes Only",
  1979,
  "Roger Moore",
  12,
  "Carole Bouquet",
  6.7
);

const octopussy = new BondFilm(
  "Octopussy",
  1983,
  "Roger Moore",
  13,
  "Maud Adams",
  6.5
);

const aViewToAKill = new BondFilm(
  "A View to a Kill",
  1985,
  "Roger Moore",
  14,
  "Tanya Roberts",
  6.3
);

const theLivingDaylights = new BondFilm(
  "The Living Daylights",
  1987,
  "Timothy Dalton",
  15,
  "Maryam d'Abo",
  6.7
);

const licenceToKill = new BondFilm(
  "Licence To Kill",
  1989,
  "Timothy Dalton",
  16,
  "Carey Lowell",
  6.6
);

const goldenEye = new BondFilm(
  "Golden Eye",
  1995,
  "Pierce Brosnan",
  17,
  "Izabella Scorupco",
  7.2
);

const tomorrowNeverDies = new BondFilm(
  "Tomorrow Never Dies",
  1997,
  "Pierce Brosnan",
  18,
  "Michelle Yeoh",
  6.5
);

const theWorldIsNotEnough = new BondFilm(
  "The World is Not Enough",
  1999,
  "Pierce Brosnan",
  19,
  "Sophie Marceau",
  6.4
);

const dieAnotherDay = new BondFilm(
  "Die Another Day",
  2002,
  "Pierce Brosnan",
  20,
  "Halle Berry",
  6.1
);

const casinoRoyale = new BondFilm(
  "Casino Royale",
  2006,
  "Daniel Craig",
  21,
  "Eva Green",
  8
);

const quantumOfSolace = new BondFilm(
  "Quantum of Solace",
  2008,
  "Daniel Craig",
  22,
  "Olga Kurylenko",
  6.6
);

const skyfall = new BondFilm(
  "Skyfall",
  2012,
  "Daniel Craig",
  23,
  "Naomie Harris",
  7.8
);

const spectre = new BondFilm(
  "Spectre",
  2015,
  "Daniel Craig",
  24,
  "Léa Seydoux",
  6.8
);

const noTimeToDie = new BondFilm(
  "No Time to Die",
  2021,
  "Daniel Craig",
  25,
  "Ana de Armas",
  7.4
);

const jamesBondFilms = [
  drNo,
  fromRussiaWithLove,
  goldfinger,
  thunderball,
  youOnlyLiveTwice,
  onHerMajestysSecretService,
  diamondsAreForever,
  liveAndLetDie,
  theManWithTheGoldenGun,
  theSpyWhoLovedMe,
  moonraker,
  forYourEyesOnly,
  octopussy,
  aViewToAKill,
  theLivingDaylights,
  licenceToKill,
  goldenEye,
  tomorrowNeverDies,
  theWorldIsNotEnough,
  dieAnotherDay,
  casinoRoyale,
  quantumOfSolace,
  skyfall,
  spectre,
  noTimeToDie,
];

View contents of: /static/js/various-1.js

const btn1 = document.querySelector('#btn-1');

let counter = 0;

btn1.addEventListener('click', () => {
  counter = counter + 1;
  btn1.textContent = `Button pressed ${counter} times`;
});

// primates

const primateBtn = document.getElementById('primate-btn');

const primateUl = document.getElementById('primates');

primateBtn.addEventListener('click', () => {
  primates.forEach((item) => {
    primateUl.innerHTML += `<li>${item}</li>`;
  });
});

const primateClearBtn = document.getElementById('primate-clear');

primateClearBtn.addEventListener('click', () => {
  primateUl.innerHTML = '';
});

// dinosaurs

// let dinos = dinosaurs.name;

// function tripleConcat() {
//   alert(dinosaurs.forEach(nam) => { nam});
//   // console.log(dinos.name);
// }

let tripleConcat = () => {
  alert('works');
  dinosaurs.forEach(item) => { console.log(item.name) };
};

// date

let d = new Date();