How do I integrate vanilla Javascript to a wordpress website?

I am new to WordPress but I have been learning to code since February. I am helping a friend add a responsive slider to her WordPress website. I created this slider using HTML, CSS and JS and it works perfectly. However, I am having problems integrating them into WordPress.

The JS code is

const prev = document.querySelector('.prev'); const next = document.querySelector('.next'); const track = document.querySelector('.track'); const carouselWidth = document.querySelector('.carousel-container').offsetWidth; let index = 0; let initialPosition = null; let moving = false; let transform = 0; next.addEventListener('click', ()=>{   index++;   prev.classList.add('show');   track.style.transform = `translateX(-$  {index * carouselWidth}px)`;   if (track.offsetWidth - (index * carouselWidth) < carouselWidth) {     next.classList.add('hide');   } });  prev.addEventListener('click', ()=>{   index--;   next.classList.remove('hide');   if (index === 0) {     prev.classList.remove('show');   }   track.style.transform = `translateX(-$  {0}px)` })    const gestureStart = (e) => {   initialPosition = e.pageX;   moving = true;   const transformMatrix = window.getComputedStyle(track).getPropertyValue('transform');   if (transformMatrix !== 'none') {     transform = parseInt(transformMatrix.split(',')[4].trim());   } }  const gestureMove = (e) => {   if (moving) {     const currentPosition = e.pageX;     const diff = currentPosition - initialPosition;     track.style.transform = `translateX($  {transform + diff}px)`;     } };  const gestureEnd = (e) => {   moving = false; }  if (window.PointerEvent) {   window.addEventListener('pointerdown', gestureStart);    window.addEventListener('pointermove', gestureMove);    window.addEventListener('pointerup', gestureEnd);   } else {   window.addEventListener('touchdown', gestureStart);    window.addEventListener('touchmove', gestureMove);    window.addEventListener('touchup', gestureEnd);        window.addEventListener('mousedown', gestureStart);    window.addEventListener('mousemove', gestureMove);    window.addEventListener('mouseup', gestureEnd);   }  

This is the code I added to the functions.php file. It adds all the CSS styles correctly.

function responsive_header(){         wp_enqueue_style( 'responsive_header_css', get_template_directory_uri() .'/css/responsiveslider.css' , array() );         wp_enqueue_script('responsive_header', get_stylesheet_directory_uri() . '/js/responsiveslider.js', array(), '',  false);          }     add_action('wp_enqueue_scripts', 'responsive_header'); 

What is weird is that if I add a hello world alert to my script it works but nothing else works. Am i doing this wrong or must I use jquery. I dont know jquery but I can learn it to implement this.

Design implementations with little to no JavaScript

As some of you may know I've been writing articles on Medium on a variety of topics. The past week or two I've had a running theme of "do ___ without JavaScript", and today I put up one that requires minimal scripting.

Just thought you folks might find these techniques handy.

Tabbed Interfaces Without JavaScript:
https://levelup.gitconnected.com/tabbed-interfaces-without-javascript-661bab1eaec8

Modal Dialog Driven Websites Without JavaScript…

Design implementations with little to no JavaScript

Conditionally enqueue a stylesheet based off of a javascript click event

I would like to use a different ccs file based on a javascript click event. The user will have a choice of color themes by clicking one of the colored buttons on the screen. I originally have it working by providing the linked css with an id that can be targeted with javascript. The link is in the HTML head tag of course. In WordPress though we enqueue the css file in the functions.php file and so I am not sure how to give the css file an ID to target it with the javascript. If anyone can help me out or point me in the right direction I will really appreciate it. I am open to all possibilities and I thank you all in advance. if you need me to elaborate more feel free to let me know.

Dynamically merge different arrays in javascript

I want to combine two arrays (ranking and matches) that has common properties:

var ranking = [{     def: "0.58",     league: "Scottish Premiership",     name: "Celtic",     off: "3.33",     grank: "3",     tform: "96.33", }, {     def: "2.52",     league: "Scottish Premiership",     name: "Dundee",     off: "1.28",     grank: "302",     tform: "27.51", }]  var matches = [{ date: "2010-04-22", league: "Scottish Premiership", home: "0.0676", away: "0.8", draw: "0.1324", goals1: "3", goals2: "1", tform1: "96.33", tform2: "27.51", team1: "Celtic", team2: "Dundee",}] 

Expected output looks like this:

[{ date: "2010-04-22", league: "Scottish Premiership", home: "0.0676", away: "0.8", draw: "0.1324", goals1: "3", goals2: "1", tform1: "96.33", tform2: "27.51", def1: "0.58", def2: "2.52", off1: "3.33", off2: "1.28", grank1: "3", grank2: "302", team1: "Celtic", team2: "Dundee",}] 

To merge the arrays, I used Lodash _.merge function

var result = _.merge(ranking, matches); 

The output it returned did merge some objects and omitted homogeneous objects.

Please I need some help and insight in achieving this task. I wouldn’t mind any javascript (client-side) solution.

Https injecting javascript, steal crtificate

I have a question which came to my mind regarding ssl security. Ssl encrypts data with a public key and decrypts with a private key. So in the figure

client->public key to private key-> server

Does also the server uses the same public key to encrypt before sending? The server associates each client with a public key and saves it?

So in reverse,

server->public key to private key-> client

If this is the case

A person who is arp spoofing and can edit the data passing through the network could use this public key to inject javascript code in middle of the content since most likely it will html page being rendered..? So without the need of seeing the data, can we inject with only using the decryption?

Second question is,

When the client first connects to a website if the arp spoofing is implemented in the same network, on the first hand shake, can the sniffer some how steal the private key or the ssl signed certificate? If there already exists one, tell the server or the user somehow that it is expired to obtain the new plain data one?

For example,

The ssl request The client -> the sniffer -> the webserver is being told the client does not have a valid ssl or the current one is expired and new one is requested, 

Can it intercept the plain certificate data to steal the private key the second way?

 The server(oh here take it) -> sniffer (hehe ihave the new certificate) - > the client, use this, this the new cert old one doesnt work anymore``` 

How to prevent XSS attack on selected window.location in javascript

This is my code where i have a userId in a method SwitchUser_Click. I need to prevent or somehow encode the return value from the switchUser_Click as it includes the UserId of a user vulnerable to XSS attack or redirects.

function SwitchUser_Click(containerElement, OnSuccess) {             var selecteduserId = $  ("select", containerElement).val();             var makeDefault = $  (":checkbox", containerElement).is(":checked");             window.location = "Default.aspx?uId=" + selecteduserId + "&userActive=" + (makeDefault ? "1" : "0");             OnSuccess();         } 

The belows code is called from aspx page by using Client.RegisterScript and passing the parameters. This is the only place SwitchUser_Click method is used.

function OpenSwitchUser(UserId,modCode,defUrl) {             defaultUrl = defUrl;             var options =             {                 controlUrl: "~/Controls/SwitchUserDialog.ascx",                 params: { uid:UserId, mod: modCode},                 top: 70,                 width: 600,                 height: 2500,                 OKCallback: SwitchUser_Click,                 InitCallback: SwitchUserDialog_Init,                 cancelCallback: SwitchUser_Close             };             $  .showControlDialog(options);         } 

I want to know how to encode my userId in the SwitchUser_Click method and decode it when its called. Or maybe there is some other way to do this . Thank you