Deeno

let div = document.querySelector("div");

if (window.innerWidth > 768) {
  div.addEventListener("mouseover", function () {
    console.log("works");
  });
} else if (window.innerWidth < 768) {
  div.addEventListener("click", function () {
    console.log("works");
  });
}

F11,не?

https://jsfiddle.net/suf7hgw2/1/

Самой простое
https://www.w3schools.com/howto/howto_js_image_com...

https://fengyuanchen.github.io/pickerjs/

Для начала,(если компонент создан ,если нет то создать) в файле app-routing.module.ts

{
    path: '404', component: NotfoundComponent
  },
  {
    path: '**', redirectTo: '/404'
  }

затем в 404.ts нужно ипортировать RESPONSE из express-engine и дальше

1:  import { RESPONSE } from '@nguniversal/express-engine/tokens';
2: constructor(@Optional() @Inject(RESPONSE) private response: any) { }
в ngOnInit() прописать
3: this.response.statusCode = 404;

let button = document.querySelector('button')
button.addEventListener('click' , function(){
  this.classList.toggle('active')
})

можно так

let inp = document.querySelector("input");

inp.addEventListener("input", function() {
  if (this.value == 0) {
    console.log("0 is not supported");
    this.value = "";
  } else {
    console.log(this.value);
  }
});

Посмотри в сторону этого

bqworks.com/accordion-slider
https://www.jqueryscript.net/slider/Responsive-Acc...
https://www.jqueryscript.net/accordion/Horizontal-...

на чистом css

https://www.cssscript.com/demo/fancy-accordion-sli...
https://codepen.io/googalus-maximus/pen/XdYBxV

Проблема в том что подгружается через background из стилей,а в документации всё грузится в скелет html вставь картинку сразу в див,а не через background