Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <!-- <link rel="stylesheet" href="./prvaLab.css"> -->
- <style>
- #sign-up-form label{
- display: inline-block;
- width: 120px;
- margin-bottom: 10px;
- }
- .red-bold{
- font-weight: bold;
- color:red;
- }
- .grey-bg{
- background-color: lightgray;
- }
- ul{
- font-weight:bold;
- color: #0000FF;
- }
- .black-ordered-list{
- font-weight: normal;
- color: #000;
- }
- </style>
- </head>
- <body>
- <div id="timeLeft">
- </div>
- <div id="sign-up-form">
- <label for="name">Име</label>
- <input type="text" name="name" id="name">
- <br>
- <label for="stageName">Уметничко име</label>
- <input type="text" name="stageName" id="stage-name">
- <br>
- <label for="gender">Пол</label>
- <span id="gender-options">
- <input type="radio" name="gender" id="female" value="female">Женски
- <input type="radio" name="gender" id="male" value="male">Машки
- </span>
- <br>
- <label for="genre">Жанр: </label>
- <select name="genre" id="genre">
- <option value="classical">Classical Music</option>
- <option value="rock">Rock</option>
- </select>
- <br>
- <button onclick="validityCheck()">Пријави се</button>
- </div>
- <table>
- <tr>
- <td>Регистарски таблички</td>
- <td>Маркa</td>
- <td>Боја</td>
- </tr>
- <tr>
- <td>SK-9000-AC</td>
- <td>Alfa Romeo</td>
- <td>црна</td>
- </tr>
- <tr>
- <td>VE-8000-AB</td>
- <td>Toyota Yaris</td>
- <td>бела</td>
- </tr>
- <tr>
- <td>KO-7000-AD</td>
- <td>Renault Meganne</td>
- <td>црна</td>
- </tr>
- <tr>
- <td>PP-6000-AC</td>
- <td>Mercedes</td>
- <td>црвена</td>
- </tr>
- <tr>
- <td>BT-5000-AB</td>
- <td>BMW</td>
- <td>сива</td>
- </tr>
- <tr>
- <td>SN-4000-AC</td>
- <td>Peugeot</td>
- <td>жолта</td>
- </tr>
- </table>
- <br>
- <br>
- <ul id="list">
- <li>Logo-Photo</li>
- <ol type="I">
- <li>url - thumbnail: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
- <li>url-icon: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
- <li>url-default: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
- </ol>
- <li>Header-Photo</li>
- <ol type="I">
- <li>url - thumbnail: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
- <li>url-icon: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
- <li>url-default: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
- </ol>
- <li>Footer-Photo</li>
- <ol type="I">
- <li>url - thumbnail: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
- <li>url-icon: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
- <li>url-default: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
- </ol>
- <li>Main-Photo</li>
- <ol type="I">
- <li>url - thumbnail: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
- <li>ur-icon: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
- <li>url-default: www.sth.com/GAVassdfSJFKBAFsadfdsg</li>
- </ol>
- </ul>
- <button onclick="applyCss()">Change</button>
- <br><br>
- <h2><i>Големина на фонт:</i></h2>
- <button onclick="startSize()">Почетна</button>
- <button onclick="increaseSize()"">Зголеми</button>
- <button onclick=" decreaseSize()"">Намали</button>
- <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
- crossorigin="anonymous"></script>
- <script>
- // Zadaca 1
- let endTime = {
- hours: 23,
- minutes: 59,
- seconds: 59
- };
- let printTime = document.querySelector(
- '#timeLeft'
- );
- const printTimeLeft = (endTime) => {
- let time = new Date();
- let timeLeft = {
- hours: (endTime.hours - time.getHours()).toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false }),
- minutes: (endTime.minutes - time.getMinutes()).toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false }),
- seconds: (endTime.seconds - time.getSeconds()).toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })
- }
- printTime.innerHTML = `${timeLeft.hours}:${timeLeft.minutes}:${timeLeft.seconds}`;
- }
- setInterval(() => {
- printTimeLeft(endTime)
- }, 1000);
- // Zadaca 2
- const validityCheck = () => {
- let name = document.querySelector("#name").value;
- let stageName = document.querySelector("#stage-name").value;
- let genderArray = document.getElementsByName('gender');
- let gender;
- genderArray.forEach(selection => {
- if (selection.checked) {
- gender = selection.value;
- }
- });
- let dropdown = document.querySelector("#genre");
- var genre = dropdown.options[dropdown.selectedIndex].text;
- if (name === "" || stageName === "" || gender === undefined || genre === null) {
- alert("Сите полиња се задолжителни");
- } else {
- alert(`${name}, ${gender}, ${genre} - успешно се пријавивте`);
- }
- }
- // Zadaca 3
- $("table tr:even").addClass("red-bold");
- $("table tr").find("td:even").addClass("grey-bg");
- // Zadaca 4
- const applyCss = () => {
- $('ol').addClass('black-ordered-list');
- }
- // Zadaca 5
- const startSize = () => {
- $('body').animate({ fontSize: "1em" }, 700);
- }
- const increaseSize = () => {
- $('body').animate({ fontSize: "1.5em" }, 700);
- }
- const decreaseSize = () => {
- $('body').animate({ fontSize: "0.7em" }, 700);
- }
- </script>
- <!-- <script src="./prvaLab.js"></script> -->
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement