consolidate all repos to one for archive
This commit is contained in:
BIN
semester_1/uvod_v_svetovni_splet/Vaja_2/Image/R3.webp
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_2/Image/R3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
semester_1/uvod_v_svetovni_splet/Vaja_2/Image/R5.webp
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_2/Image/R5.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
semester_1/uvod_v_svetovni_splet/Vaja_2/Image/R7.webp
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_2/Image/R7.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
semester_1/uvod_v_svetovni_splet/Vaja_2/Image/feri.jpg
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_2/Image/feri.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
BIN
semester_1/uvod_v_svetovni_splet/Vaja_2/Image/i3.jpg
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_2/Image/i3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
semester_1/uvod_v_svetovni_splet/Vaja_2/Image/i5.jpg
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_2/Image/i5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
semester_1/uvod_v_svetovni_splet/Vaja_2/Image/i7.jpg
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_2/Image/i7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
109
semester_1/uvod_v_svetovni_splet/Vaja_2/Pages/izdelki.html
Normal file
109
semester_1/uvod_v_svetovni_splet/Vaja_2/Pages/izdelki.html
Normal file
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Nikolova spletna stran</title>
|
||||
<meta name="description" content="Demonstracija 2 vaje">
|
||||
<meta name="keywords" content="USS, FERI, HTML">
|
||||
<meta name="author" content="Nikola Petrov">
|
||||
<meta name="viewport" content="width=device-with, initial-scale=1.0">
|
||||
<style>
|
||||
table, td{border: 1px solid black;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>
|
||||
Nikolova spletna stran
|
||||
</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="../index.html">Glavna stran</a></li>
|
||||
<li><a href="izdelki.html">Izdelki</a></li>
|
||||
<li><a href="svetovanje.html">Svetovanje</a></li>
|
||||
<li><a href="https://estudij.um.si" target="_blank">Vaje</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<p>i7 11700k</p>
|
||||
<img src="../Image/i7.jpg" alt="i7" width="400" height="300">
|
||||
<dl>
|
||||
<dt>Št jedr</dt>
|
||||
<dd>8</dd>
|
||||
<dt>Frekvenca</dt>
|
||||
<dd>3.60 GHz</dd>
|
||||
<dt>Cena</dt>
|
||||
<dd>420€</dd>
|
||||
</dl>
|
||||
</td>
|
||||
<td>
|
||||
<p>Ryzen7 5800X</p>
|
||||
<img src="../Image/R7.webp" alt="R7" width="400" height="300">
|
||||
<dl>
|
||||
<dt>Št jedr</dt>
|
||||
<dd>8</dd>
|
||||
<dt>Frekvenca</dt>
|
||||
<dd>3.80 GHz</dd>
|
||||
<dt>Cena</dt>
|
||||
<dd>430€</dd>
|
||||
</dl>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>i5 11600k</p>
|
||||
<img src="../Image/i5.jpg" alt="i5" width="400" height="300">
|
||||
<dl>
|
||||
<dt>Št jedr</dt>
|
||||
<dd>6</dd>
|
||||
<dt>Frekvenca</dt>
|
||||
<dd>3.90 GHz</dd>
|
||||
<dt>Cena</dt>
|
||||
<dd>280€</dd>
|
||||
</dl>
|
||||
</td>
|
||||
<td>
|
||||
<p>Ryzen5 5600X</p>
|
||||
<img src="../Image/R5.webp" alt="R7" width="400" height="300">
|
||||
<dl>
|
||||
<dt>Št jedr</dt>
|
||||
<dd>6</dd>
|
||||
<dt>Frekvenca</dt>
|
||||
<dd>3.7 GHz</dd>
|
||||
<dt>Cena</dt>
|
||||
<dd>330€</dd>
|
||||
</dl>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>i3 10100</p>
|
||||
<img src="../Image/i3.jpg" alt="i3" width="400" height="300">
|
||||
<dl>
|
||||
<dt>Št jedr</dt>
|
||||
<dd>4</dd>
|
||||
<dt>Frekvenca</dt>
|
||||
<dd>3.60 GHz</dd>
|
||||
<dt>Cena</dt>
|
||||
<dd>140€</dd>
|
||||
</dl>
|
||||
</td>
|
||||
<td>
|
||||
<p>Ryzen3 3300X</p>
|
||||
<img src="../Image/R3.webp" alt="R7" width="400" height="300">
|
||||
<dl>
|
||||
<dt>Št jedr</dt>
|
||||
<dd>4</dd>
|
||||
<dt>Frekvenca</dt>
|
||||
<dd>3.80 GHz</dd>
|
||||
<dt>Cena</dt>
|
||||
<dd>150€</dd>
|
||||
</dl>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Nikolova spletna stran</title>
|
||||
<meta name="description" content="Demonstracija 2 vaje">
|
||||
<meta name="keywords" content="USS, FERI, HTML">
|
||||
<meta name="author" content="Nikola Petrov">
|
||||
<meta name="viewport" content="width=device-with, initial-scale=1.0">
|
||||
<style>
|
||||
div{margin-bottom: 10px;}
|
||||
table{display: inline-block;width: 150px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>
|
||||
Nikolova spletna stran
|
||||
</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="../index.html">Glavna stran</a></li>
|
||||
<li><a href="izdelki.html">Izdelki</a></li>
|
||||
<li><a href="svetovanje.html">Svetovanje</a></li>
|
||||
<li><a href="https://estudij.um.si" target="_blank">Vaje</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<section>
|
||||
<h2>Svetovanje</h2>
|
||||
<h3>Kontaktni podatki</h3>
|
||||
<form action="svetovanje.html" method="get" id="svetovanje">
|
||||
<!--ime-->
|
||||
<div>
|
||||
<label for="name_input">Ime in priimek:</label>
|
||||
<input type="text" id="name_input" name="iname">
|
||||
</div><div>
|
||||
<!--email-->
|
||||
<label for="email_input">E-naslov:</label>
|
||||
<input type="email" id="email_input" name="iemail">
|
||||
</div><div>
|
||||
<!--kraj-->
|
||||
<label for="kraj_input">Kraj:</label>
|
||||
<select name="kraj" id="kraj_input">
|
||||
<option value="ljubljana">Ljubljana</option>
|
||||
<option value="maribor">Maribor</option>
|
||||
<option value="kranj">Kranj</option>
|
||||
<option value="koper">Koper</option>
|
||||
<option value="novo_mesto">Novo mesto</option>
|
||||
</select>
|
||||
</div><div>
|
||||
<!--vrsta računalnika-->
|
||||
<label>Vrsta računalnika:</label>
|
||||
<input type="radio" id="od1_radio" name="od1r" value="true">
|
||||
<label for="od1_radio">Namizni</label>
|
||||
<input type="radio" id="od2_radio" name="od2r" value="true">
|
||||
<label for="od2_radio">Prenosni</label>
|
||||
<input type="radio" id="od3_radio" name="od3r" value="true">
|
||||
<label for="od3_radio">All-in-One</label>
|
||||
</div><div>
|
||||
<!--namen-->
|
||||
<label>Namen uporabe:</label>
|
||||
<input type="checkbox" id="od1_checkbox" name="od1c" value="true">
|
||||
<label for="od1_checkbox">Igranje iger</label>
|
||||
<input type="checkbox" id="od2_checkbox" name="od2c" value="true">
|
||||
<label for="od2_checkbox">Video obdelava</label>
|
||||
<input type="checkbox" id="od3_checkbox" name="od3c" value="true">
|
||||
<label for="od3_checkbox">3D modeliranje</label>
|
||||
<input type="checkbox" id="od4_checkbox" name="od4c" value="true">
|
||||
<label for="od4_checkbox">Strojno učenje</label>
|
||||
</div><div>
|
||||
<!--comment-->
|
||||
<textarea name="comment" form="svetovanje" cols="60" rows="10">Komentiraj</textarea>
|
||||
</div><div>
|
||||
<!--pošlji-->
|
||||
<input type="submit" value="Pošlji">
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
BIN
semester_1/uvod_v_svetovni_splet/Vaja_2/SSV2.zip
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_2/SSV2.zip
Normal file
Binary file not shown.
56
semester_1/uvod_v_svetovni_splet/Vaja_2/Test/Text File.txt
Normal file
56
semester_1/uvod_v_svetovni_splet/Vaja_2/Test/Text File.txt
Normal file
@@ -0,0 +1,56 @@
|
||||
<p>
|
||||
Ta<i>spletna stran</i> stuži za demonstracijo jezika <b>HTML</b>
|
||||
Več o html-ju lahko izveste na <a href="https://www.w3schools.com/" target="_blank">povezavi</a>
|
||||
Za<u>dodatna</u> uprašanja pišite na<a href="mailto:nikola.petrov@student.um.si">e-naslov</a>
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
Predmetnik 1. LEtnika RIT
|
||||
</div>
|
||||
<ol>
|
||||
<li>Uvod v računalništvo</li>
|
||||
<li>Programiranje 1</li>
|
||||
<li>SPO</li>
|
||||
<li>USS</li>
|
||||
<li>Matematika</li>
|
||||
</ol>
|
||||
<span>Kratice predmetov</span>
|
||||
<dl>
|
||||
<dt>USS</dt>
|
||||
<dd>Uvod v svetovni splet</dd>
|
||||
<dt>SPO</dt>
|
||||
<dd>Sodobna programska oprema</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<a href="Pages/vaje.html">Zagovori vaj</a>
|
||||
<footer>
|
||||
<p>
|
||||
Avtor:Nikola Petrov
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
|
||||
<figure>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Vaja</th>
|
||||
<th>Št. točk</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Osnove spleta</td>
|
||||
<td>5 točk</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HTML</td>
|
||||
<td>8 Točk</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
66
semester_1/uvod_v_svetovni_splet/Vaja_2/Test/vaje.html
Normal file
66
semester_1/uvod_v_svetovni_splet/Vaja_2/Test/vaje.html
Normal file
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description" content="Demonstracija 2 vaje">
|
||||
<meta name="keywords" content="USS, FERI, HTML">
|
||||
<meta name="author" content="Nikola Petrov">
|
||||
<meta name="viewport" content="width=device-with, initial-scale=1.0">
|
||||
</head>
|
||||
<body style="background-color: palegreen;">
|
||||
<header>
|
||||
<h1>
|
||||
predstavitev 2. vaje pri predmetu USS
|
||||
</h1>
|
||||
<nav>
|
||||
<a href="../index.html">Glavna stran</a>
|
||||
<a href="https://estudij.um.si/">Estudij</a>
|
||||
</nav>
|
||||
</header>
|
||||
<section>
|
||||
<figure>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Vaja</th>
|
||||
<th>Št. točk</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Osnove spleta</td>
|
||||
<td>5 točk</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HTML</td>
|
||||
<td>8 Točk</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<span>Prijava na zagovor vaje</span>
|
||||
<form>
|
||||
<!--ime-->
|
||||
<label for="name_input">Ime študenta</label>
|
||||
<input type="text" id="name_input" name="iname" value="Janez">
|
||||
<br/>
|
||||
<!--email-->
|
||||
<label for="email_input">E-naslov</label>
|
||||
<input type="email" id="email_input" name="iemail">
|
||||
<br/>
|
||||
<!--geslo-->
|
||||
<label for="password_input">Geslo</label>
|
||||
<input type="password" id="password_input" name="ipassword">
|
||||
<br/>
|
||||
<!--da ali ne-->
|
||||
<label>Zagovarjal bom vajo</label>
|
||||
<input type="checkbox" id="vaja1_checkbox" name="vaja1" value="true">
|
||||
<label for="vaja1_checkbox">vaja 1</label>
|
||||
<input type="checkbox" id="vaja2_checkbox" name="vaja2" value="true">
|
||||
<label for="vaja2_checkbox">vaja 2</label>
|
||||
<!--pošlji-->
|
||||
<input type="submit" value="Pošlji">
|
||||
</form>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
45
semester_1/uvod_v_svetovni_splet/Vaja_2/index.html
Normal file
45
semester_1/uvod_v_svetovni_splet/Vaja_2/index.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Nikolova spletna stran</title>
|
||||
<meta name="description" content="Demonstracija 2 vaje">
|
||||
<meta name="keywords" content="USS, FERI, HTML">
|
||||
<meta name="author" content="Nikola Petrov">
|
||||
<meta name="viewport" content="width=device-with, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>
|
||||
Nikolova spletna stran
|
||||
</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Glavna stran</a></li>
|
||||
<li><a href="Pages/izdelki.html">Izdelki</a></li>
|
||||
<li><a href="Pages/svetovanje.html">Svetovanje</a></li>
|
||||
<li><a href="https://estudij.um.si" target="_blank">Vaje</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div>
|
||||
<article>
|
||||
<h3>O meni</h3>
|
||||
<p>Sem <a href="mailto:nikola.petrov@student.um.si">Nikola Petrov</a> in sem študent na <b>Univerza v Mariboru</b>.<br>
|
||||
To je moja spletna stran, ki sem jo naredil za predmet <u>Uvod v svetovni splet</u>.<br>
|
||||
Rad se okvarjam z elektroniko in računalniki</p>
|
||||
<div>
|
||||
<figure>
|
||||
<img src="Image/feri.jpg" alt="FERI" width="600" height="400">
|
||||
<figcaption>Stavba fakultete za elektroniko, računalništvo in informatiko</figcaption>
|
||||
</figure>
|
||||
<hr>
|
||||
<figure>
|
||||
<iframe width="600" height="315" src="https://www.youtube.com/embed/uRoU4_Yj7QY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<figcaption>Video</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS.zip
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS.zip
Normal file
Binary file not shown.
46
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/index.html
Normal file
46
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/index.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Moja spletna stran</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Domov</a></li>
|
||||
<li><a href="izdelki.html">Izdelki</a></li>
|
||||
<li><a href="svetovanje.html">Svetovanje</a></li>
|
||||
<li><a href="http://estudij.um.si">Vaje</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="vsebina"> <!--Preimenoval article v div-->
|
||||
<div class="kartica">
|
||||
<h2>Naslov</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non risus ipsum. Curabitur in consectetur mauris, nec ultrices elit. Proin sit amet condimentum urna. Maecenas iaculis eros ac orci faucibus laoreet. Sed congue, diam in suscipit rhoncus, metus sem consequat nibh, in aliquet lacus ligula at neque. Fusce eu sem lorem. Vestibulum in tellus convallis, ultricies ligula a, consectetur dolor. Quisque felis ipsum, condimentum ut finibus nec, interdum semper dui. Ut tempus rutrum tincidunt. Phasellus pulvinar dolor et nunc imperdiet iaculis. Aliquam erat volutpat. Sed nec dolor sed nisl aliquam tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent posuere dapibus ipsum. Quisque ac mi pretium, faucibus nisi et, elementum nunc. Duis eu porta mauris, id ultrices dolor.
|
||||
</p>
|
||||
<figure>
|
||||
<img src="slika.jpg" />
|
||||
<figcaption>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="kartica">
|
||||
<h2>Video: Big Buck Bunny</h2>
|
||||
<video controls>
|
||||
<source src="mov_bbb.mp4" type="video/mp4">
|
||||
Your browser does not support HTML5 video.
|
||||
</video>
|
||||
<p>
|
||||
Ut non tempus dui, non euismod leo. Ut dignissim fermentum enim, vitae luctus nunc aliquam a. Donec in auctor purus, tempor porttitor orci. Ut sagittis sem eu lacus euismod pellentesque. Cras eu orci arcu. Nullam euismod mattis leo. Quisque vel volutpat ante, non posuere magna. In feugiat mi nunc.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
66
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/izdelki.html
Normal file
66
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/izdelki.html
Normal file
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Moja spletna stran</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Domov</a></li>
|
||||
<li><a href="izdelki.html">Izdelki</a></li>
|
||||
<li><a href="svetovanje.html">Svetovanje</a></li>
|
||||
<li><a href="http://estudij.um.si">Vaje</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="vsebina">
|
||||
<div class="kartica izdelek">
|
||||
<h3>Procesor Intel Core-i9-7900X</h3>
|
||||
<img src="https://www.evetech.co.za/repository/ProductImages/intel-Core-i9-7900X-Processor-1000px-v1.jpg" />
|
||||
<div class="opis">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non risus ipsum. Curabitur in consectetur mauris, nec ultrices elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kartica izdelek">
|
||||
<h3>Grafična kartica GeForce RTX 2080 Ti</h3>
|
||||
<img src="https://asset.msi.com/resize/image/global/product/product_1_20180919185540_5ba22b2ce7ec4.png62405b38c58fe0f07fcef2367d8a9ba1/1024.png" />
|
||||
<div class="opis">
|
||||
<p>Etiam dignissim lectus purus, et rhoncus nibh dignissim at. Nullam lorem sem, sagittis eget ornare et, gravida ut felis. Duis lobortis, sem quis tincidunt accumsan, leo ante iaculis nulla, eget tincidunt dui massa tristique quam. Phasellus dignissim odio sit amet congue molestie. Sed vestibulum erat ac lectus facilisis suscipit. Nam sodales ligula et risus aliquam, vitae ultrices sem ultrices. Curabitur viverra ac sem in aliquet. Morbi dapibus dui mi, sit amet vulputate felis sollicitudin in. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas tristique ornare efficitur. Phasellus vulputate mollis ante ac tincidunt. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kartica izdelek">
|
||||
<h3>Grafična kartica GeForce RTX 2080 Ti</h3>
|
||||
<img src="https://asset.msi.com/resize/image/global/product/product_1_20180919185540_5ba22b2ce7ec4.png62405b38c58fe0f07fcef2367d8a9ba1/1024.png" />
|
||||
<div class="opis">
|
||||
<p>Etiam dignissim lectus purus, et rhoncus nibh dignissim at. Nullam lorem sem, sagittis eget ornare et, gravida ut felis. Duis lobortis, sem quis tincidunt accumsan, leo ante iaculis nulla, eget tincidunt dui massa tristique quam. Phasellus dignissim odio sit amet congue molestie. Sed vestibulum erat ac lectus facilisis suscipit. Nam sodales ligula et risus aliquam, vitae ultrices sem ultrices. Curabitur viverra ac sem in aliquet. Morbi dapibus dui mi, sit amet vulputate felis sollicitudin in. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas tristique ornare efficitur. Phasellus vulputate mollis ante ac tincidunt. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kartica izdelek">
|
||||
<h3>Procesor Intel Core-i9-7900X</h3>
|
||||
<img src="https://www.evetech.co.za/repository/ProductImages/intel-Core-i9-7900X-Processor-1000px-v1.jpg" />
|
||||
<div class="opis">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non risus ipsum. Curabitur in consectetur mauris, nec ultrices elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kartica izdelek">
|
||||
<h3>Procesor Intel Core-i9-7900X</h3>
|
||||
<img src="https://www.evetech.co.za/repository/ProductImages/intel-Core-i9-7900X-Processor-1000px-v1.jpg" />
|
||||
<div class="opis">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non risus ipsum. Curabitur in consectetur mauris, nec ultrices elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kartica izdelek">
|
||||
<h3>Grafična kartica GeForce RTX 2080 Ti</h3>
|
||||
<img src="https://asset.msi.com/resize/image/global/product/product_1_20180919185540_5ba22b2ce7ec4.png62405b38c58fe0f07fcef2367d8a9ba1/1024.png" />
|
||||
<div class="opis">
|
||||
<p>Etiam dignissim lectus purus, et rhoncus nibh dignissim at. Nullam lorem sem, sagittis eget ornare et, gravida ut felis. Duis lobortis, sem quis tincidunt accumsan, leo ante iaculis nulla, eget tincidunt dui massa tristique quam. Phasellus dignissim odio sit amet congue molestie. Sed vestibulum erat ac lectus facilisis suscipit. Nam sodales ligula et risus aliquam, vitae ultrices sem ultrices. Curabitur viverra ac sem in aliquet. Morbi dapibus dui mi, sit amet vulputate felis sollicitudin in. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas tristique ornare efficitur. Phasellus vulputate mollis ante ac tincidunt. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/mov_bbb.mp4
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/mov_bbb.mp4
Normal file
Binary file not shown.
BIN
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/slika.jpg
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/slika.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
251
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/style.css
Normal file
251
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/style.css
Normal file
@@ -0,0 +1,251 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
|
||||
|
||||
html{
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
background-color: #404040;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
padding: 0px; /*Določi zunanji odmik*/
|
||||
}
|
||||
|
||||
body{
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
background-color: #404040;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
padding: 0px; /*Določi zunanji odmik*/
|
||||
margin-top: 110px;
|
||||
}
|
||||
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
header{
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
h1{
|
||||
background-color: black;
|
||||
color: orange;
|
||||
text-align: center;
|
||||
outline-offset: 10px; /*Določi notranji odmik*/
|
||||
margin-bottom: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
|
||||
nav ul{
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
nav ul li{
|
||||
float: left;
|
||||
}
|
||||
|
||||
nav ul li a{
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav ul li a:hover{
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
div.vsebina{
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
div.kartica{
|
||||
background-color: #707070;
|
||||
margin-top: 20px;
|
||||
color: white;
|
||||
margin: 1%;
|
||||
}
|
||||
|
||||
h2{
|
||||
display: block;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
background-color: orange;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p{
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/*INDEX*/
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
figure{
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
figcaption{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
video{
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/*IZDELKI*/
|
||||
|
||||
h3{
|
||||
background-color: orange;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
margin: 0px;
|
||||
height: 40px;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
div.izdelek p{
|
||||
margin: 0px;
|
||||
padding: 5px;
|
||||
height: 150px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
div.izdelek img{
|
||||
max-width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
div.izdelek{
|
||||
display: inline-block;
|
||||
height: 400px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
/*SVETOVANJE*/
|
||||
|
||||
form.obrazec{
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
label.oznaka{
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
input[type=text]{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
background-color: #cccccc;
|
||||
border-radius: 20px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
padding-left: 20px;
|
||||
padding-bottom: 20px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
textarea{
|
||||
border-width: 20px;
|
||||
display:block;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
resize: none;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
padding-left: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-radius: 2px;
|
||||
background-color: #cccccc;
|
||||
border-color: orange;
|
||||
}
|
||||
|
||||
textarea:focus{
|
||||
border-color: pink;
|
||||
}
|
||||
|
||||
input[type=submit]{
|
||||
background-color: orange;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
margin-top: 10px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input[type=submit]:hover{
|
||||
background-color: darkorange;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*RESIZE*/
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
||||
label.radio-gumb{
|
||||
display: block;
|
||||
}
|
||||
|
||||
label.checkbox-gumb{
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.izdelek{
|
||||
width:90%;
|
||||
}
|
||||
|
||||
|
||||
nav ul{
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
nav ul li{
|
||||
float: none;
|
||||
}
|
||||
|
||||
nav ul li a{
|
||||
display: block;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body{
|
||||
margin-top: 210px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 601px) and (max-width: 1000px) {
|
||||
|
||||
label.radio-gumb{
|
||||
display: block;
|
||||
}
|
||||
|
||||
label.checkbox-gumb{
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.izdelek{
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
45
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/svetovanje.html
Normal file
45
semester_1/uvod_v_svetovni_splet/Vaja_3/CSS/svetovanje.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Moja spletna stran</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Domov</a></li>
|
||||
<li><a href="izdelki.html">Izdelki</a></li>
|
||||
<li><a href="svetovanje.html">Svetovanje</a></li>
|
||||
<li><a href="http://estudij.um.si">Vaje</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="vsebina">
|
||||
<div class="kartica">
|
||||
<h2>Anketa</h2>
|
||||
<form class="obrazec">
|
||||
<label class="oznaka">Ime in priimek:</label><input type="text"/><br/>
|
||||
<label class="oznaka">Kraj:</label><input type="text"/><br/>
|
||||
<label class="oznaka">Elektronska pošta:</label><input type="text"/><br/>
|
||||
<label class="oznaka">Vrsta računalnika:</label>
|
||||
<label class="radio-gumb" for="namizni"><input type="radio" name="vrsta" id="namizni">Namizni<span class="pika"></span></label>
|
||||
<label class="radio-gumb" for="prenosni"><input type="radio" name="vrsta" id="prenosni">Prenosni<span class="pika"></span></label>
|
||||
<label class="radio-gumb" for="allinone"><input type="radio" name="vrsta" id="allinone">All-In-One<span class="pika"></span></label>
|
||||
<br/>
|
||||
<label class="oznaka">Namen uporabe:</label>
|
||||
<label class="checkbox-gumb" for="igre"><input name="namen" type="checkbox" id="igre">Igranje iger<span class="kljukica"></label>
|
||||
<label class="checkbox-gumb" for="video"><input name="namen" type="checkbox" id="video">Video obdelava<span class="kljukica"></label>
|
||||
<label class="checkbox-gumb" for="3d"><input name="namen" type="checkbox" id="3d">3D modeliranje<span class="kljukica"></label>
|
||||
<label class="checkbox-gumb" for="ml"><input name="namen" type="checkbox" id="ml">Strojno učenje<span class="kljukica"></label>
|
||||
<br/>
|
||||
<label class="oznaka">Komentar:</label><textarea></textarea><br/>
|
||||
<input type="submit" value="Pošlji"/>
|
||||
</form>
|
||||
</div>
|
||||
<div id="content">
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 831 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 539 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 656 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 313 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 590 KiB |
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Demo vaja 3 - CSS</title>
|
||||
<link rel="stylesheet" href="./styles/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Demo vaja 3 - CSS</h1>
|
||||
</header>
|
||||
<div id="textContainer">
|
||||
<h2>Besedilo</h2>
|
||||
<div>
|
||||
<p class="sampleParagraph">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu posuere ipsum. Pellentesque a efficitur eros. Ut lacinia, ex eu faucibus rutrum, libero ligula ultrices est, ut venenatis est arcu nec massa. Donec ultricies ante purus, sed tincidunt justo lobortis ut. Fusce nec mauris in odio accumsan varius id non ante. Suspendisse sodales felis eu nisi malesuada congue sed a dolor. Aenean sed velit ligula. Nulla vitae lorem consectetur, faucibus erat vitae, sollicitudin quam. Sed facilisis sit amet ante vel auctor. Phasellus commodo, mi at egestas gravida, lacus metus tempus dui, a dictum leo quam quis massa. Sed molestie purus nisl, vitae finibus eros varius id. Nam posuere tempus risus vitae consequat. Donec posuere bibendum nibh, non semper purus eleifend ut. Etiam mauris orci, dignissim ut blandit id, sollicitudin eget sem. Donec pretium tincidunt est eu imperdiet. Nulla sodales diam sed elementum ultricies.
|
||||
</p>
|
||||
<p class="sampleParagraph">
|
||||
Etiam ornare interdum odio. Praesent eget lorem interdum, vehicula sem vitae, fringilla risus. Etiam eleifend massa magna, non interdum ipsum lacinia et. Aenean vel posuere justo. Praesent eu felis volutpat, placerat quam et, feugiat orci. Donec sollicitudin sapien quis mauris pellentesque placerat. Nam tempor erat sed euismod ultricies. Fusce aliquam eleifend neque accumsan fermentum. Nam sed mauris id arcu vehicula accumsan.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="columnContainer">
|
||||
<div id="leftColumn">
|
||||
<figure>
|
||||
<figcaption id="feriImageCaption">Vaša fakulteta</figcaption>
|
||||
<img src="./images/feri.jpg" id="feriImage" alt="FERI">
|
||||
</figure>
|
||||
<div>
|
||||
Promocijski video si lahko ogledate na <a href="https://www.youtube.com/watch?v=wVacjt_8Ha4&t=1s&ab_channel=FERIUM" target="_blank">povezavi</a>.
|
||||
</div>
|
||||
</div>
|
||||
<div id="rightColumn">
|
||||
<figure id="ectsFigure">
|
||||
<table id="ectsTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Predmet</th>
|
||||
<th>ECTS točke</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr id="USS">
|
||||
<td>Uvod v svetovni splet</td>
|
||||
<td>6</td>
|
||||
</tr>
|
||||
<tr id="Programiranje1">
|
||||
<td>Programiranje 1</td>
|
||||
<td>7</td>
|
||||
</tr>
|
||||
<tr id="Matematika1">
|
||||
<td>Matematika 1</td>
|
||||
<td>6</td>
|
||||
</tr>
|
||||
<tr id="SPO">
|
||||
<td>Sodobna programska orodja</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div id="flexContainer">
|
||||
<div id="flexLeftColumn"> <!-- pozor: izjemoma slike niso znotraj značke <figure> -->
|
||||
<img src="./images/dallas_mavericks.jpg" alt="DallasMavericks" class="leftColumnFlexImage">
|
||||
<img src="./images/ferrari.jpg" alt="Ferrari" class="leftColumnFlexImage">
|
||||
</div>
|
||||
<div id="flexRightColumn">
|
||||
<img src="./images/K2.jpg" alt="K2" class="rightColumnFlexImage">
|
||||
<img src="./images/snowboarding.jpg" alt="Snowboarding" class="rightColumnFlexImage">
|
||||
<img src="./images/rally.jpg" alt="Rally" class="rightColumnFlexImage">
|
||||
<img src="./images/ultrawide_sunset.jpg" alt="Sunset" class="rightColumnFlexImage">
|
||||
<img src="./images/pag.jpg" alt="IslandPag" class="rightColumnFlexImage">
|
||||
<img src="./images/surfing.jpg" alt="Surfing" class="rightColumnFlexImage">
|
||||
<img src="./images/kitesurfing.jpg" alt="Kitesurfing" class="rightColumnFlexImage">
|
||||
</div>
|
||||
</div>
|
||||
<footer id="footer">
|
||||
<p>Več informacij je na voljo na <a href="https://feri.um.si/" target="_blank">povezavi</a>.</p>
|
||||
<p>Avtor: Ime Priimek</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,167 @@
|
||||
html{
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body{
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#columnContainer{
|
||||
height: 50%;
|
||||
width: 90%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#textContainer{
|
||||
height: 30%;
|
||||
margin-bottom: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#leftColumn{
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
#rightColumn{
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
footer{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1,h2{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.sampleParagraph{
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#textContainer p:first-of-type{
|
||||
color: darkblue;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#textContainer p:first-of-type::first-letter{
|
||||
color: orange;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
a[href*="youtube"]{
|
||||
color: red;
|
||||
}
|
||||
|
||||
#feriImage {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
#feriImage:hover{
|
||||
border-radius: 40%;
|
||||
opacity: 0.7; /*0-1*/
|
||||
transition: 250ms;
|
||||
}
|
||||
|
||||
#feriImageCaption{
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
}
|
||||
|
||||
#ectsFigure{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#ectsTable {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#ectsTable td:nth-child(1){
|
||||
border: 1px solid black;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#ectsTable td:nth-child(2){
|
||||
border: 1px solid red;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#ectsTable td:nth-child(even){
|
||||
background-color: #b3b3b3;
|
||||
}
|
||||
|
||||
#ectsTable td:nth-child(odd){
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#ects tr:hover{
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*flex box*/
|
||||
|
||||
#flexContainer{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#flexLeftColumn{
|
||||
display: flex;
|
||||
flex: 1 0 300px; /*dovoli širjenje, dovoli krčenje, začetna širina*/
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#flexRightColumn{
|
||||
display: flex;
|
||||
flex: 70%;
|
||||
flex-flow: row wrap;
|
||||
gap: 20px;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.leftColumnFlexImage{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.rightColumnFlexImage{
|
||||
max-width: 100%;
|
||||
max-height: 250px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width:800px){
|
||||
#leftColum{
|
||||
width: 100%;
|
||||
}
|
||||
#rightColum{
|
||||
width: 100%;
|
||||
}
|
||||
footer{
|
||||
float: left;
|
||||
}
|
||||
#flexContainer{
|
||||
flex-direction: column;
|
||||
float: left;
|
||||
row-gap:20px;
|
||||
}
|
||||
}
|
||||
34
semester_1/uvod_v_svetovni_splet/Vaja_4/Demo/index.html
Normal file
34
semester_1/uvod_v_svetovni_splet/Vaja_4/Demo/index.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Demo vaja 4 - Javascript</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Demo vaja 4 - Javascript</h1>
|
||||
</header>
|
||||
<div>
|
||||
<button type="button" onclick="openPrompt()">Odpri prompt okno</button>
|
||||
</div>
|
||||
<div id="tableContainer">
|
||||
<!-- Tukaj bomo vstavili tabelo -->
|
||||
<figure id="tableFigure">
|
||||
|
||||
</figure>
|
||||
</div>
|
||||
<div id="formContainer">
|
||||
<!-- Nad formo bomo izvedli preverjanje ustreznosti vsebine -->
|
||||
<form method="GET" action="index.html">
|
||||
<label>Uporabniško ime</label><br>
|
||||
<input id="usernameInput" type="text" oninput="onUsernameChange()"><span id="usernameWarning" class="incorrectInput">Neprimerno uporabniško ime</span><br>
|
||||
<label>Geslo</label><br>
|
||||
<input id="passwordInput" type="password" oninput="onPasswordChange()"><span id="passwordWarning" class="incorrectInput">Neprimerno geslo</span><br><br>
|
||||
<input id="submitButton" type="submit">
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
120
semester_1/uvod_v_svetovni_splet/Vaja_4/Demo/script.js
Normal file
120
semester_1/uvod_v_svetovni_splet/Vaja_4/Demo/script.js
Normal file
@@ -0,0 +1,120 @@
|
||||
var usernameInput = null;
|
||||
var usernameWarningSpan = null;
|
||||
var passwordInput = null;
|
||||
var passwprdWarnignSpan = null;
|
||||
var submitButton = null;
|
||||
|
||||
window.onload = (event) =>
|
||||
{
|
||||
usernameInput = document.getElementById("usernameInput");
|
||||
usernameWarningSpan = document.getElementById("usernameWarning")
|
||||
passwordInput = document.getElementById("passwordInput")
|
||||
passwordWarnignSpan = document.getElementById("passwordWarning")
|
||||
submitButton = document.getElementById("submitButton");
|
||||
|
||||
console.log(usernameInput);
|
||||
|
||||
checkSubmit()
|
||||
};
|
||||
|
||||
function onUsernameChange()
|
||||
{
|
||||
console.log(usernameInput.value);
|
||||
|
||||
if(/^[a-zA-Z0-9_.,]+$/.test(usernameInput.value)) //ustrezno uporabnisko ime
|
||||
{
|
||||
usernameWarningSpan.setAttribute("class", "correctInput");
|
||||
usernameWarningSpan.innerHTML = "Primerno uporavniško ime";
|
||||
}
|
||||
|
||||
else //neustrezno uporabnisko ime
|
||||
{
|
||||
usernameWarningSpan.setAttribute("class", "incorrectInput");
|
||||
usernameWarningSpan.innerHTML = "Neprimerno uporavniško ime";
|
||||
}
|
||||
|
||||
checkSubmit()
|
||||
}
|
||||
|
||||
function onPasswordChange()
|
||||
{
|
||||
if(/^[a-zA-Z0-9_.,]*[A-Z]+[a-zA-Z0-9_.,]*$/.test(passwordInput.value) && passwordInput.value.length >= 6)
|
||||
{
|
||||
passwordWarnignSpan.setAttribute("class", "correctInput");
|
||||
passwprdWarnignSpan.innerHTML = "Primerno geslo";
|
||||
}
|
||||
|
||||
else
|
||||
{
|
||||
passwordWarnignSpan.setAttribute("class", "incorrectInput");
|
||||
passwprdWarnignSpan.innerHTML = "Neprimerno geslo";
|
||||
}
|
||||
|
||||
checkSubmit()
|
||||
}
|
||||
|
||||
function checkSubmit()
|
||||
{
|
||||
const usernameWarningClass = usernameWarningSpan.getAttribute("class");
|
||||
const passwordWarningClass = passwordWarnignSpan.getAttribute("class");
|
||||
|
||||
//ali "incorectInput" ali "CorrectInput"
|
||||
if(usernameWarningClass == 'IncorrectInput' || passwordWarningClass == 'IncorrectInput')
|
||||
{
|
||||
submitButton.disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
submitButton.disabled = false;
|
||||
}
|
||||
|
||||
function openPrompt()
|
||||
{
|
||||
let numberString = window.prompt("Vnesi dve števili, ločeni z vejico");
|
||||
|
||||
if(numberString !== null)
|
||||
{
|
||||
let splitNumbersString = numberString.replace(/\s/g,'').split(',');
|
||||
|
||||
const N_rows = parseInt(splitNumbersString[0]); //niz 5 --> st. 5
|
||||
const N_cols = parseInt(splitNumbersString[1]);
|
||||
|
||||
let htmlTableFigure = document.getElementById("tableFigure");
|
||||
htmlTableFigure.innerHTML = "";
|
||||
|
||||
if(isNaN(N_rows) || isNaN(N_cols))
|
||||
{
|
||||
alert("Neprimeren vnos!");
|
||||
return;
|
||||
}
|
||||
|
||||
let htmlTable = document.createElement("table");
|
||||
htmlTable.setAttribute("class", "colorTable");
|
||||
|
||||
let htmlTableContent = "";
|
||||
for(let i = 0; i < N_rows; i++)
|
||||
{
|
||||
htmlTableContent += "<tr>"
|
||||
for(let j = 0; j < N_cols; j++)
|
||||
{
|
||||
htmlTableContent += "<td id = 'cell" + String(i) + "|" + String(j) + "'class='cells' onclick='selectTableCell(this.id)'>" + String(i) + "," + String(j) + "</td>";
|
||||
}
|
||||
htmlTableContent += "</tr>"
|
||||
}
|
||||
htmlTable.innerHTML = htmlTableContent;
|
||||
|
||||
htmlTableFigure.appendChild(htmlTable)
|
||||
}
|
||||
}
|
||||
|
||||
function selectTableCell(tableCellId)
|
||||
{
|
||||
const tableCells = document.getElementsByClassName("cells");
|
||||
for(let i=0; i < tableCells.length; i++)
|
||||
{
|
||||
tableCells[i].setAttribute("class", "cells")
|
||||
}
|
||||
|
||||
const selectedCell = document.getElementById(tableCellId);
|
||||
selectedCell.setAttribute("class", "cells selectedCell");
|
||||
}
|
||||
120
semester_1/uvod_v_svetovni_splet/Vaja_4/Demo/script.js.bak
Normal file
120
semester_1/uvod_v_svetovni_splet/Vaja_4/Demo/script.js.bak
Normal file
@@ -0,0 +1,120 @@
|
||||
var usernameInput = null;
|
||||
var usernameWarningSpan = null;
|
||||
var passwordInput = null;
|
||||
var passwprdWarnignSpan = null;
|
||||
var submitButton = null;
|
||||
|
||||
window.onload = (event) =>
|
||||
{
|
||||
usernameInput = document.getElementById("usernameInput");
|
||||
usernameWarningSpan = document.getElementById("usernameWarning")
|
||||
passwordInput = document.getElementById("passwordInput")
|
||||
passwordWarnignSpan = document.getElementById("passwordWarning")
|
||||
submitButton = document.getElementById("submitButton");
|
||||
|
||||
console.log(usernameInput);
|
||||
|
||||
checkSubmit()
|
||||
};
|
||||
|
||||
function onUsernameChange()
|
||||
{
|
||||
console.log(usernameInput.value);
|
||||
|
||||
if(/^[a-zA-Z0-9_.,]+$/.test(usernameInput.value)) //ustrezno uporabnisko ime
|
||||
{
|
||||
usernameWarningSpan.setAttribute("class", "correctInput");
|
||||
usernameWarningSpan.innerHTML = "Primerno uporavniško ime";
|
||||
}
|
||||
|
||||
else //neustrezno uporabnisko ime
|
||||
{
|
||||
usernameWarningSpan.setAttribute("class", "incorrectInput");
|
||||
usernameWarningSpan.innerHTML = "Neprimerno uporavniško ime";
|
||||
}
|
||||
|
||||
checkSubmit()
|
||||
}
|
||||
|
||||
function onPasswordChange()
|
||||
{
|
||||
if(/^[a-zA-Z0-9_.,]*[A-Z]+[a-zA-Z0-9_.,]*$/.test(passwordInput.value) && passwordInput.value.length >= 6)
|
||||
{
|
||||
passwordWarnignSpan.setAttribute("class", "correctInput")
|
||||
passwprdWarnignSpan.innerHTML = "Primerno geslo"
|
||||
}
|
||||
|
||||
else
|
||||
{
|
||||
passwordWarnignSpan.setAttribute("class", "incorrectInput")
|
||||
passwprdWarnignSpan.innerHTML = "Neprimerno geslo"
|
||||
}
|
||||
|
||||
checkSubmit()
|
||||
}
|
||||
|
||||
function checkSubmit()
|
||||
{
|
||||
const usernameWarningClass = usernameWarningSpan.getAttribute("class");
|
||||
const passwordWarningClass = passwordWarnignSpan.getAttribute("class");
|
||||
|
||||
//ali "incorectInput" ali "CorrectInput"
|
||||
if(usernameWarningClass == 'IncorrectInput' || passwordWarningClass == 'IncorrectInput')
|
||||
{
|
||||
submitButton.disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
submitButton.disabled = false;
|
||||
}
|
||||
|
||||
function openPrompt()
|
||||
{
|
||||
let numberString = window.prompt("Vnesi dve števili, ločeni z vejico");
|
||||
|
||||
if(numberString !== null)
|
||||
{
|
||||
let splitNumbersString = numberString.replace(/\s/g,'').split(',');
|
||||
|
||||
const N_rows = parseInt(splitNumbersString[0]); //niz 5 --> st. 5
|
||||
const N_cols = parseInt(splitNumbersString[1]);
|
||||
|
||||
let htmlTableFigure = document.getElementById("tableFigure");
|
||||
htmlTableFigure.innerHTML = "";
|
||||
|
||||
if(isNaN(N_rows) || isNaN(N_cols))
|
||||
{
|
||||
alert("Neprimeren vnos!");
|
||||
return;
|
||||
}
|
||||
|
||||
let htmlTable = document.createElement("table");
|
||||
htmlTable.setAttribute("class", "colorTable");
|
||||
|
||||
let htmlTableContent = "";
|
||||
for(let i = 0; i < N_rows; i++)
|
||||
{
|
||||
htmlTableContent += "<tr>"
|
||||
for(let j = 0; j < N_cols; j++)
|
||||
{
|
||||
htmlTableContent += "<td id = 'cell" + String(i) + "|" + String(j) + "'class='cells' onclick='selectTableCell(this.id)'>" + String(i) + "," + String(j) + "</td>";
|
||||
}
|
||||
htmlTableContent += "</tr>"
|
||||
}
|
||||
htmlTable.innerHTML = htmlTableContent;
|
||||
|
||||
htmlTableFigure.appendChild(htmlTable)
|
||||
}
|
||||
}
|
||||
|
||||
function selectTableCell(tableCellId)
|
||||
{
|
||||
const tableCells = document.getElementsByClassName("cells");
|
||||
for(let i=0; i < tableCells.length; i++)
|
||||
{
|
||||
tableCells[i].setAttribute("class", "cells")
|
||||
}
|
||||
|
||||
const selectedCell = document.getElementById(tableCellId);
|
||||
selectedCell.setAttribute("class", "cells selectedCell");
|
||||
}
|
||||
33
semester_1/uvod_v_svetovni_splet/Vaja_4/Demo/styles.css
Normal file
33
semester_1/uvod_v_svetovni_splet/Vaja_4/Demo/styles.css
Normal file
@@ -0,0 +1,33 @@
|
||||
html {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.selectedCell {
|
||||
background-color: red;
|
||||
border: 1px solid black;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.colorTable * {
|
||||
border: 1px solid black;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#usernameWarning, #passwordWarning {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.correctInput {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.incorrectInput {
|
||||
color: darkred;
|
||||
}
|
||||
BIN
semester_1/uvod_v_svetovni_splet/Vaja_4/Naloga.zip
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_4/Naloga.zip
Normal file
Binary file not shown.
1
semester_1/uvod_v_svetovni_splet/Vaja_4/Naloga/demo.html
Normal file
1
semester_1/uvod_v_svetovni_splet/Vaja_4/Naloga/demo.html
Normal file
@@ -0,0 +1 @@
|
||||
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"› 5 <title>Vaja4</title> 6 7 </head> 8 <body onload="checkRadio()"> 9 <table> 10 <form id="login-form" name="formH> 11 <tr> 12 <td><label for="usernameH>Uporabnigko ime:</label></td> 13 <td><input type="text" id="username" oninput="checkUsername()" name="username"><span style=color:red; id="userError"></span></td><br> 14 </tr> 15 16 <tr> 17 <td> <label for="mail">E-pogta:</label> </td> 18 <td> <input type="text" id="mail" oninput="checkMail()" name="mail"><span style=color:red; id="mailError"></span></td> 19 </tr> 20 <tr> 21 <td><label for="pass">Geslo:</label></td> 22 <td><input type="password" id="pass" oninput="checkPassword()" name="pass"><span style=color:red; id="passError"></span></td> 23 </t r> 24 25 <tr> 26 <td><label for="repeatPassH>Ponovi geslo:</label></td> 27 <td><input type="password" id=HrepeatPass" oninput=HcheckRepeatPassword()H name="repeatPass"><span style=color:red; id="repeatPassError"></span></td> 28 </t r> 29 30 <tr> 31 <td><input type="radio" id="gender male" oninput="checkRadio()" name="gender" value="male"› Mogki</td> 32 <td><input type="radio" id="gender female" oninput="checkRadio()" name="gender" value="femaleH> 2enski <span style=color:red; id="genderError"></span></td> 33 </t r> 34 <tr> 35 <td> <input type="submit" onclick="checkOnSubmit()" id="submit" value="Poglji"></td> 36 </t r> 37 38 39 </form> 40 </table> 41 42 <script> 43 44 const usernameError = document.getElementById('userError'); 45 const mailError = document.getElementById('mailError'); 46 const passError = document.getElementById('passError'); 47 const repeatPassError = document.getElementById('repeatPassError'); 48 const genderError = document.getElementById('genderError'); 49 50 const username = document.form.username; 51 const mail = document.form.mail; 52 const pass = document.form.pass; 53 const repeatPass = document.form.repeatPass; 54 const gender male = document.form.gender male; 55 const gender female = document.form.gender female; 56 const send = document.form.submit; 57 let error = 0; 58 59 60 61 checkUsername = () => { 62 63 usernameDatabase = ["usernamer, "uporabnik2", "admin", Huporabnik3", "username2"]; 64 65 for(i=0; i<usernameDatabase.length;i++){ 66 if (username.value == usernameDatabase[i]){ 67 usernameError.innerHTML ="Podvojeno ime"; 68 } 69 else{ 70 niPodvojeno = true; 71 } 72 } 73 74 75 if(username.value.length < 3){ 76 usernameError.innerHTML ="Minimalno stevilo znakov je 3!"; 77 uplme=false; 78 } 79 else if(username.value.length >= 3){ 80 usernameError.innerHTML ="Mo6lo uporabnigko ime."; 81 uplme = true; 82 83 } 84 else if(username.value.length > 19){ 85 usernameError.innerHTML ="Predolgo"; 86 uplme= false; 87 } 88 89 } 90 91 //https://www.w3resource.com/javascript/form/email-validation.php 92 93 checkMail = () => { 94 95 if (r\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail.value)) { 96 97 mailError.innerHTML ="Pravilno vpisan mail"; 98 mailFormat = true; 99 } 100 else{ 101 mailError.innerHTML ="Nepravilno vpisan mail"; 102 mailFormat = false; 103 } 104 105 } 106 107 108 checkPassword = () => { 109 if(pass.value.length < 6){ 110 passError.innerHTML ="Minimalno stevilo znakov je 6!H; 111 goodPass = false; 112 } 113 else if (pass.value.search(/[a-z]/) < 0){ 114 passError.innerHTML ="Neustrezno geslo!"; 115 goodPass = false; 116 } 117 else if (pass.value.search(/[A-Z]/) < 0){ 118 passError.innerHTML ="Neustrezno geslo!"; 119 goodPass = false; 120 } 121 else if (pass.value.search(/[0-9]/) < 0){ 122 passError.innerHTML ="Neustrezno geslo!"; 123 goodPass = false; 124 } 125 126 else{ 127 passError.innerHTML ="Ustrezno geslo!"; 128 goodPass = true; 129 } 130 131 } 132 133 134 checkRepeatPassword = () => { 135 136 if(repeatPass.value == pass.value){ 137 repeatPassError.innerHTML=HGesli se ujemata"; 138 repeatedPass = true; 139 } 140 else{ 141 repeatPassError.innerHTML="Gesli se ne ujemata"; 142 repeatedPass = false; 143 144 } 145 } 146 147 148 checkRadio = () => { 149 if (gender male.checked == true gender female.checked == true){ 150 genderError.innerHTML="Pravilne; 151 checkedRadio = true; 152 } 153 154 else { 155 genderError.innerHTML="Nujno izberi!"; 156 checkedRadio = false; 157 } 158 159 } 160 161 checkOnSubmit = () => { 162 if (niPodvojeno == true && uplme == true && mailFormat == true && goodPass == true && repeatedPass == true && checkedRadio == true) { 163 164 window.alert('Podatki so pravilni'); 165 } 166 167 168 else { 169 170 window.alert('Ponovno vpisite podatke.'); 171 window.location.reload(); 172 173 } 174 } 175 176 </script> 177 178 </body> 179 </html>
|
||||
20
semester_1/uvod_v_svetovni_splet/Vaja_4/Naloga/index.html
Normal file
20
semester_1/uvod_v_svetovni_splet/Vaja_4/Naloga/index.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="obrazec\obrazec.html">obrazec</a></li>
|
||||
<li><a href="seznam\seznam.html">seznam</a></li>
|
||||
<li><a href="izracun.html">izracun</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</body>
|
||||
</html>
|
||||
87
semester_1/uvod_v_svetovni_splet/Vaja_4/Naloga/izracun.html
Normal file
87
semester_1/uvod_v_svetovni_splet/Vaja_4/Naloga/izracun.html
Normal file
@@ -0,0 +1,87 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Write example</title>
|
||||
<script>
|
||||
let A = parseInt(window.prompt("Vpisi stevilko A"));
|
||||
let B = parseInt(window.prompt("vpisi stevilko B"));
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<th >A:</th>
|
||||
<th id="A"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th >B:</th>
|
||||
<th id="B"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th >Vsota:</th>
|
||||
<th id="C"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th >Razlika:</th>
|
||||
<th id="D"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th >Mnozenje:</th>
|
||||
<th id="E"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th >Deljenje:</th>
|
||||
<th id="F"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th >Ostanek:</th>
|
||||
<th id="G"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th id="H"></th>
|
||||
</tr>
|
||||
</table>
|
||||
<script>
|
||||
|
||||
function color(x){
|
||||
if (x>=0){
|
||||
return "<span style='color:green; font-weight:bold;'>" + x + "</span>";
|
||||
}
|
||||
else{
|
||||
return "<span style='color:red; font-weight:bold;'>" + x + "</span>";
|
||||
}
|
||||
}
|
||||
|
||||
if(isNaN(A) || isNaN(B)){
|
||||
document.getElementById("Table").innerHTML = "<tr> <th> error </th></tr>";
|
||||
}
|
||||
else{
|
||||
document.getElementById("A").innerHTML = color(A);
|
||||
document.getElementById("B").innerHTML = color(B);
|
||||
document.getElementById("C").innerHTML = color(A+B);
|
||||
document.getElementById("D").innerHTML = color(A-B);
|
||||
document.getElementById("E").innerHTML = color(A*B);
|
||||
|
||||
if( B == 0){
|
||||
document.getElementById("F").innerHTML = "Ni mogoce";
|
||||
document.getElementById("G").innerHTML = "Ni mogoce";
|
||||
}
|
||||
else{
|
||||
document.getElementById("F").innerHTML = color(A/B);
|
||||
document.getElementById("G").innerHTML = color(A%B);
|
||||
}
|
||||
|
||||
if(A>B){
|
||||
document.getElementById("H").innerHTML = "A je vecje B";
|
||||
}
|
||||
else if(A == B){
|
||||
document.getElementById("H").innerHTML = "A je enako B";
|
||||
}
|
||||
else{
|
||||
document.getElementById("H").innerHTML = "A je manjse B";
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,87 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Write example</title>
|
||||
<script>
|
||||
let A = parseInt(window.prompt("Vpisi stevilko A"));
|
||||
let B = parseInt(window.prompt("vpisi stevilko B"));
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<th >A:</th>
|
||||
<th id="A"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th >B:</th>
|
||||
<th id="B"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th >Vsota:</th>
|
||||
<th id="C"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th >Razlika:</th>
|
||||
<th id="D"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th >Mnozenje:</th>
|
||||
<th id="E"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th >Deljenje:</th>
|
||||
<th id="F"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th >Ostanek:</th>
|
||||
<th id="G"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th id="H"></th>
|
||||
</tr>
|
||||
</table>
|
||||
<script>
|
||||
|
||||
function color(x){
|
||||
if (x>=0){
|
||||
return "<span style='color:green; font-weight:bold;'>" + x + "</span>";
|
||||
}
|
||||
else{
|
||||
return "<span style='color:red; font-weight:bold;'>" + x + "</span>";
|
||||
}
|
||||
}
|
||||
|
||||
if(isNaN(A) || isNaN(B)){
|
||||
document.getElementById("Table").innerHTML = "<tr> <th> error </th></tr>";
|
||||
}
|
||||
else{
|
||||
document.getElementById("A").innerHTML = color(A);
|
||||
document.getElementById("B").innerHTML = color(B);
|
||||
document.getElementById("C").innerHTML = color(A+B);
|
||||
document.getElementById("D").innerHTML = color(A-B);
|
||||
document.getElementById("E").innerHTML = color(A*B);
|
||||
|
||||
if( B == 0){
|
||||
document.getElementById("F").innerHTML = "Ni mogoce";
|
||||
document.getElementById("G").innerHTML = "Ni mogoce";
|
||||
}
|
||||
else{
|
||||
document.getElementById("F").innerHTML = color(A/B);
|
||||
document.getElementById("G").innerHTML = color(A%B);
|
||||
}
|
||||
|
||||
if(A>B){
|
||||
document.getElementById("H").innerHTML = "A je vecje B";
|
||||
}
|
||||
else if(A == B){
|
||||
document.getElementById("H").innerHTML = "A je enako B";
|
||||
}
|
||||
else{
|
||||
document.getElementById("H").innerHTML = "A je manjse B";
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,11 @@
|
||||
span {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.correctInput {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.incorrectInput {
|
||||
color: darkred;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="obrazec.css">
|
||||
<script src="obrazec.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<form method="GET" action="index.html">
|
||||
<label>Uporabniško ime</label><br>
|
||||
<input id="uporabniskoIme" type="text" oninput="onUsernameChange()">
|
||||
<span id="uporabniškoImeUpozorilo" class="incorrectInput">Neprimerno uporabniško ime</span><br>
|
||||
|
||||
<label>Email</label><br>
|
||||
<input id="Email" type="text" oninput="onEmailChange()">
|
||||
<span id="EmailUpozorilo" class="incorrectInput">Neprimerni Email</span><br>
|
||||
|
||||
<label>Geslo</label><br>
|
||||
<input id="Geslo" type="password" oninput="onPasswordChange()">
|
||||
<span id="GesloUpozorilo" class="incorrectInput">Neprimerno geslo</span><br>
|
||||
|
||||
<label>Ponovi geslo</label><br>
|
||||
<input id="Geslo1" type="password" oninput="onPassword1Change()">
|
||||
<span id="Geslo1Upozorilo" class="incorrectInput">Geslo ni isto</span><br>
|
||||
|
||||
<label>Spol</label><br>
|
||||
<span><input type="radio" name="spol" id="SpolMoski" oninput="onSpolChange()">Moški</span>
|
||||
<span><input type="radio" name="spol" id="SpolZenski" oninput="onSpolChange()">Ženski</span>
|
||||
<span id="SpolUpozorilo" class="incorrectInput">Izberi spol</span><br>
|
||||
|
||||
<br><input id="submitButton" type="submit">
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,127 @@
|
||||
var uporabniskoIme = null;
|
||||
var uporabniškoImeUpozorilo = null;
|
||||
|
||||
var Email = null;
|
||||
var EmailUpozorilo = null;
|
||||
|
||||
var Geslo = null;
|
||||
var GesloUpozorilo = null;
|
||||
|
||||
var Geslo1 = null;
|
||||
var Geslo1Upozorilo = null;
|
||||
|
||||
var SpolMoski = null;
|
||||
var SpolZenski = null;
|
||||
var SpolUpozorilo = null;
|
||||
|
||||
var submitButton = null;
|
||||
let imena = ['Nikola','Peter','Aljaz','Nik','David'];
|
||||
|
||||
window.onload = (event) =>{
|
||||
uporabniskoIme = document.getElementById("uporabniskoIme");
|
||||
uporabniškoImeUpozorilo = document.getElementById("uporabniškoImeUpozorilo");
|
||||
|
||||
Email = document.getElementById("Email");
|
||||
EmailUpozorilo = document.getElementById("EmailUpozorilo");
|
||||
|
||||
Geslo = document.getElementById("Geslo");
|
||||
GesloUpozorilo = document.getElementById("GesloUpozorilo");
|
||||
|
||||
Geslo1 = document.getElementById("Geslo1");
|
||||
Geslo1Upozorilo = document.getElementById("Geslo1Upozorilo");
|
||||
|
||||
SpolMoski = document.getElementById("SpolMoski");
|
||||
SpolZenski= document.getElementById("SpolZenski");
|
||||
SpolUpozorilo= document.getElementById("SpolUpozorilo");
|
||||
|
||||
submitButton = document.getElementById("submitButton");
|
||||
|
||||
checkSubmit()
|
||||
};
|
||||
|
||||
function onUsernameChange(){
|
||||
|
||||
if(/^[a-zA-Z0-9_.,]{3,20}$/.test(uporabniskoIme.value) && !imena.includes(uporabniskoIme.value)){
|
||||
uporabniškoImeUpozorilo.setAttribute("class", "correctInput");
|
||||
uporabniškoImeUpozorilo.innerHTML = "Primerno uporavniško ime";
|
||||
}
|
||||
|
||||
else{
|
||||
uporabniškoImeUpozorilo.setAttribute("class", "incorrectInput");
|
||||
uporabniškoImeUpozorilo.innerHTML = "Neprimerno uporavniško ime";
|
||||
}
|
||||
|
||||
checkSubmit()
|
||||
}
|
||||
|
||||
function onEmailChange(){
|
||||
|
||||
if(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(Email.value)){
|
||||
EmailUpozorilo.setAttribute("class", "correctInput");
|
||||
EmailUpozorilo.innerHTML = "Primerni Email";
|
||||
}
|
||||
|
||||
else{
|
||||
EmailUpozorilo.setAttribute("class", "incorrectInput");
|
||||
EmailUpozorilo.innerHTML = "Neprimerni Email";
|
||||
}
|
||||
|
||||
checkSubmit()
|
||||
}
|
||||
|
||||
function onPasswordChange(){
|
||||
if(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/.test(Geslo.value))
|
||||
{
|
||||
GesloUpozorilo.setAttribute("class", "correctInput");
|
||||
GesloUpozorilo.innerHTML = "Primerno geslo";
|
||||
}
|
||||
|
||||
else
|
||||
{
|
||||
GesloUpozorilo.setAttribute("class", "incorrectInput");
|
||||
GesloUpozorilo.innerHTML = "Neprimerno geslo";
|
||||
}
|
||||
|
||||
checkSubmit()
|
||||
}
|
||||
|
||||
function onPassword1Change(){
|
||||
if(Geslo1.value == Geslo.value){
|
||||
Geslo1Upozorilo.setAttribute("class", "correctInput");
|
||||
Geslo1Upozorilo.innerHTML = "Geslo je isto";
|
||||
}
|
||||
else{
|
||||
Geslo1Upozorilo.setAttribute("class", "incorrectInput");
|
||||
Geslo1Upozorilo.innerHTML = "Geslo ni isto";
|
||||
}
|
||||
|
||||
checkSubmit()
|
||||
}
|
||||
|
||||
function onSpolChange(){
|
||||
if(SpolMoski.checked == true || SpolZenski.checked == true){
|
||||
SpolUpozorilo.setAttribute("class", "correctInput");
|
||||
SpolUpozorilo.innerHTML = "Vredu";
|
||||
}
|
||||
else{
|
||||
SpolUpozorilo.setAttribute("class", "incorrectInput");
|
||||
SpolUpozorilo.innerHTML = "Izberi spol";
|
||||
}
|
||||
|
||||
checkSubmit()
|
||||
}
|
||||
|
||||
function checkSubmit(){
|
||||
const ImeUpozoriloClass = uporabniškoImeUpozorilo.getAttribute("class");
|
||||
const EmailUpozoriloClass = EmailUpozorilo.getAttribute("class");
|
||||
const GesloUpozoriloClass = GesloUpozorilo.getAttribute("class");
|
||||
const Geslo1UpozoriloClass = Geslo1Upozorilo.getAttribute("class");
|
||||
const SpolUpozoriloClass = SpolUpozorilo.getAttribute("class");
|
||||
|
||||
if(ImeUpozoriloClass == 'IncorrectInput' || EmailUpozoriloClass == 'IncorrectInput' || GesloUpozoriloClass == 'IncorrectInput' || Geslo1UpozoriloClass == 'IncorrectInput' || SpolUpozoriloClass == 'IncorrectInput'){
|
||||
submitButton.disabled = true;
|
||||
}
|
||||
else{
|
||||
submitButton.disabled = false;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="seznam.js"></script>
|
||||
<style>
|
||||
.selectedDiv{
|
||||
border: 1px solid red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="openPrompt()">
|
||||
<div id="A" style="text-align: center; ">Klikni me</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
let R = parseInt(window.prompt("Vpisi stevilko R"));
|
||||
let G = parseInt(window.prompt("Vpisi stevilko G"));
|
||||
let B = parseInt(window.prompt("Vpisi stevilko B"));
|
||||
let velikost = parseInt(window.prompt("Vpisi stevilko Velikost"));
|
||||
|
||||
let r = R/velikost;
|
||||
let g = G/velikost;
|
||||
let b = B/velikost;
|
||||
|
||||
function openPrompt(){
|
||||
let barva = document.getElementById("A");
|
||||
let block = "";
|
||||
let i;
|
||||
for(i = 0; i <= velikost; i++){
|
||||
block += "<div class='Div' id='" + String(i) + "' style=' color: rgb(" + String(255-R) + "," + String(255-G) + "," + String(255-B) +"); background-color: rgb(" + String(R) + "," + String(G) + "," + String(B) + ");' onclick='selectDiv(this.id)'>rgb(" + String(R) + "," + String(G) + "," + String(B) + ")</div>";
|
||||
R = R-r;
|
||||
G = G-g;
|
||||
B = B-b;
|
||||
}
|
||||
barva.innerHTML = block;
|
||||
}
|
||||
|
||||
function selectDiv(DivId)
|
||||
{
|
||||
const Div = document.getElementsByClassName("Div");
|
||||
for(let i=0; i < velikost; i++)
|
||||
{
|
||||
Div[i].setAttribute("class", "Div")
|
||||
}
|
||||
|
||||
const selectedDiv = document.getElementById(DivId);
|
||||
selectedDiv.setAttribute("class", "Div selectedDiv");
|
||||
}
|
||||
68
semester_1/uvod_v_svetovni_splet/Vaja_4/Test/script.js
Normal file
68
semester_1/uvod_v_svetovni_splet/Vaja_4/Test/script.js
Normal file
@@ -0,0 +1,68 @@
|
||||
var uporabniskoIme = null;
|
||||
var usernameWarningSpan = null;
|
||||
var passwordInput = null;
|
||||
var passwprdWarnignSpan = null;
|
||||
var submitButton = null;
|
||||
|
||||
window.onload = (event) =>
|
||||
{
|
||||
uporabniskoIme = document.getElementById("uporabniskoIme");
|
||||
usernameWarningSpan = document.getElementById("usernameWarning")
|
||||
passwordInput = document.getElementById("passwordInput")
|
||||
passwprdWarnignSpan = document.getElementById("passwordWarning")
|
||||
submitButton = document.getElementById("submitButton");
|
||||
|
||||
checkSubmit()
|
||||
};
|
||||
|
||||
function onUsernameChange()
|
||||
{
|
||||
|
||||
if(/^[a-zA-Z0-9_.,]+$/.test(uporabniskoIme.value)) //ustrezno uporabnisko ime
|
||||
{
|
||||
usernameWarningSpan.setAttribute("class", "correctInput");
|
||||
usernameWarningSpan.innerHTML = "Primerno uporavniško ime";
|
||||
}
|
||||
|
||||
else //neustrezno uporabnisko ime
|
||||
{
|
||||
usernameWarningSpan.setAttribute("class", "incorrectInput");
|
||||
usernameWarningSpan.innerHTML = "Neprimerno uporavniško ime";
|
||||
}
|
||||
|
||||
checkSubmit()
|
||||
}
|
||||
|
||||
/*^[a-zA-Z0-9_.,]*[A-Z]+[a-zA-Z0-9_.,]*$ */
|
||||
|
||||
function onPasswordChange()
|
||||
{
|
||||
if(/^[a-zA-Z0-9_.,]+$/.test(passwordInput.value) && passwordInput.value.length >= 6)
|
||||
{
|
||||
passwprdWarnignSpan.setAttribute("class", "correctInput");
|
||||
passwprdWarnignSpan.innerHTML = "Primerno geslo";
|
||||
}
|
||||
|
||||
else
|
||||
{
|
||||
passwprdWarnignSpan.setAttribute("class", "incorrectInput");
|
||||
passwprdWarnignSpan.innerHTML = "Neprimerno geslo";
|
||||
}
|
||||
|
||||
checkSubmit()
|
||||
}
|
||||
|
||||
function checkSubmit()
|
||||
{
|
||||
const usernameWarningClass = usernameWarningSpan.getAttribute("class");
|
||||
const passwordWarningClass = passwordWarnignSpan.getAttribute("class");
|
||||
|
||||
//ali "incorectInput" ali "CorrectInput"
|
||||
if(usernameWarningClass == 'IncorrectInput' || passwordWarningClass == 'IncorrectInput')
|
||||
{
|
||||
submitButton.disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
submitButton.disabled = false;
|
||||
}
|
||||
33
semester_1/uvod_v_svetovni_splet/Vaja_4/Test/styles.css
Normal file
33
semester_1/uvod_v_svetovni_splet/Vaja_4/Test/styles.css
Normal file
@@ -0,0 +1,33 @@
|
||||
html {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.selectedCell {
|
||||
background-color: red;
|
||||
border: 1px solid black;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.colorTable * {
|
||||
border: 1px solid black;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#usernameWarning, #passwordWarning {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.correctInput {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.incorrectInput {
|
||||
color: darkred;
|
||||
}
|
||||
7
semester_1/uvod_v_svetovni_splet/Vaja_5/Demo/Dem/bootstrap/css/bootstrap.min.css
vendored
Normal file
7
semester_1/uvod_v_svetovni_splet/Vaja_5/Demo/Dem/bootstrap/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
7
semester_1/uvod_v_svetovni_splet/Vaja_5/Demo/Dem/bootstrap/js/bootstrap.bundle.min.js
vendored
Normal file
7
semester_1/uvod_v_svetovni_splet/Vaja_5/Demo/Dem/bootstrap/js/bootstrap.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
54
semester_1/uvod_v_svetovni_splet/Vaja_5/Demo/Dem/index.html
Normal file
54
semester_1/uvod_v_svetovni_splet/Vaja_5/Demo/Dem/index.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Demo vaja 5 - jQuery in Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap v5.1.3 CSS -->
|
||||
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- jQuery v3.6.0 -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
|
||||
<!-- Naša koda -->
|
||||
<script src="script.js"></script>
|
||||
<!-- Naši stili -->
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-md navbar-light bg-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand">Demo vaja 5</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="colapse"
|
||||
data-bstarget="#navbarNavAltMarkup" aria-controls="navbarNavAčtMarkup"
|
||||
aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse nvabar-collapse" id="navbarNavAltMarkup">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<header>
|
||||
<h1>Demo vaja 5 - jQuery in Bootstrap</h1>
|
||||
</header>
|
||||
<div>
|
||||
<span>Dodaj sadje v seznam</span><br>
|
||||
<input type="text" id="addFruitInput"><button id="addFruitButton" disabled>Dodaj</button>
|
||||
<ol id="fruitList">
|
||||
<li>Banane</li>
|
||||
<li>Češnje</li>
|
||||
<li>Borovnice</li>
|
||||
</ol>
|
||||
<button id="deleteFruitButton" disabled>Izbriši sadje</button>
|
||||
<span id="lastAddedFruitTimeSpan">Zadnji vnos ob ?</span>
|
||||
</div>
|
||||
<div>
|
||||
<img id="fruitImage">
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap v5.1.3 Javascript -->
|
||||
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>-
|
||||
</body>
|
||||
</html>
|
||||
69
semester_1/uvod_v_svetovni_splet/Vaja_5/Demo/Dem/script.js
Normal file
69
semester_1/uvod_v_svetovni_splet/Vaja_5/Demo/Dem/script.js
Normal file
@@ -0,0 +1,69 @@
|
||||
var addfruitButton;
|
||||
var addFruitInput;
|
||||
var fruitList;
|
||||
var deleteFruitButton;
|
||||
var lastAddedFruitTimeSpan;
|
||||
var fruitImage;
|
||||
|
||||
const fruitImagesPaths = {
|
||||
"ananas" : "./images/ananas.jpg",
|
||||
"češnja" : "./images/češnja.jpg",
|
||||
"hruška" : "."
|
||||
}
|
||||
|
||||
const notFoundFruitImagePath = "./images/not_";
|
||||
|
||||
$(document).ready(() => {
|
||||
addfruitButton = $("#addfruitButton");
|
||||
addFruitInput = $("#addFruitInput");
|
||||
fruitList = $("#fruitList");
|
||||
deleteFruitButton =$("#deleteFruitButton";
|
||||
lastAddedFruitTimeSpan =$("#lastAddedFruitTimeSpan");
|
||||
fruitImage =$("#fruitImage");
|
||||
|
||||
addFruitInput.on("input", ()){
|
||||
const isTextPresentInInput = addFruitInput.val().length > 0;
|
||||
|
||||
if (isTextPresentInInput){
|
||||
addfruitButton.prop("disabled", false);
|
||||
}
|
||||
else{
|
||||
addfruitButton,prop("disabled", true);
|
||||
}
|
||||
}
|
||||
|
||||
addfruitButton.click(() => {
|
||||
const addedFruit = addFruitInput.val();
|
||||
|
||||
fruitList.append("<li>" + addedFruit + "</li>");
|
||||
addfruitButton.prop("disabled", true);
|
||||
addFruitInput.val("");
|
||||
fruitList.children().last().trigger("click");
|
||||
const currentDate = new Date();
|
||||
const options = {
|
||||
hour: 'numeric',
|
||||
minuste: 'numeric',
|
||||
second: 'numeric',
|
||||
};
|
||||
|
||||
const currentDateString = new Intl.DateTimeFormat("de-AT",options).format(currentDate);
|
||||
lastAddedFruitTimeSpan.text("Zadnji vnos od: " + currentDateString);
|
||||
|
||||
})
|
||||
|
||||
$(document).on("click","li", onClickFruit);
|
||||
|
||||
deleteFruitButton.clic(() => {
|
||||
$("li.selectedFruit").first().remove();
|
||||
})
|
||||
})
|
||||
|
||||
function onClickFruit(){
|
||||
const fruit = $(this).text().toLowerCase();
|
||||
$(this).siblings().removeClass("selectedFruit");
|
||||
$(this).addClass("selectedFruit");
|
||||
|
||||
if(fruit in fruitImagesPaths){
|
||||
const fruitImagesPaths
|
||||
}
|
||||
}
|
||||
33
semester_1/uvod_v_svetovni_splet/Vaja_5/Demo/Dem/styles.css
Normal file
33
semester_1/uvod_v_svetovni_splet/Vaja_5/Demo/Dem/styles.css
Normal file
@@ -0,0 +1,33 @@
|
||||
html {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
background-color: skyblue;
|
||||
}
|
||||
|
||||
/*.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background-color: #f5f5f5;
|
||||
}*/
|
||||
|
||||
#fruitImage
|
||||
{
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.selectedFruit
|
||||
{
|
||||
color: red;
|
||||
}
|
||||
|
||||
BIN
semester_1/uvod_v_svetovni_splet/Vaja_5/Demo/USS_vaja_5_demo.zip
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_5/Demo/USS_vaja_5_demo.zip
Normal file
Binary file not shown.
7
semester_1/uvod_v_svetovni_splet/Vaja_5/Demo/USS_vaja_5_demo/bootstrap/css/bootstrap.min.css
vendored
Normal file
7
semester_1/uvod_v_svetovni_splet/Vaja_5/Demo/USS_vaja_5_demo/bootstrap/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Demo vaja 5 - jQuery in Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap v5.1.3 CSS -->
|
||||
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- jQuery v3.6.0 -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
|
||||
<!-- Naša koda -->
|
||||
<script src="script.js"></script>
|
||||
<!-- Naši stili -->
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-md navbar-light bg-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand">Demo vaja 5 - jQuery in Bootstrap </a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNavAltMarkup" arial-controls="#navbarNavAltMarkup"
|
||||
aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"> </span>
|
||||
</button>
|
||||
|
||||
<div class ="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav">
|
||||
<a class="nav-item nav-link"> Prodajalne sadja</a>
|
||||
<a class="nav-item nav-link"> Cene sadja</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-6 p-4">
|
||||
<span class="lead"> Dodaj sadje v seznam</span>
|
||||
<div class="input-group mb-3 mt-3">
|
||||
<input type="text" id="addFruitInput" class="form-control">
|
||||
<div class="input-group-append">
|
||||
<button type="button" class="btn btn-outline-secondary" id="addFruitButton" disabled>Dodaj</button>
|
||||
</div>
|
||||
</div>
|
||||
<ol id="fruitList" class="list-group mb-4">
|
||||
<li class="list-group-item">Banane</li>
|
||||
<li class="list-group-item">Češnje</li>
|
||||
<li class="list-group-item">Borovnice</li>
|
||||
</ol>
|
||||
<button class="btn btn-danger mb-2" id="deleteFruitButton" disabled>Izbriši sadje</button>
|
||||
<div class="alert alert-light" role="alert" id="lastAddedFruitTimeSpan">Zadnji vnos ob ? </div>
|
||||
</div>
|
||||
<div class="col-md-6 p-4">
|
||||
<div class="card mx-auto" style="width: 16rem;">
|
||||
<img class="img-fluid" id="fruitImage">
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
Izbrano sadje je prikazano na zgornji sliki
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-2"></div>
|
||||
<div class="col"> Avtor: Sabina Pauric</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap v5.1.3 Javascript -->
|
||||
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,94 @@
|
||||
var addFruitButton;
|
||||
var addFruitInput;
|
||||
var fruitList;
|
||||
var deleteFruitButton;
|
||||
var lastAddedFruitTimeSpan;
|
||||
var fruitImage;
|
||||
|
||||
const fruitImagesPaths = { //slovar,
|
||||
"ananas" : "./images/ananas.jpg",
|
||||
"česnje" : "./images/česnje.jpg",
|
||||
"hruška" : "./images/hruška.jpg",
|
||||
"jabolko" : "./images/jabolko.jpg"
|
||||
|
||||
};
|
||||
|
||||
const notFoundFruitImagePath = "./images/not_found.jpg";
|
||||
|
||||
$(document).ready(() => {
|
||||
addfruitButton = $("#addFruitButton");
|
||||
addFruitInput = $("#addFruitInput");
|
||||
addFruitButton = $("#addFruitButton");
|
||||
fruitList = $("#fruitList");
|
||||
deleteFruitButton = $("#deleteFruitButton");
|
||||
lastAddedFruitTimeSpan = $("#lastAddedFruitTimeSpan");
|
||||
fruitImage = $("#fruitImage");
|
||||
|
||||
addFruitInput.on("input", () => {
|
||||
const isTextPresentInInput = (addFruitInput.val().length > 0);
|
||||
|
||||
if (isTextPresentInInput)
|
||||
{
|
||||
addfruitButton.prop("disabled", false);
|
||||
}
|
||||
else
|
||||
{
|
||||
addfruitButton.prop("disabled", true);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
addfruitButton.click(() => {
|
||||
const addedFruit = addFruitInput.val();
|
||||
|
||||
fruitList.append("<li class='list-group-item'>" + addedFruit + "</li>");
|
||||
addfruitButton.prop("disabled", true);
|
||||
addFruitInput.val("");
|
||||
|
||||
fruitList.children().last().trigger("click");
|
||||
|
||||
const currentDate = new Date();
|
||||
const options = {
|
||||
hour: 'numeric',
|
||||
minute: 'numeric',
|
||||
second: 'numeric'
|
||||
};
|
||||
|
||||
const currentDateString = new Intl.DateTimeFormat("de-AT", options).format(currentDate);
|
||||
lastAddedFruitTimeSpan.text("Zadnji vnos ob: " + currentDateString);
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
$(document).on("click", "li", onclickFruit);
|
||||
|
||||
deleteFruitButton.click(() =>{
|
||||
$("li.selectedFruit").first().remove();
|
||||
deleteFruitButton.prop("disabled", true);
|
||||
fruitImage.attr("src", "");
|
||||
});
|
||||
|
||||
function onclickFruit()
|
||||
{
|
||||
const fruit = $(this).text().toLowerCase();
|
||||
|
||||
console.log(fruit);
|
||||
|
||||
$(this).siblings().removeClass("selectedFruit");
|
||||
|
||||
$(this).addClass("selectedFruit");
|
||||
|
||||
if (fruit in fruitImagesPaths)
|
||||
{
|
||||
const fruitImagesPath = fruitImagesPaths[fruit];
|
||||
fruitImage.attr("src", fruitImagesPath);
|
||||
}
|
||||
else
|
||||
{
|
||||
fruitImage.attr("src", notFoundFruitImagePath);
|
||||
}
|
||||
|
||||
deleteFruitButton.prop("disabled", false); //v html je disabled
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
html {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
background-color: skyblue;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/*
|
||||
#fruitImage
|
||||
{
|
||||
width: 20%;
|
||||
}
|
||||
*/
|
||||
|
||||
.selectedFruit
|
||||
{
|
||||
color: red;
|
||||
}
|
||||
|
||||
BIN
semester_1/uvod_v_svetovni_splet/Vaja_5/Naloga.zip
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_5/Naloga.zip
Normal file
Binary file not shown.
67
semester_1/uvod_v_svetovni_splet/Vaja_5/Naloga/index.html
Normal file
67
semester_1/uvod_v_svetovni_splet/Vaja_5/Naloga/index.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<p class="bg-primary text-dark pb-2 text-center h1">
|
||||
Opravila
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="btn-group">
|
||||
<input class="m-1" id="prviVpis" type="text">
|
||||
<button class="m-1 btn btn-primary rounded" id="dodaj1">
|
||||
Dodaj
|
||||
</button>
|
||||
<button class="m-1 btn btn-primary rounded" id="brisi">
|
||||
Briši
|
||||
</button>
|
||||
</div>
|
||||
<ul id="listl" class="list-group">
|
||||
<li class="list-group-item">Vaje</li>
|
||||
<li class="list-group-item">Treningi</li>
|
||||
<li class="list-group-item">Projekt</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<input id="drugiVpis" type="text">
|
||||
<button id="dodaj2" class="mb-1 btn btn-primary">
|
||||
Dodaj
|
||||
</button>
|
||||
<table id="table1" class="table table-striped">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Opis</th>
|
||||
<th scope="col">Kategorija</th>
|
||||
<th scope="col">Datum vnosa</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
<button id="brisi2" class="btn btn-danger mb-1">
|
||||
Briši
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center bg-secondary">
|
||||
<footer>
|
||||
<p class="col-md-12 h4 p-2">OSS Vaja 5 - JQuery in Bootstrap</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
61
semester_1/uvod_v_svetovni_splet/Vaja_5/Naloga/script.js
Normal file
61
semester_1/uvod_v_svetovni_splet/Vaja_5/Naloga/script.js
Normal file
@@ -0,0 +1,61 @@
|
||||
let st = 0;
|
||||
var deleted = false;
|
||||
var today = new Date();
|
||||
var date =
|
||||
today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
|
||||
var time =
|
||||
today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
|
||||
var dateTime = date + ", " + time;
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
$("li").click(function () {
|
||||
$("li").removeClass( "active");
|
||||
$("li").removeAttr("id");
|
||||
$(this).addClass("active");
|
||||
$(this).attr("id", "selected");
|
||||
});
|
||||
|
||||
$("#brisi").click(function(){
|
||||
$("#selected").remove();
|
||||
});
|
||||
|
||||
$(document).on("click", ".appended", function(){
|
||||
$("li").removeClass("active");
|
||||
$("li").removeAttr("id");
|
||||
$(this).addClass("active");
|
||||
$(this).attr("id", "selected");
|
||||
});
|
||||
|
||||
$("#dodaj2").click(function(){
|
||||
st++;
|
||||
$("tbody").append(
|
||||
"<tr scope='row'><td>" + st + "</td><td>" + document.getElementById("drugiVpis").value + "</td><td>" + $("#selected").text() + "</td><td>" + dateTime + "</td></tr>"
|
||||
);
|
||||
|
||||
$("tr").click(function(){
|
||||
$(this).addClass("table-danger");
|
||||
});
|
||||
|
||||
$(document).on("click", ".appended2", function(){
|
||||
$(this).addClass("active");
|
||||
$(this).addClass("selected2");
|
||||
});
|
||||
|
||||
$("#brisi").click(function(){
|
||||
$(".selected").remove();
|
||||
});
|
||||
|
||||
$("#brisi2").click (function(){
|
||||
$(".table-danger").remove();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
$("#dodaj1").click(function(){
|
||||
$("#listl").append(
|
||||
"<li class='appended list-group-item'>" + document.getElementById("prviVpis").value + "</li>"
|
||||
);
|
||||
});
|
||||
|
||||
});
|
||||
71
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/fruits.php
Normal file
71
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/fruits.php
Normal file
@@ -0,0 +1,71 @@
|
||||
<?php
|
||||
session_start();
|
||||
|
||||
if(empty($_SESSION['username'])){
|
||||
header('Location: index.php');
|
||||
exit();
|
||||
}
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Demo vaja 6 - PHP</title>
|
||||
|
||||
<!-- Bootstrap v5.1.3 CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
|
||||
<!-- jQuery v3.6.0 -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
|
||||
<script src="script.js"></script>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<?php
|
||||
require('fruits_db.php');
|
||||
$isRequestedFruitInDB = FALSE;
|
||||
$requestedFruitProperties = NULL;
|
||||
|
||||
if(isset($_GET['fruit'])){
|
||||
|
||||
$requestedFruitName = $_GET['fruit'];
|
||||
foreach($fruits as $fruit){
|
||||
|
||||
$fruitProperties = get_object_vars($fruit);
|
||||
if($fruitProperties['name'] == $requestedFruitName){
|
||||
|
||||
$isRequestedFruitInDB = TRUE;
|
||||
$requestedFruitProperties = $fruitProperties;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ($isRequestedFruitInDB == TRUE){
|
||||
require('header.php');
|
||||
|
||||
$card = "
|
||||
<div class='col-md-6 p-4'>
|
||||
<div class='card mx-auto' style='width: 16rem;'>
|
||||
<div class='card-body'>
|
||||
<h5 class = 'card-title'>{$requestedFruitProperties['name']}</h5>
|
||||
<p class='card-text'>{$requestedFruitProperties['description']}</p>
|
||||
<p>Za vec informacij obiscite <a href = '{$requestedFruitProperties['wiki_url']}'>povezavo</a>.</p>
|
||||
<br>
|
||||
<a href = 'index.php'>Nazaj na vsa sadja</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
";
|
||||
echo($card);
|
||||
}
|
||||
else{
|
||||
header('Location: index.php');
|
||||
exit();
|
||||
}
|
||||
?>
|
||||
</body>
|
||||
</html>
|
||||
19
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/fruits_db.php
Normal file
19
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/fruits_db.php
Normal file
@@ -0,0 +1,19 @@
|
||||
<?php
|
||||
$fruits = array(
|
||||
(object)array(
|
||||
"name" => "Banane",
|
||||
"description" => "Zdrav tropski sadež odličnega okusa, ki ohranja zdravje vaših oči",
|
||||
"wiki_url" => "https://en.wikipedia.org/wiki/Banana"
|
||||
),
|
||||
(object)array(
|
||||
"name" => "Češnje",
|
||||
"description" => "Sladek sadež, ki se ga obira v mesecu maju in juniju",
|
||||
"wiki_url" => "https://en.wikipedia.org/wiki/Cherry"
|
||||
),
|
||||
(object)array(
|
||||
"name" => "Borovnice",
|
||||
"description" => "Slastni in zdravi sadeži iz gozda",
|
||||
"wiki_url" => "https://en.wikipedia.org/wiki/Blueberry"
|
||||
)
|
||||
);
|
||||
?>
|
||||
26
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/header.php
Normal file
26
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/header.php
Normal file
@@ -0,0 +1,26 @@
|
||||
<?php
|
||||
session_start();
|
||||
?>
|
||||
|
||||
<nav class="navbar navbar-expand-md navbar-light bg-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Demo vaja 5 - jQuery in Bootstrap</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav">
|
||||
<a class="nav-item nav-link" href="#">Prodajalne sadja</a>
|
||||
<a class="nav-item nav-link disabled" href="#">Cene sadja</a>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
if(isset($_SESSION['username'])){
|
||||
$username = $_SESSION['username'];
|
||||
echo "<div class ='navbar-nav'><a class = 'nav-item nav-link' href='logout.php'>Izpis - {$username}</a></div>";
|
||||
}
|
||||
?>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
BIN
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/images/ananas.jpg
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/images/ananas.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/images/hruška.jpg
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/images/hruška.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/images/jabolko.jpg
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/images/jabolko.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/images/češnje.jpg
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/images/češnje.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
95
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/index.php
Normal file
95
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/index.php
Normal file
@@ -0,0 +1,95 @@
|
||||
<?php
|
||||
session_start();
|
||||
?>
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Demo vaja 6 - PHP</title>
|
||||
|
||||
<!-- Bootstrap v5.1.3 CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
|
||||
<!-- jQuery v3.6.0 -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
|
||||
<script src="script.js"></script>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<?php
|
||||
require('fruits_db.php');
|
||||
require('header.php');
|
||||
?>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
|
||||
<?php if(!empty($_SESSION['username'])) : ?>
|
||||
|
||||
<div class="col-md-6 p-4">
|
||||
<span class="lead">Dodaj sadje v seznam</span><br>
|
||||
<div class="input-group mb-3 mt-3">
|
||||
<input type="text" id="addFruitInput" class="form-control">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button" id="addFruitButton" disabled>Dodaj</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ol id="fruitList" class="list-group mb-4">
|
||||
<?php
|
||||
foreach($fruits as $fruit){
|
||||
|
||||
$fruitProperties = get_object_vars($fruit);
|
||||
$fruitName = $fruitProperties['name'];
|
||||
echo("<li class='list-group-item'>$fruitName<a style = 'float:right;' href='/fruits.php?fruit=$fruitName'>Vec informacij</a></li>");
|
||||
}
|
||||
?>
|
||||
</ol>
|
||||
|
||||
<button id="deleteFruitButton" class="btn btn-danger mb-2" disabled>Izbriši sadje</button>
|
||||
<div class="alert alert-light" role="alert" id="lastAddedFruitTimeSpan">Zadnji vnos ob ?</div>
|
||||
</div>
|
||||
<div class="col-md-6 p-4">
|
||||
<div class="card mx-auto" style="width: 16rem;">
|
||||
<img class="img-fluid" id="fruitImage">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Izbrano sadje je prikazano na zgornji sliki</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php else : ?>
|
||||
<div class="col-md-6 p-4">
|
||||
<form action="/login.php" method="post">
|
||||
<div class="form-group">
|
||||
<div class="mb-3">
|
||||
<label for="username">Vpis uporabnika</label>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<input type="text" class="form-control" id="username" name="username" placeholder="Uporabnisko ime">
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Prijava</button>
|
||||
</form>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-6"></div>
|
||||
</div>
|
||||
<span>Avtor: Nikola Petrov</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap v5.1.3 JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
15
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/login.php
Normal file
15
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/login.php
Normal file
@@ -0,0 +1,15 @@
|
||||
<?php
|
||||
session_start();
|
||||
|
||||
if($_SERVER['REQUEST_METHOD'] == 'POST'){
|
||||
|
||||
if(!empty($_POST['username'])){
|
||||
|
||||
$username = $_POST['username'];
|
||||
$_SESSION['username'] = $username;
|
||||
}
|
||||
}
|
||||
|
||||
header('Location: index.php');
|
||||
exit();
|
||||
?>
|
||||
9
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/logout.php
Normal file
9
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/logout.php
Normal file
@@ -0,0 +1,9 @@
|
||||
<?php
|
||||
session_start();
|
||||
|
||||
session_unset();
|
||||
session_destroy();
|
||||
|
||||
header('Location: index.php');
|
||||
exit();
|
||||
?>
|
||||
86
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/script.js
Normal file
86
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/script.js
Normal file
@@ -0,0 +1,86 @@
|
||||
var addFruitButton;
|
||||
var addFruitInput;
|
||||
var fruitList;
|
||||
var deleteFruitButton;
|
||||
var lastAddedFruitTimeSpan;
|
||||
var fruitImage;
|
||||
|
||||
const fruitImagesPaths = {
|
||||
"ananas": "./images/ananas.jpg",
|
||||
"češnje": "./images/češnje.jpg",
|
||||
"hruška": "./images/hruška.jpg",
|
||||
"jabolko": "./images/jabolko.jpg"
|
||||
};
|
||||
const notFoundFruitImagePath = "./images/not_found.jpg";
|
||||
|
||||
$(document).ready(() => {
|
||||
|
||||
addFruitButton = $("#addFruitButton");
|
||||
addFruitInput = $("#addFruitInput");
|
||||
fruitList = $("#fruitList");
|
||||
deleteFruitButton = $("#deleteFruitButton");
|
||||
lastAddedFruitTimeSpan = $("#lastAddedFruitTimeSpan");
|
||||
fruitImage = $("#fruitImage");
|
||||
|
||||
addFruitInput.on("input", () => {
|
||||
const isTextPresentInInput = addFruitInput.val().length > 0;
|
||||
|
||||
if (isTextPresentInInput)
|
||||
{
|
||||
addFruitButton.prop("disabled", false);
|
||||
}
|
||||
else
|
||||
{
|
||||
addFruitButton.prop("disabled", true);
|
||||
}
|
||||
});
|
||||
|
||||
addFruitButton.click(() => {
|
||||
const addedFruit = addFruitInput.val();
|
||||
|
||||
fruitList.append("<li class='list-group-item'>" + addedFruit + "</li>");
|
||||
addFruitInput.val("");
|
||||
|
||||
addFruitButton.prop("disabled", true);
|
||||
|
||||
|
||||
fruitList.children().last().trigger("click");
|
||||
|
||||
|
||||
const currentDate = new Date();
|
||||
const options = {hour: "numeric", minute: "numeric", second: "numeric"};
|
||||
const currentDateString = new Intl.DateTimeFormat("de-AT", options).format(currentDate);
|
||||
lastAddedFruitTimeSpan.text("Zadnji vnos ob: " + currentDateString);
|
||||
});
|
||||
|
||||
$(document).on("click", "li", onClickFruit);
|
||||
|
||||
deleteFruitButton.click(() => {
|
||||
$("li.selectedFruit").first().remove();
|
||||
deleteFruitButton.prop("disabled", true);
|
||||
fruitImage.attr("src", "");
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function onClickFruit()
|
||||
{
|
||||
const fruit = $(this).text().replace(/<a(.*)>(.*)<\/a>/g, "").replace('Več informacij',"").toLowerCase();
|
||||
|
||||
$(this).siblings().removeClass("selectedFruit");
|
||||
|
||||
$(this).addClass("selectedFruit");
|
||||
|
||||
if (fruit in fruitImagesPaths)
|
||||
{
|
||||
const fruitImagePath = fruitImagesPaths[fruit];
|
||||
fruitImage.attr("src", fruitImagePath);
|
||||
}
|
||||
else
|
||||
{
|
||||
fruitImage.attr("src", notFoundFruitImagePath);
|
||||
}
|
||||
|
||||
deleteFruitButton.prop("disabled", false);
|
||||
}
|
||||
|
||||
28
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/styles.css
Normal file
28
semester_1/uvod_v_svetovni_splet/Vaja_6/Demo/styles.css
Normal file
@@ -0,0 +1,28 @@
|
||||
html {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
background-color: skyblue;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.selectedFruit
|
||||
{
|
||||
color: red;
|
||||
}
|
||||
|
||||
BIN
semester_1/uvod_v_svetovni_splet/Vaja_6/Naloga.zip
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_6/Naloga.zip
Normal file
Binary file not shown.
65
semester_1/uvod_v_svetovni_splet/Vaja_6/Naloga/baza.php
Normal file
65
semester_1/uvod_v_svetovni_splet/Vaja_6/Naloga/baza.php
Normal file
@@ -0,0 +1,65 @@
|
||||
<?php
|
||||
|
||||
$uporabniki = array(
|
||||
(object)array(
|
||||
"id"=>1,
|
||||
"username"=>"sandi",
|
||||
"geslo"=>"sandi123"
|
||||
),
|
||||
(object)array(
|
||||
"id"=>2,
|
||||
"username"=>"milan",
|
||||
"geslo"=>"milan123"
|
||||
),
|
||||
(object)array(
|
||||
"id"=>3,
|
||||
"username"=>"janez",
|
||||
"geslo"=>"janez123"
|
||||
),
|
||||
);
|
||||
|
||||
$novice = array(
|
||||
(object)array(
|
||||
"id"=>1,
|
||||
"naslov"=>"PROF. DR. MARJAN MERNIK PONOVNO IMENOVAN ZA VISOKO CITIRANEGA RAZISKOVALCA",
|
||||
"avtor"=>"Pia Prebevšek",
|
||||
"datum"=>"6. december 2018",
|
||||
"povzetek"=>'<span style="color:black">Clarivate Analytics, Web of Science Group, je 27. novembra 2018 objavi</span><span style="color:black">l </span><a href="https://hcr.clarivate.com/">seznam visoko citranih raziskovalcev za leto 2018</a><span style="color:black">. Na seznamu je že drugo leto zapored prof. dr. Marjan Mernik. Njegove raziskave se uvrščajo med zgornjih 1% najbolj citiranih del na področju računalništva in imajo izjemen vpliv. Več o njegovih raziskavah najdete na: <a href="https://lpm.feri.um.si/en/members/mernik/">https://lpm.feri.um.si/en/members/mernik/</a></span>',
|
||||
"vsebina"=>'<p><span style="color:black">Na seznamu visoko citiranih raziskovalcev za leto 2018 sta samo dva raziskovalca iz Slovenije, oba iz Univerze v Mariboru. Ob prof. dr. Marjanu Merniku se je na seznamu uvrstil tudi prof. dr. Matjaž Perc iz Fakultete za naravoslovje in matematiko. Uvrstitev na seznam visoko citiranih raziskovalcev pa je pomembna tudi za rangiranje univerz. </span></p><p>Univerza v Mariboru si je v svojih programih in letnih poročilih 2010-2013 zastavila kot cilj uvrstitev med 500 najboljših univerz predvidoma do leta 2020. Šanghajska lestvica (ARWU) je ena izmed najbolj uveljavljenih lestvic univerz, ki pripravlja pregled najboljših univerz vse od leta 2003. Uporablja 6 kazalnikov (Alumni, Award, HiCi, N&S, PUB, PCP). Od tega Alumni in Award merita število Nobelovih nagrad in zato za našo univerzo nerealen cilj, zato si mora UM prizadevati dosegati visoke vrednosti pri HiCi (visokocitirani raziskovalci), N&S (objave v Nature in Science), PUB (SCI članki) in PCP (per capita performance). V letu 2018 je UM dosegla 501-600 mesto (mesto kandidatke za vstop med prvih 500 univerz) in se nekako približala zastavljenim ciljem. V spodnji tabeli vidimo, da je to uvrstitev dosegla predvsem na račun kazalnika HiCi, saj imajo univerze, ki so v neposredni bližini naše univerze in posegajo po mestih med 400 in 600 (Graz, Ljubljana, Trst, Zagreb) vrednost kazalca HiCi enako 0, UM pa ima vrednost kazalca HiCi 16,6. Na dejstvo, da ima izmed bližnjih univerz (Graz, Ljubljana, Trst, Zagreb) le UM najbolj citirane raziskovalce smo lahko ponosni.</p><p><img alt="" class="align_center" src="/site/assets/files/6045/tabela_lestvica.587x0-is.png" width="587"></p>'
|
||||
),
|
||||
(object)array(
|
||||
"id"=>2,
|
||||
"naslov"=>"URA ZA KODO 2018",
|
||||
"avtor"=>"Pia Prebevšek",
|
||||
"datum"=>"3. december 2018 ",
|
||||
"povzetek"=>'Dogodek "Ura za kodo" se bo letos odvijal od 3. 12. 2018 do 9. 12. 2018. Inštitut za računalništvo bo tudi letos izvedel preko 10 dogodkov na temo računalniškega programiranja.',
|
||||
"vsebina"=>'<p><span style="color:black">Gre za enourni uvod v računalništvo z namenom demistificirati kodo in pokazati, da se lahko vsakdo nauči osnov programiranja. Vsak učenec mora imeti priložnost za učenje računalništva, ki izboljšuje reševanje nalog, logiko in ustvarjalnost. Z zgodnjim začetkom bodo imeli temelje za uspeh v vseh poklicih 21. stoletja. Vabljeni tudi k ogledu </span><a href="https://youtu.be/KsOIlDT145A">promocijskega videa</a><span style="color:black">. </span></p>'
|
||||
),
|
||||
(object)array(
|
||||
"id"=>3,
|
||||
"naslov"=>"FERI ZA ŽIVALI",
|
||||
"avtor"=>"Pia Prebevšek",
|
||||
"datum"=>"30. november 2018",
|
||||
"povzetek"=>"Študentski svet FERI želi z vašo pomočjo pred začetkom pravega mraza zraven zbiranja sladkarij in igrač za otroke pomagati tudi živalim.",
|
||||
"vsebina"=>"Hrano, igrače, rjuhe, odeje, brisače ipd. se zbira do 21. decembra. Dobrine lahko oddate v knjižnici Tehniških fakultet in v škatlo pri Referatu za študentske zadeve v času uradnih ur. Zbrano bo podarjeno društvom za zaščito živali. Veseli bomo vsakega sodelovanja."
|
||||
),
|
||||
(object)array(
|
||||
"id"=>4,
|
||||
"naslov"=>"STROKOVNA EKSKURZIJA - OBISK PODJETJA AVL GmbH",
|
||||
"avtor"=>"Pia Prebevšek",
|
||||
"datum"=>"14. november 2018",
|
||||
"povzetek"=>"Inštitut za računalništvo organizira za 3. letnik VS študijskega programa Računalništvo in informacijske tehnologije v četrtek, 13. decembra, strokovno ekskurzijo v podjetje AVL GmbH v Graz.",
|
||||
"vsebina"=>'<p><span style="color:black">AVL je največja neodvisna družba na svetu za razvoj, simulacijo in testiranje pogonskih sil (hibridni motorji, motorji z notranjim izgorevanjem, prenos, električni pogon, baterije in programska oprema) za osebna vozila, tovornjake in velike motorje. Več o AVL podjetju na <a href="https://www.avl.com/company">https://www.avl.com/company</a></span></p>'
|
||||
),
|
||||
(object)array(
|
||||
"id"=>5,
|
||||
"naslov"=>'Zbiranje sladkarij in igrač "Za igriv otroški nasmeh"',
|
||||
"avtor"=>"Pia Prebevšek",
|
||||
"datum"=>"13. november 2018",
|
||||
"povzetek"=>"Smo tik pred prazničnim decembrom, časom sreče in veselja, toplih objemov ter neizmerne radosti ob trenutkih, preživetih z našimi najdražjimi. Iskren nasmeh ob že najmanjših pozornostih nas ogreje tudi v najhladnejših decembrskih dneh. Tudi letos želimo poskrbeti, da so tega deležni vsi, tudi otroci iz socialno ogroženih družin!",
|
||||
"vsebina"=>'<p>Študentski svet Univerze v Mariboru vabi k tradicionalnem zbiranju sladkarij in igrač za otroke iz socialno ogroženih družin, ki jih bo v božičnem času z zbranimi dobrinami obdarila <a href="https://www.facebook.com/ZPMMaribor/" target="_blank">Zveza Prijateljev Mladine Maribor</a>.<br><br>
|
||||
Zbiralna akcija pod sloganom "Za igriv otroški nasmeh" bo potekala <strong>do 14. decembra 2018</strong>. Stare in nove igrače ter sladkarije lahko odložite v škatle, ki so namenjene zbiranju in temu primerno tudi označene. Zbiralne škatle se na FERI nahajajo <strong>v knjižnici in v oz. pri referatu</strong>. Prav tako lahko dobrine oddate v UKM.<br><br><em><strong>Skupaj pričarajmo igrive nasmehe na obraze otrok! </strong></em></p>'
|
||||
),
|
||||
);
|
||||
|
||||
?>
|
||||
12
semester_1/uvod_v_svetovni_splet/Vaja_6/Naloga/footer.php
Normal file
12
semester_1/uvod_v_svetovni_splet/Vaja_6/Naloga/footer.php
Normal file
@@ -0,0 +1,12 @@
|
||||
<footer class="footer mt-5">
|
||||
<div class="container-fluid bg-secondary">
|
||||
<div class="row">
|
||||
<div class="col" style = "text-align: center;">
|
||||
<h4>OSS Vaja 6 - PHP</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
39
semester_1/uvod_v_svetovni_splet/Vaja_6/Naloga/header.php
Normal file
39
semester_1/uvod_v_svetovni_splet/Vaja_6/Naloga/header.php
Normal file
@@ -0,0 +1,39 @@
|
||||
<?php
|
||||
session_start();
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Naloga 6</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<nav class="navbar navbar-light bg-primary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Novice</a>
|
||||
<ul class="nav justify-content-end">
|
||||
<li class="nav-item">
|
||||
<?php
|
||||
if(isset($_SESSION['username'])){
|
||||
$username = $_SESSION['username'];
|
||||
echo "<a class='nav-link disabled text-dark' href='#'>Pozdravljeni, $username!</a>";
|
||||
}
|
||||
?>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<?php
|
||||
if(isset($_SESSION['username'])):
|
||||
echo ("<a class='nav-link text-dark' href='logout.php'>Odjava</a>");
|
||||
else:
|
||||
echo ("<a class='nav-link text-dark' href='prijava.php'>Prijava</a>");
|
||||
endif;
|
||||
?>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
34
semester_1/uvod_v_svetovni_splet/Vaja_6/Naloga/index.php
Normal file
34
semester_1/uvod_v_svetovni_splet/Vaja_6/Naloga/index.php
Normal file
@@ -0,0 +1,34 @@
|
||||
<?php
|
||||
session_start();
|
||||
|
||||
if( $_SESSION['last_activity'] < time()-$_SESSION['expire_time'] ) {
|
||||
header('Location: logout.php');
|
||||
} else{
|
||||
$_SESSION['last_activity'] = time();
|
||||
}
|
||||
|
||||
require('baza.php');
|
||||
require('header.php');
|
||||
|
||||
if(!empty($_SESSION['username'])){
|
||||
foreach($novice as $novica){
|
||||
$novicaLastnosti = get_object_vars($novica);
|
||||
$novicaNaslov = $novicaLastnosti['naslov'];
|
||||
$novicaPovzetek = $novicaLastnosti['povzetek'];
|
||||
$novicaAvtor = $novicaLastnosti['avtor'];
|
||||
$novicaDatum = $novicaLastnosti['datum'];
|
||||
$novicaId = $novicaLastnosti['id'];
|
||||
echo("
|
||||
<div class='container'>
|
||||
<div class='border border-dark rounded p-4 m-1'>
|
||||
<h4>$novicaNaslov</h4>
|
||||
<p>$novicaPovzetek</p>
|
||||
<p>$novicaAvtor, $novicaDatum <a class='btn btn-primary float-end' href='/novica.php?id=$novicaId'>Preberi</a></p>
|
||||
</div>
|
||||
</div>
|
||||
");
|
||||
}
|
||||
require('footer.php');
|
||||
|
||||
}
|
||||
?>
|
||||
30
semester_1/uvod_v_svetovni_splet/Vaja_6/Naloga/login.php
Normal file
30
semester_1/uvod_v_svetovni_splet/Vaja_6/Naloga/login.php
Normal file
@@ -0,0 +1,30 @@
|
||||
<?php
|
||||
session_start();
|
||||
require('baza.php');
|
||||
|
||||
if(!empty($_POST['password'])){
|
||||
$upisanGeslo = $_POST['password'];
|
||||
foreach($uporabniki as $uporabnik){
|
||||
$uporabnikLastnosti = get_object_vars($uporabnik);
|
||||
if($uporabnikLastnosti['geslo'] == $upisanGeslo){
|
||||
if(!empty($_POST['username'])){
|
||||
$upisanUsername = $_POST['username'];
|
||||
|
||||
foreach($uporabniki as $uporabnik){
|
||||
$uporabnikLastnosti = get_object_vars($uporabnik);
|
||||
if($uporabnikLastnosti['username'] == $upisanUsername){
|
||||
$_SESSION['username'] = $upisanUsername;
|
||||
$_SESSION['last_activity'] = time();
|
||||
$_SESSION['expire_time'] = 5;
|
||||
header('Location: index.php');
|
||||
exit();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
$_SESSION['napacno'] = "True";
|
||||
header('Location: prijava.php');
|
||||
exit();
|
||||
?>
|
||||
@@ -0,0 +1,9 @@
|
||||
<?php
|
||||
session_start();
|
||||
|
||||
session_unset();
|
||||
session_destroy();
|
||||
|
||||
header('Location: prijava.php');
|
||||
exit();
|
||||
?>
|
||||
55
semester_1/uvod_v_svetovni_splet/Vaja_6/Naloga/novica.php
Normal file
55
semester_1/uvod_v_svetovni_splet/Vaja_6/Naloga/novica.php
Normal file
@@ -0,0 +1,55 @@
|
||||
<?php
|
||||
session_start();
|
||||
|
||||
if( $_SESSION['last_activity'] < time()-$_SESSION['expire_time'] ) {
|
||||
header('Location: logout.php');
|
||||
} else{
|
||||
$_SESSION['last_activity'] = time();
|
||||
}
|
||||
|
||||
require('baza.php');
|
||||
require('header.php');
|
||||
|
||||
if(!empty($_SESSION['username'])){
|
||||
|
||||
$zahtevanaNovicaLastnosti = NULL;
|
||||
$jeNovicaVDB = FALSE;
|
||||
|
||||
if(isset($_GET['id'])){
|
||||
$zahtevanaNovicaId = $_GET['id'];
|
||||
foreach($novice as $novica){
|
||||
|
||||
$NovicaLastnosti = get_object_vars($novica);
|
||||
if($NovicaLastnosti['id'] == $zahtevanaNovicaId){
|
||||
|
||||
$zahtevanaNovicaLastnosti = $NovicaLastnosti;
|
||||
$jeNovicaVDB = TRUE;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if($jeNovicaVDB == TRUE){
|
||||
|
||||
$novicaNaslov = $zahtevanaNovicaLastnosti['naslov'];
|
||||
$novicaPovzetek = $zahtevanaNovicaLastnosti['povzetek'];
|
||||
$novicaVsebina = $zahtevanaNovicaLastnosti['vsebina'];
|
||||
$novicaAvtor = $zahtevanaNovicaLastnosti['avtor'];
|
||||
$novicaDatum = $zahtevanaNovicaLastnosti['datum'];
|
||||
$novicaId = $zahtevanaNovicaLastnosti['id'];
|
||||
|
||||
echo("
|
||||
<div class='container'>
|
||||
<div class='border rounded p-4 m-1'>
|
||||
<h4>$novicaNaslov</h4>
|
||||
<p>$novicaPovzetek</p>
|
||||
<p>$novicaVsebina</p>
|
||||
<p>$novicaAvtor, $novicaDatum</p>
|
||||
</div>
|
||||
<p><a class='btn btn-primary float-end' href='index.php'>Nazaj</a></p>
|
||||
</div>
|
||||
");
|
||||
}
|
||||
require('footer.php');
|
||||
}
|
||||
?>
|
||||
37
semester_1/uvod_v_svetovni_splet/Vaja_6/Naloga/prijava.php
Normal file
37
semester_1/uvod_v_svetovni_splet/Vaja_6/Naloga/prijava.php
Normal file
@@ -0,0 +1,37 @@
|
||||
<?php
|
||||
session_start();
|
||||
require('header.php');
|
||||
?>
|
||||
|
||||
<div class="container">
|
||||
<div class="col-md-6 p-4">
|
||||
<form action="/login.php" method="post">
|
||||
<div class="form-group">
|
||||
<div class="mb-3">
|
||||
<label for="username">Vpis uporabnika</label>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<input type="text" class="form-control" id="username" name="username" placeholder="Uporabnisko ime">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password">Vpis geslo</label>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<input type="text" class="form-control" id="password" name="password" placeholder="Geslo">
|
||||
</div>
|
||||
|
||||
<?php
|
||||
if($_SESSION['napacno'] == "True"){
|
||||
echo("<div>Napacno Uporabnisko ime ali geslo</div>");
|
||||
}?>
|
||||
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Prijava</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
require('footer.php');
|
||||
?>
|
||||
|
||||
1
semester_1/uvod_v_svetovni_splet/Vaja_7/Demo/TEST.txt
Normal file
1
semester_1/uvod_v_svetovni_splet/Vaja_7/Demo/TEST.txt
Normal file
@@ -0,0 +1 @@
|
||||
http://localhost/hangman.php?new=TRUE
|
||||
BIN
semester_1/uvod_v_svetovni_splet/Vaja_7/Demo/USS_vaja7_demo.zip
Normal file
BIN
semester_1/uvod_v_svetovni_splet/Vaja_7/Demo/USS_vaja7_demo.zip
Normal file
Binary file not shown.
74
semester_1/uvod_v_svetovni_splet/Vaja_7/Demo/hangman.php
Normal file
74
semester_1/uvod_v_svetovni_splet/Vaja_7/Demo/hangman.php
Normal file
@@ -0,0 +1,74 @@
|
||||
<?php
|
||||
session_start();
|
||||
|
||||
if($_SERVER['REQUEST_METHOD'] == 'GET'){
|
||||
|
||||
include('words_db.php'); //$words
|
||||
include('utils.php'); // funkcije
|
||||
|
||||
// /hangman.php?new=true
|
||||
if(isset($_GET['new'])) // pricetek nove igre
|
||||
{
|
||||
//izberemo random besedo
|
||||
$randomWordIndex = array_rand($words);
|
||||
$randomWord = $words[$randomWordIndex]; //hokej
|
||||
|
||||
//pridobime vse unikatne crke
|
||||
$availableUniqueChars = array_unique(str_split($randomWord)); // [h,o,k,e,j]
|
||||
|
||||
// izbermo unikatno crko
|
||||
$randomUniqueCharIndex = array_rand($availableUniqueChars); // 1
|
||||
$randomUniqueChar = $availableUniqueChars[$randomUniqueCharIndex]; // o
|
||||
unset($availableUniqueChars[$randomUniqueCharIndex]); // izverisemo unikatno crko -> [h,k,e,j]
|
||||
|
||||
// delamo razkrita beseda
|
||||
$revealedWord = str_repeat('_',strlen($randomWord)); // hokej -> ___
|
||||
$revealedWord = revealCharactersInWord($revealedWord, $randomWord, $randomUniqueChar); // _o__
|
||||
|
||||
$_SESSION['availableUniqueChars'] = $availableUniqueChars;
|
||||
$_SESSION['word'] = $randomWord; // hokej
|
||||
$_SESSION['revealedWord'] = $revealedWord; // _o__
|
||||
$_SESSION['tries'] = 0;
|
||||
|
||||
$obj = createResponseObject($revealedWord, $_SESSION['tries'], FALSE);
|
||||
|
||||
// vrnemo JSON
|
||||
header('Content-Type: application/json');
|
||||
echo(json_encode($obj));
|
||||
}
|
||||
|
||||
else if(isset($_GET['check']) && isset($_GET['char'])){
|
||||
// hangman.php?check=true&char=a
|
||||
$guessedChar = $_GET['char'];
|
||||
$word = $_SESSION['word'];
|
||||
$availableUniqueChars = $_SESSION['availableUniqueChars'];
|
||||
$revealedWord = $_SESSION['revealedWord'];
|
||||
$_SESSION['tries'] = $_SESSION['tries'] + 1;
|
||||
|
||||
if(in_array($guessedChar, $availableUniqueChars)){ //Ugotovili smo crko v besedi
|
||||
//odstranimo novo uganjeno črko iz polja
|
||||
$guessedCharIndex = array_search($guessedChar, $availableUniqueChars);
|
||||
unset($availableUniqueChars[$guessedCharIndex]);
|
||||
|
||||
$revealedWord = revealCharactersInWord($revealedWord, $word, $guessedChar); // hokey -> _o__ -> (k) -> _ok__
|
||||
|
||||
$_SESSION['availableUniqueChars'] = $availableUniqueChars;
|
||||
$_SESSION['revealedWord'] = $revealedWord;
|
||||
|
||||
$obj = createResponseObject($revealedWord, $_SESSION['tries'], $word == $revealedWord); // _ok__ == hokej => FALSE
|
||||
|
||||
header('Content-type: application/json');
|
||||
echo(json_encode($obj));
|
||||
|
||||
}
|
||||
else // nismo ugotovili prave crke v besedi
|
||||
{
|
||||
$obj = createResponseObject($revealedWord, $_SESSION['tries'], FALSE);
|
||||
header('Content-type: application/json');
|
||||
echo(json_encode($obj));
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
12
semester_1/uvod_v_svetovni_splet/Vaja_7/Demo/header.php
Normal file
12
semester_1/uvod_v_svetovni_splet/Vaja_7/Demo/header.php
Normal file
@@ -0,0 +1,12 @@
|
||||
<?php
|
||||
session_start();
|
||||
?>
|
||||
|
||||
<nav class="navbar navbar-expand-md navbar-light bg-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Demo vaja 7 - AJAX in JSON</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
63
semester_1/uvod_v_svetovni_splet/Vaja_7/Demo/index.php
Normal file
63
semester_1/uvod_v_svetovni_splet/Vaja_7/Demo/index.php
Normal file
@@ -0,0 +1,63 @@
|
||||
<?php
|
||||
session_start();
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="sl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Demo vaja 7 - AJAX in JSON</title>
|
||||
|
||||
<!-- Bootstrap v5.1.3 CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
|
||||
<!-- jQuery v3.6.0 -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<?php
|
||||
require('header.php');
|
||||
?>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-12 p-4">
|
||||
<button type="button" class="btn btn-primary" id="beginGameButton" onclick="startGame()">Prični igro vislic</button>
|
||||
<div id="wordContainer" style="visibility: hidden;">
|
||||
<br>
|
||||
<!-- Črke uganke -->
|
||||
<div class="row">
|
||||
<div class="col-12" id="charsDiv"></div>
|
||||
</div>
|
||||
<!-- Vnosna polja za reševanje uganke -->
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<br>
|
||||
<div class="input-group" style="padding-bottom: 10px;">
|
||||
<input type="text" class="form-control" id="guessCharInput" maxlength="1" placeholder="Ugani črko">
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary" id="guessCharButton" onclick="sendChar()" disabled>Pošlji</button>
|
||||
<h2 style="float: right;"><span class="badge badge-secondary" id="numOfTriesSpan">Št. poizkusov: 0</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Obvestilo, da se je uganka rešila -->
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div class="alert alert-success" role="alert" id="successSolved">
|
||||
<strong>Pravilno ste rešili uganko! </strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap v5.1.3 Javascript -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
90
semester_1/uvod_v_svetovni_splet/Vaja_7/Demo/script.js
Normal file
90
semester_1/uvod_v_svetovni_splet/Vaja_7/Demo/script.js
Normal file
@@ -0,0 +1,90 @@
|
||||
var beginGameButton;
|
||||
var guessCharButton;
|
||||
var guessCharInput;
|
||||
var numOfTriesSpan;
|
||||
const hangmanURL = "hangman.php";
|
||||
|
||||
var guessedChar = ''; // globalna spremenljivka črke, ki smo jo vnesli v vnosno polje
|
||||
|
||||
$(document).ready(() => {
|
||||
beginGameButton = $("#beginGameButton");
|
||||
guessCharButton = $('#guessCharButton');
|
||||
guessCharInput = $('#guessCharInput');
|
||||
numOfTriesSpan = $('#numOfTriesSpan');
|
||||
|
||||
$("#successSolved").hide(); // skritje obvestila o uspešno ugotovljeni besedi
|
||||
|
||||
guessCharInput.on('input', (e) => { // če je vnešena črka, omogoči gumb za pošiljanje
|
||||
guessedChar = guessCharInput.val();
|
||||
if (guessedChar.length > 0)
|
||||
{
|
||||
guessCharButton.prop('disabled', false);
|
||||
}
|
||||
else
|
||||
{
|
||||
guessCharButton.prop('disabled', true);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function startGame(){
|
||||
guessCharInput.prop("disabled", false);
|
||||
guessCharInput.val("");
|
||||
$("#successSolved").hide();
|
||||
|
||||
// klic na /hangman.php?new=true
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.open("GET", hangmanURL + "?new=true", true);
|
||||
|
||||
xmlhttp.onreadystatechange = function(){
|
||||
|
||||
if (this.readyState == 4 && this.status == 200){
|
||||
const json = JSON.parse(this.responseText);
|
||||
|
||||
$("#wordContainer").css('visibility','visible');
|
||||
beginGameButton.text("Znova zazeni igro vislic");
|
||||
beginGameButton.removeClass('btn-primary');
|
||||
beginGameButton.addClass('btn-warning');
|
||||
|
||||
drawRevealedWord(json.revealedWord);
|
||||
|
||||
numOfTriesSpan.text("Št. poizkusov: " + jason.tries);
|
||||
|
||||
}
|
||||
};
|
||||
xmlhttp.send(null);
|
||||
|
||||
}
|
||||
|
||||
function sendChar(){
|
||||
guessCharInput.val("");
|
||||
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.open("GET", hangmanURL + "?check=true&char=" + guessedChar, true);
|
||||
xmlhttp.onreadystatechange = function(){
|
||||
if(this.readyState == 4 && this.status == 200){
|
||||
const json = JSON.parse(this.responseText);
|
||||
|
||||
drawRevealedWord(json.revealedWord);
|
||||
|
||||
numOfTriesSpan.text("St. poizkusov: " + json.tries);
|
||||
|
||||
if(json.solved){ //boolean
|
||||
guessCharButton.prop("disabled", true);
|
||||
guessCharInput.prop("disabled", true);
|
||||
$("#successSolved").show();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
xmlhttp.send(null);
|
||||
}
|
||||
|
||||
function drawRevealedWord(revealedWord) // izris črk
|
||||
{
|
||||
const charsDiv = $('#charsDiv');
|
||||
charsDiv.empty(); // zbrišemo prejšnje črke
|
||||
revealedWord.split('').forEach(char => { // razdelimo do zdaj vidno besedo na znake (char-e)
|
||||
charsDiv.append('<h1 class="char"><span class="badge badge-light">'+ char +'</span></h1>'); // za vsak char ustvarimo badge s črko
|
||||
});
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user