From cd29f43d9cd5b5b80c0b398d8982d3140c649e58 Mon Sep 17 00:00:00 2001 From: htom Date: Fri, 28 Nov 2025 16:57:23 +0100 Subject: [PATCH] ora11 start --- ora10/proj1/dancingletters/_util.scss | 17 +++++ ora10/proj1/dancingletters/dancing.css | 19 +++++ ora10/proj1/dancingletters/dancing.css.map | 1 + ora10/proj1/dancingletters/dancing.html | 13 ++++ ora10/proj1/dancingletters/dancing.js | 25 +++++++ ora10/proj1/dancingletters/dancing.scss | 20 ++++++ ora10/proj1/dancingletters/letters.css | 84 ++++++++++++++++++++++ ora10/proj1/dancingletters/letters.css.map | 1 + ora10/proj1/dancingletters/letters.scss | 14 ++++ ora10/proj1/flexbox/index.html | 45 ++++++++++++ ora10/proj1/flexbox/script.js | 53 ++++++++++++++ ora11/cards/cards-flex.css | 26 +++++++ ora11/cards/cards.css | 54 ++++++++++++++ ora11/cards/index.html | 69 ++++++++++++++++++ 14 files changed, 441 insertions(+) create mode 100644 ora10/proj1/dancingletters/_util.scss create mode 100644 ora10/proj1/dancingletters/dancing.css create mode 100644 ora10/proj1/dancingletters/dancing.css.map create mode 100644 ora10/proj1/dancingletters/dancing.html create mode 100644 ora10/proj1/dancingletters/dancing.js create mode 100644 ora10/proj1/dancingletters/dancing.scss create mode 100644 ora10/proj1/dancingletters/letters.css create mode 100644 ora10/proj1/dancingletters/letters.css.map create mode 100644 ora10/proj1/dancingletters/letters.scss create mode 100644 ora10/proj1/flexbox/index.html create mode 100644 ora10/proj1/flexbox/script.js create mode 100644 ora11/cards/cards-flex.css create mode 100644 ora11/cards/cards.css create mode 100644 ora11/cards/index.html diff --git a/ora10/proj1/dancingletters/_util.scss b/ora10/proj1/dancingletters/_util.scss new file mode 100644 index 0000000..b4072d0 --- /dev/null +++ b/ora10/proj1/dancingletters/_util.scss @@ -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); \ No newline at end of file diff --git a/ora10/proj1/dancingletters/dancing.css b/ora10/proj1/dancingletters/dancing.css new file mode 100644 index 0000000..26e7ae2 --- /dev/null +++ b/ora10/proj1/dancingletters/dancing.css @@ -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 */ \ No newline at end of file diff --git a/ora10/proj1/dancingletters/dancing.css.map b/ora10/proj1/dancingletters/dancing.css.map new file mode 100644 index 0000000..42db3cf --- /dev/null +++ b/ora10/proj1/dancingletters/dancing.css.map @@ -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"} \ No newline at end of file diff --git a/ora10/proj1/dancingletters/dancing.html b/ora10/proj1/dancingletters/dancing.html new file mode 100644 index 0000000..fe4b4f5 --- /dev/null +++ b/ora10/proj1/dancingletters/dancing.html @@ -0,0 +1,13 @@ + + + + + + + Dancing Letters + + +
Sass is wonderful
+ + + \ No newline at end of file diff --git a/ora10/proj1/dancingletters/dancing.js b/ora10/proj1/dancingletters/dancing.js new file mode 100644 index 0000000..10ac3d4 --- /dev/null +++ b/ora10/proj1/dancingletters/dancing.js @@ -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); \ No newline at end of file diff --git a/ora10/proj1/dancingletters/dancing.scss b/ora10/proj1/dancingletters/dancing.scss new file mode 100644 index 0000000..1247cd2 --- /dev/null +++ b/ora10/proj1/dancingletters/dancing.scss @@ -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; + } +} \ No newline at end of file diff --git a/ora10/proj1/dancingletters/letters.css b/ora10/proj1/dancingletters/letters.css new file mode 100644 index 0000000..9d3263f --- /dev/null +++ b/ora10/proj1/dancingletters/letters.css @@ -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 */ \ No newline at end of file diff --git a/ora10/proj1/dancingletters/letters.css.map b/ora10/proj1/dancingletters/letters.css.map new file mode 100644 index 0000000..367920c --- /dev/null +++ b/ora10/proj1/dancingletters/letters.css.map @@ -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"} \ No newline at end of file diff --git a/ora10/proj1/dancingletters/letters.scss b/ora10/proj1/dancingletters/letters.scss new file mode 100644 index 0000000..e9deaff --- /dev/null +++ b/ora10/proj1/dancingletters/letters.scss @@ -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); + } + } +} \ No newline at end of file diff --git a/ora10/proj1/flexbox/index.html b/ora10/proj1/flexbox/index.html new file mode 100644 index 0000000..0b7b790 --- /dev/null +++ b/ora10/proj1/flexbox/index.html @@ -0,0 +1,45 @@ + + + + + + + Document + + + +
+
+
+ +
+
+
+ + +
+
+ + +
+
+ + + + \ No newline at end of file diff --git a/ora10/proj1/flexbox/script.js b/ora10/proj1/flexbox/script.js new file mode 100644 index 0000000..dd4edff --- /dev/null +++ b/ora10/proj1/flexbox/script.js @@ -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); diff --git a/ora11/cards/cards-flex.css b/ora11/cards/cards-flex.css new file mode 100644 index 0000000..a74cb45 --- /dev/null +++ b/ora11/cards/cards-flex.css @@ -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; +} \ No newline at end of file diff --git a/ora11/cards/cards.css b/ora11/cards/cards.css new file mode 100644 index 0000000..c817efa --- /dev/null +++ b/ora11/cards/cards.css @@ -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); +} \ No newline at end of file diff --git a/ora11/cards/index.html b/ora11/cards/index.html new file mode 100644 index 0000000..2a10baa --- /dev/null +++ b/ora11/cards/index.html @@ -0,0 +1,69 @@ + + + + + + Playing cards + + + +
+
+ + +
+ + + + + + +
+ + +
+
+ + +
+ + + + + + +
+ + +
+
+ + +
+ + + + + + +
+ + +
+
+ + +
+ + + + + + +
+ + +
+
+ + \ No newline at end of file