- Overview
- Screenshot
- Links
- My process
- Built with
- What I learned
- Continued development
- Useful resources
- Author
- Acknowledgments
I created a Random Joke generator with ReactJS and a JokeAPI. When the Dice button is clicked, a new random joke is displayed. Time intervals of at least 5 seconds should be given between jokes.
- Live Site URL: (https://resonant-empanada-55b3ec.netlify.app/)
- Installed React.
- Added neccessary files and a folder.
- Wrote necessary code and CSS.
- I used Axios to fetch data from the JokeApi Documentation.
- I added an extra feature: Dark/Light Mode feature.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- React - JS library
I learnt how to fetch data with React Hooks and Axios.
Code Snippet:
function App() {
const [theme, setTheme] = useState("dark")
const toggleTheme = () =>{
setTheme((curr) => (
curr ==="dark" ? "light":"dark"
))
}
return (
<ThemeContext.Provider value={{theme, toggleTheme}}>
<div id={theme}>
<Generator/>
{/* switch slider for light/dark mode */}
<div className="switch-checkbox">
<span id="mode-text">{theme === "light" ? "Light Mode" : "Dark Mode"}</span>
<label className="switch">
<input type="checkbox" onChange={toggleTheme}/>
<span className="slider round"> </span>
</label>
</div>
</div>
</ThemeContext.Provider>
);
}
I will focus on bulding projects from Frontend Mentor challenges and personal projects for personal development.
- Resource 1 - This helped me with the Git wokflow.
- Resource 2 - This helped me with the free API.
- Website - Nkwor Jane
- Frontend Mentor - @Nkwor-Jane
I would like to thank Frontend Mentor.