Add delete button to choices.
This commit is contained in:
parent
3297c70db4
commit
e461a0a677
3 changed files with 18 additions and 7 deletions
|
|
@ -11,6 +11,7 @@
|
|||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<!-- JAVASCRIPT -->
|
||||
<script src="./js/delete_choice.js"></script>
|
||||
<script src="./js/add_choice.js"></script>
|
||||
<script src="./js/choosing.js"></script>
|
||||
</head>
|
||||
|
|
@ -19,6 +20,7 @@
|
|||
<div class="choice">
|
||||
<input type="text" class="left" placeholder="Choice Name">
|
||||
<input class="right" type="text" placeholder="Choice Weighting">
|
||||
<button class="delete" onclick="delete_choice(this)">X</button>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -32,6 +34,7 @@
|
|||
<div class="choice">
|
||||
<input class="left" type="text" id="text-in-0" placeholder="Choice Name">
|
||||
<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>
|
||||
</div>
|
||||
|
|
|
|||
3
js/delete_choice.js
Normal file
3
js/delete_choice.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
const delete_choice = (node) => {
|
||||
node.parentElement.parentElement.removeChild(node.parentElement)
|
||||
};
|
||||
19
style.css
19
style.css
|
|
@ -10,25 +10,30 @@ div.container {
|
|||
}
|
||||
|
||||
|
||||
button.delete {
|
||||
width: 10%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
div.line {
|
||||
--margin-height: 15px;
|
||||
height: 2px;
|
||||
background-color: #7289da;
|
||||
margin-top: var(--margin-height);
|
||||
margin-bottom: var(--margin-height);
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input[type="text"] {
|
||||
display: inline-block !important;
|
||||
margin-bottom: 0px;
|
||||
margin-right: 0px;
|
||||
margin-left: 0px;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
/* Move boxes further apart */
|
||||
input[type="text"].left { margin-right: 10%; }
|
||||
input[type="text"].right { margin-left: 10%; }
|
||||
/*input[type="text"].left { margin-right: 10%; }
|
||||
input[type="text"].right { margin-left: 10%; }*/
|
||||
Loading…
Add table
Add a link
Reference in a new issue