cloud-workshop
Materials for workshop about cloud development
Exercises
01. Create application skeleton
Create H1 header with title of application. Add div tag with English word. Add 4 buttons tags with Czech translation.
02. Fix diacritics
Add necessary header in order to display diacritics correctly.
03. Add Twitter bootstrap
Add Twitter bootstrap CDN to header to make app nicer
04. Change 4 divs to buttons
Change 4 Czech options to 4 buttons. Replace div tag by button tag and class.
05. Use Twitter style of buttons
Add CSS class definition to buttons: class="btn btn-default".
Fix for C9.io ide to avoid jQuery warning, add /* global $ */
06. Display alert when on button click
Add JavaScript using jQuery and display alert after any button click.
07. Display alert with value of clicked button
We need to know what is value of clicked button. Find it and display it.
08. Display alert with success or fail
Compare value from clicked button and display alert with fail or success.
09. Status message
Add div with id "status" and set its "text" value instead of display alert.
10. Status icon
Display icon which indicates status. Use Twitter Glyphicons.
- http://getbootstrap.com/components/
- http://api.jquery.com/addClass/
- http://api.jquery.com/removeClass/
11. Add support for more words
Create two lists of words. One in English and one in Czech.
var czechWords = []; var englishWords = [];
12. Pick random English word from list
Select random word and display it on sreen. Use Math.random and Math.floor functions.
13. Check correct answer
Compare index of selected word with primary word and display success or failure.
14. Generate content of buttons
Define ID for each button and use "for" cycle to display words on buttons
15. Generate new words after selecting correct one
Run function for generating word again when the word was correct.
16. Add delay before moving starting new round of game
Use setTimeout function to invoke new game after selecting word.
17. Fade out status message
Use fadeOut function to remove message from display.
18. Display message evan after fadeout
Bring back message tag using "show" function.