Oliver/Weighted-RNG
0
0
Fork 0
Code Issues Activity

Add delete button to choices.

Browse source
This commit is contained in:
Tyler-A 2019-09-10 20:49:07 -06:00
parent 3297c70db4
commit e461a0a677
3 changed files with 18 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

3
index.html
View file

@ -11,6 +11,7 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<!-- JAVASCRIPT --> <!-- JAVASCRIPT -->
<script src="./js/delete_choice.js"></script>
<script src="./js/add_choice.js"></script> <script src="./js/add_choice.js"></script>
<script src="./js/choosing.js"></script> <script src="./js/choosing.js"></script>
</head> </head>
@ -19,6 +20,7 @@
<div class="choice"> <div class="choice">
<input type="text" class="left" placeholder="Choice Name"> <input type="text" class="left" placeholder="Choice Name">
<input class="right" type="text" placeholder="Choice Weighting"> <input class="right" type="text" placeholder="Choice Weighting">
<button class="delete" onclick="delete_choice(this)">X</button>
<div class="line"></div> <div class="line"></div>
</div> </div>
</template> </template>
@ -32,6 +34,7 @@
<div class="choice"> <div class="choice">
<input class="left" type="text" id="text-in-0" placeholder="Choice Name"> <input class="left" type="text" id="text-in-0" placeholder="Choice Name">
<input class="right" type="text" id="weight-in-0" placeholder="Choice Weighting"> <input class="right" type="text" id="weight-in-0" placeholder="Choice Weighting">
<button class="delete" onclick="delete_choice(this)">X</button>
<div class="line"></div> <div class="line"></div>
</div> </div>
</div> </div>

3
js/delete_choice.js Normal file
View file

@ -0,0 +1,3 @@
const delete_choice = (node) => {
node.parentElement.parentElement.removeChild(node.parentElement)
};

19
style.css
View file

@ -10,25 +10,30 @@ div.container {
} }
button.delete {
width: 10%;
margin: 0 auto;
}
div.line { div.line {
--margin-height: 15px;
height: 2px;
background-color: #7289da; background-color: #7289da;
margin-top: var(--margin-height); margin-bottom: 15px;
margin-bottom: var(--margin-height); margin-top: 15px;
height: 2px;
} }
input[type="text"] { input[type="text"] {
display: inline-block !important; display: inline-block !important;
margin-bottom: 0px;
margin-right: 0px; margin-right: 0px;
margin-left: 0px; margin-left: 0px;
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; width: 40%;
} }
/* Move boxes further apart */ /* Move boxes further apart */
input[type="text"].left { margin-right: 10%; } /*input[type="text"].left { margin-right: 10%; }
input[type="text"].right { margin-left: 10%; } input[type="text"].right { margin-left: 10%; }*/