Skip to content

Commit 9cf822d

Browse files
author
wseymour15
committed
Updated Pop-up
1 parent 83afbee commit 9cf822d

File tree

4 files changed

+99
-101
lines changed

4 files changed

+99
-101
lines changed

‎popup.html

Lines changed: 85 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
body {
1212
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
1313
font-size: 100%;
14+
background-color: powderblue;
1415
}
1516
#status {
1617
avoid an excessively wide status text
@@ -19,24 +20,103 @@
1920
overflow: hidden;
2021
max-width: 400px;
2122
}
23+
label {
24+
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
25+
color: darkslategrey;
26+
font-size: 10px;
27+
}
28+
#web {
29+
width: 100%;
30+
padding: 2px 10px;
31+
margin: 8px 0;
32+
box-sizing: border-box;
33+
border: 2px solid #B22222;
34+
border-radius: 2px;
35+
}
36+
input[type=time] {
37+
box-sizing: border-box;
38+
border: 2px solid #B22222;
39+
border-radius: 2px;
40+
}
41+
#add {
42+
background-color: #B22222;
43+
border: 2px solid black;
44+
color: white;
45+
padding: 10px 20px;
46+
text-align: center;
47+
text-decoration: none;
48+
display: inline-block;
49+
font-size: 10px;
50+
margin: 4px 2px;
51+
cursor: pointer;
52+
border-radius: 20px;
53+
}
54+
55+
#sett {
56+
background-color: #B22222;
57+
border: 2px solid black;
58+
color: white;
59+
padding: 10px 20px;
60+
text-align: center;
61+
text-decoration: none;
62+
display: inline-block;
63+
font-size: 10px;
64+
margin: 4px 2px;
65+
cursor: pointer;
66+
border-radius: 20px;
67+
}
68+
}
69+
2270
</style>
71+
2372

2473
<!--
2574
- JavaScript and HTML must be in separate files: see our Content Security
2675
- Policy documentation[1] for details and explanation.
2776
-
2877
- [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
2978
-->
30-
<script src="popup.js"></script>
79+
80+
<script src="setting.js"></script>
81+
<script src="popup.js"></script>
82+
3183
</head>
32-
<body>
84+
<body id="body">
85+
<input placeholder = "type website" id="web" required>
86+
87+
<div id = "week">
88+
<label><input type = "checkbox" name="check" id="0">Sunday</label>
89+
<br/>
90+
<label><input type = "checkbox" name="check" id="1">Monday</label>
91+
<br/>
92+
<label><input type = "checkbox" name="check" id="2">Tuesday</label>
93+
<br/>
94+
<label><input type = "checkbox" name="check" id="3">Wednesday</label>
95+
<br/>
96+
<label><input type = "checkbox" name="check" id="4">Thursday</label>
97+
<br/>
98+
<label><input type = "checkbox" name="check" id="5">Friday</label>
99+
<br/>
100+
<label><input type = "checkbox" name="check" id="6">Saturday</label>
101+
</div>
33102

34-
<div id = "body"></div>
35-
<label id="timer">Starting Time<input type="time" id="starting"></label>
103+
<div id = "bod"></div>
104+
<label id="timer">Starting Time<input type="time" id="starting"></label>
36105
<label id="timer">End Time<input type="time" id="ending"></label>
37106
<br/>
38-
<div id="status"></div>
107+
<div id="status"></div>
108+
<br/>
109+
<div id="but" style="text-align:center;">
110+
<input type="button" onclick="" id="add" value="Add">
111+
</div>
112+
<!-- <br/>-->
113+
<!-- <div id="but1" style="text-align:center;">-->
114+
<!-- <input onclick="" type="button" id="sett" value="Settings">-->
115+
<!-- </div>-->
39116

40117
</body>
118+
119+
120+
41121
</html>
42122

‎popup.js

Lines changed: 9 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,16 @@
1+
document.addEventListener('DOMContentLoaded', function() {
12

2-
3-
/*Tried to use closure to store all the websites and times *
4-
*Plan is to have a list of them stored somewhere where *
5-
*The use will have a chance to view/delete later */
6-
7-
8-
9-
document.addEventListener('DOMContentLoaded', function() {
10-
// var websites = [];
11-
// var week = [];
12-
13-
var body = document.getElementById('body');
14-
let m = document.getElementById('status');
15-
let select = document.createElement('select');
16-
m.appendChild(select);
17-
18-
let days = ["",
19-
"Sunday",
20-
"Monday",
21-
"Tuesday",
22-
"Wednesday",
23-
"Thursday",
24-
"Friday",
25-
"Saturday"
26-
];
27-
for(let i = 0; i < 7; i++){
28-
let op = new Option(days[i]);
29-
if(i===0){
30-
op.setAttribute('id', 'default');
31-
}
32-
select.appendChild(op);
33-
}
34-
35-
let i = document.createElement('input');
36-
i.setAttribute('placeholder', "website");
37-
m.appendChild(i);
38-
39-
40-
// //TODO add a time picker. Looked online a little but had a little difficulty
41-
42-
43-
// var tbl = document.createElement('table');
44-
// tbl.style.width = '100%';
45-
// tbl.setAttribute('border', '1');
46-
// var tbdy = document.createElement('tbody');
47-
// var tr = document.createElement('tr');
48-
// tbl.appendChild(tbdy);
49-
// body.appendChild(tbl);
50-
51-
var b = document.createElement('button');
52-
b.setAttribute('class', 'btn');
53-
b.onclick = function() {
54-
if(i.value !== null){
55-
websites.push(i.value);
56-
i.value("");
57-
}
58-
59-
if(select.value !== null){
60-
week.push(select.value);
61-
}
62-
};
63-
b.innerHTML = "Add";
64-
m.appendChild(b);
65-
66-
67-
// var setting = document.createElement('button');
68-
// setting.setAttribute('class', 'btn');
69-
// setting.innerHTML = "Filters";
70-
// setting.onclick = function(){
71-
// for(let a = 0; a < websites.length; a++){
72-
// tr.appendChild(document.createTextNode(websites[a] + " ")); //TODO add break line, only print out new ones
73-
// tbdy.appendChild(tr);
74-
// }
75-
// for(let a = 0; a < week.length; a++){
76-
// tr.appendChild(document.createTextNode(week[a] + " ")); //TODO add break line
77-
// tbdy.appendChild(tr);
78-
// }
79-
// };
80-
// body.appendChild(setting);
81-
82-
var settin = document.createElement('button');
3+
var body = document.getElementById('body');
4+
var settin = document.createElement('button');
835
settin.setAttribute('class', 'btn');
6+
settin.setAttribute('id', 'sett');
7+
settin.style.textAlign = "center";
8+
849
settin.innerHTML = "Settings";
8510
settin.onclick = function(){
8611
var newURL = "setting.html";
8712
chrome.tabs.create({ url: newURL });
8813
};
89-
m.appendChild(settin);
90-
91-
// chrome.browserAction.onClicked.addListener(function(activeTab)
92-
// {
93-
94-
// });
95-
96-
97-
98-
});
99-
100-
101-
102-
14+
body.appendChild(settin);
15+
16+
})

‎setting.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ <h1 id="subtitle">Choose the website you want to block. Select days and times.</
2727

2828
<br/>
2929

30-
<input placeholder = "type websites" id="web" required>
30+
<input placeholder = "type website" id="web" required>
3131
<br/>
3232
<br/>
3333

‎setting.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
2+
13
function milTime() {
24
var num1 = document.getElementById("starting").value;
35
var num2 = document.getElementById("ending").value;
@@ -81,6 +83,8 @@ window.onload = () => {
8183
var x = JSON.stringify(site);
8284
//console.log(x);
8385
chrome.storage.sync.set({'info': x});
86+
87+
8488
});
8589

8690
}

0 commit comments

Comments
 (0)