started styling

This commit is contained in:
Lauchmelder 2022-03-20 15:54:48 +01:00
parent dc0be911b2
commit 250d462da2
No known key found for this signature in database
GPG key ID: C2403C69D78F011D
4 changed files with 157 additions and 42 deletions

63
src/popup.js Normal file
View file

@ -0,0 +1,63 @@
const submitButton = document.getElementById("submit-token")
const inputField = document.getElementById("token")
const statusField = document.getElementById("token-status")
const errorField = document.getElementById("error-text")
// Set popup content
chrome.storage.local.get(["level", "token"], (data) => {
if(data.token === undefined)
{
statusField.innerHTML = String.fromCodePoint(0x2757)
submitButton.innerHTML = String.fromCodePoint(0x2705)
submitButton.classList.add("no-token")
}
else
{
statusField.innerHTML = String.fromCodePoint(0x2705)
submitButton.innerHTML = String.fromCodePoint(0x1F501)
}
const levelSpan = document.getElementById("level")
levelSpan.innerHTML = data.level
inputField.addEventListener("input", () => {
if(inputField.value !== "" && inputField.value !== data.token)
{
submitButton.innerHTML = String.fromCodePoint(0x2705)
submitButton.classList.add("new-token")
}
else
{
submitButton.innerHTML = String.fromCodePoint(0x1F501)
submitButton.classList.remove("new-token")
}
})
})
// Set the wanikani token
submitButton.addEventListener( "click", () => {
if(submitButton.classList.contains("new-token"))
{
chrome.storage.local.set({"token": inputField.value})
submitButton.classList.remove("new-token", "no-token")
inputField.value = ""
}
if(submitButton.classList.contains("no-token"))
return
statusField.innerHTML = String.fromCodePoint(0x23F1)
chrome.runtime.sendMessage("", {type: "sync"}, response => {
if(response.success)
{
statusField.innerHTML = String.fromCodePoint(0x2705)
errorField.innerHTML = ""
}
else
{
statusField.innerHTML = String.fromCodePoint(0x2757)
errorField.innerHTML = response.error
}
})
})

53
src/styles.css Normal file
View file

@ -0,0 +1,53 @@
*
{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body
{
display: grid;
grid-template-rows: 1.5fr 1fr 3fr 2fr;
width: 250px;
}
header
{
display: grid;
grid-template-columns: 8fr 1fr;
align-items: baseline;
}
h1
{
text-transform: uppercase;
}
h2
{
font-size: 10pt;
}
#token-area
{
display: grid;
grid-template-rows: 1fr 1fr;
}
#input-area
{
display: grid;
grid-template-columns: 1fr 8fr 1fr;
}
#token-status
{
font-size: 1rem;
}
#settings-area
{
display: grid;
grid-template-rows: repeat(3, 1fr);
}