github-mirrors/cloud-workshop
1
0
Fork 0
mirror of https://github.com/ysoftdevs/cloud-workshop.git synced 2026-01-11 14:30:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

add 10 exercises

Browse Source
This commit is contained in:
Juraj Michálek
2016-12-14 20:14:35 +00:00
parent da31751c4b
commit 22759d947c
11 changed files with 337 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
README.md
View File

@@ -1,2 +1,58 @@
# 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/

16
exercise-01/index.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Word catcher</h1>
<div>word</div>
<div>
<div>dům</div>
<div>auto</div>
<div>slovo</div>
<div>škola</div>
</div>
</body>
</html>

16
exercise-02/index.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Word catcher</h1>
<div>word</div>
<div>
<div>dům</div>
<div>auto</div>
<div>slovo</div>
<div>škola</div>
</div>
</body>
</html>

18
exercise-03/index.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<h1>Word catcher</h1>
<div>word</div>
<div>
<div>dům</div>
<div>auto</div>
<div>slovo</div>
<div>škola</div>
</div>
</body>
</html>

18
exercise-04/index.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<h1>Word catcher</h1>
<div>word</div>
<div>
<button type="button">dům</button>
<button type="button">auto</button>
<button type="button">slovo</button>
<button type="button">škola</button>
</div>
</body>
</html>

18
exercise-05/index.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<h1>Word catcher</h1>
<div>word</div>
<div>
<button type="button" class="btn btn-default">dům</button>
<button type="button" class="btn btn-default">auto</button>
<button type="button" class="btn btn-default">slovo</button>
<button type="button" class="btn btn-default">škola</button>
</div>
</body>
</html>

34
exercise-06/index.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
function buttonClickHandler(event) {
alert("Clicked");
}
function documentReady() {
$(".btn").click(buttonClickHandler);
}
$( document ).ready(documentReady);
</script>
</head>
<body>
<h1>Word catcher</h1>
<div>word</div>
<div>
<button type="button" class="btn btn-default">dům</button>
<button type="button" class="btn btn-default">auto</button>
<button type="button" class="btn btn-default">slovo</button>
<button type="button" class="btn btn-default">škola</button>
</div>
</body>
</html>

34
exercise-07/index.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
function buttonClickHandler(event) {
alert("Clicked: " + event.target.textContent);
}
function documentReady() {
$(".btn").click(buttonClickHandler);
}
$( document ).ready(documentReady);
</script>
</head>
<body>
<h1>Word catcher</h1>
<div>word</div>
<div>
<button type="button" class="btn btn-default">dům</button>
<button type="button" class="btn btn-default">auto</button>
<button type="button" class="btn btn-default">slovo</button>
<button type="button" class="btn btn-default">škola</button>
</div>
</body>
</html>

40
exercise-08/index.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
function buttonClickHandler(event) {
var message;
if (event.target.textContent == "slovo") {
message = "Congratulation! Correct answer.";
} else {
message = "Incorrect answer. Try again.";
}
alert(message);
}
function documentReady() {
$(".btn").click(buttonClickHandler);
}
$( document ).ready(documentReady);
</script>
</head>
<body>
<h1>Word catcher</h1>
<div>word</div>
<div>
<button type="button" class="btn btn-default">dům</button>
<button type="button" class="btn btn-default">auto</button>
<button type="button" class="btn btn-default">slovo</button>
<button type="button" class="btn btn-default">škola</button>
</div>
</body>
</html>

41
exercise-09/index.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
function buttonClickHandler(event) {
var message;
if (event.target.textContent == "slovo") {
message = "Congratulation! Correct answer.";
} else {
message = "Incorrect answer. Try again.";
}
$("#status").text(message);
}
function documentReady() {
$(".btn").click(buttonClickHandler);
}
$( document ).ready(documentReady);
</script>
</head>
<body>
<h1>Word catcher</h1>
<div>word</div>
<div>
<button type="button" class="btn btn-default">dům</button>
<button type="button" class="btn btn-default">auto</button>
<button type="button" class="btn btn-default">slovo</button>
<button type="button" class="btn btn-default">škola</button>
</div>
<div id="status"></div>
</body>
</html>

46
exercise-10/index.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
function buttonClickHandler(event) {
var message;
if (event.target.textContent == "slovo") {
message = "Congratulation! Correct answer.";
$("#statusIcon").addClass("glyphicon-ok").removeClass("glyphicon-remove");
} else {
message = "Incorrect answer. Try again.";
$("#statusIcon").addClass("glyphicon-remove").removeClass("glyphicon-ok");
}
$("#status").text(message);
}
function documentReady() {
$(".btn").click(buttonClickHandler);
}
$( document ).ready(documentReady);
</script>
</head>
<body>
<h1>Word catcher</h1>
<div>word</div>
<div>
<button type="button" class="btn btn-default">dům</button>
<button type="button" class="btn btn-default">auto</button>
<button type="button" class="btn btn-default">slovo</button>
<button type="button" class="btn btn-default">škola</button>
</div>
<div>
<span id="statusIcon" class="glyphicon" ></span>
<span id="status">...select word...</span>
</div>
</body>
</html>