Commit 6ce7c8da authored by ianzren's avatar ianzren

Made checkbox in popup.html

parent c07d8104
var nameBoxes = document.getElementsByClassName('name___CmYia');
for(var i = 0; i < priceBox.length; i++){
nameBoxes[i].style.backgroundColor = "lightblue";
}
\ No newline at end of file
// Unique ID for the className.
var MOUSE_VISITED_CLASSNAME = 'crx_mouse_visited';
var srcName;
var dietNum;
// Previous dom, that we want to track, so we can remove the previous styling.
//var prevDOM = null;
// Mouse listener for any move event on the current document.
document.addEventListener('mousemove', function (e) {
let srcElement = e.srcElement;
// Lets check if our underlying element is a IMG.
if (srcElement.nodeName == 'IMG') {
//if (srcElement.nodeName == 'DIV' && srcElement.className == "content___1O9rr") {
//prevDOM != srcElement &&
srcName = srcElement.alt;
// For NPE checking, we check safely. We need to remove the class name
// Since we will be styling the new one after.
// if (prevDOM != null) {
// prevDOM.classList.remove(MOUSE_VISITED_CLASSNAME);
// }
// Add a visited class name to the element. So we can style it.
// if (srcName == "Waitrose coffee & walnut cake") {
// srcElement.classList.add(MOUSE_VISITED_CLASSNAME);
// }
srcElement.classList.add(MOUSE_VISITED_CLASSNAME);
// The current element is now the previous. So we can remove the class
// during the next ieration.
//prevDOM = srcElement;
console.info(srcElement.currentSrc);
console.dir(srcElement);
}
}, false);
if(document){
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("Submit").addEventListener("click", myFunction);
});
}
function myFunction() {
var a = document.getElementById("Dairy").checked;
var b = document.getElementById("Meat").checked;
var c = document.getElementById("Corn").checked;
var d = document.getElementById("Gluten").checked;
dietNum = a + (b << 1) + (c << 2) + (d << 3);
}
......@@ -4,6 +4,11 @@
"version": "1.0",
"manifest_version" : 2,
"permissions": [
"activeTab",
"declarativeContent"
],
"browser_action": {
"default_icon": "images/example-icon.png",
"default_title": "Clickerance",
......@@ -21,4 +26,6 @@
"matches": ["https://www.waitrose.com/ecom/shop/browse/groceries/*"]
}]
}
......@@ -4,9 +4,19 @@
<meta charset = "utf-8"/>
<title> clickerance </title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="mycode.js"></script>
<script src="content.js"></script>
</head>
<body>
<div class="Title"></div>
<h1> Clickerance </h1>
Dairy : <input type="checkbox" id="Dairy"><br>
Meat : <input type="checkbox" id="Meat"><br>
Corn : <input type="checkbox" id="Corn"><br>
Gluten : <input type="checkbox" id="Gluten"><br>
<p>Which ones you can't eat?</p>
<input id="Submit" type="submit" value="Submit">
</body>
</html>
......@@ -7,6 +7,11 @@
padding: 28px
}
.name___CmYia {
.nameWrapper___4c05X {
background-color: #ffffff;
}
.crx_mouse_visited {
background-clip: #bcd5eb!important;
outline: 1px dashed #47bb47!important;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment