Develop Reference

CSS mix-blend-mode + JS

So I have a custom js cursor ( which follows the mouse cursor with a delay ) which has a background color of #000 and mix-blend-mode set to difference. My body background color and text is set to #fff. Now, I have a p tag with the text "HELLO" which I want to be visible just the words "H" and "O", so I created a span which color's is set to #000. When I hover over the P tag, because of the mix-blend-mode, I can see the "ELL" words as I wanted, but the words "H" and "O" get " invisible ". How can I make them be visible when the cursor gets over it? ( just the part of each word which is being hovered by the cursor, not the entire word, IF the cursor doesn't cover the entire word )
Is there any solution? I tryed to change the color of the "H" and "O" on mouseenter/mouseleave but it doesn't work as expected.
const cursor = document.querySelector('.cursor')
const wuc = document.querySelectorAll('.wuc')
document.addEventListener('mousemove', e => {
cursor.setAttribute('style', 'top: ' + e.clientY+'px; left: '+e.clientX+'px;')
})
wuc.forEach((wuc) => {
wuc.addEventListener('mouseenter', () => {
wuc.style.color = '#fff'
})
wuc.addEventListener('mouseleave', () => {
wuc.style.color = '#000'
})
})
body {
background-color: #fff;
color: #fff;
}
.cursor {
width: 5vw;
height: 5vw;
transform: translate(-2.5vw, -2.5vw);
position: fixed;
transition-duration: 200ms;
transition-timing-function: ease-out;
background-color: #000;
border-radius: 50%;
mix-blend-mode: difference;
}
p {
margin-left: 30vw;
margin-top: 40vh;
}
.wuc {
color: #000;
}
<div class="cursor"></div>
<p class="container">
<span class="wuc">H</span>ELL<span class="wuc">O</span>
</p>

I would color the text using a radial-gradient that follow the same position of your custom cursor
const cursor = document.querySelector('.cursor')
document.addEventListener('mousemove', e => {
cursor.setAttribute('style', 'top: ' + e.clientY + 'px; left: ' + e.clientX + 'px;');
document.body.setAttribute('style', '--x: ' + e.clientX + 'px;--y:' + e.clientY + 'px;');
})
body {
background-color: #fff;
color: #fff;
}
.cursor {
width: 5vw;
height: 5vw;
transform: translate(-2.5vw, -2.5vw);
position: fixed;
transition-duration: 200ms;
transition-timing-function: ease-out;
background-color: #000;
border-radius: 50%;
mix-blend-mode: difference;
}
p {
margin-left: 30vw;
margin-top: 40vh;
}
.wuc {
background:
radial-gradient(farthest-side, #fff 99.5%, #000 100%) calc(var(--x,0px) - 2.5vw) calc(var(--y,0px) - 2.5vw)/5vw 5vw fixed no-repeat,
#000;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color: transparent;
color:transparent;
}
<div class="cursor"></div>
<p class="container">
<span class="wuc">H</span>ELL<span class="wuc">O</span>
</p>

text as background. need 2nd background, need expert

My text is like background (body image) using
-webkit-background-clip: text;
-webkit-text-fill-color:transparent;
I would like to add moving element like on example below, but as you see if text color is set to yellow, everything is visible, but when text is set same as background image you wont see output.
Here is my HTML
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height: 100px;
position: absolute;
background-color: red;
}
#animate{
position:relative;
text-align:center;
-webkit-background-clip: text;
-webkit-text-fill-color:transparent;
z-index:20;}
#normal{
position:relative;
color:yellow;
z-index:22;
text-align:center;}
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id ="myContainer">
<div id ="myAnimation"></div>
<p id="animate">some text with background color</p>
<p id="normal">some text with yellow color</p>
</div>
My Javascript
<script>
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
var id = setInterval(frame, 10);
var len = 50;
var hei = 100;
function frame() {
if (pos == 80 && len <250) {
pos=80;
len++;
elem.style.width = len + "px";
}
else if (len >249) {
hei--;
elem.style.height = hei + "px";
}
else {
pos++;
elem.style.left = pos + 'px';
}
}
}
</script>
In example I have set the background color as yellow and box as red. in My main project i have full HD img and around 50 shapes to create animated text. Main problem is that when box(shape) cover text with id #animate the text taking box background when it should stay with main body background(img)

job done xD example pmwebdev.co.uk
code for background:
body{
background-image: url("bg.png");
background-size: cover;
background-attachment: fixed;
}
code for text:
#slide1text{
text-decoration-style: bold;
margin: 0px;
font-size: 30px;
text-align: center;
background-image: url("bg.png");
background-size: cover;
background-attachment: fixed;
-webkit-background-clip: text;
-webkit-text-fill-color:transparent;
color: red;
position: relative;
z-index: 20;
}

Single line with multiple colors based on time in using jquery

I need to generate a graph like I have shown here
Single line with multiple colors over time
The X axis will be time series . Can anyone suggest a JQuery plugin to generate such a graph ?
Thanks

Try below chart and change as per your requirement
var graph = (function(){
var urgentTitle = "Urgent",
$graph = $('.graph'),
$barContainer = $graph.find('.graph-bars'),
$markers = $('.markers'),
$graphTitles = $('.graph-titles'),
max = null,
limit = null;
var init = function(data){
max = getMaxValue(data);
limit = max + Math.ceil(max * 0.05);
$barContainer.empty();
$markers.empty();
$graphTitles.empty();
$('#urgent-title').text(urgentTitle);
setMarkers($markers, limit);
if (data.length) buildTeamRows($barContainer, $graphTitles, data, limit);
else buildUserRows($barContainer, $graphTitles, data, limit);
};
// return a values percentage in relation to the limit
var getPercentage = function(value, limit) {
return value / limit * 100 + "%";
};
var getMaxValue = function(data) {
var largest = 0;
var sum = 0;
if (data.length) {
for (x=0;x<data.length;x++) {
sum = data[x].active + data[x].newCount + data[x].newFromBatch;
if (sum > largest) {
largest = sum;
}
}
} else {
largest = Math.max(data.active, data.newCount, data.newFromBatch);
}
return largest;
};
var setMarkers = function($selector, limit) {
var increment = limit / 5;
var value = 0;
var values = [];
var leftOffset = 0;
// Create array of marker values
while(value < limit) {
values.push(Math.round(value));
value += increment;
}
values.push(limit);
for (var x=0;x<values.length;x++) {
var $markerTmpl = $('<div class="marker"><span class="marker-number"></span></div>');
leftOffset = getPercentage(values[x], limit);
$markerTmpl.css({ 'left': leftOffset }).find('.marker-number').text(values[x]);
$selector.append($markerTmpl);
}
$selector.addClass('loaded');
};
//Build each individual graph based on selector, data, and max value
var buildTeamRows = function($barSelector, $titleSelector, data, limit) {
var percentage;
// Loop through data
for (var x=0;x<data.length;x++) {
var titleClass = null;
var titleCount = 0;
var $graphBar = $('<div class="graph-bar"></div>')
.attr('id', 'userGraph-' + data[x].userId);
$barSelector.append($graphBar);
// Render each fragment
renderFragment($graphBar, 'urgent', data[x].urgent, limit);
renderFragment($graphBar, 'active', data[x].active - data[x].urgent, limit);
renderFragment($graphBar, 'newCount', data[x].newCount, limit);
renderFragment($graphBar, 'newFromBatch', data[x].newFromBatch, limit);
// Calculate largest fragment value
var largest = 0;
$.each(data[x], function(index, value){
if ($.isNumeric(value)){
if (value > largest) {
largest = value;
titleClass = index;
titleCount = value;
}
}
});
// If Active is greatest value, Check if urgent portion of active is greater than active
if (titleClass === 'active' && data[x].urgent >= (data[x].active - data[x].urgent)) {
titleClass = 'urgent';
titleCount = data[x].urgent;
}
// Render row meta-data
var $titleSet = $('<div class="graph-title"><div class="graph-title-name"></div><div class="graph-title-count"></div></div>');
$titleSet.find('.graph-title-name').text(data[x].userName);
$titleSet.find('.graph-title-count').addClass(titleClass).text(titleCount);
$titleSelector.append($titleSet);
}
};
var renderFragment = function($selector, type, value, limit) {
var $rowFragmentTmpl = $('<div class="graph-bar-fragment"></div>');
var percentage = getPercentage(value, limit);
$rowFragmentTmpl.attr('data-value', value);
$selector.append($rowFragmentTmpl.addClass(type));
setTimeout(function(){
$rowFragmentTmpl.css({'width': percentage});
}, 1);
};
var buildUserRows = function($barSelector, $titleSelector, data, limit) {
renderUserRow($barSelector, $titleSelector, 'urgent', data.urgent, limit, urgentTitle);
renderUserRow($barSelector, $titleSelector, 'active', data.active, limit, 'Active');
renderUserRow($barSelector, $titleSelector, 'newCount', data.newCount, limit, 'New');
renderUserRow($barSelector, $titleSelector, 'newFromBatch', data.newFromBatch, limit, 'New From Batch');
};
var renderUserRow = function($barSelector, $titleSelector, type, value, limit, title) {
var percentage = getPercentage(value, limit);
var $graphBar = $('<div class="graph-bar graph-bar-single"></div>').attr({'id' : 'userGraph-' + type, 'data-value': value});
$barSelector.append($graphBar);
setTimeout(function(){
$graphBar.css({'width': percentage}).addClass(type);
},1);
var $titleSet = $('<div class="graph-title"><div class="graph-title-name"></div><div class="graph-title-count"></div></div>');
$titleSet.find('.graph-title-name').text(title);
$titleSet.find('.graph-title-count').addClass(type).text(value);
$titleSelector.append($titleSet);
};
return {
init: init
}
})();
// Document ready
$(function(){
// Dummy Data
var dataSet = [
{
active: 5,
newCount: 4,
newFromBatch: 40,
urgent: 1,
userId: "molly",
userName: "Molly"
},
{
active: 21,
newCount: 2,
newFromBatch: 5,
urgent: 10,
userId: "jack",
userName: "Jack"
},
{
active: 25,
newCount: 4,
newFromBatch: 3,
urgent: 20,
userId: "tracy",
userName: "Tracy"
},
{
active: 10,
newCount: 24,
newFromBatch: 4,
urgent: 2,
userId: "nolan",
userName: "Nolan"
},
];
var dataSingle = {
active: 25,
newCount: 4,
newFromBatch: 3,
urgent: 20,
userId: "ryan",
userName: "Ryan Scofield"
};
// Initialize Graph
graph.init(dataSet);
$('#teamGraph').on('click', function(e){
graph.init(dataSet);
});
$('#userGraph').on('click', function(e){
graph.init(dataSingle);
});
});
body {
padding: 20px;
}
/* Opportunity Graphs */
.graph-titles {
display: inline-block;
width: 200px;
vertical-align: top;
margin: 20px 0 20px;
padding: 0;
}
.graph-title {
margin-bottom: 1em;
width: 100%;
line-height: 30px;
overflow: hidden;
}
.graph-title-name {
float: left;
}
.graph-title-count {
float: right;
padding: 0 10px;
height: 30px;
border-radius: 20px;
color: #fff;
}
.graph {
display: inline-block;
position: relative;
margin: 20px 20px 20px 10px;
padding: 0;
width: 500px;
}
.graph-bar {
display: block;
overflow: hidden;
margin-bottom: 1em;
}
.graph-bar-fragment {
width: 0;
height: 30px;
float: left;
background-color: #ccc;
-webkit-transition: width .4s ease-in;
}
.graph-bar-single {
height: 30px;
background-color: #ccc;
-webkit-transition: width .4s ease-in;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.graph-bar-fragment:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.urgent {
background: #c9575e;
background: -moz-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c9575e), color-stop(100%, #c12e41));
background: -webkit-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: -o-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: -ms-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: linear-gradient(to bottom, #c9575e 0%, #c12e41 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9575e', endColorstr='#c12e41',GradientType=0 );
}
.active {
background: #d6ac6e;
background: -moz-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d6ac6e), color-stop(100%, #cc9e52));
background: -webkit-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: -o-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: -ms-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: linear-gradient(to bottom, #d6ac6e 0%, #cc9e52 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6ac6e', endColorstr='#cc9e52',GradientType=0 );
}
.newCount {
background: #6db683;
background: -moz-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6db683), color-stop(100%, #569b6d));
background: -webkit-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: -o-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: -ms-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: linear-gradient(to bottom, #6db683 0%, #569b6d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db683', endColorstr='#569b6d',GradientType=0 );
}
.newFromBatch {
background: #7f8cc4;
background: -moz-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7f8cc4), color-stop(100%, #6477ac));
background: -webkit-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: -o-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: -ms-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: linear-gradient(to bottom, #7f8cc4 0%, #6477ac 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f8cc4', endColorstr='#6477ac',GradientType=0 );
}
.markers {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .4s ease-in;
}
.markers.loaded {
visibility: visible;
opacity: 1;
}
.marker {
-webkit-box-sizing: border-box;
position: absolute;
bottom: -2em;
top: 0;
border-left: 2px solid #e6e6e6;
}
.marker-number {
position: absolute;
padding-left: .5em;
bottom: 0;
text-align: right;
}
.marker:last-child .marker-number {
right: 0;
padding-left: 0;
padding-right: .5em;
}
.graph-key {
margin: 20px 0 0 210px;
}
.graph-key-item {
display: inline-block;
margin-right: 1.5em;
}
.graph-key-dot {
display: inline-block;
width: 1em;
height: 1em;
border-radius: 50%;
margin-right: .5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="graph-container">
<div class="graph-titles">
<!-- Populated -->
</div>
<div class="graph">
<div class="graph-bars">
<!-- Populated -->
</div>
<div class="markers">
<!-- Populated -->
</div>
</div>
<div class="graph-key">
<div class="graph-key-item">
<span class="graph-key-dot urgent"></span><span id="urgent-title">Urgent</span>
</div>
<div class="graph-key-item">
<span class="graph-key-dot active"></span><span>Active</span>
</div>
<div class="graph-key-item">
<span class="graph-key-dot newCount"></span><span>New</span>
</div>
<div class="graph-key-item">
<span class="graph-key-dot newFromBatch"></span><span>New From Batch</span>
</div>
</div>
</div>
<button id="teamGraph">Team Graph</button>
<button id="userGraph">User Graph</button>

Try below chart and change value as per your requirement
var chart = new Chartist.Bar('#chart01',
{
labels: ['C-Level', 'Executive', 'Director', 'Manager', 'Professional', 'Other'],
series: [
[3,9,5,8,4,2],
[2,8,4,19,25,6],
[2,16,6,53,57,12]
]
},
{
stackBars: true,
seriesBarDistance: 10,
reverseData: false,
horizontalBars: true,
low: 0,
fullWidth: true,
chartPadding: {
right: 30,
left: 30
},
axisX: {
showGrid: true,
showLabel: true
},
axisY: {
showGrid: false,
showLabel: true,
offset: 60,
onlyInteger: true,
labelInterpolationFnc: function(value) {
return value;
}
}
});
$('#chart01').on('click', '.ct-chart-bar .ct-labels foreignobject', function(evt) {
var index = $(this).index();
var label = $(this).find('span.ct-label').text();
graphClicked(index, label, null);
});
$('#chart01').on('mouseover', '.ct-chart-bar .ct-series-a line, .ct-chart-bar .ct-series-b line, .ct-chart-bar .ct-series-c line', function(evt) {
var index = $(this).index();
$(this).closest('.ct-chart-bar').find('.ct-labels foreignobject:nth-child('+(index+1)+') span').addClass('hover');
});
$('#chart01').on('mouseleave', '.ct-chart-bar .ct-series-a line, .ct-chart-bar .ct-series-b line, .ct-chart-bar .ct-series-c line', function(evt) {
var index = $(this).index();
$(this).closest('.ct-chart-bar').find('.ct-labels foreignobject:nth-child('+(index+1)+') span').removeClass('hover');
});
$('#chart01').on('click', '.ct-chart-bar .ct-series-a line, .ct-chart-bar .ct-series-b line, .ct-chart-bar .ct-series-c line', function(evt) {
var index = $(this).index();
var label = $(this).closest('.ct-chart-bar').find('.ct-labels foreignobject:nth-child('+(index+1)+') span').text();
var value = $(this).attr('ct:value');
graphClicked(index, label, value);
});
function graphClicked(index, label, value) {
console.log('---');
console.log('index:', index);
console.log('label:', label);
alert('Index: '+index+', Label: '+label+', Value: '+value);
}
html {
background-color: lightgrey;
}
.chart-wrapper {
width: 50%;
margin: 1rem auto;
background-color: white;
padding: 0.1rem 0.5rem 1rem 0.5rem;
}
h3 {
text-align: center;
}
h4 {
text-align: center;
}
.center-link {
text-align: center;
display: block;
font-size: 0.7rem;
}
.ct-line {
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
}
.ct-series-a .ct-line {
animation: dash 5s linear forwards;
animation-delay: 1s;
}
.ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-bar {
stroke: #5b9bd5;
}
.ct-series-b .ct-line {
animation: dash 5s linear forwards;
animation-delay: 2s;
}
.ct-series-b .ct-line, .ct-series-b .ct-point, .ct-series-b .ct-bar {
stroke: #ed7d31;
}
.ct-series-c .ct-line {
animation: dash 5s linear forwards;
animation-delay: 3s;
}
.ct-series-c .ct-line, .ct-series-c .ct-point, .ct-series-c .ct-bar {
stroke: #a5a5a5;
}
.chart-title {
text-align: center;
color: #555;
margin-bottom: 0.5rem;
}
.key {
font-size: 0.7rem;
color: #555;
padding: 0 30px 0 90px;
}
.key .key-element {
width: 32%;
display: inline-block;
padding-left: 22px;
box-sizing: border-box;
position: relative;
}
.key .key-element:before {
content: "";
display: block;
width: 16px;
height: 16px;
position: absolute;
top: -2px;
left: 0;
}
.key .key-element.key-series-a:before {
background-color: #5b9bd5;
}
.key .key-element.key-series-b:before {
background-color: #ed7d31;
}
.key .key-element.key-series-c:before {
background-color: #a5a5a5;
}
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {
display: block;
position: relative;
left: -50%;
text-align: center;
}
.ct-chart-bar .ct-labels foreignobject {
cursor: pointer;
}
.ct-chart-bar .ct-labels foreignobject span {
text-decoration: none;
}
.ct-chart-bar .ct-labels foreignobject span:hover, .ct-chart-bar .ct-labels foreignobject span.hover {
text-decoration: underline;
}
.ct-chart-bar .ct-series line {
cursor: pointer;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.css" rel="stylesheet" />
<div class="chart-wrapper">
<h4>Click on the bars to get their index, label and value</h4>
<div id="chart01" class="ct-chart ct-chart01 ct-octave"></div>
<div class="key">
<div class="key-element key-series-a">Account Topic Score</div>
<div class="key-element key-series-b">#Unique Contacts</div>
<div class="key-element key-series-c">#Interactions</div>
</div>
</div>

Lottery game, add css class based on numerical range

I'm making a lottery random number generator and have it working, all I want to do is change the background colour of the ball varying on what number range its called between. The second block of code is what I have come up with so far.
For example
o 1-9: White
o 10-19: Blue
o 20-29: Ping,
o 30-39: Green,
o 40-49: Yellow
<!DOCTYPE html>
<head>
<!-- meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>NRONLINE - Buckinghamshire Web Design, Digital Marketing Workshops and Kofax Consultancy</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body {
background: #444;
font-family: sans-serif;
font-size: 18px;
font-weight: 100;
}
ul {
position: absolute;
padding: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
list-style-type: none;
width: 690px;
height: 100px;
}
ul li {
float: left;
width: 100px;
height: 100px;
border-radius: 50px;
margin-right: 10px;
color: white;
text-align: center;
line-height: 100px;
font-size: 36px;
}
ul li:nth-child(5n) {
margin-right: 40px;
}
.ball-placeholder {
background: #222222;
background: -moz-linear-gradient(-45deg, #222222 0%, black 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #222222), color-stop(100%, black));
background: -webkit-linear-gradient(-45deg, #222222 0%, black 100%);
background: -o-linear-gradient(-45deg, #222222 0%, black 100%);
background: -ms-linear-gradient(-45deg, #222222 0%, black 100%);
background: linear-gradient(135deg, #222222 0%, black 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#000000',GradientType=1 );
}
.next-ball, .play-again {
position: absolute;
right: 0;
left: 0;
margin: auto;
border: 0;
color: white;
}
.next-ball {
bottom: 20px;
width: 100px;
height: 40px;
font-size: 16px;
background: #7ac9ed;
}
.play-again {
display: none;
bottom: 20px;
width: 200px;
height: 80px;
font-size: 24px;
background: #d74d2f;
}
.white-ball {
background: #fff;
color:#101010;
}
.blue-ball {
background: #99ccff;
color:#101010;
}
.pink-ball {
background: #ffccff;
color:#101010;
}
.green-ball {
background: #00cc66;
color:#101010;
}
.yellow-ball {
background: #fac600;
color:#101010;
}
</style>
</head>
<body role="document">
<ul class="ball-placeholders">
<li class="ball-placeholder"></li>
<li class="ball-placeholder"></li>
<li class="ball-placeholder"></li>
<li class="ball-placeholder"></li>
<li class="ball-placeholder"></li>
<li class="ball-placeholder"></li>
</ul>
<ul class="lottery"></ul>
<button class="next-ball">Next Ball</button>
<button class="play-again">Play Again!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var arr = new Array();
$('.next-ball').on('click', function(){
//generate random number between 1 and 50
var random = Math.floor(Math.random()*50 ) + 1;
// array to store css class references
var classList = ["white-ball", "blue-ball", "pink-ball", "green-ball", "yellow-ball"];
console.log(random);
//if index of random number is less than 50
if( arr.indexOf(random) == -1){
//generate random number
arr.push(random);
//add css class to lottery-ball class relevant to array value range
$('.lottery').append('<li class="lottery-ball ' + classList[Math.floor(random/10)] + '">' + random + '</li>');
}
// if the number already exists ignore and generate a new number
else {
console.log(random);
}
console.log(arr);
//if lottery number calls is greater than 5 then switch button classes and send an alert to the user
if ( $('.lottery').children().length > 5 ) {
$('.next-ball').hide();
$('.play-again').show();
alert('Did You Win?');
}
});
//If once the game is finished the user chooses to play again switch button classes
$('.play-again').on('click', function(){
$('.lottery').children().remove();
arr = [];
$('.next-ball').show();
$('.play-again').hide();
});
</script>
</body>
</html>

Your idea should work, but since the only thing that changes is the class of the li it could be more compact. Here I've stored the class names in an array, and used the first digit of the ball number - Math.floor(random/10) to find the right element. Also your indexOf line had a bug - a return of zero from indexOf means the element was found at the start of the array, so check for -1.
var classList = ["white-ball", "blue-ball", "pink-ball", "green-ball", "yellow-ball"];
if( arr.indexOf(random) == -1){
arr.push(random);
$('.lottery').append('<li class="lottery-ball ' + classList[Math.floor(random/10)] + '">' + random + '</li>');
}

Another alternative could be CSS attribute selectors. We could use the 'starts with' selector ^, which will target all elements whose attribute in question... well, starts with a particular string.
Say we give each li representing a ball a data-* attribute equal to its number. Then we can style their backgrounds like so:
li[data-number^=0] {
/*target numbers less than 10
Need to append 0 in front of numbers <10
for this to work*/
background: white;
}
li[data-number^=1] {
/*target numbers in the teens*/
background: blue;
}
li[data-number^=2] {
/*target numbers in the twenties*/
background:pink;
}
/*...and so on...*/
Then the JS is somewhat simplified to:
if (arr.indexOf(random) == -1) {
arr.push(random);
$('.lottery').append('<li class="lottery-ball" data-number="' + (random < 10 ? '0' : '') + random + '">' + random + '</li>';
}
EDIT: here's a link for other types of attribute selectors.

How can I Disable a Clickable div right after onclick is initiated?

I couldnt find any answers on stack overflow to this specific question. I am trying to use pure javascript ONLY, so please no jquery answers.
So I posted all of my code as a general reference but my problem I believe lies in the javascript section. My question is, how can I make it so that my div "signup" is unclickable right AFTER it is clicked ONCE?
I tried putting a disable statement before frame and fadeOut are called inside the HideLogin() function. I also tried with css pointer-events. Nothing works and everytime I click SignUp, the animations repeat. Thank you in advance for the help.
function HideLogin() {
var login = document.getElementById("login");
var SignUpSheet = document.getElementById("SignUpSheet");
var titlecard = document.getElementById("titlecard");
var signup = document.getElementById("signup");
SignUpSheet.style.display = "block";
titlecard.style.display = "block";
frame(signup);
fadeOut(login);
/*fadeIn(document.getElementById("SignUpSheet"));
fadeIn(document.getElementById("titlecard")); */
}
function frame(signup) {
var pos = 125;
var id = setInterval(function() {
if (pos == 0) {
clearInterval(id);
} else {
pos--;
signup.style.top = pos + 'px';
}
}, 1);
}
function fadeOut(element) {
var op = 1; // initial opacity
var timer = setInterval(function() {
if (op <= 0.1) {
clearInterval(timer);
element.style.display = 'none';
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
}, 20);
}
function fadeIn(element) {
var op = 0.1; // initial opacity
var timer = setInterval(function() {
if (op >= 1) {
clearInterval(timer);
}
element.style.opacity = op;
element.style.display = "block";
op += 0.1;
}, 20);
}
body,
html {
min-height: 100%;
}
body
/* Background handeling*/
{
color: white;
background: url(images/Hunter.jpg) center no-repeat;
background-size: cover;
background-color: #444;
}
/*------------------------------------------------------------- */
#logBox
/*Div that holds two links */
{
position: relative;
//border: 2px solid white;
height: 300px;
width: 300px;
margin-left: 70px;
margin-top: 50px;
}
#login
/* login link */
{
position: absolute;
cursor: pointer;
display: block;
//border: 2px solid white;
background: -webkit-linear-gradient(red, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: papyrus;
font-size: 70px;
color: red;
text-shadow: 2px 2px black;
transition: text-shadow 0.5s ease;
}
#login:hover {
background: -webkit-linear-gradient(white, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 4px 4px black;
}
#signup
/* sign up link */
{
position: absolute;
cursor: pointer;
display: block;
//border: 2px solid white;
background: -webkit-linear-gradient(red, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
top: 125px;
font-family: papyrus;
font-size: 70px;
color: red;
text-shadow: 2px 2px black;
transition: text-shadow 0.5s ease;
}
#signup:hover {
background: -webkit-linear-gradient(white, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 4px 4px black;
}
/*--------------------------------------------------------------- */
/* Div that holds two sheets */
#LogInSheet {
display: none;
}
#LoginTitle {}
#SignUpSheet {
display: none;
}
#SignUpTitle {}
/*--------------------------------------------------------------- */
#titlecard
/*title display */
{
position: absolute;
display: none;
bottom: 0px;
right: 50px;
//border: 2px solid white;
background: -webkit-linear-gradient(white, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 45px;
color: gray;
text-align: center;
font-family: papyrus;
text-shadow: 2px 2px black;
}
<!doctype html>
<html>
<head>
<title>The Prime Legion</title>
<link rel="stylesheet" type="text/css" href="page1.css">
<script type="text/javascript" src="page1.js"></script>
</head>
<body>
<div id="logBox">
<div id="login" onclick="HideSignin()">
Log In
</div>
<div id="signup" onclick="HideLogin()">
Sign Up
</div>
</div>
<div id="LogInSheet">
<div id="LoginTitle">
<p>
<h4>Hello</h4>
</p>
</div>
</div>
<div id="SignUpSheet">
<div id="SignupTitle">
<p>
<h4>Welcome</h4>
</p>
</div>
</div>
<div id="titlecard">
<p>
<h1>The Prime Legion</h1>
</p>
</div>
</body>
</html>

Unless you have a particular need to use <div>s for your buttons, you could change the HTML to use <button> elements instead. That way you could disable it using the disabled attribute and it should prevent any further clicks without having to store and track any additional JavaScript variables.
<button id="signup" onclick="HideLogin()">Sign Up</button>
function HideLogin() {
document.getElementById("signup").disabled = true;
...
}

I would suggest the following:
define a global variable loginCliked=false
then in your HideLogin function:
HideLogin = function(){
if(!loginClicked){
loginClicked=true;
// Do everything else
}
}
So that with the first click it will set loginClicked to true. If you click the button for the second time it does nothing