144 lines
5.7 KiB
HTML
144 lines
5.7 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/akordeon.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>
|
|
<label for="zad1-x">X:</label>
|
|
<input type="number" name="X" id="zad1-x" placeholder="2" oninput="zad1Zsumuj()"><br>
|
|
|
|
<label for="zad1-y">Y: </label>
|
|
<input type="number" name="Y" id="zad1-y" placeholder="2" oninput="zad1Zsumuj()"><br>
|
|
|
|
<br>
|
|
<hr>
|
|
<strong>Wynik:</strong> <span id="zad1-output">2 + 2 = 4</span>
|
|
</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="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>
|
|
<akordeon state="closed">
|
|
|
|
</akordeon>
|
|
<div class="akordeon">
|
|
<span>Tytuł akordeonu</span>
|
|
<pre>
|
|
.wrong {
|
|
--offset: 5rem;
|
|
--timing: 3s;
|
|
--interp: ease;
|
|
|
|
position: relative;
|
|
animation: Wrong var(--timing) var(--interp); /* nwm czy dobre to być */
|
|
}
|
|
@keyframes Wrong {
|
|
0% {
|
|
left: 0%;
|
|
}
|
|
14% {
|
|
left: -var(--offset);
|
|
}
|
|
28% {
|
|
left: var(--offset);
|
|
}
|
|
42% {
|
|
left: -var(--offset);
|
|
}
|
|
56% {
|
|
left: var(--offset);
|
|
}
|
|
70% {
|
|
left: -var(--offset);
|
|
}
|
|
84% {
|
|
left: var(--offset);
|
|
}
|
|
98% {
|
|
left: 0%;
|
|
}
|
|
}
|
|
</pre>
|
|
</div>
|
|
<hr>
|
|
</li>
|
|
<br>
|
|
<li>
|
|
<h4>O autorze</h4>
|
|
<hr>
|
|
<button onclick="koniec()">"O autorze"</button>
|
|
</li>
|
|
</ol>
|
|
</main>
|
|
<footer-comp></footer-comp>
|
|
</body>
|
|
</html>
|