Skip to content

Commit

Permalink
🐛 fix: Fix same site addition bug, invalid domain check, add quotes f…
Browse files Browse the repository at this point in the history 
…eature, reduce code complexity & UI revamp
  • Loading branch information
@dheerajdlalwani
dheerajdlalwani committed Jan 24, 2022
1 parent 5040e0e commit 8c6b40a
Show file tree
Hide file tree
Showing 7 changed files with 286 additions and 61 deletions.
84 changes: 62 additions & 22 deletions src/options/options.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,29 @@ header > img {
font-style: italic;
}

.new_website {
border-radius: 10px;
width: 70%;
margin: 15px;
padding: 10px 15px;
border: none;
outline: none;
font-size: 20px;
text-align: center;
filter: drop-shadow(0 0 2px #1f283f);
}

.new_website:focus {
filter: drop-shadow(0 0 7px #006eff);
}

.new_website_field_error {
border: solid rgb(255, 93, 93) 2px;
}
.new_website_field_error::placeholder {
color: rgb(255, 93, 93);
}

#list_container {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -97,22 +120,6 @@ header > img {
width: clamp(500px, 65vw, 900px);
}

#new_website {
border-radius: 10px;
width: 70%;
margin: 15px;
padding: 10px 15px;
border: none;
outline: none;
font-size: 20px;
text-align: center;
filter: drop-shadow(0 0 2px #1f283f);
}

#new_website:focus {
filter: drop-shadow(0 0 7px #006eff);
}

#add_button {
width: 15%;
border-radius: 10px;
Expand All @@ -131,10 +138,6 @@ header > img {
filter: drop-shadow(0 0 7px #006eff);
}

.new_website_field::placeholder {
color: rgb(255, 93, 93);
}

#list_wrapper {
display: flex;
flex-direction: row;
Expand All @@ -155,8 +158,45 @@ header > img {
font-size: 20px;
border: none;
outline: none;
background-color: #000e24;
color: #afcaff;
background-color: #afcaff;
color: #000e24;
filter: drop-shadow(0 0 2px #1f283f);
cursor: pointer;
}

footer {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
font-size: 20px;
margin-top: 1em;
padding: 1em;
}

footer a {
color: #000e24;
font-weight: 700;
}

.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {
0%,
100% {
transform: rotate(0);
}

20%,
60% {
transform: rotate(-25deg);
}

40%,
80% {
transform: rotate(10deg);
}
}
52 changes: 51 additions & 1 deletion src/options/options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,40 @@
<title>Back To Work</title>
</head>
<body>
<a
href="https://github.com/dheerajdlalwani/back-to-work"
target="_blank"
class="github-corner"
aria-label="View source on GitHub"
>
<svg
width="100"
height="100"
viewBox="0 0 250 250"
style="
fill: #000e24;
color: #86a8ff;
position: absolute;
top: 0;
border: 0;
right: 0;
"
aria-hidden="true"
>
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor"
style="transform-origin: 130px 106px"
class="octo-arm"
></path>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor"
class="octo-body"
></path>
</svg>
</a>
<header>
<img src="../icons/icon.svg" alt="logo" />
<div id="header_content">
Expand All @@ -21,7 +55,7 @@ <h3>- Your addictive websites -</h3>
<input
type="text"
name="new_website"
id="new_website"
class="new_website"
placeholder="example.com"
/>
<button id="add_button">Add</button>
Expand All @@ -30,6 +64,22 @@ <h3>- Your addictive websites -</h3>
<ul id="list"></ul>
</div>
</div>
<footer>
<p>
Facing an issue? Raise
<a
href="https://github.com/dheerajdlalwani/back-to-work/issues/new"
target="_blank"
rel="noopener"
>
an issue</a
>!
</p>
<p>
Made with ❤️ by
<a href="https://twitter.com/DhiruCodes"> Dheeraj Lalwani </a>
</p>
</footer>
<script src="options.js"></script>
</body>
</html>
46 changes: 33 additions & 13 deletions src/options/options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,19 +60,39 @@ document.addEventListener("DOMContentLoaded", () => {
// implementing logic for adding new website.
let addButton = document.querySelector("#add_button");
console.log(addButton);
const domain_dot_tld_regex = /\w+\.[a-zA-B]+/g;
addButton.addEventListener("click", () => {
console.log("Ha bhai click ho gaya...");
let newWebsite = document.querySelector("#new_website");
if (newWebsite.value.trim() !== "") {
chrome.storage.sync.get("blockedWebsites", ({ blockedWebsites }) => {
blockedWebsites.push(newWebsite.value);
chrome.storage.sync.set({ blockedWebsites });
});
location.reload();
} else {
newWebsite.value = "";
newWebsite.placeholder = "Field is empty!";
newWebsite.style.border = "solid rgb(255, 93, 93) 2px";
newWebsite.classList.add("new_website_field");
}
chrome.storage.sync.get("mode", ({ mode }) => {
// checking if mode is work.
if (mode === "Work") {
alert("Cannot add when in work mode!"); // TODO while refactoring, replace alert with a modal or a message toast.
} else {
let newWebsite = document.querySelector(".new_website");
if (newWebsite.value.trim() !== "") {
if (domain_dot_tld_regex.test(newWebsite.value)) {
chrome.storage.sync.get("blockedWebsites", ({ blockedWebsites }) => {
if (blockedWebsites.indexOf(newWebsite.value) === -1) {
blockedWebsites.push(newWebsite.value);
chrome.storage.sync.set({ blockedWebsites });
location.reload();
} else {
newWebsite.value = "";
newWebsite.placeholder = "Website already exists!";
newWebsite.classList.add("new_website_field_error");
}
});
} else {
newWebsite.value = "";
newWebsite.placeholder =
"Error. Please enter a valid website domain.";
newWebsite.classList.add("new_website_field_error");
}
} else {
newWebsite.value = "";
newWebsite.placeholder = "Field is empty!";
newWebsite.classList.add("new_website_field_error");
}
}
});
});
69 changes: 60 additions & 9 deletions src/popup/popup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,22 @@ body {
font-family: "Manrope", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
/* align-items: center; */
background-color: #e7efff;
color: #000000;
}

#popup_header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
justify-content: space-around;
margin: 1em;
}

#popup_header > img {
margin: 10px;
width: 75px;
height: auto;
filter: drop-shadow(0 0 7px #1f283f);
}

Expand All @@ -36,30 +37,80 @@ body {
}

#header_content > #main_title {
font-size: 7vw;
font-size: 6vw;
font-weight: 600;
}

#header_content > #sub_title {
font-size: 5vw;
font-size: 4vw;
font-weight: 400;
font-style: italic;
}

#options_page {
margin: 10px;
padding: 10px;
font-size: 3vw;
font-weight: 700;
background-color: #000e24;
color: #ffffff;
border: none;
border-radius: 5px;
cursor: pointer;
}

#mode_button {
width: 30vw;
margin: 15px;
padding: 15px;
font-size: 25px;
font-weight: 700;
background-color: #e7efff;
color: #1f283f;
border: none;
border-radius: 10px;
border-radius: 5px;
cursor: pointer;
align-self: center;
}

.random {
background-color: #f95050;
color: #00d660;
.chill_mode_background {
background: rgb(110, 231, 183);
background: radial-gradient(
circle,
rgba(110, 231, 183, 1) 0%,
rgba(52, 211, 153, 1) 25%,
rgba(16, 185, 129, 1) 50%,
rgba(5, 150, 105, 1) 100%
);
color: #000000;
}
.work_mode_background {
background: rgb(248, 113, 113);
background: radial-gradient(
circle,
rgba(248, 113, 113, 1) 0%,
rgba(248, 113, 113, 1) 25%,
rgba(239, 68, 68, 1) 75%,
rgba(239, 68, 68, 1) 100%
);
}

#quote_section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 1.5em;
text-align: center;
background-color: #000e24;
color: #e7efff;
border-radius: 15px 15px 0 0;
}

.quote {
padding: 1em;
}

.author {
font-weight: 700;
}
2 changes: 2 additions & 0 deletions src/popup/popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,10 @@
<span id="main_title">Back to work</span>
<span id="sub_title">Get shit done ☑️</span>
</div>
<button id="options_page">Options Page</button>
</div>
<button id="mode_button"></button>
<div id="quote_section"></div>
<script src="popup.js"></script>
</body>
</html>
Loading

0 comments on commit 8c6b40a

Please sign in to comment.