ШИФРА ЗАДАТКА: ЕИТ-A1
НАЗИВ ЗАДАТКА: КРЕИРАЊЕ ВЕБ АПЛИКАЦИЈЕ –ДОМАЋЕ ЖИВОТИЊЕ
Креирати веб апликацију са називом “Домаће животиње” која се састоји од три странице: Почетна, О аутору и Упутство.
На страници Почетна поставити позадину која треба да представља природно станиште домаћих животиња, а на њој поставити слике најмање пет домаћих животиња.
На страници О аутору написати основне податке о аутору.
На страници Упутство написати кратко упутство за коришћење веб апликације.
Веб апликација треба да има следећу фукционалност: Преласком миша преко слике домаће животиње чује се карактеристичан звук те животиње, а левим кликом миша на слику животиње отвара се прозор са кратким описом те домаће животиње.
CSS код и код за функционалност издвојити у посебне екстерне датотеке а учитати их у HTML при стартовању апликације.
Готову апликацију поставити на Веб сервер инсталиран на локалном рачунару.
Прибор за рад:
Рачунар са потребним програмима и прикључком на Интернет.
Време за израду задатка: Максимално време за израду задатка је 180 минута. По истеку максималног времена задатак се прекида и бодује се оно што је до тада урађено.
За оцењивање користити образац за оцењивање број ЕИТ- A1
Folder fja, stranice: Pocetna.html, Oautoru.html, Uputstvo.html
Pocetna:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="fja/style.css">
<style>
</style>
</head>
<body>
<h1>Vremenska prognoza</h1>
<label class="container">Beograd
<input type="radio" checked="checked" id="radio1" name="radio" onclick="go('https://naslovi.net/cir/vremenska-prognoza/beograd')" >
<span class="checkmark"></span>
</label>
<label class="container">Nis
<input type="radio" id="radio2" name="radio" onclick="go('https://naslovi.net/cir/vremenska-prognoza/nis')">
<span class="checkmark"></span>
</label>
<label class="container">Kragujevac
<input type="radio" id="radio3" name="radio" onclick="go('https://naslovi.net/cir/vremenska-prognoza/kragujevac')">
<span class="checkmark"></span>
</label>
<label class="container">Vranje
<input type="radio" id="radio4" name="radio" onclick="go('https://naslovi.net/cir/vremenska-prognoza/vranje')">
<span class="checkmark"></span>
</label>
<label class="container">Sabac
<input type="radio" id="radio5" name="radio" onclick="go('https://naslovi.net/cir/vremenska-prognoza/sabac')">
<span class="checkmark"></span>
</label>
<label class="container">Kraljevo
<input type="radio" id="radio6" name="radio" onclick="go('https://naslovi.net/cir/vremenska-prognoza/kraljevo')">
<span class="checkmark"></span>
</label>
<label class="container">Sombor
<input type="radio" id="radio8" name="radio" onclick="go('https://naslovi.net/cir/vremenska-prognoza/sombor')">
<span class="checkmark"></span>
</label>
<label class="container">Subotica
<input type="radio" id="radio9" name="radio" onclick="go('https://naslovi.net/cir/vremenska-prognoza/subotica')">
<span class="checkmark"></span>
</label>
<label class="container">Vrsac
<input type="radio" id="radio10" name="radio" onclick="go('https://naslovi.net/cir/vremenska-prognoza/vrsac')">
<span class="checkmark"></span>
</label>
<iframe src="https://naslovi.net/cir/vremenska-prognoza/beograd" class="iframe" id="frejm"></iframe>
<br/>
<a href="Oautoru.html" target="_blank">O autoru</a>
<a href="Uputstvo.html" target="_blank">Uputstvo</a>
<script src="fja/java.js"></script>
</body>
</html>
O autoru:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="fja/style.css">
<style>
</style>
</head>
<body>
<h1>Stranicu radila Marijana Petojevic 4/08</h1>
<a href="Pocetna.html">Nazad</a>
</body>
</html>
Uputstvo:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="fja/style.css">
<style>
</style>
</head>
<body>
<h1>Izborom grada prikazuje se vremenska prognoza za danasnji dan!</h1>
<a href="Pocetna.html">Nazad</a>
</body>
</html>
Folder fja:
java.js
function go(loc){
console.log(loc);
document.getElementById('frejm').src = loc;
}
sytle.css
a:link, a:visited {
background-color: #f065c1;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.iframe{
height:300px;
width:500px;
}
.body{
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
.container:hover input ~ .checkmark {
background-color: #ccc;
}
.container input:checked ~ .checkmark {
background-color: #f065c1;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.container input:checked ~ .checkmark:after {
display: block;
}
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
Коментари
Постави коментар