below you will find what the output currently looks like.
I am trying to make the green and yellow extend to the side and meet in the middle (not covering/over the red of the nameplate button. I might not have explained that well, so if you need more information let me know.
The code I have can be viewed and tested in the snippet below. I gave a simple example data line I added to the top of the javascript section.
var interests = document.getElementById("interests")
var data = '[{"firstName" : "Jeff", "lastName" : "Relikeson", "interests" : "3", "pickupLine" : "1"}, {"firstName" : "Harry", "lastName" : "Jackson", "interests" : "2", "pickupLine" : "1"}, {"firstName" : "Bob", "lastName" : "Greene", "interests" : "coding", "pickupLine" : "1"}, {"firstName" : "Jay", "lastName" : "Ding", "interests" : "coding", "pickupLine" : "1"}, {"firstName" : "Jay", "lastName" : "Ding", "interests" : "coding", "pickupLine" : "1"}, {"firstName" : "Brendon", "lastName" : "Hairson", "interests" : "1", "pickupLine" : "1"}]';
load()
function load() {
setTimeout( load, 30);
var dataParsed = JSON.parse(data);
var interestsVar = document.getElementById("interests").innerHTML
var result = dataParsed.filter(x => x.interests === interestsVar);
var matchesID = document.getElementById("matches")
for (var i = 0; i < result.length; i++) {
var buttonCreate = document.createElement("button");
buttonCreate.innerHTML = result[i].firstName + " " + result[i].lastName + ";" + "<p class='greenColor'>" + result[i].interests + "</p>" + "Pickup Line:" + " " + result[i].pickupLine;
if (document.getElementById("matches").innerHTML.includes(buttonCreate.innerHTML)) {
} else {
var br = document.createElement("br")
var br2 = document.createElement("br")
var br3 = document.createElement("br")
var div = document.createElement("div")
var yesIcon = document.createElement("i")
var noIcon = document.createElement("i")
yesIcon.innerHTML = "<i class='fa fa-check-square-o fa-5x' aria-hidden='true'></i>"
noIcon.innerHTML = "<i class='fa fa-ban fa-5x' aria-hidden='true'></i>"
var uniqueID = Date.now();
div.id = uniqueID;
div.className = "wrapper"
const matchedIDs = [1];
matchedIDs.push (uniqueID);
console.log(matchedIDs)
matchesID.appendChild(br)
matchesID.appendChild(br2)
matchesID.appendChild(div)
var divID = document.getElementById(uniqueID)
divID.appendChild(yesIcon)
divID.appendChild(buttonCreate)
divID.appendChild(noIcon)
yesIcon.className = "yesIcon"
buttonCreate.className = "matchesDIVs"
noIcon.className = "noIcon"
matchesID.appendChild(br3)
sleep(1);
}
}
}
function buttonCreate() {
var array = JSON.parse(data);
var resultBoxs = document.getElementById("resultBoxs");
for (var i = 0; i < array.length; i++) {
var buttonCreate = document.createElement("button");
buttonCreate.type = "button";
buttonCreate.innerHTML = array[i].firstName + " " + array[i].lastName + "; " + array[i].interests + " " + array[i].pickupLine;
if (resultBoxs.innerHTML.includes(buttonCreate)) {
} else {
var br = document.createElement("br")
var br2 = document.createElement("br")
buttonCreate.className = "contendersList"
resultBoxs.appendChild(buttonCreate)
resultBoxs.appendChild(br);
resultBoxs.appendChild(br2);
}
}
}.matchesDIVs {
box-shadow: 10px 16px 17px -1px #8a2a21;
background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
background-color:#c62d1f;
border-radius:37px;
border:8px solid #d02718;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:1000%;
font-weight:bold;
font-style:italic;
padding:10% 10%;
text-decoration:none;
}
.matchesDIVs:hover {
background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
background-color:#f24437;
}
.matchesDIVs:active {
position:relative;
top:1px;
}
.container {
position: relative;
height: 5000px;
}
.center {
margin: 0;
position: absolute;
left: 50%;
-ms-transform: translate(-50%);
transform: translate(-50%);
}
.greenColor {
color: green;
}
.yesIcon {
background: limegreen;
box-sizing: border-box;
}
.noIcon {
background: gold;
}
.wrapper {
display: flex;
flex-direction: row;
align-items: center
}<html>
<head>
<script type="text/javascript" src="data.json"></script>
<title>Algorithm</title>
<link rel="stylesheet" href="font-awesome-4.7.0\css\font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body onload="load(), buttonCreate()">
<h1 id="interests" class="interests" contenteditable="true">Your interests</h1>
<div id="resultBoxs"></div>
<div class="container">
<div id="matches" class="center"></div>
</div>
<br>
<br>
<button onclick="openAuth()">open Auth</button>
</body>
</html>Let me know if you need anything, thanks. -Josh