-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
executable file
·110 lines (86 loc) · 3.8 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
"use strict";
function rcgen() {
/* Catch input from colour picker */
function pickTheCol() {
var initCol = document.getElementById("pickcol").value;
var pickCol = document.querySelector("#pickcol");
pickCol.value = initCol;
pickCol.select();
return pickCol;
}
window.addEventListener("load", pickTheCol, false);
/* Reset colour picker */
function delTheCol() {
var delCol = document.querySelector("#pickcol");
delCol.value = "#000000";
}
window.addEventListener("load", delTheCol, false);
/* Generate two colours and a degrees number for the random gradient */
function gradient() {
function randcol() {
var hx = "#" + (Math.random().toString(16) + "000000").substring(2,8);
return hx;
}
// The colours:
var chooseColour = pickTheCol();
// colour one, random if no selected from col.picker
if (chooseColour.value !== "#000000" ) {
var fromcolour = chooseColour.value;
} else {
var fromcolour = randcol();
}
//color two always random
var tocolour = randcol();
// Degrees:
var degrees = Math.round( Math.random() * 360 );
if ( 90 - degrees < 0 ) { // calculate degrees for old browser vendor
var obdegrees = 450 - degrees;
} else {
obdegrees = 90 - degrees;
}
// Get the background colour
var cgradient = "linear-gradient(" + degrees + "deg, " + fromcolour + ", " + tocolour + ")";
return [fromcolour, tocolour, degrees, obdegrees, cgradient];
}
/* Assign function returns to variables */
var getGradient = gradient();
var fromCol = getGradient[0];
var toCol = getGradient[1];
var nDegrees = getGradient[2];
var nObdegrees = getGradient[3];
var bggradient = getGradient[4];
document.body.style.background = bggradient;
/* Assign strings to variables for the "Show CSS code" */
function uglyFunction() {
var cssclass = "<span class='StorageClass'>background</span>: ";
var cssattr = "<span class='cssFunctionName'>linear-gradient</span>(";
var oldBrowsers, oldWebkit, oldMoz, oldOpera, modernBrowsers, getCssGradient;
oldBrowsers = cssclass + fromCol + "; <span class='Comment'>/* Fallback for old browsers*/</span>";
oldWebkit = cssclass + "<span class='Comment'>-webkit-</span>" + cssattr + nObdegrees + "<span class='Constant'>deg</span>, " + fromCol + ", " + toCol + "); <span class='Comment'>/* Old Webkit*/</span>";
oldMoz = cssclass + "<span class='Comment'>-moz-</span>" + cssattr + nObdegrees + "<span class='Constant'>deg</span>, " + fromCol + ", " + toCol + "); <span class='Comment'>/* Old Firefox */</span>";
oldOpera = cssclass + "<span class='Comment'>-o-</span>" + cssattr + nObdegrees + "<span class='Constant'>deg</span>, " + fromCol + ", " + toCol + "); <span class='Comment'>/* Opera */</span>";
modernBrowsers = cssclass + cssattr + nDegrees + "<span class='Constant'>deg</span>, " + fromCol + ", " + toCol + ");";
getCssGradient = oldBrowsers + "<br />" + oldWebkit + "<br />" + oldMoz + "<br />" + oldOpera + "<br />" + modernBrowsers;
return getCssGradient;
}
document.getElementById("getcss").innerHTML = uglyFunction();
document.getElementById("delcol").addEventListener("click", delTheCol);
}
/* Show CSS code */
function showHideCss(){
var preButton = document.getElementById("button_show");
var preBox = document.getElementById("getcss");
preButton.addEventListener("click", function (event) {
if (preBox.style.display === "block") {
preBox.style.display = "none";
preButton.innerHTML = "Show CSS code";
} else {
preBox.style.display = "block";
preButton.innerHTML = "Hide CSS code";
}
}
);
}
document.onload = showHideCss();
document.onload = rcgen();
document.getElementById("button_gen").addEventListener("click", rcgen );