Drugi zadatak #4

Merged
esensar merged 1 commits from develop into master 2016-04-03 22:59:35 +00:00
7 changed files with 346 additions and 1 deletions

View File

@ -48,6 +48,11 @@
Contact
</a>
</li>
<li class="headerItem">
<a class="headerLink" href="register.html">
Register
</a>
</li>
</ul>
</div>
<div class="content">

View File

@ -48,6 +48,11 @@
Contact
</a>
</li>
<li class="headerItem">
<a class="headerLink" href="register.html">
Register
</a>
</li>
</ul>
</div>
<div class="content">

View File

@ -3,11 +3,12 @@
<HEAD>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<link rel="stylesheet" type="text/css" href="stil.css" />
<script type="text/javascript" src="js.js"></script>
<TITLE>
Movie Database
</TITLE>
</HEAD>
<BODY>
<BODY onload="onLoad()">
<div class="top">
<a class="logoLink" href="index.html">
<div class="fullLogo">
@ -48,24 +49,40 @@
Contact
</a>
</li>
<li class="headerItem">
<a class="headerLink" href="register.html">
Register
</a>
</li>
<li class="headerItem">
<select id="filter" name="filter" onchange="onFilter(this.value)">
<option value="all">Sve novosti</option>
<option value="daily">Današnje vijesti</option>
<option value="weekly">Novosti ove sedmice</option>
<option value="monthly">Novosti ovaj mjesec</option>
</select>
</li>
</ul>
</div>
<div class="content">
<div class="news">
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2016-02-14 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>
<div class="news">
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2016-01-14 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>
<div class="news">
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2016-03-14 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>
@ -73,12 +90,122 @@
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2016-04-03 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>
<div class="news">
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2016-04-02 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>
<div class="news">
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2016-03-29 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>
<div class="news">
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2016-03-20 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>
<div class="news">
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2015-02-14 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>
<div class="news">
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2016-01-14 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>
<div class="news">
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2015-11-14 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>
<div class="news">
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2008-02-14 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>
<div class="news">
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2008-02-14 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>
<div class="news">
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2008-02-14 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>
<div class="news">
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2008-02-14 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>
<div class="news">
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2008-02-14 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>
<div class="news">
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2008-02-14 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>
<div class="news">
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2008-02-14 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>
<div class="news">
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2008-02-14 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>
<div class="news">
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2008-02-14 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>
<div class="news">
<img src="http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_UY113_CR6,0,76,113_AL_.jpg" />
<p>
<time class='vrijeme' datetime="2008-02-14 20:00"></time>
What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.What did the world look like as it was transforming into the horrifying apocalypse depicted in "The Walking Dead"? This spin-off set in Los Angeles, following new characters as they face the beginning of the end of the world, will answer that question.
</p>
</div>

119
js.js 100644
View File

@ -0,0 +1,119 @@
function onLoad() {
var vremena = document.getElementsByClassName('vrijeme');
var currentDate = new Date();
for(var i = 0; i < vremena.length; i++) {
var datum = new Date(vremena[i].getAttribute('datetime'));
var diff = currentDate.getTime() - datum.getTime();
if (diff < 60*1000) {
vremena[i].innerHTML = "Prije par sekundi";
} else if (diff < 60 * 1000 * 60) {
var minute = Math.floor(diff/60/1000);
if(minute % 10 > 1 && minute % 10 < 5 && (minute / 10 < 1 || minute / 10 > 2)) {
vremena[i].innerHTML = "Prije " + minute + " minute";
} else {
vremena[i].innerHTML = "Prije " + minute + " minuta";
}
} else if (diff < 24 * 60 * 1000 * 60) {
var sati = Math.floor(diff/60/60/1000);
if(sati == 1) {
vremena[i].innerHTML = "Prije 1 sat";
} else if (sati % 10 > 1 && sati % 10 < 5 && (sati / 10 < 1 || sati / 10 > 2)) {
vremena[i].innerHTML = "Prije " + sati + " sata";
} else {
vremena[i].innerHTML = "Prije " + sati + " sati";
}
} else if (diff < 24 * 60 * 1000 * 60 * 7) {
var dani = Math.floor(diff/24/60/60/1000);
if(dani == 1) {
vremena[i].innerHTML = "Prije 1 dan";
} else {
vremena[i].innerHTML = "Prije " + dani + " dana";
}
} else if (diff < 24 * 60 * 1000 * 60 * 30) {
var sedmice = Math.floor(diff/24/60/60/1000/7);
if(sedmice == 1) {
vremena[i].innerHTML = "Prije 1 sedmicu";
} else if (sedmice % 10 > 1 && sedmice % 10 < 5 && (sedmice / 10 < 1 || sedmice / 10 > 2)) {
vremena[i].innerHTML = "Prije " + sedmice + " sedmice";
} else {
vremena[i].innerHTML = "Prije " + sedmice + " sedmica";
}
} else {
vremena[i].innerHTML = vremena[i].getAttribute('datetime');
}
}
}
function onFilter(select) {
var option = select;
var news = document.getElementsByClassName('news');
var today = new Date();
switch (option) {
case 'all':
for(var i = 0; i < news.length; i++) {
news[i].style.display = "inline-block";
}
break;
case 'daily':
for(var i = 0; i < news.length; i++) {
var datum = new Date(news[i].getElementsByClassName('vrijeme')[0].getAttribute('datetime'));
var diff = today.getTime() - datum.getTime();
if(diff<1000*60*60*24) {
news[i].style.display = "inline-block";
} else {
news[i].style.display = "none";
}
}
break;
case 'weekly':
for(var i = 0; i < news.length; i++) {
var datum = new Date(news[i].getElementsByClassName('vrijeme')[0].getAttribute('datetime'));
var diff = today.getTime() - datum.getTime();
if(diff<1000*60*60*24*7) {
news[i].style.display = "inline-block";
} else {
news[i].style.display = "none";
}
}
break;
case 'monthly':
for(var i = 0; i < news.length; i++) {
var datum = new Date(news[i].getElementsByClassName('vrijeme')[0].getAttribute('datetime'));
var diff = today.getTime() - datum.getTime();
if(diff<1000*60*60*24*30) {
news[i].style.display = "inline-block";
} else {
news[i].style.display = "none";
}
}
}
}
function validateEmail(emailField) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(re.test(emailField.value)) {
emailField.style.backgroundColor = "white";
} else {
emailField.style.backgroundColor = "red";
}
}
function validatePassword(passwordField) {
var re = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
if(re.test(passwordField.value)) {
passwordField.style.backgroundColor = "white";
} else {
passwordField.style.backgroundColor = "red";
}
}
function validateConfirm(confirmField) {
var passwordField = document.getElementById("passwordField");
if(passwordField.value === confirmField.value) {
confirmField.style.backgroundColor = "white";
validatePassword(passwordField);
} else {
confirmField.style.backgroundColor = "red";
passwordField.style.backgroundColor = "red";
}
}

77
register.html 100644
View File

@ -0,0 +1,77 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<link rel="stylesheet" type="text/css" href="stil.css" />
<script type="text/javascript" src="js.js"></script>
<TITLE>
Movie Database
</TITLE>
</HEAD>
<BODY>
<div class="top">
<a class="logoLink" href="index.html">
<div class="fullLogo">
<div class="logoWrap">
<div class="logoLine">
</div>
<div class="logoBack">
<div class="logo">
</div>
</div>
<div class="logoLine">
</div>
</div>
<p class="logoText">MDB</p>
</div>
</a>
</div>
<div class="header">
<ul class="headerBar">
<li class="headerItem">
<a class="headerLink" href="index.html">
Home
</a>
</li>
<li class="headerItem">
<a class="headerLink" href="table.html">
Top rated
</a>
</li>
<li class="headerItem">
<a class="headerLink" href="about.html">
About
</a>
</li>
<li class="headerItem">
<a class="headerLink" href="contact.html">
Contact
</a>
</li>
<li class="headerItem">
<a id="activeHeaderLink" class="headerLink" href="register.html">
Register
</a>
</li>
</ul>
</div>
<div class="content">
<div class="contactForm">
<label >
Email:
</label><br />
<input type="text" id="emailField" name="email" oninput="validateEmail(this)"/> <br />
<label >
Password:
</label><br />
<input type="text" id="passwordField" name="password" oninput="validatePassword(this)" /><br />
<label >
Confirm:
</label><br />
<input type="text" id="confirmField" name="confirm" oninput="validateConfirm(this)" /><br />
<input type="button" name="submit" value="Submit" />
</div>
</div>
</BODY>
</HTML>

View File

@ -179,3 +179,10 @@ p {
display: inline-block;
margin: 5px;
}
time {
font-family: sans-serif;
color: gray;
font-size: 10px;
display: block;
}

View File

@ -48,6 +48,11 @@
Contact
</a>
</li>
<li class="headerItem">
<a class="headerLink" href="register.html">
Register
</a>
</li>
</ul>
</div>
<div class="content">