Utilizing JavaScript, I dynamically generate a line but struggle to position two balls at both the 1/3 mark from the beginning and end. For reference, please view the image below. I aim to have two balls appear upon pressing enter in the input box. Despite my attempts with append, the solution has eluded me thus far. Below is the HTML, CSS, and JS code for this task. Any assistance would be greatly appreciated. Thank you in advance.
https://i.sstatic.net/sgp33.png
html:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="code.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="code_js.js"></script>
</head>
<body>
<div id = "output">
</div>
<div id = "user">
<input type="text" id="input"><br><br>
</div>
</body>
</html>
css:
.deco {
border-bottom: 1px solid black;
width: 120px;
margin-left:0px;
margin-bottom:10px;
z-index: 2;
position: relative;
display: block;
margin-right: 20px;
}
#output {
width: 300px;
height: 200px;
position:absolute;
float:left;
}
.line {
width: 125px;
height: 80px;
float:left;
margin-right: 20px;
}
#user {
position:relative;
z-index:99;
top:50px;
}
#ball{
width: 10px;
height: 10px;
background: #000000;
border: 2px solid #ccc;
border-radius: 50%;
}
js:
$(document).ready(function() {
make();
$("#input").keyup(function(event){
if(event.keyCode == 13){
//$('#hr1').css("border-bottom-color", "red");
/*how to put the ball on the line*/
}
});
});
function make() {
var one = document.createElement('div');
one.className = "line";
var hr = document.createElement('hr');
hr.className = "deco";
hr.id = "hr" + 1;
one.append(hr);
$('#output').append(one);
}