The idea: I am trying to simulate a shop system. By clicking on items the users shows that he is interested in stuff like that and gets more like it the next time he visits the website. I want to achieve something similar only without things to buy, but with colors. You get random colors. If you 'like' red colors you get random ones but more red than usual.
So far in theory. Practically I made cookies for r,g and b with the starting values 1.0. Each time one of the colors is clicked the value rises +0.1 and the others go down -0.1. But how can take the numbers into account?
This is my Javascript so far:
var r = getCookie("r");
var g = getCookie("g");
var b = getCookie("b");
if (r = ""){
setCookie("r",1.0,365);
setCookie("g",1.0,365);
setCookie("b",1.0,365);
}
init();
function init(){
var colorboxes = document.getElementsByClassName("mycolorbox");
[].forEach.call(colorboxes,function(entry){
var sr = Math.round((Math.random() * (255 - 1) + 1));
var sg = Math.round((Math.random() * (255 - 1) + 1));
var sb = Math.round((Math.random() * (255 - 1) + 1));
entry.style.backgroundColor = "rgba("+sr+","+sg+","+sb+",0.8)";
});
}
$(document).click(function(event) {
var clickedObj = $(event.target);
if (clickedObj[0].className.indexOf("likebox") > -1) {
clickedObj[0].style.Color = "red";
var rgb = clickedObj[0].parentNode.style.backgroundColor.match(/\d+/g);
console.log(rgb);
console.log(clickedObj[0].className);
console.log("rot: "+rgb[0]+" gruen: "+rgb[1]+" blau: "+rgb[2]);
if (rgb[0] >= rgb[1] && rgb[0] >= rgb[2]) {
alert("red");
setCookie("r",r-0.1,365)
} else if (rgb[1] >= rgb[0] && rgb[1] >= rgb[2]) {
alert("green");
setCookie("g",g-0.1,365)
} else if (rgb[2] >= rgb[1] && rgb[2] >= rgb[0]) {
alert("blue");
setCookie("b",b-0.1,365)
}
}
});
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split('; ');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}