Our inspiration for this game is a typing test website called Monkeytype

What it does

The user must type the lyrics of the selected song in correlation to the song playing. This program will measure the accuracy and speed of the player's ability to keep up with the song.

How we built it

We used HTML, CSS and javascript to create our website. We used HTML and CSS to create the base of the website, such as the text area and the title. We used javascript in order to tell if the user input the right letter according to the lyrics or not. If they input the right letter, the letter would be added to the 'correct' class. If they input the wrong letter, the letter would be added to the 'incorrect' class. The letters of the correct class would be green and the letters of the incorrect class would be red. The colours of the letters which are not yet typed are white. We also would not want the user to backspace any characters because it would only hinder them in the long run since the music would still be playing while they're backspacing. We used the keycode value of backspace to prevent them from using it.

Challenges we ran into

The inputted text was not confined to the user input box so after a certain amount of characters the lyrics would move off-screen making it difficult for the players to keep track of the lyrics.

Accomplishments that we're proud of

One of the accomplishments that we pride ourselves in is the function that allows the accurate characters the player inputs to appear as green and the incorrect characters to appear as red. This slight indication allows players to visualize their mistakes.

What we learned

We utilized the workshops regarding web development and implemented those techniques and functions into our own website.

What's next for Karaoke Type

We will be implementing the rhythm aspect in which it tracks the timing in which the lyrics have been typed. It will measure the accuracy in the timing in which the words have been inputted. It will notice the occurrences where the lyrics have been inputted late or early. In addition, we will implement a scoring system that calculates the percentage of the accuracy. Also, we will add a countdown that is connected to the beginning of the song. We will also add more songs.

Built With

Share this project: