98 lines
4.8 KiB
HTML
98 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>JS Podstawowe Zad. - MaszToZadanieDomowe.com</title>
|
|
<link href="/favicon.ico" rel="favicon">
|
|
<link href="/assets/css/main.css" rel="stylesheet">
|
|
<script data-goatcounter="https://zeszyt.nonamesoft.xyz/count" async src="/assets/js/count.js"></script>
|
|
<script src="/assets/js/nawigacja.js"></script>
|
|
<script src="/assets/js/akordeon.js"></script>
|
|
<script src="/assets/js/js-wspolne.js"></script>
|
|
<script src="/assets/js/js-podstawy.js"></script>
|
|
</head>
|
|
<body>
|
|
<header-comp></header-comp>
|
|
<main>
|
|
<h2>JavaScript Podstawowe Zadania</h2>
|
|
<hr>
|
|
<ol>
|
|
<li>
|
|
<h4>Sumowanie liczb</h4>
|
|
<hr>
|
|
<obliczanie-comp dzialanie="a + b"></obliczanie-comp>
|
|
</li>
|
|
<br>
|
|
<li>
|
|
<h4>Wyświetlanie imienia</h4>
|
|
<hr>
|
|
<strong>Imię:</strong> <span id="zad2-output">Bezimienny</span>
|
|
<br>
|
|
<button onclick="zad2UstawImie()">Pobierz imię</button>
|
|
</li>
|
|
<br>
|
|
<li>
|
|
<h4>Zmiana rozmiaru tekstu</h4>
|
|
<hr>
|
|
<pre class="kod fixed25rem" id="zad3-tekst">Przykładowy tekst</pre>
|
|
<hr>
|
|
<strong>Rozmiar tekstu:</strong> <span id="zad3-output"></span><br>
|
|
<input type="range" min="8" max="36" step="1" name="rozmiar" id="zad3-rozmiar" value="14" oninput="zad3ZmienRozmiar()">
|
|
<div id="zad3-przyciski" class="flex-row"></div>
|
|
</li>
|
|
<br>
|
|
<li>
|
|
<h4>Formatowanie tekstu</h4>
|
|
<hr>
|
|
<p id="zad4-tekst">Przykładowy tekst</p>
|
|
<hr>
|
|
<h5>Kolor tekstu</h5>
|
|
<div class="flex-row">
|
|
<button onclick="document.getElementById('zad4-tekst').style.color = 'var(--colorRed)'">Czerwony</button>
|
|
<button onclick="document.getElementById('zad4-tekst').style.color = 'var(--colorText)'">Podstawowy</button>
|
|
<button onclick="document.getElementById('zad4-tekst').style.color = 'var(--colorGreen)'">Zielony</button>
|
|
<button onclick="document.getElementById('zad4-tekst').style.color = 'var(--colorLavender)'">Lawendowy</button>
|
|
<button onclick="document.getElementById('zad4-tekst').style.color = 'var(--colorYellow)'">Żółte</button>
|
|
</div>
|
|
<h5>Rozmiar tekstu</h5>
|
|
<div class="flex-row">
|
|
<button onclick="document.getElementById('zad4-tekst').style.fontSize = '30pt'">30pt</button>
|
|
<button onclick="document.getElementById('zad4-tekst').style.fontSize = '50pt'">50pt</button>
|
|
</div>
|
|
<h5>Tło</h5>
|
|
<div class="flex-row">
|
|
<button onclick="document.getElementById('zad4-tekst').style.backgroundColor = ''">Brak</button>
|
|
<button onclick="document.getElementById('zad4-tekst').style.backgroundColor = '#ff0000'">Komunistyczne</button>
|
|
</div>
|
|
<h5>Ramka</h5>
|
|
<div class="flex-row">
|
|
<button onclick="document.getElementById('zad4-tekst').style.border = ''">Brak</button>
|
|
<button onclick="document.getElementById('zad4-tekst').style.border = '.3rem solid var(--colorOverlay1)'">Ta co wszędzie</button>
|
|
</div>
|
|
<h5>Tekst</h5>
|
|
<div class="flex-row">
|
|
<button onclick="document.getElementById('zad4-tekst').innerText = prompt('Nowy tekst')">Zmień tekst</button>
|
|
<button onclick="document.getElementById('zad4-tekst').innerText = 'Przykładowy tekst'">Przywróć pierwotny tekst</button>
|
|
</div>
|
|
</li>
|
|
<br>
|
|
<li>
|
|
<h4>Akordeon</h4>
|
|
<hr>
|
|
<akordeon-comp title="Poprawiony akordeon" otwarte="true">
|
|
<p>Teraz będzie lepiej</p>
|
|
</akordeon-comp>
|
|
</li>
|
|
<br>
|
|
<li>
|
|
<h4>O autorze</h4>
|
|
<hr>
|
|
<button onclick="koniec()">"O autorze"</button>
|
|
</li>
|
|
</ol>
|
|
</main>
|
|
<footer-comp></footer-comp>
|
|
</body>
|
|
</html>
|