Soo... rozhodl jsem se zkusit výzvu #100DaysOfCode, ale s trochou zvratu. Přidám dvě vlastní pravidla.

1. Každý den do 23:59 dokončím jeden projekt. Musí být reprezentativní.
2. Každý týden vytvořím něco, co má tržní hodnotu (tj. může být fakturováno)

Vysvětlení pravidel:
Projekt může být cokoli od skvěle vypadajícího tlačítka po mobilní aplikaci. Ale musí být reprezentativní. To znamená, že musím být schopen to někomu ukázat a říct:"Vidíš, ono to dělá".

Konečné PROČ této výzvy

Uvízl jsem v tutoriálovém pekle. Mám syndrom podvodníka. Obecně chci mít pocit, že jsem něco udělal. A myslím si, že skočit do projektu, když nevíte všechno, je skvělý způsob, jak se naučit důležité věci.

Co se týče druhého pravidla. Setkal jsem se s rodinným přítelem, který se kromě diplomu sám učí v mnoha oborech. Povídali jsme si o některých našich projektech a nápadech. A řekl mi, že v tomto bodě mého vzdělání a života je pro mě důležité naučit se vydělávat peníze. A má tak pravdu. Bez peněz můžete jít jen tak daleko. A když se nad tím opravdu zamyslíte, projekty, které generují peníze, jsou ty, které budou lidé skutečně chtít/potřebovat.

Pojďme se tedy podívat na dnešní projekt.

PROČ

Spousta prací zahrnuje sezení. Ale sedět hodiny je špatné. A vaše tělo na to dříve nebo později zaplatí. Ale co když zaplatíme cenu, než se posadíme, byli bychom bezpečnější než. Proto jsem udělal CENA SEZENÍ .

CO

Rozšíření pro Chrome – cena za sezení

Idea je taková, že získáte x minut za y opakování nějakého cviku. Pokud vám dojdou minuty, proveďte několik cvičení.

JAK

Takže vytvoření chrome rozšíření je vlastně docela jednoduché. Jedna věc, kterou musíte mít, je manifest.json soubor. Je to soubor, který prohlížeči říká, jak používat jiné soubory.
Podívejme se na náš manifest.json

{
  "name": "The Price of sitting",
  "description": "The idea is that you buy sitting time with exercise. For every X repetitions you will get Y of minutes of sitting.",
  "version": "1.0.0",
  "manifest_version": 3,
  "author": "Filip Ilić",
  "action": {
    "default_icon": {
      "16": "./images/chair16.png",
      "24": "images/chair24.png",
      "32": "images/chair32.png"
    },
    "default_title": "Price of Sitting",
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"]
}

Vše až do akce je povinné. Oprávnění je v tomto případě potřeba pro úložiště, které budeme používat pro ukládání času a zda uživatel sedí informace v synchronizaci Google. Výchozí vyskakovací okno je popup.html, kde je umístěn veškerý obsah.

Pak máme:

• popup.css
• popup.js

Volají se z popup.html .

background.js nastavuje počáteční hodnoty, pokud toto rozšíření používáte poprvé.

chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.get(["sitting", "timeLeft"], ({ sitting, timeLeft }) => {
    if(sitting === undefined || timeLeft === undefined){
      chrome.storage.sync.set({sitting : false, timeLeft : 0});
    }
  });
});

A nakonec popup.js kde se děje kouzlo.
Nejprve definujeme proměnné, navážeme prvky na proměnné a zavoláme posluchače událostí. Plus vytvořit vyskakovací formát a zobrazit čas při otevření.

//variables
let counting;

//selecting elements
const headline = document.getElementById("headline"),
    countdown = document.getElementById("countdown"),
    button = document.getElementById("toggleButton"),
    reset = document.getElementById("resetButton"),
    add1 = document.getElementById("add-time-1"),
    add2 = document.getElementById("add-time-2"),
    add3 = document.getElementById("add-time-3");

//listen to this events
button.addEventListener("click", toggleTimer);
reset.addEventListener("click", resetTimer);
add1.addEventListener("click", addTime1);
add2.addEventListener("click", addTime2);
add3.addEventListener("click", addTime3);

displayTime();

Dále použijeme zbývající sekundy k jeho naformátování, aby se zobrazil v 00:00 formát.

function displayTime() {
    chrome.storage.sync.get("timeLeft", ({timeLeft}) =>{
        let sec = timeLeft % 60;
        let min = Math.floor(timeLeft / 60);
        if(timeLeft > 0){
            countdown.innerText = min + ":" + sec;
        }else{
            countdown.innerText = min + ":" + sec * -1;
        }
    });    
}

Poté provedeme funkci přepínání časovače.

//on button click toggle timer
function toggleTimer() {
    chrome.storage.sync.get(["sitting", "timeLeft"], ({sitting, timeLeft}) => {
        if(!sitting){
            headline.innerText = "You are sitting now.";
            button.innerText = "Stand Up";
            chrome.storage.sync.set({sitting : true});
            counting = setInterval(() => {
                chrome.storage.sync.set({timeLeft : timeLeft--});
                    displayTime();
                }, 1000);
        } else{
            button.innerText = "Sit Down";
            headline.innerText = "You just stood up for yourself.";
            chrome.storage.sync.set({sitting : false});
            clearInterval(counting);

        }
    });
}

A nakonec provádíme přidávání a vynulování časových funkcí.

//on add time button click add time to timeLeft
function addTime1(){
    chrome.storage.sync.get("timeLeft", ({timeLeft}) =>{
        chrome.storage.sync.set({timeLeft : timeLeft += 1800});
        displayTime();
    });
}
function addTime2(){
    chrome.storage.sync.get("timeLeft", ({timeLeft}) =>{
        chrome.storage.sync.set({timeLeft : timeLeft += 1800});
        displayTime();
    });
}
function addTime3(){
    chrome.storage.sync.get("timeLeft", ({timeLeft}) =>{
        chrome.storage.sync.set({timeLeft : timeLeft += 2400});
        displayTime();
    });
}
//reset timer
function resetTimer(){
    clearInterval(counting);
    chrome.storage.sync.set({timeLeft : 0});
    displayTime();
}

TODO

• Uvědomil jsem si, že zavřením vyskakovacího okna zůstane čas, ale zastaví se časovač. Takže to bude muset být opraveno vytvořením skriptu na pozadí nebo použitím date() k zapamatování času.
• Bylo by skvělé mít možnost nastavit si vlastní cvičení pro každý den. Protože pracovat stejné svaly každý den není tak dobré.
• Publikovat v obchodě Chrome. Chci jen vidět, jak celý proces publikování probíhá.

Odkazy

Github repo