mirror of
https://github.com/ysoftdevs/cloud-workshop.git
synced 2026-01-11 14:30:32 +01:00
106 lines
2.6 KiB
Markdown
106 lines
2.6 KiB
Markdown
# 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
|
|
|
|
- http://getbootstrap.com/getting-started/
|
|
|
|
## 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 $ */
|
|
|
|
- https://community.c9.io/t/being-flagged-as-not-defined-in-js-file-when-using-jquery/4231/5
|
|
|
|
## 06. Display alert when on button click
|
|
|
|
Add JavaScript using jQuery and display alert after any button click.
|
|
|
|
- https://code.jquery.com/
|
|
|
|
## 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.
|
|
|
|
- http://api.jquery.com/text/
|
|
|
|
## 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.
|
|
|
|
- http://www.w3schools.com/jsref/jsref_random.asp
|
|
|
|
## 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.
|
|
|
|
- http://stackoverflow.com/questions/10860171/run-function-after-delay
|
|
|
|
## 17. Fade out status message
|
|
|
|
Use fadeOut function to remove message from display.
|
|
|
|
- http://api.jquery.com/fadeOut/
|
|
|
|
## 18. Display message evan after fadeout
|
|
|
|
Bring back message tag using "show" function.
|
|
|
|
- http://stackoverflow.com/questions/13228696/re-displaying-after-fadeout
|