166 lines
6.6 KiB
HTML
166 lines
6.6 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>
|
|
<img src="/favicon.ico" width="64" height="64">
|
|
<h1>MaszToZadanieDomowe.com</h1>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="/index.html">Strona główna</a></li>
|
|
<li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<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>
|
|
<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>
|
|
<div>
|
|
<div>
|
|
<ul>
|
|
<li><a href="/index.html">Strona główna</a></li>
|
|
<li><a href="/hobby.html">Moje hobby</a></li>
|
|
<li><a href="/galeria.html">Galeria</a></li>
|
|
<li><a href="https://nonamesoft.xyz/about">Kontakt</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
|
|
</ul>
|
|
</div>
|
|
<strong>Strona © Dark Steveneq, 2025; Nazwę wymyślił Youpiter</strong> <sub>#GradientySąSuper</sub>
|
|
</div>
|
|
<img src="/assets/images/blahaj.png">
|
|
</footer>
|
|
</body>
|
|
</html>
|