Kyauta Mai Ƙidaya na Kan Layi

Yadda Yake Aiki

Wannan mai ƙidaya yana gudana gaba ɗaya a burauzarka ta amfani da React state da API na localStorage da aka gina a burauza — babu uwar garke, babu asusu, kuma ba a aika bayanai zuwa ko'ina ba. Ƙidayar tana wanzuwa ta hanyar kanta bayan sabunta shafi, kuma yanayin cikakken allo yana amfani da Screen Wake Lock API don ci gaba da kunna nunin ka yayin ƙidaya.

1. 1
   Yanayi yana zaune a localStorage

   Lokacin da shafin ya loda, kayan aikin yana karanta duk ƙidayoyin da aka riga aka ajiye daga localStorage a ƙarƙashin maɓalli tsayayye. Kowace ƙidaya — lakabinta, ƙimarta ta yanzu, girman mataki, da alamar barin-korau — an mayar da ita zuwa JSON kuma an rubuta ta baya zuwa localStorage a kowane canji, don haka ƙidayoyinka suna wanzuwa bayan rufe tab ba da gangan ba ko sabuntawa.
2. 2
   Ƙarawa/ragewa ta hanyar React state

   Danna + ko babban maɓallin tsakiya yana kiran wani abu da yake ƙara ƙimar mataki da aka tsara zuwa ƙimar ƙidayar yanzu. Idan barin-korau a kashe yake, ana daure sakamakon zuwa sifili da Math.max. Gajerun hanyoyin madannai (Space/+ don ƙarawa, -/Backspace don ragewa) an haɗa su ta hanyar mai saurara na window keydown wanda ke niyya ko wace ƙidaya ce take aiki.
3. 3
   Yanayin cikakken allo tare da Screen Wake Lock

   Shiga yanayin cikakken allo yana nuna wani rufi inda dukkan allo shine burin dannawa. A lokaci guda, kayan aikin yana neman wake lock ta navigator.wakeLock.request('screen') — API na burauza wanda yake tambayar OS ya dakatar da barcin allo. Ana sake samun kulle ta atomatik idan tab ɗin ya sake bayyana bayan an aika shi baya.
4. 4
   Ƙidayoyi da yawa tare da jimillar hadewa

   Ƙara ƙidaya ta biyu yana haifar da sabuwar shigarwa da ID da aka ƙirƙira ta crypto.randomUUID(). Idan akwai fiye da ƙidaya guda, ana lissafta jimlar haɗe ta hanyar tara duk ƙimomi kuma ana nuna ta sama da jerin ƙidaya. Kowace ƙidaya tana da saitunan mataki, sake saitawa, da barin-korau masu zaman kansu.

Kayan Aiki Masu Alaƙa