Insert java script into html page

ШИФРА ЗАДАТКА:ЕИТ-A11
НАЗИВ ЗАДАТКА:КРЕИРАЊЕ ВЕБ АПЛИКАЦИЈЕ – НУМЕРОЛОШКО СЛАГАЊЕ
Креирати веб апликацију,намењену за разоноду, са називом “Нумеролошко слагање”.
Посетити сајт http://www.freewebtemplates.com/jquery-templates/ и са њега скинути неки темплејт по жељи. На основу тог темплејта креирати веб апликацију која треба да има најмање три странице: Почетна, О аутору и Упутство.
На страници Почетна поставити форму за унос имена и датума рођења за две особе:
Име особе1: Име особе2:
Датум рођења особе1: Датум рођења особе2:
Испод форме поставити пригодну слику (нпр. два цвета, два лептира, два срца…) на левој страни слике треба да буде име особе1, на десној име особе 2, а у средини број који у процентима изражава колико се те две особе слажу.
На страници О аутору написати основне податке о аутору.
На страници Упутство написати кратко упутство за коришћење веб апликације.
Веб апликација треба да има следећу фукционалност: Попуњавањем комплетне форме израчунати проценат колико се две особе слажу. Тај проценат уписати у поље на средини слике. Проценат слагања рачунамо на следећи начин сабирамо цифре датума рођења све док не добијемо једноцифрен број, а то урадимо за оба датума рођења потом поделимо мањи број са већим и помножимо са 100.
Пример израчунавања процената слагања за датуме 4.5.2001 и 9.10.2001:
4+5+2+0+0+1=12 па 1+2=3
9+1+0+2+0+0+1=13 па 1+3=4
Проценат слагања (3/4)*100=75%
CSS код и код за функционалност издвојити у посебне екстерне датотеке а учитати их у HTML при стартовању апликације.
Готову апликацију поставити на Веб сервер инсталиран на локалном рачунару.
Прибор за рад:
Рачунар са потребним програмима и прикључком на Интернет.
Време за израду задатка:
Максимално време за израду задатка је 180 минута. По истеку максималног времена задатак се прекида и бодује се оно што је до тада урађено.
За оцењивање користити образац за оцењивање број ЕИТ-A11

Skinuti sledeći primer:

https://www.freewebtemplates.com/download/free-website-template/photo-bw2-174135266/

index.html

<!DOCTYPE HTML>
<html>

<head>
<title>Numerološko slaganje</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>

<body>
<div id="main">
<header>
<div id="logo">
<div id="logo_text">

<h1><a href="index.html">Numerolosko<span class="logo_colour">slaganje</span></a></h1>

</div>

</div>
<nav>
<ul class="sf-menu" id="nav">
<li class="selected"><a href="index.html">Početna</a></li>
<li><a href="Oautoru.html">O autoru</a></li>
<li><a href="Uputstvo.html">Uputstvo</a></li>

</ul>
</nav>
</header>
<div id="site_content">
<div id="sidebar_container">
<p id="osoba1" style="text-align:left">Partner1</p>
<p id="osoba2" style="text-align:right">Partner2</p>
<div class="gallery">



<img width="300" height="300" src="images/srca.png" class="srca"/>

</div>
<p id="procenat" style="text-align:center">Procenat slaganja</p>

</div>
<div id="content">
<h1>Numerolosko slaganje!</h1>
<p>Forma ispod omogućava vam da u formatu "dan-mesec-godina" unesete svoj datum rođenja i datum rođenja voljene osobe, kao i vaša imena.
Nakon toga klikom na dugme saznajte koliko ste kompatibilni sa svijim partnerom izraženo u procentima!</p>
<h3>Kompatibilnost</h3>
<form action="JavaScript:izracunaj()">
<table>
<tr>

<td><label for="fname">Vaše ime: </label>
<input type="text" id="ime1" name="fname"></td>
<td> <label for="fname">Vaš datum rođenja:</label>
<input type="date" id="datum1" name="datum">
</td>
</tr>
<tr>
<td><label for="fname">Ime partnera:</label>
<input type="text" id="ime2" name="fname"></td>
<td><label for="fname">Datum rođenja partnera:</label>
<input type="date" id="datum2" name="datum"></td>
</tr>
</table>
<input type="submit" value="Izracunaj" class="button1">
</form>

</ul>
</div>
</div>
<footer>
<p>Copyright © photo_bw2 | <a href="http://www.heartinternet.co.uk/web-hosting/">Hosting</a> |<a href="http://www.css3templates.co.uk">design from css3templates.co.uk</a></p>
</footer>
</div>
<p> </p>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<script type="text/javascript" src="js/image_fade.js"></script>
<script type="text/javascript" src="js/java.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
});
</script>
</body>
</html>

Oautoru.html

<!DOCTYPE HTML>

<html>

<head>

<title>O autoru</title>

</head>

<body>

<h1><a href="index.html">Numerolosko<span class="logo_colour">slaganje</span></a></h1>

</div>

<nav>

<li class="selected"><a href="index.html">Početna</a></li>

<li><a href="Oautoru.html">O autoru</a></li>

<li><a href="Uputstvo.html">Uputstvo</a></li>

</ul>

</nav>

</header>

</ul>

</div>

<h1>O autoru</h1>

<p> Sajt radila učenica Marijana Petojević 4/08</p>

</ul>

</div>

</footer>

</div>

$(document).ready(function() {

$('ul.sf-menu').sooperfish();

});

</script>

</body>

</html>

Uputstvo.html

<!DOCTYPE HTML>

<html>

<head>

<title>Uputstvo</title>

</head>

<body>

<h1><a href="index.html">Numerolosko<span class="logo_colour">slaganje</span></a></h1>

</div>

<nav>

<li class="selected"><a href="index.html">Početna</a></li>

<li><a href="Oautoru.html">O autoru</a></li>

<li><a href="Uputstvo.html">Uputstvo</a></li>

</ul>

</nav>

</header>

</ul>

</div>

<h1>Uputstvo o funkcionalnosti</h1>

<p>Sajt na početnoj stranici omogućava unos imen ai datuma rođenja dveju zaljubljenih osoba.

<br> Klikom na dugme "Izračunaj" izračunava se njihova kompatibilnost u procentima.

<br> Sajt je namenjen samo za zabavu i izračunate vrednosti ne moraju biti tačne!</p>

</ul>

</div>

</footer>

</div>

$(document).ready(function() {

$('ul.sf-menu').sooperfish();

});

</script>

</body>

</html>

U folder java dodati sledeći fajl java.js

function izracunaj(){

var v1, v2, proc, i;

var s1=0;

var s2=0;

var p;

v1 = document.getElementById('datum1').value;

v2 = document.getElementById('datum2').value;

var imeOsobe1 = document.getElementById('ime1').value;

var imeOsobe2 = document.getElementById('ime2').value;

{

s1=0;

for(i=0; i<v1.length; i++)

{

if(v1[i] != '-')

s1=s1 + +v1[i];

}

v1=s1.toString();

}while(s1>9);

{

s2=0;

for(i=0; i<v2.length; i++)

{

if(v2[i] != '-')

s2=s2 + +v2[i];

}

v2=s2.toString();

}while(s2>9);

if(s1 < s2)

p=(s1 / s2) * 100;

else

p=(s2 / s1) * 100;

p=Math.round(p);

document.getElementById('procenat').innerHTML = p+'%';

document.getElementById('osoba1').innerHTML = imeOsobe1;

document.getElementById('osoba2').innerHTML = imeOsobe2;

}

U folder sa slikama dodati sledeću sliku:

Programerski kutak

Претражи овај блог

Insert java script into html page

Коментари

Постави коментар

Популарни постови са овог блога

Making foto slider in CSS

Adding button dynamically through code asp.net