Projekty wykonane – Telomers & React portfolio
Ostatnio zrealizowałem dwa projekty, które rozbudowały zarówno moje portfolio, jak i stronę Telomers.pl.
1. Trzy strony dla Telomers.pl
Dla serwisu Telomers.pl dodałem trzy nowe strony:
- Poranne rozbudzanie: Strona skupiająca się na zdrowych porannych rytuałach. Poranne rytuały
- Witaminy i Minerały na wiosnę: Informacje na temat optymalnego doboru witamin i minerałów w sezonie wiosennym.Witaminy Minerały Suplementy
- 3 domowe sposoby na przeziębienie: Naturalne sposoby na walkę z przeziębieniem. 3 domowe spososby na przeziębienie Całość została wdrożona w krótkim czasie, a nowe treści są już dostępne dla użytkowników serwisu.
2. Aplikacja React Hooks
Stworzyłem również aplikację w React, która demonstruje wykorzystanie hooków takich jak useState, useEffect oraz useContext. Projekt polega na dynamicznej zmianie koloru tła oraz liczniku, który można zwiększać przyciskiem. W aplikacji zaimplementowane są funkcje:
- Obsługa zmiany wartości inputu z wykorzystaniem
useState. - Dynamiczna zmiana tła na podstawie wprowadzonego koloru w formacie HEX.
- Wykorzystanie kontekstu (
useContext) do aktualizacji tła.
Zobacz applikację React i jej proste funkcje.
Poniżej fragment kodu aplikacji:
import React, { useState, useEffect, createContext, useContext } from 'react';
const BackgroundColorContext = createContext();
function App() {
const [count, setCount] = useState(0);
const [inputValue, setInputValue] = useState('#0e0e0e');
const [bgColor, setBgColor] = useState('#0e0e0e');
useEffect(() => {
if (/^#[0-9A-F]{6}$/i.test(inputValue) || /^#[0-9A-F]{3}$/i.test(inputValue)) {
setBgColor(inputValue);
}
}, [inputValue]);
return (
<BackgroundColorContext.Provider value={{ bgColor, setBgColor }}>
<div style={{ backgroundColor: bgColor }}>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<BackgroundColorInput />
</div>
</BackgroundColorContext.Provider>
);
}
function BackgroundColorInput() {
const { setBgColor } = useContext(BackgroundColorContext);
return (
<input
type="text"
placeholder="Input color..."
onChange={(e) => setBgColor(e.target.value)}
/>
);
}
export default App;
Dodaj komentarz
Musisz się zalogować, aby móc dodać komentarz.