mirror of
https://github.com/ysoftdevs/cloud-workshop.git
synced 2026-01-16 08:36:51 +01:00
59 lines
1.3 KiB
Markdown
59 lines
1.3 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"
|
|
|
|
## 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/
|
|
|