Kaip sukūriau savo „Pomodoro Clock“ programą ir kokias pamokas išmokau

2017 m. Gruodžio mėn. Pradėjau savo kelionę „freeCodeCamp“ ir du projektai drovisi užpildyti „Front-End“ plėtros sertifikatą. Šis įrašas dokumentuoja mano „Pomodoro Clock“ projekto užbaigimo procesą.

Kas yra „Pomodoro“ laikrodis?

„Pomodoro“ technika yra laiko valdymo sistema, kuri yra tokia paprasta ir veiksminga - jūs naudojate laikmatį, kad suskaidytumėte savo darbą į laiko blokus (paprastai 25 minutes), atskirtus 5 minučių pertrauka. Po kiekvieno 4 pomodoros galite padaryti ilgesnę pertrauką.

Turėjau įvykdyti šias vartotojų istorijas:

  • Aš galiu paleisti 25 minučių pomodoro, o laikmatis išsijungs, kai praeis 25 minutės.
  • Aš galiu iš naujo nustatyti savo kito pomodoro laikrodį.
  • Aš galiu pritaikyti kiekvieno pomodoro ilgį.

Dizainas / maketas

Mano dizaino principas yra išlaikyti vartotojo sąsają švarią ir paprastą. Man patiko mintis naudoti pomidorą kaip laikmatį. Yra darbo / pertraukos ekranas, laikmačio skaičiavimas ir grojimo / pristabdymo mygtukas.

Žemiau laikmačio turėjau nustatymus, skirtus modifikuoti darbą ir pertraukos trukmę, ir atstatymo mygtuką.

Išdėstymo problemos, su kuriomis susidūriau

Turėjau didelių problemų, kaip pomidorų atvaizdą fone išdėstyti po kitais elementais. Kaip norėčiau, kad būtų išdėstymo parinktis, kurią galėčiau pasirinkti! ?

Vienas mano pasiūlymas buvo išsaugoti pomidorų vaizdą norimoje fono spalvoje kaip naują vaizdą, tada naudoti tą vaizdą fone. Neigiamas dalykas buvo tas, kad jis pradėjo atrodyti nerangus, kai išbandžiau maketo reagavimą.

Galų gale man pavyko tai padaryti derinant absolute positioning, modifikuojant topir leftprocentus, ir 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%);}

Apatiniai nustatymai buvo gana paprasti. Naudojau CSS tinklelį komponentams atskirti į tris stulpelius, o vidurinis stulpelis buvo pusės išorinių stulpelių pločio.

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

Dar kartą norėjau transformgeriau išlyginti, kad pakeisčiau atstatymo mygtuką.

Struktūrizuodamas savo kodą - tada jį išardydamas

Manau, kad naudinga sugalvoti savo kodo struktūrą, jei išskaidysiu reikalavimus:

  • Laikmatis persijungs tarp paleidimo ir pauzės, kai spustelėsiu mygtuką „Pradėti“.
  • Kai laikmatis pasieks nulį, įsijungs aliarmas.
  • Po darbo sesijos visada seka pertrauka.
  • Darbo ir pertraukų trukmę galima keisti.
  • Mygtukas „iš naujo“ (atspėjote) iš naujo nustatys laikmatį.

Anksčiau „Wes Bos JavaScript30“ kurse buvau baigęs atgalinį laikrodį, todėl žinojau, kad galiu naudoti šį setIntervalmetodą. Taip pat nusprendžiau mesti iššūkį laikydamasis vanilės „JavaScript“ ir vengti pasikliauti „jQuery“.

Taigi aš pradėjau rašyti savo „JavaScript“ kodą. Nors man pavyko sukurti funkcinį pomodoro laikrodį, čia neperžiūrėsiu pirmosios savo kodo versijos. Taip yra todėl, kad padariau reikšmingus pakeitimus, kai gavau konstruktyvų atsiliepimą iš nuostabaus nepažįstamo „Reddit“. ?

Taip, „Reddit“ pasitaiko gražių dalykų!

Pagrindiniai atsiliepimų punktai buvo šie:

  • setInterval(timer, 1000)trunka mažiausiai 1000 ms, bet gali užtrukti ilgiau. Taigi turėtumėte patikrinti, kiek laiko praėjo, kitaip jūsų laikrodis gali būti netikslus.
  • Grupuokite visus HTML atnaujinimus vienoje skiltyje, nes tai palengvins jūsų kodo atnaujinimą ir derinimą.
  • Paprastai yra gera mintis sukurti kodą visai negalvojant apie vaizdavimą.
  • Būkite tikri dėl laikmačio logikos ir atsikratykite nereikalingo kodo.
  • Įsitikinkite, kad kintamųjų pavadinimai yra aprašomieji. Jei reikia, palikite komentarus.

Pirmąjį mano įsipareigojimą galite peržiūrėti „GitHub“.

Pertvarkęs mano kodą

Gavęs visus tuos vertingus atsiliepimus, kelis kartus pertvarkiau savo kodą, kol buvau juo patenkintas.

Pirmiausia aš apibrėžiau visus kintamuosius. Kadangi nenaudojau „jQuery“, įsitikinau, kad visus elementus užfiksavau naudodamas 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");

Tada aš sukūriau garso elementą.

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

Spustelėjus mygtuką „Pradėti“, intervalas išvalomas. Naujas intervalas nustatomas, jei isPausediš „ true“ pakeičiama į „ false“ .

„Reset“ mygtukas išvalo intervalą ir iš naujo nustato kintamuosius.

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.

Galiausiai, aš document.onclickpaleisdavau „ updateHTML“ funkciją kiekvieną kartą, kai vartotojas spustelėjo puslapį. Aš taip pat naudodavau window.setIntervalfunkciją 10 kartų per sekundę, kad gerai matuočiau.

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;

Ir tai yra mano projekto užbaigimas!

Mano galutinį projektą galite peržiūrėti čia.

Paskutinės mintys

Didžiausias mano išsisėmimas iš šio projekto yra tai, kad turėčiau siekti paprastumo kodų projektavimo srityje, nes tai yra būtina patikimumo sąlyga. Tai padarys mano kodą lengvai suprantamą, lengvai derinamą ir lengvai atnaujinamą.

Taip pat man primenama suporuoto programavimo ir kodų peržiūros nauda, ​​ypač kai tai yra nauja kodavimo galimybė.

Dar daug ko reikia išmokti. Bet kol kas leisk man atsilyginti „Pasta al pomodoro“ lėkšte.