A Pen by tywtyw2002 on CodePen.
Created
June 15, 2022 02:23
-
-
Save tywtyw2002/303ed744293122989be519aa5a8fb6ce to your computer and use it in GitHub Desktop.
jOZdabP
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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>" | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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