Skip to content

Instantly share code, notes, and snippets.

@tywtyw2002
Created June 15, 2022 02:23
Show Gist options
  • Save tywtyw2002/303ed744293122989be519aa5a8fb6ce to your computer and use it in GitHub Desktop.
Save tywtyw2002/303ed744293122989be519aa5a8fb6ce to your computer and use it in GitHub Desktop.
jOZdabP
<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>
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>"
}
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
.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;
}
<link href="https://wotlk.c70.ca/css/app.e6b83994.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment