Skip to content

Instantly share code, notes, and snippets.

@cangoektas

cangoektas/index.html

Created January 11, 2020 11:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cangoektas/d65e8def8d08d12166f7ea6a3e6db452 to your computer and use it in GitHub Desktop.
Save cangoektas/d65e8def8d08d12166f7ea6a3e6db452 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/fejaginano
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
body {
margin: 0;
}
button {
font-size: 100%;
border: none;
background: inherit;
cursor: pointer;
}
#rect {
width: 256px;
height: 256px;
background: indigo;
}
#action-bar {
width: 100%;
height: 40px;
display: flex;
justify-content: flex-end;
background: yellow;
}
#btn-drag {
font-size: 24px;
line-height: 40px;
background: red;
color: white;
}
#dragged-rect {
width: 100px;
height: 100px;
background: transparent;
border: 2px solid red;
}
</style>
</head>
<body>
<div id="dragged-rect"></div>
<div id="rect">
<div id="action-bar">
<button id="btn-drag">・</button>
</div>
</div>
<script id="jsbin-javascript">
var dragBtn = document.querySelector("#btn-drag");
console.log(dragBtn)
</script>
<script id="jsbin-source-css" type="text/css">body {
margin: 0;
}
button {
font-size: 100%;
border: none;
background: inherit;
cursor: pointer;
}
#rect {
width: 256px;
height: 256px;
background: indigo;
}
#action-bar {
width: 100%;
height: 40px;
display: flex;
justify-content: flex-end;
background: yellow;
}
#btn-drag {
font-size: 24px;
line-height: 40px;
background: red;
color: white;
}
#dragged-rect {
width: 100px;
height: 100px;
background: transparent;
border: 2px solid red;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var dragBtn = document.querySelector("#btn-drag");
console.log(dragBtn)</script></body>
</html>
Raw
jsbin.fejaginano.css
body {
margin: 0;
}
button {
font-size: 100%;
border: none;
background: inherit;
cursor: pointer;
}
#rect {
width: 256px;
height: 256px;
background: indigo;
}
#action-bar {
width: 100%;
height: 40px;
display: flex;
justify-content: flex-end;
background: yellow;
}
#btn-drag {
font-size: 24px;
line-height: 40px;
background: red;
color: white;
}
#dragged-rect {
width: 100px;
height: 100px;
background: transparent;
border: 2px solid red;
}
Raw
jsbin.fejaginano.js
var dragBtn = document.querySelector("#btn-drag");
console.log(dragBtn)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment