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