CSS rules dictate everything's presentation on a page. In fact, HTML does nothing in displaying the page the way you see it. HTML only tells about what certain data on a page should be known as. Even if you do not manually use CSS, it will be computed for you using its defaults, set by the browser.
You can learn about this more in-depth with other tutorials. In this challenge the only CSS changed was about colours.
Part 1 :: Challenge Two
Clue:
Challenge Complete
");
function getRemember() {
if (typeof(Storage) !== "undefined") {
if (localStorage.remc === "false") {
return false;
} else {
return true;
}
} else if (!navigator.cookieEnabled == "false") {
if (getCookie("remc") === "false") {
return false;
} else {
return true;
}
} else {
alert("Please enable cookies for full website functionality");
}
}
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 "";
}
function setDone() {
if (getRemember()) {
if (typeof(Storage) !== "undefined") {
localStorage.setItem("c2", "1");
} else if (!navigator.cookieEnabled == "false") {
setCookie("c2", "1", 10000);
} else {
alert("Please enable cookies for full website functionality");
}
}
}
function getDone() {
if (typeof(Storage) !== "undefined") {
if (localStorage.c2 === "1") {
return true;
} else {
return false;
}
} else if (!navigator.cookieEnabled == "false") {
if (getCookie("c2") === "1") {
return true;
} else {
return false;
}
} else {
alert("Please enable cookies for full website functionality");
}
}
function removeDone() {
document.getElementById("body").style.backgroundColor = "orangered";
if (typeof(Storage) !== "undefined") {
localStorage.removeItem("c2");
} else if (!navigator.cookieEnabled == "false") {
setCookie("c2", "1", -1);
}
location.reload();
}
document.getElementById("resetbtn").addEventListener("click", function() {
removeDone();
});
if (getDone()) {
document.getElementById("original").setAttribute("hidden", "");
document.getElementById("hidden").removeAttribute("hidden");
document.getElementById("infopanel").removeAttribute("hidden");
document.getElementById("body").style.backgroundColor = "orange";
}
prettyPrint();
console.log("Yay, you finally found the console. The following messages are from me.");
console.error("From me: style='background-color:orangered' is not advised");
console.info("style='background-color:orange' is better");
console.log("You can do this in the elements tab.");
setInterval(function(){
if (document.getElementById("body").style.backgroundColor == "orange") {
document.getElementById("original").setAttribute("hidden", "");
document.getElementById("hidden").removeAttribute("hidden");
document.getElementById("infopanel").removeAttribute("hidden");
setDone();
}
}, 10);