https://github.com/yougotwill/phonics-esl

A small tool to practice and review the phonics of English!
https://github.com/yougotwill/phonics-esl

education english esl phonics react sounds tailwindcss

Last synced: about 1 month ago
JSON representation

A small tool to practice and review the phonics of English!

• Host: GitHub
• URL: https://github.com/yougotwill/phonics-esl
• Owner: yougotwill
• Created: 2020-02-19T14:07:27.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T15:00:40.000Z (about 2 years ago)
• Last Synced: 2024-11-08T11:53:24.284Z (3 months ago)
• Topics: education, english, esl, phonics, react, sounds, tailwindcss
• Language: JavaScript
• Homepage: https://yougotwill.github.io/phonics-esl
• Size: 12 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Phonics ESL

A simple tool to review English Phonics based on [Jolly Phonics](http://jollyreading.com/introduction-to-jolly-phonics/).

This project was built in order to explore [TailwindCSS](https://tailwindcss.com/).

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Features

- [x] React Hooks (useState, useEffect, useRef)

- [x] Functional Components

- [x] Search Functionality

- [x] Simple Modal System

- [x] Light / Dark Theme (saved in localStorage)

- [x] Mobile First Design

## Screenshots

### Mobile





### Desktop





## Development

- Did you notice a bug? Please report it [here](https://github.com/yougotwill/phonics-esl/issues/new?labels=bug&template=bug_report.md)

- Want to request a feature? Please let me know [here](https://github.com/yougotwill/phonics-esl/issues/new?labels=enhancement&template=feature_request.md')

## References

- [React + Tailwind Setup](https://medium.com/quick-code/tailwind-react-typescript-a0317155e5ee)

- [Hover tooltips](https://github.com/Cosbgn/tailwindcss-tooltips/blob/master/README.md)

- [CSS Triangle for tooltip](https://dev.to/adriantwarog/learn-how-to-make-a-triangle-in-css-once-and-for-all-2pfe)

- [Referencing HTML audio element](https://reactjs.org/docs/hooks-reference.html#useref)

- [Jolly Phonics Sounds](https://www.jollylearning.co.uk/resource-bank/learn-the-letter-sounds/)

- [Jolly Phonics Gestures](https://www.jollylearning.co.uk/resource-bank/jolly-phonics-actions/)

- [Modal with tailwindcss](https://codeburst.io/creating-a-modal-dialog-with-tailwind-css-42722c9aea4f)

- [Modal closing behaviour](https://stackoverflow.com/questions/37573608/how-to-make-modal-close-on-click-outside/37573735)