Giter Club home page Giter Club logo

csecsi85 / word-reader-for-kids Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 5.11 MB

Helper application for the game called Pictionary. My daughter was too young to read the card in Pictionary, so I created this little JavaScript application so she can play with us. It randomly pulls words from a list and say the out loud.

Home Page: https://csecsi85.github.io/Word-reader-for-kids/

HTML 14.28% CSS 17.95% JavaScript 67.76%
game javascript children pictionary

word-reader-for-kids's Issues

Add initialisation to the next button

  • When timer time is up and clicking on the next button "Time is up" text showing instead of the initial time.
  • Reset the timer minutes, seconds.
  • Show Play/Pause button again.

Some sound files don't play

A few sound files that I uploaded don't play sound when they are loaded. Have to check every file and delete the ones that don't play sound.

Adjust card text font size when the text is too long.

When the card text is too long, the text wraps to a new line elongating the card container and makes it ugly.
Implement a function that checks for the length of the text on the card and reduces the font size to fit into one line.

Listen button doesn't play sound

On initial load the word appears and the corresponding sound file plays but nothing happens when you click on the listen button.

Change button text to icons

Buttons text need to be changed to icons to make it easier to navigate for kids without able to read.

  • Play/pause icon for timer
  • Speaker icon to listen button
  • Forward icon for next button

Add additional options for exiting settings menu.

Right now you can only exit from the modal window by clicking on the cog button.
I would like to implement other exit options like:

  • Exit on pressing ESC
  • Exit on clicking outside the modal window.
  • Exit after pressing the SET button
  • When modal displaying, change the setting button icon to a big X to make it clearer that you have to press button again in order to exit.

Any additional suggestions are appreciated.

Fix listen button sound issue

When you click on the play sound button repeatedly in a short period of time, you hear the word multiple times. Have to come up with a solution that prevents this from happening.

Organise code

The code hasn't been optimised/organised, there are still improvements to be made.
Have to separate code to separate files per functionality to make it more organised.

Create a prettier UI

The UI created is just temporary to work on the JavaScript side of the app. Have to create a nicer UI that makes it more comfortable for the eyes.
Maybe even rearrange the entire Layout.

Activity randomisation

The activity is static at the moment. Need to write a script that pulls different pictures when the next button is clicked.

Add styling

Add button animations, style :hover state, and additional improvements.

Implement language changing feature

In the setting there is an option to change language, would be nice to implement it that it uses a different cards array that has English cards with sounds in it.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.