Lekcja 2
This commit is contained in:
Dark Steveneq
165
js-podstawy.html
Normal file
165
js-podstawy.html
Normal file
@@ -0,0 +1,165 @@
|
||||
<!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://darksteveneq.goatcounter.com/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>
|
||||
Reference in New Issue
Block a user