Test 3

Page section: playground

Using document.body.style.backgroundImage = 'linear-gradient(...

And to change the value of a CSS variable use .style.setProperty. (Although this variable was defined in the :root element it still works as body is further down thus more specific and takes precedence).

random pic1

ToDo: Add button indication as to what is in play ( e.target.style perhaps)

NOT WORKING!!! I have no idea why these aren’t working. They were but then they stopped, except for grayscale which is a filter rather than mix-blend-mode. The styles show up in the DOM as inline styles on the image element but nothing happens to the blend mode.

CSS mix-blend-mode

These can be grouped in the following ways:

Group CSS filters
Normal
Darken darken, multiply, color-burn
Lighten lighten, screen, color-dodge
Contrast overlay, soft-light, hard-light
Inversion difference, exclusion
Component hue, saturation, color, luminosity
function changeBg5() {
    let root = document.body;
    root.style.backgroundImage = `linear-gradient(220.55deg, #FF8570 0%, #418CB7 100%)`;
    root.style.setProperty('--linkColor', 'rgb(7, 199, 215)');
    
    let btn = document.querySelectorAll('button');
    btn.forEach(b => {
        b.style.backgroundColor = 'rgb(3, 189, 205)';
        b.style.color = '#fff';
    })
}

Fauna =

2.

Order of code execution

The order of execution seems to be:

  1. js file linked at top
  2. Page script tags
  3. js file linked at bottom

If there is a break in one set of JS code any code that depend upon it won’t function.

Removing nodes

using:

function getRidOf() {
  let element = prompt('Which element to remove');
  let theseOnes = document.querySelectorAll(element);
  theseOnes.forEach((elem) => {
      elem.remove();
  })
}

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/test3.js
function jsFile() {
  alert("js file");
}
// jsFile()

// alert(fauna);

const fauna = ["goat", "beaver", "lion", "binturong"];
//     // alert('script tag');
//     const dump = document.getElementById('dump');
//     dump.innerHTML = primates.join(', ');

const today = new Date();

const paras = document.querySelectorAll(".para");

paras[0].innerHTML = "hello";
paras[1].innerHTML += fauna.join(", ");
paras[2].innerHTML = `Today is ${today.toDateString()}`;
paras[3].innerHTML = "hello";


const image = document.querySelector("img[alt*=pic1");

// image.style.outline = "12px dashed red";

const normal = document.getElementById("normal");
const darken = document.getElementById("darken");
const multiply = document.getElementById("multiply");
const colorBurn = document.getElementById("color-burn");
const lighten = document.getElementById("lighten");
const screenMode = document.getElementById("screen");
const colorDodge = document.getElementById("color-dodge");
const overlay = document.getElementById("overlay");
const softLight = document.getElementById("soft-light");
const hardLight = document.getElementById("hard-light");
const grayscale = document.getElementById("grayscale");
const outline = document.getElementById("outline");
const clear = document.getElementById("clear");



normal.addEventListener('click', () => {
  image.style.mixBlendMode = 'normal';
});

darken.addEventListener('click', () => {
  image.style.mixBlendMode = 'darken';
});

multiply.addEventListener('click', () => {
  image.style.mixBlendMode = 'multiply';
});

colorBurn.addEventListener('click', () => {
  image.style.mixBlendMode = 'color-burn';
});

lighten.addEventListener('click', () => {
  image.style.mixBlendMode = 'lighten';
});

screenMode.addEventListener('click', () => {
  image.style.mixBlendMode = 'screen';
});

colorDodge.addEventListener('click', () => {
  image.style.mixBlendMode = 'color-dodge';
});

overlay.addEventListener('click', () => {
  image.style.mixBlendMode = 'overlay';
});

softLight.addEventListener('click', () => {
  image.style.mixBlendMode = 'soft-light';
});

hardLight.addEventListener('click', (w) => {
  image.classList.toggle('hard-light');
  hardLight.classList.toggle('on');
});

grayscale.addEventListener('click', () => {
  let v = prompt('Choose an amount between 0 and 1');
  image.style.filter = `grayscale(${v})`;
});




outline.addEventListener("click", () => {
  image.classList.toggle('outline');
});

clear.addEventListener("click", () => {
  image.style= '';
});

Table of Contents