Category: javascript

I have created a role and want to give it to the bot. How can I do this? I have the role as var ‘role’. I can’t figure out how to give the bot itself a role, just other members.

I am trying to access dictionary api from chrome console, but constantly getting this error: Authentication parameters missing status code: 403

My credentials have no issue, coz it works fine in postman.

Documentation for oxford dictionary api : https://developer.oxforddictionaries.com/documentation#!/Entries/get_entries_source_lang_word_id

Following is my fetch request:

var myHeaders = new Headers();
myHeaders.append("app_id", app_id);
myHeaders.append("app_key", app_key);

var requestOptions = {
  method: 'GET',
  headers: myHeaders,
  mode : "no-cors",
  redirect: 'follow'
};

fetch("https://od-api.oxforddictionaries.com/api/v2/entries/en-us/persistent?strictMatch=false", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

I’m trying to create a Web Component, and want to be be able to access a property from the DOM.

<!doctype html>
<html lang="en-GB">
<head>
    <script type="module">
      class TestComponent extends HTMLElement {
        constructor() {
          super()
            .attachShadow({mode: 'open'})
            .innerHTML = '<div id="root">Test Component</div>';
        }

        connectedCallback() {
          console.log('super');
          this.value = 10;
          this.setAttribute('value', '10');
        }

        set value (newValue) {
          console.log('setValue');
          this.setAttribute('value', newValue);
        }

        get value () {
          this.getAttribute('value');
        }
      }

      customElements.define('test-component', TestComponent);
    </script>
</head>
<body>
<select id="html-select">
    <option value="75">HTML Option</option>
</select>

<test-component id="test-component"></test-component>
</body>
<script>
  console.log(document.getElementById('html-select').value);  // outputs 75
  console.log(document.getElementById('test-component').value); // outputs undefined
  console.log(document.getElementById('test-component').id); // outputs 'test-component'

  setTimeout(() => {
    console.log(document.getElementById('test-component').value); // still outputs undefined
  }, 1000);
</script>
</html>

The console log for this is:

75
test-component
undefined
super
setValue
undefined

The element attribute is correctly set on inspection, though:

<test-component id="test-component" value="10">

I have 4 * 8 dots. I want to logs this like this:

// empty()      // ................................

I want to divide this into 4 parts and show an “4” every eight dot.

// init()          // 4.......4......4.......4.......

I want to divide the first part into two and place a “2” every fourth dot.

// add(0, 2)       // 2...2...4......4.......4.......

In other words I placed a “2” at 0th dot which was “4” previously. This lasts for only 4 dots, so the
remaining 4 dots are left with another “2”.

How I think of this is more like placing an “8” at place 4:

// add(4, 8)       // 2...8..............2...4.......

So the number at the beginning of dots is measure of how long a dot lasts, and I can place a number anywhere I feel like. But I need to respect the old dots, and put new dots to keep them numbered.
In the last example I had to place an “8” at place 4 so I removed “2” “4” and “4” and replaced it with an “8” and also added a “2” to make up for the remaining space.

Final example we place a “6” at the 6th place.

// add(6, 6)       // 2...116..........112...4.......

This overrode “8” and replaced it with “6” and a “2” and a bunch of “1”‘s.

Overall what I want:

/*
  // time signature 4/4
  // method call  // logs
  init()          // 4.......4......4.......4.......
  add(0, 2)       // 2...2...4......4.......4.......
  add(4, 8)       // 2...8..............2...4.......
  add(6, 6)       // 2...116..........112...4.......
*/

Basically I want an abstraction for putting musical notes and querying them.

I’ve tried two approaches but they are just hardcore messy calculations that didn’t work. I need some neat functional
approach easy to grok and handle.

How do i make below hyperlink scroll over to that tab’s content..i’ve used “javascript:document.querySelector(‘#tb’).click()” and tab is opened but u it doenst scroll down over

Here is my source code

This is the css for the tabs and page

body {font-family: Arial;}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

Below (3rd line)i used “javascript:document.querySelector(‘#tb’).click()” to open the hyperlinked tab..but how do make it scroll over to that tab’s content

<h2>Tabs</h2>
    <p>How do i make a scrolldown to a specific tab content when the hyperlink below is clicked?</p>
    
 <a href="javascript:document.querySelector('#tb').click()">This link will open the tokyo tab..but how do i implement a scroll over?</a>
<br>
<br>
<br>
<img src="D:DocumentsTCOR22000652travel.jpg" alt="Girl in a jacket" width="600" height="500">

<br>
<br>
<br>
<br>
<br>
<br>
<br>
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'London')">London</button>
      <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
      <button class="tablinks" id="tb" onclick="openCity(event, 'Tokyo')">Tokyo</button>
    </div>

    <div id="London" class="tabcontent">
      <h3>London</h3>
      <p>London is the capital city of England.</p>
    </div>

    <div id="Paris" class="tabcontent">
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p>
    </div>

    <div id="Tokyo" class="tabcontent">
      <h3>Tokyo</h3>
      <p>Tokyo is the capital of Japan.</p>
      <img src="D:DocumentsTCOR22000656tokyo.jpg" alt="Girl in a jacket" width="500" height="600">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis.
        Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare
        pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis.
        Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare
        pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis.
        Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare
        pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis.
        Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare
        pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis.
        Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare
        pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis.
        Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare
        pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis.
        Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare
        pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis.
        Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare
        pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p>

Here is the javascript for the tabs

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

Environment:HTML, JAVASCRIPT, Express.
there is empty script tags to get Prettier to format server-side JavaScript code in a few .ejs.html files but i want to remove them so they don’t be served to the client.

I have a json link that contains various information and a path to an image on the computer and I wanted to load that image into a div in html.
I already have code to fetch text from the json and put it in the html, but I can’t put the image in the html

json link:
http://192.168.1.67:1312/results.json

json info:
{“CasaFaltas”:”5″,”CasaFaltas.Source”:”C:UserspedroDesktopCarrega PlayScoreboardFaltasFalta0.png”,”CasaGolos”:”10″,”Tempo”:”2:56″,”VisitanteFaltas”:”3″,”VisitanteGolos”:”11″}

To go get the text, I have the code below.
However I don’t know how to get the image to make it available in html
(however, if you have suggestions for improving my code, I’ll gladly accept)

<body>
    <table class="TabelaTempo">
    <tr style="height:20px">
        <td style="width:340px"> </td>
        <td id="Tempo" style="width:85px; font-size:18px">20:00</td>
        <td style="width:44px"> </td>
        <td style="width:45px; font-size:18px">1ª P</td>
    </tr>
    </table>

<script>

function $(a){
 return document.getElementById(a)
}
function ajax(a,b,c){
 c=new XMLHttpRequest;
 c.open('GET',a);
 c.onload=b;
 c.send()
}

function reloadData(){
 ajax('http://192.168.1.67:1312/results.json',updateText)
};
function updateText(){
 var db=JSON.parse(this.response);
 $("Tempo").innerHTML=db.Tempo;
 $("CasaGolos").innerHTML=db.CasaGolos;
 $("VisitanteGolos").innerHTML=db.VisitanteGolos;
 $("CasaFaltas").innerHTML=db.CasaFaltas;
 $("VisitanteFaltas").innerHTML=db.VisitanteFaltas;
 $("CasaFaltas.Source").innerHTML=db.CasaFaltas.Source;
}
window.setInterval(reloadData,100);


$('#i_file').change( function(event) {
    $("img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));
});

</script>
</body>

I have this structure

const name = user.name;
const email = user.email;
const doc = user.doc;
const paramsSearch = req?.params?.search;
const search = …;

I want to transform search in a ternary like:

const search = paramsSearch === user.name ? …

if its equal to name, email and doc then search will be one of them, else return an empty string

I have tried the if else condition but i need it in ternary

I am trying to convert class component to fucntion component in React. But i stuck in this error Parsing error: Missing semicolon. Main.jsx

import React,{useState} from 'react'
import Header from './Header'
import Photowall from './Photowall'

// const posts = 


function Main() {
  const [posts, setPost] = useState([
    {
      id:"0",
      description:"Konoha green beast",
      imageLink:"https://www.giantbomb.com/a/uploads/scale_small/1/14242/322895-might_guy.jpg"
    }, 
    {
      id:"1",
      description:"again Uchiha",
      imageLink:"data:image/jpeg;base64,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"
    },
    {
      id:"2",
      description:"rasenshuriken",
      imageLink:"https://media.comicbook.com/2020/12/naruto-1249229.jpeg?auto=webp&width=1200&height=628&crop=1200:628,smart"}
  ]);

  removePhoto(postRemoved){
    console.log(postRemoved.description)
  }

  return (

    <>
    <Header title={"Photowall"} />
    <Photowall posts = {posts} onRemove={removePhoto}/>
    
    
    </>
  )
}

export default Main;

in removePhoto function i am facing this error. Help me to solve this error .
I am taking this array of all items to another componenets name Photowall. Then again using another component where i pass all this component individually using {props.posts.map((post,index) => <Photo key={index} post={post} onRemovePhoto={props.onRemovePhoto}/>)}

Then in main Photo.jsx i am calling this function to give me the post.description using a button onClick() property

<button  className='remove-button' onClick={()=>{
             props.onRemovephoto(post)
           }}>
             Remove
           </button>

but this is giving me parsing error on Main.jsx line:26

I am using https://ajv.js.org/ to validate schemas and the configuration.

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "things": {
      "type": "array",
      "minItems": 0,
      "uniqueItems": true,
      "items": {
        "$ref": "#/definitions/thing"
      }
    }
  },
  "definitions": {
    "thing": {
      "type": "object",
      "required": [
        "name",
        "type",
        "label"
      ],
      "properties": {
        "name": {
          "type": "string",
          "description": "Thing name"
        },
        "type": {
          "enum": [
            "THING1",
            "THING2",
            "THING3",
            "THING4"
          ],
          "description": "Thing type"
        },
        "label": {
          "type": "string",
          "description": "label to display for the thing"
        }
      }
    }
  }
}

The data to test is:

let data = {
  "things": [
     {
       "type": "THING1",
       "label": "Context navigate test"
     }
  ]
}

when running validate(data) it fails which is expected

[
  {
    instancePath: '/things/0',
    schemaPath: '#/definitions/thing/required',
    keyword: 'required',
    params: { missingProperty: 'name' },
    message: "must have required property 'name'"
  }
]

When I move the definitions to a file it doesn’t fail anymore.
Definition now in a file
directory /definitions/thing_schema.json

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "definitions/thing_schema.json#/thing",
  "definitions": {
    "thing": {
      "description": "A representation of a thing",
      "type": "object",
      "required": [
        "name",
        "type",
        "label"
      ],
      "properties": {
        "name": {
          "type": "string",
          "description": "Thing name"
        },
        "type": {
          "enum": [
            "THING1",
            "THING2",
            "THING3",
            "THING4"
          ],
          "description": "Thing type"
        },
        "label": {
          "type": "string",
          "description": "label to display for the thing"
        }
      }
    }
  }
}

The schema is now referencing the file instead of referencing the definition in its own file.

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "things": {
      "type": "array",
      "minItems": 0,
      "uniqueItems": true,
      "items": {
        "$ref": "definitions/thing_schema.json#/thing"
      }
    }
  }
}

This time the validation doesn’t fail.

ajv.addSchema(thingDefintionFile)
const validate = ajv.compile(schemaFile)
if(!validate(data)) {
    console.log(validate.errors)
}

I have a horizontal scrolling feature. In my program, there is a parent element that contains multiple children. When you drag the child elements, it starts scrolling horizontally. Each child has a click event, so when you stop dragging the parent element, the click event is executed on the child on which the mouse cursed.

I do not like this. I want to trigger the click events only when you click on one of the children.

here is an example below (forked from another pen)

const slider = document.querySelector(".items");
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener("mousedown", (e) => {
  isDown = true;
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});
slider.addEventListener("mouseleave", () => {
  isDown = false;
});
slider.addEventListener("mouseup", () => {
  isDown = false;
});
slider.addEventListener("mousemove", (e) => {
  if (!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 1; //scroll-fast
  slider.scrollLeft = scrollLeft - walk;
  console.log(walk);
});

@import url(https://fonts.googleapis.com/css?family=Rubik);
body,
html {
  color: #fff;
  text-align: center;
  background: #efefef;
  font-family: Helvetica, sans-serif;
  margin: 0;
}

.grid-container {
  background: #efefef;
  font-family: "Rubik", sans-serif;
}

@supports (display: grid) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header header header" "title title footer" "main main main";
  }
  @media screen and (max-width: 500px) {
    .grid-container {
      grid-template-columns: 1fr;
      grid-template-rows: 0.3fr 1fr auto 1fr;
      grid-template-areas: "header" "title" "main" "footer";
    }
  }

  .grid-item {
    color: #fff;
    background: skyblue;
    padding: 3.5em 1em;
    font-size: 1em;
    font-weight: 700;
  }

  .header {
    background-color: #092a37;
    grid-area: header;
    padding: 1em;
  }

  .title {
    color: #555;
    background-color: #f4fbfd;
    grid-area: title;
  }

  .main {
    color: #959595;
    background-color: white;
    grid-area: main;
    padding: 0;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .footer {
    background-color: #5bbce4;
    grid-area: footer;
    padding: 0.6em;
  }

  .items {
    position: relative;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    transition: all 0.2s;
    transform: scale(0.98);
    will-change: transform;
    user-select: none;
    cursor: pointer;
  }

  .item {
    display: inline-block;
    background: skyblue;
    min-height: 250px;
    min-width: 400px;
    margin: 0;
  }
  @media screen and (max-width: 500px) {
    .item {
      min-height: 200px;
      min-width: 200px;
    }
  }
}
a {
  text-decoration: underline;
  margin: 1em auto;
}
a:hover {
  cursor: pointer;
}

p {
  text-align: left;
  text-indent: 20px;
  font-weight: 100;
}

i {
  color: skyblue;
}

h1 {
  color: black;
  font-size: 12pt;
}

<h1> <a href="https://codepen.io/thenutz/pen/VwYeYEE" target="_blank">forked from this pen</a> (simplified + click events added)</h1>
<div class="grid-container">

  <main class="grid-item main">
    <div class="items">
      <div onclick="alert('hey')" class="item item1"></div>
      <div onclick="alert('hey')" class="item item3"></div>
      <div onclick="alert('hey')" class="item item4"></div>
      <div onclick="alert('hey')" class="item item2"></div>
      <div onclick="alert('hey')" class="item item5"></div>
      <div onclick="alert('hey')" class="item item6"></div>
      <div onclick="alert('hey')" class="item item7"></div>
      <div onclick="alert('hey')" class="item item8"></div>
      <div onclick="alert('hey')" class="item item9"></div>
      <div onclick="alert('hey')" class="item item10"></div>
    </div>
  </main>
</div>

What I tried (check them here):

As you see, we have four event listeners:

1. mousedown
2. mouseleave
3. mouseup
4. mousemove

I put e.preventDefault() and e.stopPropagation() inside each of them also i tried to use both e.preventDefault() and e.stopPropagation() inside children click handlers before alerting “hey”. But these solutions weren’t work

I am looking to monitor all outgoing HXR requests on the page in order to intercept a specific one that I wish to extract its data to log.

Here’s the specific request I am trying to intercept:

Request header from the console

Request body I want to extract

Here’s what I tried so far:

(function(send) {
XMLHttpRequest.prototype.send = function(body) {
    var info="send datarn"+body;
    console.log(info);
    send.call(this, body);
};
})(XMLHttpRequest.prototype.send);

This seems to be somehow working because I get some requests logged in the console but not the ones I am looking for.
I also get some send data [object FormData] logged.

I am probably missing something about which HXR requests I am intercepting with my script and would love some help!
Thanks for your time!

I have a 2d javascript array like this

[[2,3],[13,4],[1,19]]

and I want to pass it to my .Net controller

My controller header looks like this

public async Task<ActionResult> UpdateOrder(int[,] order)

My put call looks like this

updateOrder(order: number[][]): Observable<any> {
   return this.http.put(this.baseUrl + 'members/edit/set-order/' + order, {});
}

but I’m getting an error when I hit the controller saying:

‘Cannot deserialize the current JSON object (e.g. {“name”:”value”}) into type ‘System.Int32[,]’ because the type requires a JSON array (e.g. [1,2,3]) to deserialize correctly.nTo fix this error either change the JSON to a JSON array (e.g. [1,2,3]) or change the deserialized type so that it is a normal .NET type (e.g. not a primitive type like integer, not a collection type like an array or List) that can be deserialized from a JSON object. JsonObjectAttribute can also be added to the type to force it to deserialize from a JSON object.nPath ”, line 1, position 2.’

I am trying to use bootstrap 5 and using their template:

    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

but the js doesn’t seem to be working as when I try to use modals, or navbars, nothing works. its only the css.

my file is saved as a .PHP file. any ideas on what’s going wrong? I haven’t been able to find a solution that works after browsing this site and others for a few hours

Please I don’t understand the logic in the add and search method here, can someone help me explain what’s going on in these methods, especially in the two while loops inside add(). I encountered this in the book Hands-On Data Structures and Algorithms with JavaScript by Kashyap Mukkamala. Also I want to understand how this implementation is related to a trie tree, possibly suggest a more simpler implementation of this same logic.

 
export class Trie {
    tree: any = {};

    constructor() {}

    add(input) {
        // set to root of tree
        var currentNode = this.tree;

        // init value
        var nextNode = null;

        // take 1st char and trim input
        var curChar = input.slice(0,1);
        input = input.slice(1);

        // find first new character, until then keep triming input
        while(currentNode[curChar] && curChar){
            currentNode = currentNode[curChar];

            // update remainder array, this will exist as we added the node earlier
            currentNode.remainder.push(input);

            // trim input
            curChar = input.slice(0,1);
            input = input.slice(1);
        }

        // while next character is available keep adding new branches and prune till end
        while(curChar) {
            // new reference in each loop
            // create remainder array starting with current input
            // so when adding the node `a` we add to the remainder `dam` and so on
            nextNode = {
                remainder: [input]
            };

            // assign to current tree node
            currentNode[curChar] = nextNode;

            // hold reference for next loop
            currentNode = nextNode;

            // prepare for next iteration
            curChar = input.slice(0,1);
            input = input.slice(1);
        }
    }

    search(input) {
        // get the whole tree
        var currentNode = this.tree;
        var curChar = input.slice(0,1);

        // take first character
        input = input.slice(1);

        // keep extracting the subtree based on the current character
        while(currentNode[curChar] && curChar){
            currentNode = currentNode[curChar];
            curChar = input.slice(0,1);
            input = input.slice(1);
        }

        // reached the end and no subtree found
        // i.e. no data found
        if (curChar && !currentNode[curChar]) {
            return {
                remainder: []
            };
        }

        // return the node found
        return currentNode;
    }
}