htamas1210/webtech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ora11 start

Browse Source
This commit is contained in:
htom
2025-11-28 16:57:23 +01:00
parent 9ff15dd9f7
commit cd29f43d9c
14 changed files with 441 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
ora10/proj1/dancingletters/_util.scss Normal file
View File

@@ -0,0 +1,17 @@
@use "sass:math";
@use "sass:list";
@function random($min, $max){
@if ($min > $max){
@error "Invalid arguments"
}
@return math.random(($max - $min) + 1) + $min - 1;
}
@function choose($list){
@return list.nth($list, math.random(list.length($list)));
}
@debug random(-5, 5);
@debug choose(apple banana cherry);

19
ora10/proj1/dancingletters/dancing.css Normal file
View File

@@ -0,0 +1,19 @@
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.dancing-letters {
font-family: sans-serif;
font-size: 300%;
font-weight: bold;
}
.dancing-letters > span {
box-shadow: 0 0 0.25em black;
color: white;
display: inline-block;
margin: 0.25em;
padding: 0.25em;
}/*# sourceMappingURL=dancing.css.map */

1
ora10/proj1/dancingletters/dancing.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["dancing.scss","dancing.css"],"names":[],"mappings":"AAAA;EACI,aAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;ACCJ;;ADEA;EACI,uBAAA;EACA,eAAA;EACA,iBAAA;ACCJ;ADCI;EACI,4BAAA;EACA,YAAA;EACA,qBAAA;EACA,cAAA;EACA,eAAA;ACCR","file":"dancing.css"}

13
ora10/proj1/dancingletters/dancing.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="letters.css">
<title>Dancing Letters</title>
</head>
<body>
<div class="dancing-letters">Sass is wonderful</div>
<script src="dancing.js"></script>
</body>
</html>

25
ora10/proj1/dancingletters/dancing.js Normal file
View File

@@ -0,0 +1,25 @@
function isWhiteSpace(char){
return /\s/.test(char);
}
function wrapCharsInSpan(element){
const text = element.textContent;
element.textContent = "";
const fragment = document.createDocumentFragment();
for(const char of text){
if(!isWhiteSpace(char)){
const span = document.createElement('span');
span.textContent = char;
fragment.appendChild(span);
}else{
fragment.appendChild(document.createTextNode(char));
}
}
element.appendChild(fragment);
}
document.querySelectorAll(".dancing-letters").forEach(wrapCharsInSpan);

20
ora10/proj1/dancingletters/dancing.scss Normal file
View File

@@ -0,0 +1,20 @@
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.dancing-letters{
font-family: sans-serif;
font-size: 300%;
font-weight: bold;
& > span {
box-shadow: 0 0 0.25em black;
color: white;
display: inline-block;
margin: 0.25em;
padding: 0.25em;
}
}

84
ora10/proj1/dancingletters/letters.css Normal file
View File

@@ -0,0 +1,84 @@
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.dancing-letters {
font-family: sans-serif;
font-size: 300%;
font-weight: bold;
}
.dancing-letters > span {
box-shadow: 0 0 0.25em black;
color: white;
display: inline-block;
margin: 0.25em;
padding: 0.25em;
}
.dancing-letters > span:nth-child(1) {
background-color: indigo;
transform: rotate(14deg);
}
.dancing-letters > span:nth-child(2) {
background-color: blue;
transform: rotate(-1deg);
}
.dancing-letters > span:nth-child(3) {
background-color: indigo;
transform: rotate(12deg);
}
.dancing-letters > span:nth-child(4) {
background-color: orange;
transform: rotate(-15deg);
}
.dancing-letters > span:nth-child(5) {
background-color: indigo;
transform: rotate(11deg);
}
.dancing-letters > span:nth-child(6) {
background-color: violet;
transform: rotate(10deg);
}
.dancing-letters > span:nth-child(7) {
background-color: indigo;
transform: rotate(-9deg);
}
.dancing-letters > span:nth-child(8) {
background-color: indigo;
transform: rotate(-2deg);
}
.dancing-letters > span:nth-child(9) {
background-color: green;
transform: rotate(6deg);
}
.dancing-letters > span:nth-child(10) {
background-color: blue;
transform: rotate(11deg);
}
.dancing-letters > span:nth-child(11) {
background-color: blue;
transform: rotate(-4deg);
}
.dancing-letters > span:nth-child(12) {
background-color: orange;
transform: rotate(0deg);
}
.dancing-letters > span:nth-child(13) {
background-color: orange;
transform: rotate(-1deg);
}
.dancing-letters > span:nth-child(14) {
background-color: indigo;
transform: rotate(3deg);
}
.dancing-letters > span:nth-child(15) {
background-color: indigo;
transform: rotate(-10deg);
}
.dancing-letters > span:nth-child(16) {
background-color: green;
transform: rotate(0deg);
}/*# sourceMappingURL=letters.css.map */

1
ora10/proj1/dancingletters/letters.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["dancing.scss","letters.css","letters.scss"],"names":[],"mappings":"AAAA;EACI,aAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;ACCJ;;ADEA;EACI,uBAAA;EACA,eAAA;EACA,iBAAA;ACCJ;ADCI;EACI,4BAAA;EACA,YAAA;EACA,qBAAA;EACA,cAAA;EACA,eAAA;ACCR;;ACVQ;EACI,wBAAA;EACA,wBAAA;ADaZ;ACfQ;EACI,sBAAA;EACA,wBAAA;ADiBZ;ACnBQ;EACI,wBAAA;EACA,wBAAA;ADqBZ;ACvBQ;EACI,wBAAA;EACA,yBAAA;ADyBZ;AC3BQ;EACI,wBAAA;EACA,wBAAA;AD6BZ;AC/BQ;EACI,wBAAA;EACA,wBAAA;ADiCZ;ACnCQ;EACI,wBAAA;EACA,wBAAA;ADqCZ;ACvCQ;EACI,wBAAA;EACA,wBAAA;ADyCZ;AC3CQ;EACI,uBAAA;EACA,uBAAA;AD6CZ;AC/CQ;EACI,sBAAA;EACA,wBAAA;ADiDZ;ACnDQ;EACI,sBAAA;EACA,wBAAA;ADqDZ;ACvDQ;EACI,wBAAA;EACA,uBAAA;ADyDZ;AC3DQ;EACI,wBAAA;EACA,wBAAA;AD6DZ;AC/DQ;EACI,wBAAA;EACA,uBAAA;ADiEZ;ACnEQ;EACI,wBAAA;EACA,yBAAA;ADqEZ;ACvEQ;EACI,uBAAA;EACA,uBAAA;ADyEZ","file":"letters.css"}

14
ora10/proj1/dancingletters/letters.scss Normal file
View File

@@ -0,0 +1,14 @@
@use "dancing";
@use "util";
@use "sass:math";
$rainbow: red, green, orange, blue, yellow, indigo, violet;
.dancing-letters{
@for $i from 1 through 16{
& > span:nth-child(#{$i}){
background-color: util.choose($rainbow);
transform: rotate(util.random(-15, 15) + deg);
}
}
}

45
ora10/proj1/flexbox/index.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container"></div>
<div id="controls">
<div>
<button id="add-item-btn">Add item</button>
</div>
<div><button id="reset-btn">reset</button></div>
<div>
<label for="flex-direction-select">flex-direction</label>
<select id="flex-direction-select">
<option value="">(unset)</option>
<option value="column">column</option>
<option value="column-reverse">column reverse</option>
<option value="row">row</option>
<option value="row-reverse">row reverse</option>
</select>
</div>
<div>
<label for="justify-content-select">justify-content</label>
<select id="justify-content-select">
<option value="">(unset)</option>
<option value="flex-start">flex start</option>
<option value="flex-end">flex end</option>
<option value="center">center</option>
<option value="star">start</option>
<option value="end">end</option>
<option value="space-evenly">space evenly</option>
<option value="space-around">space around</option>
<option value="space-between">space between </option>
</select>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

53
ora10/proj1/flexbox/script.js Normal file
View File

@@ -0,0 +1,53 @@
const container = document.getElementById('container');
function addItem() {
const item = document.createElement('div');
item.className = 'item';
item.textContent = container.children.length + 1;
container.appendChild(item);
}
function reset() {
while (container.firstChild) {
container.removeChild(container.firstChild);
}
container.style.alignItems = null;
container.style.flexDirection = null;
container.style.flexWrap = null;
container.style.justifyContent = null;
document.getElementById('flex-direction-select').value = "";
document.getElementById('justify-content-select').value = "";
document.getElementById('align-items-select').value = "";
document.getElementById('flex-wrap-select').value = "";
}
function changeFlexDirection(event) {
const value = event.currentTarget.value;
console.log(`flex-direction is set to ${value}`);
container.style.flexDirection = value;
}
function changeJustifyContent(event) {
const value = event.currentTarget.value;
console.log(`justify-content is set to ${value}`);
container.style.justifyContent = value;
}
function changeAlignItems(event) {
const value = event.currentTarget.value;
console.log(`align-items is set to ${value}`);
container.style.alignItems = value;
}
function changeFlexWrap(event) {
const value = event.currentTarget.value;
console.log(`flex-wrap is set to ${value}`);
container.style.flexWrap = value;
}
document.getElementById('add-item-btn').addEventListener('click', addItem);
document.getElementById('reset-btn').addEventListener('click', reset);
document.getElementById('flex-direction-select').addEventListener('change', changeFlexDirection);
document.getElementById('justify-content-select').addEventListener('change', changeJustifyContent);
document.getElementById('align-items-select').addEventListener('change', changeAlignItems);
document.getElementById('flex-wrap-select').addEventListener('change', changeFlexWrap);

26
ora11/cards/cards-flex.css Normal file
View File

@@ -0,0 +1,26 @@
@import "cards.css";
body{
margin: 0;
}
.cards{
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin: 1rem;
}
.card{
display: flex;
justify-content: space-between;
align-items: center;
}
.topleft{
align-self: flex-start;
}
.bottomright{
align-self: flex-end;
}

54
ora11/cards/cards.css Normal file
View File

@@ -0,0 +1,54 @@
body{
background-color: green;
}
.card{
background-color: white;
border: medium solid black;
border-radius: 0.5rem;
box-sizing: border-box;
height: 3.5in;
width: 2.5in;
font-family: sans-serif;
}
.card[data-rank=A] span.rank::before{
content: "A";
}
.card[data-suit=clubs] span.suit::before{
content: "\2663";
}
.card[data-suit=diamonds] span.suit::before{
content: "\2666";
}
.card[data-suit=hearths] span.suit::before{
content: "\2665";
}
.card[data-suit=spades] span.suit::before{
content: "\2660";
}
.card:is([data-suit=diamonds],[data-suit=hearths]){
color:red;
}
.card:is([data-suit=spades],[data-suit=clubs]){
color:black;
}
.card :is(.topleft, .bottomright){
display: inline-block;
font-size: 200%;
padding: 0.25rem;
text-align: center;
}
.card .center{
font-size: 400%;
}
.card .bottomright{
transform: rotate(180deg);
}

69
ora11/cards/index.html Normal file
View File

@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Playing cards</title>
<link rel="stylesheet" href="cards-flex.css">
</head>
<body>
<div class="cards">
<div class="card" data-suit="spades" data-rank="A">
<span class="topleft">
<span class="rank"></span>
<br>
<span class="suit"></span>
</span>
<span class="center suit">
</span>
<span class="bottomright">
<span class="rank"></span>
<br>
<span class="suit"></span>
</span>
</div>
<div class="card" data-suit="hearths" data-rank="A">
<span class="topleft">
<span class="rank"></span>
<br>
<span class="suit"></span>
</span>
<span class="center suit">
</span>
<span class="bottomright">
<span class="rank"></span>
<br>
<span class="suit"></span>
</span>
</div>
<div class="card" data-suit="clubs" data-rank="A">
<span class="topleft">
<span class="rank"></span>
<br>
<span class="suit"></span>
</span>
<span class="center suit">
</span>
<span class="bottomright">
<span class="rank"></span>
<br>
<span class="suit"></span>
</span>
</div>
<div class="card" data-suit="diamonds" data-rank="A">
<span class="topleft">
<span class="rank"></span>
<br>
<span class="suit"></span>
</span>
<span class="center suit">
</span>
<span class="bottomright">
<span class="rank"></span>
<br>
<span class="suit"></span>
</span>
</div>
</div>
</body>
</html>