Merge branch 'main' of https://git.floriano.uk/aplikacje/klienckie_mendela
This commit is contained in:
Adam Łukasik committed
commit
4d7db0ae38
3 files changed
+424
No files matched your search
@@ -0,0 +1,208 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="pl">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Powtórzenie 1</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background-color: gray;
|
||||||
|
margin: 1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section>
|
||||||
|
<h2>Zadanie A</h2>
|
||||||
|
<div class="box">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const divy = document.getElementsByClassName('box')
|
||||||
|
|
||||||
|
for(div of divy) {
|
||||||
|
div.onclick = function () {
|
||||||
|
if(this.dataset.changed != 'true') {
|
||||||
|
let r = Math.floor(Math.random() * 256);
|
||||||
|
let g = Math.floor(Math.random() * 256);
|
||||||
|
let b = Math.floor(Math.random() * 256);
|
||||||
|
|
||||||
|
this.dataset.changed = "true";
|
||||||
|
this.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div.ondblclick = function () {
|
||||||
|
this.dataset.changed = "false";
|
||||||
|
this.style.backgroundColor = "gray";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<hr>
|
||||||
|
<h2>Zadanie B</h2>
|
||||||
|
|
||||||
|
<div style="width: 100px; height: 100px; background-color: yellow;" id="kwadrat"></div>
|
||||||
|
|
||||||
|
<button id="start">Start</button>
|
||||||
|
<button id="stop">Stop</button>
|
||||||
|
<input type="checkbox" name="nieskonczonosc" id="nieskonczonosc">
|
||||||
|
<input type="number" name="kat" id="kat" value="15">
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let interwal = false
|
||||||
|
let obrot;
|
||||||
|
let obrot_deg = 0
|
||||||
|
|
||||||
|
document.getElementById("start").onclick = function () {
|
||||||
|
if (!interwal) {
|
||||||
|
obrot_deg = 0;
|
||||||
|
interwal = true;
|
||||||
|
|
||||||
|
obrot = setInterval(function() {
|
||||||
|
obrot_deg += parseFloat(document.getElementById("kat").value)
|
||||||
|
|
||||||
|
if(!document.getElementById("nieskonczonosc").checked) {
|
||||||
|
if(obrot_deg > 360) {
|
||||||
|
clearInterval(obrot);
|
||||||
|
interwal = false;
|
||||||
|
obrot_deg = 360;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("kwadrat").style.rotate = obrot_deg + 'deg';
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.getElementById("stop").onclick = function () {
|
||||||
|
clearInterval(obrot)
|
||||||
|
obrot_deg = 0
|
||||||
|
interwal = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<hr>
|
||||||
|
<h3>Zadanie C</h3>
|
||||||
|
<p id="tekststats">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum non corrupti facilis aspernatur eveniet ratione, consequuntur iure! Iure debitis quas reprehenderit odit qui ipsum sapiente eum, officiis veniam placeat tempora?</p>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function text_stats(txt) {
|
||||||
|
let z_duzej = 0;
|
||||||
|
let slowa = txt.split(" ");
|
||||||
|
|
||||||
|
slowa.forEach(slowo => {
|
||||||
|
if(slowo[0] == slowo[0].toUpperCase()) {
|
||||||
|
z_duzej++;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return({ slowa: slowa.length, z_duzej })
|
||||||
|
}
|
||||||
|
|
||||||
|
const stats = text_stats(document.getElementById("tekststats").innerText)
|
||||||
|
document.write(`Słów: ${stats.slowa}, z dużej litery: ${stats.z_duzej}`);
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<hr>
|
||||||
|
<h3>Zadanie D</h3>
|
||||||
|
|
||||||
|
<pre><script>
|
||||||
|
function compare(a, b, c) {
|
||||||
|
console.log(`Największa: ${Math.max(a, b, c)}, Najmniejsza: ${Math.min(a, b, c)}`)
|
||||||
|
|
||||||
|
if (a == b | a == c || b == c) {
|
||||||
|
return 'Są liczby równe'
|
||||||
|
}
|
||||||
|
return `Średnia: ${(a + b + c) / 3}`
|
||||||
|
}
|
||||||
|
|
||||||
|
document.write(compare(1, 2, 3) + '<br>')
|
||||||
|
|
||||||
|
document.write(compare(1, 1, 3))
|
||||||
|
</script></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<hr>
|
||||||
|
<h3>Zadanie E</h3>
|
||||||
|
|
||||||
|
<input type="number" name="n" id="n" value="1">
|
||||||
|
<button id="generuj">Generuj</button>
|
||||||
|
|
||||||
|
<div id="plansza" style="position: relative; width: 500px; height: 500px; border: 1px solid black;">
|
||||||
|
<script>
|
||||||
|
function usun(id) {
|
||||||
|
document.getElementById("plansza").removeChild(document.getElementById(`b${id}`))
|
||||||
|
}
|
||||||
|
document.getElementById('generuj').onclick = function() {
|
||||||
|
for(let i = 0; i < parseInt(document.getElementById('n').value); i++) {
|
||||||
|
let wymiar = Math.floor(Math.random() * 91) + 10;
|
||||||
|
|
||||||
|
let polozenie_lewy = Math.floor(Math.random() * 501);
|
||||||
|
let polozenie_gora = Math.floor(Math.random() * 501);
|
||||||
|
|
||||||
|
document.getElementById('plansza').innerHTML += `<div id="b${i}" style="border: 1px solid black; position: absolute; width: ${wymiar}px; height: ${wymiar}px; top: ${polozenie_gora}px; left: ${polozenie_lewy}px;" onclick="usun(${i})"></div>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<hr>
|
||||||
|
<h3>Pentacci</h3>
|
||||||
|
<pre><script>
|
||||||
|
function pent(n) {
|
||||||
|
if (n < 1) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
if (n == 1) {
|
||||||
|
return [0];
|
||||||
|
}
|
||||||
|
|
||||||
|
let t = [0, 1]
|
||||||
|
let u = 2;
|
||||||
|
|
||||||
|
while(u < n) {
|
||||||
|
let s = 0;
|
||||||
|
for(let i = 0; i < t.length; i++) {
|
||||||
|
if(i == 0) {
|
||||||
|
if(t.length > 5) {
|
||||||
|
i = t.length - 5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
s += t[i]
|
||||||
|
}
|
||||||
|
t.push(s);
|
||||||
|
u++;
|
||||||
|
}
|
||||||
|
|
||||||
|
return t;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.write(pent(12));
|
||||||
|
</script></pre>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,216 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="pl">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Zestaw B</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section><hr><h3>Zadanie 1</h3>
|
||||||
|
<script>
|
||||||
|
function fiboDesc(n) {
|
||||||
|
if (n < 1) {
|
||||||
|
return [];
|
||||||
|
} else if (n == 1) {
|
||||||
|
return [0];
|
||||||
|
}
|
||||||
|
|
||||||
|
let t = [0, 1];
|
||||||
|
|
||||||
|
while(t.length < n) {
|
||||||
|
let s = t[t.length - 1] + t[t.length - 2];
|
||||||
|
t.push(s);
|
||||||
|
}
|
||||||
|
|
||||||
|
return t.reverse();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.write(fiboDesc(7));
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section><hr><h3>Zadanie 2</h3>
|
||||||
|
<div style="position: relative; box-sizing: content-box; width: 500px; height: 500px; background-color: lightgray; border: 2px solid black;">
|
||||||
|
<script>
|
||||||
|
function opusc(okrag) {
|
||||||
|
okrag.dataset.intervalID = setInterval(function () {
|
||||||
|
if(parseInt(okrag.style.top) < 500 - parseInt(okrag.style.height)) {
|
||||||
|
okrag.style.top = parseInt(okrag.style.top) + 1 + 'px';
|
||||||
|
} else {
|
||||||
|
clearInterval(okrag.dataset.intervalID);
|
||||||
|
}
|
||||||
|
}, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
function przestan(okrag) {
|
||||||
|
clearInterval(okrag.dataset.intervalID);
|
||||||
|
}
|
||||||
|
|
||||||
|
for(let i = 0 ; i < 10; i++) {
|
||||||
|
let wymiar = Math.floor(Math.random() * 21) + 10;
|
||||||
|
let left = Math.floor(Math.random() * 471);
|
||||||
|
let top = Math.floor(Math.random() * 471);
|
||||||
|
|
||||||
|
document.write(`
|
||||||
|
<div
|
||||||
|
style="width: ${wymiar}px; height: ${wymiar}px; position: absolute;
|
||||||
|
top: ${top}px; left: ${left}px; border: 1px solid black;
|
||||||
|
border-radius: 100%; cursor: pointer;"
|
||||||
|
onmouseover="opusc(this)" onmouseleave="przestan(this)"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section><hr><h3 style="color: red;">Zadanie 3</h3>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section><hr><h3>Zadanie 4</h3>
|
||||||
|
<pre><script>
|
||||||
|
function sentenceStats(txt) {
|
||||||
|
let zdania_inne = 0;
|
||||||
|
|
||||||
|
for(let i = 0; i < txt.length; i++) {
|
||||||
|
switch(txt[i]) {
|
||||||
|
case '!':
|
||||||
|
zdania_inne++;
|
||||||
|
break
|
||||||
|
case '?':
|
||||||
|
zdania_inne++;
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let zdania_dlugie = 0
|
||||||
|
let tablica_zdan = txt.split(/[.!?]/)
|
||||||
|
|
||||||
|
if(tablica_zdan[tablica_zdan.length - 1] == '') {
|
||||||
|
tablica_zdan.pop();
|
||||||
|
}
|
||||||
|
|
||||||
|
tablica_zdan.forEach(zdanie => {
|
||||||
|
if(zdanie.trim().split(' ').length > 5) {
|
||||||
|
zdania_dlugie++;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return JSON.stringify({
|
||||||
|
"zdania": tablica_zdan.length,
|
||||||
|
"inne": zdania_inne,
|
||||||
|
"dlugie": zdania_dlugie
|
||||||
|
}, null, 5)
|
||||||
|
}
|
||||||
|
|
||||||
|
document.write(sentenceStats("Ala ma kota. Ja też niby? Ok. Lorem ipsum dolor sit amet consecteur! Czy ty masz psa? To naprawdę świetne! Lorem ipsum dolor sit amet."))
|
||||||
|
</script></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section><hr><h3>Zadanie 5</h3>
|
||||||
|
<input type="number" name="val5" id="val5" value="1" min="1">
|
||||||
|
<button id="start5">Start</button>
|
||||||
|
<div
|
||||||
|
id="odliczanie" style="border: 2px solid black; font-size: 2em; width: 12rem; height: 4rem; display: flex; justify-content: center; align-items: center;"
|
||||||
|
>0</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let n = 0;
|
||||||
|
|
||||||
|
document.getElementById("start5").onclick = function() {
|
||||||
|
const div = document.getElementById("odliczanie")
|
||||||
|
if(div.dataset.intervalID) { clearInterval(div.dataset.intervalID) }
|
||||||
|
|
||||||
|
if(parseInt(document.getElementById("val5").value) > 0) {
|
||||||
|
n = parseInt(document.getElementById("val5").value);
|
||||||
|
|
||||||
|
div.innerText = n;
|
||||||
|
n--;
|
||||||
|
|
||||||
|
div.dataset.intervalID = setInterval(function() {
|
||||||
|
if(n > 0) {
|
||||||
|
div.innerText = n;
|
||||||
|
n--;
|
||||||
|
} else {
|
||||||
|
div.innerText = n;
|
||||||
|
clearInterval(div.dataset.intervalID)
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section><hr><h3>Zadanie 6</h3>
|
||||||
|
<input type="number" name="val6" id="val6" value="3" min="1" max="10"><button id="start6">Generuj</button>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
width: 500px;
|
||||||
|
height: 500px;
|
||||||
|
border: 2px solid black;
|
||||||
|
box-sizing: content-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: white;
|
||||||
|
"
|
||||||
|
id="k0"
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function kolor(kwadrat) {
|
||||||
|
let kolory = ['red', 'limegreen', 'royalblue', 'orange', 'magenta'];
|
||||||
|
let k_index = Math.floor(Math.random() * kolory.length);
|
||||||
|
|
||||||
|
kwadrat.style.backgroundColor = kolory[k_index];
|
||||||
|
}
|
||||||
|
function bialy(kwadrat) {
|
||||||
|
kwadrat.style.backgroundColor = 'white';
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("start6").onclick = function() {
|
||||||
|
for(let i = 1; i <= parseInt(document.getElementById("val6").value); i++) {
|
||||||
|
let percent = Math.floor(Math.random() * 16) + 50;
|
||||||
|
|
||||||
|
document.getElementById(`k${i-1}`).innerHTML = `
|
||||||
|
<div id="k${i}"
|
||||||
|
style="
|
||||||
|
width: ${percent}%;
|
||||||
|
height: ${percent}%;
|
||||||
|
border: 1px solid black;
|
||||||
|
box-sizing: content-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: white;
|
||||||
|
transition: background-color 150ms ease;
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
`
|
||||||
|
|
||||||
|
document.getElementById(`k${i}`).addEventListener('mouseenter', function () {
|
||||||
|
kolor(document.getElementById(`k${i}`))
|
||||||
|
bialy(document.getElementById(`k${i - 1}`))
|
||||||
|
});
|
||||||
|
document.getElementById(`k${i}`).addEventListener('mouseleave', function () {
|
||||||
|
bialy(document.getElementById(`k${i}`));
|
||||||
|
if(i > 1) {
|
||||||
|
kolor(document.getElementById(`k${i - 1}`))
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in new issue
Block a user