Users should be able to search for words using the input field, see the Free Dictionary API's response for the searched word, see a form validation message when trying to submit a blank form, play the audio file for a word when it's available, switch between serif, sans serif, and monospace fonts, switch between light and dark themes, view the optimal layout for the interface depending on their device's screen size.
- Solution URL: Dictionary web app using React
- Live Site URL: Dictionary web app
- CSS custom properties
- Flexbox, CSS Grid
- Vite
- React - JS library
- Free Dictionary API
I learned about the watchMedia
method among with prefers-color-scheme
media query, which allows developers to detect the user's preferred color scheme. This is a very useful feature for developers, as it allows them to provide a better user experience by automatically adapting the color scheme of the website to the user's preferences.
const [theme, setTheme] = useState("light");
useEffect(() => {
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
const prefersDarkMode = mediaQuery.matches;
if (prefersDarkMode) {
setTheme("dark");
}
}, []);
The variables fonts was something I had never done before, so I had to do some research on how to do it. I ended up using the font-variation-settings
property, which allows me to change the font's weight and width.
:root {
--font-weight: 400;
--font-width: 100;
}
body {
font-variation-settings: "wght" var(--font-weight), "wdth" var(--font-width);
}
I also created a custom hook for localStorage, which allows me to store the user's settings in the browser's local storage. This way, the user's settings are saved even if they close the browser.
import { useState } from "react";
export default function useLocalStorage(key, initialValue) {
const [storedValue, setStoredValue] = useState(() => {
const item = window.localStorage.getItem(key);
return JSON.parse(item) ?? initialValue;
});
const saveToLocalStorage = (value) => {
// Set to state
setStoredValue(value);
// Save to actual local storage
window.localStorage.setItem(key, JSON.stringify(value));
};
return [storedValue, saveToLocalStorage, setStoredValue];
}
I want to continue learning about more PostCSS add-ons, such as postcss-preset-env, which allows me to use the latest CSS features, such as font-variation-settings
, without worrying about browser compatibility.
And want to create a project in React with TypeScript to take advantage of the type system and improve the code quality.
-
prefers-color-scheme - This article helped me understand how to detect the user's preferred color scheme.
-
font-variation-settings - This article helped me understand how to use the
font-variation-settings
property. -
useLocalStorage - This article helped me understand how to create a custom hook for localStorage.
- Frontend Mentor - @874anthony
- Twitter - @874anthony
- GitHub - @874anthony
- LinkedIn - Anthony Acosta