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

The beginnings.

Browse source
This commit is contained in:
Tyler-A 2019-09-10 01:00:05 -06:00
parent cec2d56eca
commit 4615c296b3
3 changed files with 83 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

39
index.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Weighted Choice Maker</title>
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.css">
<link rel="stylesheet" href="style.css">
<!-- JAVASCRIPT -->
<script src="./js/add_choice.js"></script>
</head>
<body>
<template id="choice-template">
<div class="choice">
<input type="text" class="left" placeholder="Choice Name">
<input class="right" type="text" placeholder="Choice Weighting">
<div class="line"></div>
</div>
</template>
<h1>Weighted Choice Maker</h1>
<div class="container">
<h2>Choices:</h2>
<button onclick="add_choice()">Add New Choice</button>
<br>
<div id="choices">
<div class="choice">
<div class="line"></div>
<input class="left" type="text" id="text-in-0" placeholder="Choice Name">
<input class="right" type="text" id="weight-in-0" placeholder="Choice Weighting">
<div class="line"></div>
</div>
</div>
</div>
</body>
</html>

10
js/add_choice.js Normal file
View file

@ -0,0 +1,10 @@
const add_choice = () => {
let index = document.getElementsByClassName("choice").length;
let choice_div = document.getElementById("choice-template");
let clone = choice_div.content.cloneNode(true);
clone.childNodes[1].childNodes[1].id = `text-in-${index}`;
clone.childNodes[1].childNodes[3].id = `weight-in-${index}`;
document.getElementById("choices").appendChild(clone);
}

34
style.css Normal file
View file

@ -0,0 +1,34 @@
h1, h2, h3 { text-align: center; }
div.container {
text-align: center;
border-radius: 7px;
margin: 5px auto;
padding: 10px;
width: 95%;
}
div.line {
--margin-height: 15px;
height: 2px;
background-color: #7289da;
margin-top: var(--margin-height);
margin-bottom: var(--margin-height);
}
input[type="text"] {
display: inline-block !important;
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
/* Move boxes further apart */
input[type="text"].left { margin-right: 10%; }
input[type="text"].right { margin-left: 10%; }