Skip to content

Instantly share code, notes, and snippets.

@CHUKK
Last active Feb 28, 2019
Embed
What would you like to do?
Copy by clicking
<style>
.couponWrap {
border: dashed 3px #292929;
font-size: 1.5rem;
text-align: justify;
padding: 0.5rem 1.2rem 0.5rem;
letter-spacing: 0.2rem;
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.title {
position: absolute;
z-index: 9;
top: 0;
font-size: 0.75rem;
font-weight: bold;
color: #69A944;
}
.successBox {
position: absolute;
background-color: white;
transition-duration: .5s;
opacity: 0;
}
.copied {
opacity: 1;
}
#couponCode::selection {
background-color: transparent;
}
.eatsbtn {
background: #444;
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
height: 2.5rem;
width: 2.5rem;
border-radius: 50%;
margin-left: 0.5rem;
font-size: 0.6rem;
padding: 0;
}
#couponCode .btn:focus {
outline: none;
}
</style>
<div class="couponWrap">
<small class="title">Ubereats</small>
<div class="successBox">コピーしました。</div>
<span id="couponCode">ABCDD</span>// クーポンコードはここ
<button id="eatsBtn" class="eatsbtn">
Copy
</button>
</div>
<script>
document.querySelector('#eatsBtn').addEventListener("click", () => {
const couponCode = document.querySelector('#couponCode');
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(couponCode);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
document.querySelector('.successBox').classList.add('copied');
let timer = setTimeout(() => {
document.querySelector('.successBox').classList.remove('copied');
}, 3000);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment