Kuinka rakensin Pomodoro Clock -sovellukseni ja opit matkan varrella

Aloitin freeCodeCamp -matkani joulukuussa 2017, ja olen kaksi projektia, jotka ovat valmiita suorittamaan Front-End Development Certificate. Tämä viesti dokumentoi prosessini Pomodoro Clock -projektin loppuun saattamiseksi.

Mikä on pomodoro-kello?

Pomodoro-tekniikka on ajanhallintakehys, joka on yhtä yksinkertainen kuin tehokas - jaat ajastimen työn jakamiseksi aikalohkoiksi (yleensä 25 minuutiksi), erotettuna 5 minuutin tauolla. Jokaisen 4 pomodoroksen jälkeen voit pitää pidemmän tauon.

Minun täytyi täyttää seuraavat käyttäjäkertomukset:

  • Voin aloittaa 25 minuutin pomodoron, ja ajastin sammuu, kun 25 minuuttia on kulunut.
  • Voin nollata seuraavan pomodoroni kellon.
  • Voin mukauttaa jokaisen pomodoron pituuden.

Suunnittelu / asettelu

Suunnitteluperiaatteeni on pitää käyttöliittymä puhtaana ja yksinkertaisena. Rakastin ajatusta käyttää tomaattia ajastimena. Siellä on työ / tauko-näyttö, ajastimen lähtölaskenta ja toisto / tauko-painike.

Ajastimen alapuolella minulla oli asetukset työn ja tauon keston muuttamiseksi sekä nollauspainike.

Ulkoasuongelmat, joihin törmäsin

Minulla oli suuria ongelmia tomaattikuvan sijoittamisessa taustalle muiden elementtien alle. Kuinka toivon, että voisin valita asetteluvaihtoehdon! ?

Yksi löytämäni ehdotus oli tallentaa tomaattikuva haluamalleni taustavärille uudena kuvana ja käyttää sitten kuvaa taustalla. Haittapuoli oli, että se alkoi näyttää hämmentyneeltä, kun testasin asettelun reagoivuutta.

Loppujen lopuksi onnistuin saamaan sen oikein yhdistelemällä absolute positioning, muuttamalla ja topja leftprosentteina, ja transform.

#status { position: absolute; top: 45%; left:50%; transform: translate(-50%, -50%);}
.timerDisplay { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%);}
#start-btn { position: absolute; bottom: 8%; left: 48%; transform: translate(-50%, -50%);}

Pohja-asetukset olivat melko suoraviivaisia. Erotin komponentit kolmeen sarakkeeseen CSS Gridillä, keskimmäisen sarakkeen ollessa puolet ulkosarakkeiden leveydestä.

.settings { margin: auto; width: 80%; display: grid; grid-template-columns: 2fr 1fr 2fr; align-items: center;}

Jälleen kerran käytin transformpalautuspainiketta siirtämään paremman kohdistuksen.

Rakennan koodini - ja repin sen sitten irti

Minusta on hyödyllistä kehittää koodirakenne, jos jaon vaatimukset:

  • Ajastin vaihtaa käynnistyksen ja keskeytyksen välillä, kun napsautan Käynnistä-painiketta.
  • Kun ajastin saavuttaa nollan, hälytys kuuluu.
  • Työskentelyn jälkeen seuraa aina tauko.
  • Työn ja tauon kestoja voidaan muuttaa.
  • 'Palauta' -painike nollaa (arvasit sen) ajastimen.

Olin aiemmin suorittanut lähtölaskennan Wes Bos JavaScript30 -kurssilla, joten tiesin, että voisin käyttää setIntervalmenetelmää. Päätin myös haastaa itseni pitämällä kiinni vaniljakoodeista ja välttää jQueryyn luottamista.

Ja niin aloitin JavaScript-koodini kirjoittamisen. Vaikka onnistuin luomaan toimivan pomodoro-kellon, en käy läpi koodin ensimmäistä versiota täällä. Tämä johtuu siitä, että tein siihen merkittäviä muutoksia saatuani rakentavaa palautetta hämmästyttävältä muukalaiselta Redditissä. ?

Kyllä, Redditissä tapahtuu hyviä asioita!

Palautteen pääkohdat olivat:

  • setInterval(timer, 1000)laukeaminen kestää vähintään 1000 ms, mutta se voi kestää kauemmin. Joten sinun tulisi tarkistaa, kuinka paljon aikaa on kulunut, muuten kellosi voi olla epätarkka.
  • Ryhmittele kaikki HTML-päivitykset yhteen osioon, koska tämä helpottaa koodisi päivittämistä ja virheenkorjausta.
  • Koodi on yleensä hyvä tehdä ajattelematta edustus ollenkaan.
  • Varmista ajastimen logiikka ja päästä eroon tarpeettomasta koodista.
  • Varmista, että muuttujien nimet ovat kuvaavia. Jätä kommentteja tarvittaessa.

Voit tarkastella ensimmäistä sitoutumistani GitHubissa.

Koodin muokkaaminen uudelleen

Saatuani kaiken arvokkaan palautteen muutin koodiani useita kertoja, kunnes olin tyytyväinen siihen.

Ensin määritin kaikki muuttujat. Koska en käyttänyt jQueryä, varmistin, että kaapasin kaikki elementtini käyttämällä document.querySelector.

let countdown = 0; // variable to set/clear intervalslet seconds = 1500; // seconds left on the clocklet workTime = 25;let breakTime = 5;let isBreak = true;let isPaused = true;
const status = document.querySelector("#status");const timerDisplay = document.querySelector(".timerDisplay");const startBtn = document.querySelector("#start-btn");const resetBtn = document.querySelector("#reset");const workMin = document.querySelector("#work-min");const breakMin = document.querySelector("#break-min");

Seuraavaksi loin äänielementin.

const alarm = document.createElement('audio'); alarm.setAttribute("src", "//www.soundjay.com/misc/sounds/bell-ringing-05.mp3");

Kun Käynnistä-painiketta napsautetaan, aikaväli tyhjennetään. Uusi aikaväli asetetaan, jos se isPausedmuuttuu tosi- arvosta epätosi- arvoksi .

Palautuspainike tyhjentää aikavälin ja nollaa muuttujat.

startBtn.addEventListener('click', () => { clearInterval(countdown); isPaused = !isPaused; if (!isPaused) { countdown = setInterval(timer, 1000); }})
resetBtn.addEventListener('click', () => { clearInterval(countdown); seconds = workTime * 60; countdown = 0; isPaused = true; isBreak = true;})

The timer function is where the countdown magic happens. It deducts one second from seconds. If seconds <; 0, the alarm is played, and the function determines if the next countdown should be a work session or break session.

function timer() { seconds --; if (seconds < 0) { clearInterval(countdown); alarm.currentTime = 0; alarm.play(); seconds = (isBreak ? breakTime : workTime) * 60; isBreak = !isBreak; }}

Now it’s time to work on the +/- buttons for the work and break durations. Initially, I created an onclick function for every button. While it was functional, there was definitely room for improvement.

document.querySelector("#work-plus").onclick = function() { workDuration  5 ? workDuration -= increment : workDuration; }document.querySelector("#break-plus").onclick = function() { breakDuration  5 ? breakDuration -= increment : breakDuration; }

That same kind Redditor suggested that I use an associative array, which is essentially a set of key value pairs.

let incrementFunctions = {"#work-plus": function () { workTime = Math.min(workTime + increment, 60)}, "#work-minus": function () { workTime = Math.max(workTime - increment, 5)}, "#break-plus": function () { breakTime = Math.min(breakTime + increment, 60)}, "#break-minus": function () { breakTime = Math.max(breakTime - increment, 5)}};
for (var key in incrementFunctions) { if (incrementFunctions.hasOwnProperty(key)) { document.querySelector(key).onclick = incrementFunctions[key]; }}

It’s time to update the HTML!

I created functions to update the countdown display and button display, and incorporated those functions into an overarching function that also updated the Work/Break status and durations.

Lopuksi käytin document.onclickajaa updateHTML toiminto aina käyttäjä napsauttaa sivulla. Käytin myös window.setIntervaltoiminnon suorittamista 10 kertaa sekunnissa hyvän mittauksen vuoksi.

function countdownDisplay() { let minutes = Math.floor(seconds / 60); let remainderSeconds = seconds % 60; timerDisplay.textContent = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`;}
function buttonDisplay() { if (isPaused && countdown === 0) { startBtn.textContent = "START"; } else if (isPaused && countdown !== 0) { startBtn.textContent = "Continue"; } else { startBtn.textContent = "Pause"; }}
function updateHTML() { countdownDisplay(); buttonDisplay(); isBreak ? status.textContent = "Keep Working" : status.textContent = "Take a Break!"; workMin.textContent = workTime; breakMin.textContent = breakTime;}
window.setInterval(updateHTML, 100);
document.onclick = updateHTML;

Ja se on projektini päättäminen!

Voit katsoa lopullisen projektini täältä.

Lopulliset ajatukset

Suurin otteeni tästä projektista on, että minun pitäisi pyrkiä yksinkertaisuuteen koodin suunnittelussa, koska se on luotettavuuden edellytys. Se tekee koodistani helposti ymmärrettävän, helposti virheenkorjaavan ja päivitettävän.

Muistutan myös pariliitetyn ohjelmoinnin ja koodiarvostelujen eduista, varsinkin kun koodauksessa on uutta.

Opittavaa on vielä niin paljon. Mutta nyt anna minun palkita itseni lautasella Pasta al pomodoroa.