jOZdabP

index.html

<div class='control-bar navbar'>
  <div class="field is-horizontal">
    <div class="field has-addons">
      <div class="control">
        <input class="input" id='item_input' type="text" placeholder="item_id">
      </div>
      <div class="control">
        <a class="button is-info" id='btn_go'>
          Go
        </a>
      </div>
    </div>
    <div class="field" style='padding-left: 2em'>
      <button class="button is-primary">
        Clear
      </button>
    </div>
  </div>
</div>
<main class='lt-main main'>
</main>

jozdabp.markdown

jOZdabP

A Pen by tywtyw2002 on CodePen.

License.

script.js

document.querySelector('#btn_go').addEventListener("click", add_item);

function close_me(e){
  e.parentElement.remove();
}

async function  get_tooltip(item_id) {
  const res = await axios('http://127.0.0.1:5000/item/' + item_id);
  return await res.json()
}

async function  add_item() {
  let root = document.querySelector('.main');
  let item_id = document.querySelector('#item_input').value;
  if (item_id == ""){
    return
  }
  
  const res = await get_tooltip(item_id);
  root.innerHTML += res.html;
//   root.innerHTML += `<div class="tp-mc">
// <h4 class="tp-i-q3">Quiver of a Thousand Feathers</h4>
// <span class="tp-i-q">Item Level 70</span>
// <span>Binds when equipped</span>
// <span>24 Slot Quiver</span>
// <span>Requires Level 70</span>
// </div>`
  let last_ele = root.lastChild
  last_ele.innerHTML += "<span class='close' onclick='close_me(this)'></span>"
}

scripts

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

style.css

.control-bar {
  padding-left: 2em;
  padding-top: 0.75em;
  padding-buttom: 0;
}

.main {
  max-width: unset !important;
  margin-left: 1em !important;
  margin-right: 1em !important;
  height: 600px;
  overflow-y: scroll;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.tp-mc {
  width: 20rem;
  color: #ddd;
  border: .0625rem solid rgba(84,84,88,.6);
  padding: 0.625rem;
  height: fit-content;
  margin-left: 1em;
  position: relative;
}

.tp-mc .close::before {
  content: '    ';
  cursor: pointer;
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512'%3E%3Cpath d='M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208s208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 1 1-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 0 1-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0 1 22.62-22.62L256 233.37l52.69-52.68a16 16 0 0 1 22.62 22.62L278.63 256z' fill='%2354545899'%3E%3C/path%3E%3C/svg%3E");
  width: 24px;
  height: 24px;
}

styles

<link href="https://wotlk.c70.ca/css/app.e6b83994.css" rel="stylesheet" />