How do I locally structure a frontend example from the web?

Question

I am using bootstrap carousel to make a website for a school project. I want the search input box to highlight all text on the page its on so I Googled and found mark.js : https://markjs.io/ And I looked at the Search bar with jump to matches example which leads me here: https://jsfiddle.net/bap5uf8e/ So I copied and pasted the html into index.html added all the basic elements like !DOCTYPE html, head and body, copied the css into a test.css and referenced to it in the of index.html. For the JS, I cloned the repo for mark.js and put it in my project folder so the tree looks like this:

├── index.html
├── mark.js [9 entries exceeds filelimit, not opening dir]
├── markTest.js
├── package-lock.json
└── test.css

markTest.js is the JS code copied from the above example (link again: https://jsfiddle.net/bap5uf8e/) Then I reference both mark.min.js and markTest.js right below the opening tag:

Next I use browser-sync (https://www.browsersync.io/) to see if the highlight functionality works but it does not. I copied package-lock.json from my home folder to this one because it had something about mark.js in it and in Python which I am fairly comfortable with, I would put the requirements.txt or yaml file in the project folder. It looks like this:

{
  "requires": true,
  "lockfileVersion": 1,
  "dependencies": {
    "jquery": {
      "version": "3.5.1",
      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
      "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
    },
    "mark.js": {
      "version": "8.11.1",
      "resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz",
      "integrity": "sha1-GA8fnr74sOY45BZq1S24eb6y/8U=",
      "dev": true
    }
  }
}

I have npm install'ed jquery, mark.js as the above seems to indicate. Can someone point out to me what I am missing to get this example to work locally?

user_9481613 · Answer

This worked:

├── assets
│   ├── brand
│   └── dist
├── biosphere.html
├── clipboard.html
├── comp2680Presentation.odp
├── css
│   ├── biosphere.css
│   ├── bootstrap.css
│   ├── carousel.css
│   ├── dashboard.css
│   ├── famousVegans.css
│   ├── food.css
│   ├── grid.css
│   ├── mental.css
│   ├── parallax.css
│   ├── physicalHealth.css
│   ├── signin.css
│   ├── spiritual.css
│   └── starter-template.css
├── dashboard.html
├── famousVegans.html
├── food.html
├── grid.html
├── index.html
├── js
│   ├── clearButton.js
│   ├── dashboard.js
│   ├── main.js
│   ├── mark.min.js
│   ├── nameValidator.js
│   └── navbarSearch.js
├── js_test
│   ├── basicMarkJS.css
│   ├── index2.html
│   ├── index.html
│   ├── mark.js
│   ├── markTest.js
│   ├── package-lock.json
│   └── test.css
├── markJsTest
│   └── index.html
├── mental.html
├── navbarSearchDemo.png
├── parallax.html
├── physicalHealth.html
├── public
│   ├── fonts
│   └── imgs
├── README.md
├── signIn.html
├── spiritual.html
└── starter.html

You can see my site here: https://nyck33.github.io/ecoWarriors/ The mark.js highlighting works.

How do I locally structure a frontend example from the web?

1 Answers