diff --git a/nissim/banking-sys.css b/nissim/banking-sys.css new file mode 100644 index 0000000..b38e873 --- /dev/null +++ b/nissim/banking-sys.css @@ -0,0 +1,313 @@ +html { + height: 100%; +} + +body { + background: #1e1f22; + margin: 0; + box-sizing: border-box; + font-family: "Miriam Libre", sans-serif; + color: #fff; + min-height: 100%; + background-size: cover; + background: linear-gradient(0deg, #1e1f22, #1e1f22de), + url(https://wallpaper.dog/large/10940905.jpg); + backdrop-filter: blur(10px); + height: 100vh; +} + +.container { + display: flex; + align-content: center; + align-items: flex-start; + height: 100%; + flex-direction: column; + justify-content: flex-start; +} + +.containerSec { + margin: 0 10px; +} + +iframe { + margin: 0 auto; + border-radius: 10px; + /*background-color: #2b2d30;*/ + background: linear-gradient(120deg, #323334, #3c3d3f, #323334); +} + +a { + text-decoration: none; + color: #fff; +} + +.ancSec { + text-decoration: underline; +} + +h3 a, +h5 a { + text-decoration: none; + background: white; + padding: 0.5rem; + border-radius: 6px; + color: black; + transition: ease-in-out all 0.1s; + text-shadow: 0 0 3px #87878780; +} + +h3 a:hover, +h5 a:hover { + background: #e1e1e1; + transition: ease-in-out all 0.1s; +} + +.profile { + border-radius: 100%; + margin: 1.2em; + border: 5px solid #48484c; + box-shadow: 0 0 30px #00000040; + width: 96px; +} + +.username { + color: #fff; + background: #ffffff20; + padding: 4px 6px; + border-radius: 6px; + border: 1px solid #8b8b8b60; + box-shadow: 0 0 30px #00000040; + width: fit-content; + height: fit-content; +} + +.username::before { + content: "@"; + font-weight: 100; + color: lightgray; +} + +footer { + bottom: 4%; + position: fixed; + color: #ffffff60; + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; +} + +nav { + display: inline-block; +} + +nav ul { + list-style-type: none; + display: flex; + gap: 2em; + flex-direction: row; + position: absolute; + top: 10px; + left: 10px; +} + +li::before { + content: "# "; + font-weight: 100; + color: gray; +} + +a li::before { + transition: 0.05s ease-in-out all; +} + +a:hover li::before { + content: "# "; + font-weight: 100; + color: gray; + margin: 0 2px; + transition: 0.05s ease-in-out all; +} + +img { + border-radius: 10px; + margin: 6px 0; +} + +main { + display: grid; + gap: 2em; + flex-direction: row; + grid: auto-flow / 1fr 1fr 1fr; + align-items: start; + justify-content: center; + align-content: center; +} + +section { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +section p { + color: lightgray; + font-size: 1em; + margin: 0.5em; + text-align: left; +} + +#articles, +#testing, +#transactions { + background-color: inherit; + margin: 0; + border: 1px solid #8b8b8b00; + padding: 4px; +} + +#articles:target, +#testing:target, +#transactions:target { + animation: highlight 3.5s forwards; +} + +@keyframes highlight { + 0% { + background: #ff000010; + border-radius: 6px; + padding: 4px; + border: 1px solid #ff000030; + } + 100% { + background-color: #ff000000; + padding: 4px; + + border: 1px solid #ff000000; + } +} + +@keyframes explore { + from { + margin-right: -20px; + } + to { + margin-right: 20px; + rotate: 10deg; + } +} + +.explore-anim { + /* animation: ease-in-out 1.3s explore alternate-reverse infinite; */ + /* font-size: 1em; */ +} + +footer p { + margin: 0; +} + +.socials { + display: flex; + gap: 20px; + font-size: 1.2em; + justify-content: center; + align-items: center; +} + +.bigger-20 { + font-size: 120%; +} + +.rights { + border-bottom: 1px dashed #505050; + width: 100%; + display: flex; + justify-content: center; + padding: 10px; + color: #a9a9a9; + /* border-style: outset; */ +} + + +.available-on { + color: #fff; + background: #ffffff20; + padding: 4px 10px; + border-radius: 6px; + border: 1px solid #ffffff60; + box-shadow: 0 0 30px #00000040; + font-size: 14px; + margin: 0; + /*line-height: 2;*/ +} + +.socials a:hover { + cursor: pointer; +} + +/** DOM Manipulation related **/ + +.list-container { + color: #fff; + background: #ffffff20; + padding: 4px 10px; + border-radius: 6px; + border: 1px solid #ffffff60; + box-shadow: 0 0 30px #00000040; +} + +#my-list { + color: #fff; + background: #ffffff20; + padding: 4px 10px; + border-radius: 6px; + border: 1px solid #ffffff60; + box-shadow: 0 0 30px #00000040; + margin: 8px 0; +} + +.list-item { + color: #fff; + background: #ffffff20; + padding: 4px 10px; + border-radius: 6px; + border: 1px solid #ffffff60; + box-shadow: 0 0 30px #00000040; + list-style: none; + margin: 6px 0; +} + +.bank-profile { + display: grid; + grid: auto-flow / 1fr 1fr; + align-items: center; +} + +.userInfo { + flex-direction: row; +} + +.wrapper { + display: flex; + flex-direction: column; + gap: 10px; +} + +.userBalance { + font-size: 1.2em; +} + +.balanceAmount { + font-weight: 900; +} + +.userBalance > i { + color: #787879; +} + +.bank { + display: flex; + flex-direction: column; + align-items: flex-start; +} \ No newline at end of file diff --git a/nissim/index.html b/nissim/index.html new file mode 100644 index 0000000..f22e4e3 --- /dev/null +++ b/nissim/index.html @@ -0,0 +1,88 @@ + + + + + nissimDEV + + + + + + + + +
+ + + + + nissimDEV +

Explore the web

+ + +
+
+

+ Exercises +

+

+ Otters Filmed +

+

+ Green Button +

+

+ Article Exercise +

+
+
+

Articles

+

+ Cat Behavior +

+

+ Converse Chucks +

+
+
+

Testing

+

+ :target +

+

+ attribute +

+
+
+ +
+ + + + diff --git a/nissim/index.js b/nissim/index.js new file mode 100644 index 0000000..b5a2d11 --- /dev/null +++ b/nissim/index.js @@ -0,0 +1,66 @@ +console.log(document) + +let allPs = document.querySelectorAll("p"), + firstH1 = document.querySelector("h1"), + theBody = document.querySelector("body"); +console.log(allPs); +allPs.forEach(p => { + console.log(p.textContent); +}); + +console.log(firstH1.innerText = "DOM Manipulation"); + + +const listContainerEl = document.createElement("div"), + myListEl = document.createElement("ul"), + firstLiEl = document.createElement("li"), + secondLiEl = document.createElement("li"), + thirdLiEl = document.createElement("li"), + mainContainer = document.querySelector("main"); + +// listContainerEl.classList.add("list-container") +// listContainerEl.append(myListEl); +// myListEl.setAttribute("id", "my-list"); +// +// firstLiEl.innerText = "First li"; +// secondLiEl.innerText = "Second li"; +// thirdLiEl.innerText = "Third li"; +// +// firstLiEl.classList.add("list-item") +// secondLiEl.classList.add("list-item") +// thirdLiEl.classList.add("list-item") +// +// myListEl.append(firstLiEl, secondLiEl, thirdLiEl); +// +// mainContainer.append(listContainerEl); + + +// const myBtn = document.createElement("button"), +// listItem = document.querySelector(".list-item"); +// +// myBtn.innerText = "Click" +// +// listContainerEl.append(myBtn); +// myListEl.setAttribute("class", "blue") +// +// +// myBtn.addEventListener("click", () => { +// +// console.log("test", myListEl.classList.contains("black")); +// +// +// if (myListEl.classList.contains("black")) { +// console.log("test", myListEl.classList.contains("black")); +// myListEl.classList.remove("blue") +// myListEl.classList.add("blue") +// +// } +// if (myListEl.classList.contains("blue")) { +// myListEl.setAttribute("class", "white") +// } +// if (myListEl.classList.contains("white")) { +// myListEl.setAttribute("class", "black") +// +// } +// myListEl.classList.add("black") +// }); \ No newline at end of file diff --git a/nissim/otters.html b/nissim/otters.html new file mode 100644 index 0000000..ba7dde8 --- /dev/null +++ b/nissim/otters.html @@ -0,0 +1,58 @@ + + + + + + + + + nissimDEV + + + +
+ + + A picture showing two otters hugging + nissimDEV +

צופים בלוטרות בכיף

+ + צפה עכשיו: לוטרות מצויות במעקב מצלמות + +
+ +
Back to Homepage
+ +
+ + diff --git a/nissim/otters.png b/nissim/otters.png new file mode 100644 index 0000000..10e6f77 Binary files /dev/null and b/nissim/otters.png differ diff --git a/nissim/stuff/articleExercise.html b/nissim/stuff/articleExercise.html new file mode 100644 index 0000000..c77fc7b --- /dev/null +++ b/nissim/stuff/articleExercise.html @@ -0,0 +1,54 @@ + + + + + Article Exercise + + + + +
+
+
+

The CSS Blog

+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ducimus fugiat ipsum rerum similique soluta? Doloremque et iste nemo optio possimus sint voluptatum? Aut blanditiis cum doloremque earum eius ipsa itaque iusto molestias neque non placeat provident, quaerat quia quo, recusandae, reiciendis repellat ut velit veniam vero? Distinctio, dolor, numquam! +

+
+ +
+ + diff --git a/nissim/stuff/attributewithclass.html b/nissim/stuff/attributewithclass.html new file mode 100644 index 0000000..e176d25 --- /dev/null +++ b/nissim/stuff/attributewithclass.html @@ -0,0 +1,30 @@ + + + + + Converse Chucks + + + + + + + +
+

Testing CSS Atributes

+

test

+ + + +
+ + diff --git a/nissim/stuff/bouncing.css b/nissim/stuff/bouncing.css new file mode 100644 index 0000000..ee0e4b4 --- /dev/null +++ b/nissim/stuff/bouncing.css @@ -0,0 +1,62 @@ +body { + background: linear-gradient(to top, #a4a4a4 40%, #fff); + height: 100vh; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.shadow { + background: #000; + width: 248px; + height: 248px; + background: radial-gradient(#000, transparent); + animation: ball-shadow .8s infinite; + animation-direction: alternate; + animation-timing-function: cubic-bezier(0, 0, .2, 1); + margin: 0 auto; + display: block; + border-radius: 100%; + transform-origin: bottom; + filter: blur(60px); +} + +.ball { + width: 248px; + height: 248px; + background: radial-gradient(circle 150px at 50% 10%, #fff 2%, #0007d5 5%, #001344 70%); + animation: bouncing-ball .8s infinite; + animation-direction: alternate; + animation-timing-function: cubic-bezier(0, 0, .2, 1); + margin: 0 auto; + border-radius: 100%; + transform-origin: bottom; + /* border: 3px solid #714a17; */ +} + +@keyframes bouncing-ball { + 0% { + transform: translateY(200px) scaley(.8) + } + 10% { + transform: translateY(200px) scaleY(1) + } + 100% { + transform: translateY(0px) + } +} + + +@keyframes ball-shadow { + 0% { + transform: scaleX(1) scaleY(.3) translateY(180px); + } + 10% { + transform: scaleX(1) scaleY(.3) translateY(180px); + } + 100% { + transform: scaleX(.5) scaleY(.3) translateY(180px); + } +} \ No newline at end of file diff --git a/nissim/stuff/bouncing.html b/nissim/stuff/bouncing.html new file mode 100644 index 0000000..8d03a07 --- /dev/null +++ b/nissim/stuff/bouncing.html @@ -0,0 +1,15 @@ + + + + + + + + Document + + +
+
+ + \ No newline at end of file diff --git a/nissim/stuff/callback.html b/nissim/stuff/callback.html new file mode 100644 index 0000000..3785912 --- /dev/null +++ b/nissim/stuff/callback.html @@ -0,0 +1,11 @@ + + + + + callback testing + + + + + + \ No newline at end of file diff --git a/nissim/stuff/catbehavior.html b/nissim/stuff/catbehavior.html new file mode 100644 index 0000000..65833e8 --- /dev/null +++ b/nissim/stuff/catbehavior.html @@ -0,0 +1,66 @@ + + + + + Cat Behavior + + + + + + + +
+
+
+

Cat Behavior

+
+ + +
+ Cat lying on rice straw +
Cat lying on rice straw
+
+

Outdoor cats

+

+ Outdoor cats are active both day and night, although they tend to be + slightly more active at night. The timing of cats' activity is quite + flexible and varied, which means house cats may nbe more active in the + morning and evening, as a response to greater human activity at these + times. +

+
+ +
Back to Homepage
+ +
+ + diff --git a/nissim/stuff/converse.html b/nissim/stuff/converse.html new file mode 100644 index 0000000..df70295 --- /dev/null +++ b/nissim/stuff/converse.html @@ -0,0 +1,64 @@ + + + + + Converse Chucks + + + + + + + +
+
+
+

Converse Chuck Taylor All Star Low Top

+
+ +
+ Converse shoes walking on leaves +
+

$65.00

+
+ Free shipping +
+

+ Ready to dress up or down, these classic canvas Chucks are an + everyday wardrobe staple. +

+

+ +
+
+
+ + + +
+ + diff --git a/nissim/stuff/dom-exercise.html b/nissim/stuff/dom-exercise.html new file mode 100644 index 0000000..0de8257 --- /dev/null +++ b/nissim/stuff/dom-exercise.html @@ -0,0 +1,34 @@ + + + + + + + + DOM Exercise + + +
+ +
+ +
+

One

+

Two

+

Three

+
+ + + + + + \ No newline at end of file diff --git a/nissim/stuff/dom-exercise.js b/nissim/stuff/dom-exercise.js new file mode 100644 index 0000000..e69de29 diff --git a/nissim/stuff/flex-layout.css b/nissim/stuff/flex-layout.css new file mode 100644 index 0000000..093c0bb --- /dev/null +++ b/nissim/stuff/flex-layout.css @@ -0,0 +1,183 @@ +html { + height: 100%; + display: flex; +} + +body { + display: flex; + width: 100%; + margin: 0; + /* align-items: stretch; */ + flex-direction: column; + font-family: consolas; + text-transform: lowercase; + flex: 1; + /* border: 23px solid red; */ +} + +.container { + display: flex; + align-items: stretch; + margin: 0; + box-sizing: border-box; + width: 100%; + justify-content: space-evenly; + flex: 1; + /* overflow: hidden; */ +} + +nav { + background: beige; + /* flex: 9; */ + display: flex; + font-size: 30px; + gap: 30px; + padding: 20px; + justify-content: center; + /* position: fixed; */ + /* width: 100%; */ + min-width: 600px; + height: 200px; +} + +aside { + background: darkkhaki; + max-width: 300px; + min-width: 120px; +} + +main { + background: burlywood; + flex: 80; + display: flex; + border-left: 1px solid; + border-right: 1px solid; + flex-direction: column; + /* height: 100%; */ + align-items: stretch; + justify-content: flex-start; + padding: 040px; + gap: 40px; + overflow: auto; + /* height: 30px; */ +} + +.fixed-menu { + flex: 10; + background: coral; + list-style: none; + min-width: 120px; +} + +.section-1 { + display: flex; + gap: 60px; + /* padding: 40px; */ + justify-content: space-between; + /* flex: 10; */ + /* flex: 1; */ +} + +.image { + width: 300px; + height: 300px; + background: #f5ebd9; + border-radius: 100%; + /* box-shadow: inset 0 0 10px #00000050; */ + display: flex; + align-items: center; + justify-content: center; + align-content: center; +} + +.section-2 { + display: flex; + justify-content: center; + flex-direction: row; + gap: 40px; +} + +.section-2 .item { + flex-direction: column; + align-items: stretch; + gap: 50px; + background: #f7ebd8; + width: 100%; + text-align: center; + display: flex; + justify-content: space-evenly; + border-radius: 30px; + height: 100px; +} + +.section-first-child { + flex: 1; + display: flex; + flex-direction: row; +} + +.section-second-child { + flex: 1; + background: #d7b98b; + display: flex; + flex-direction: column; + align-items: baseline; + gap: 20px; +} + +.section-third-child { + background: #f5ebd9; + display: flex; + flex-direction: column; + gap: 20px; + border-radius: 30px; + height: 100%; + justify-content: space-evenly; + align-items: center; +} + +.section-fourth-child { + display: flex; + flex-direction: row; + align-items: center; + gap: 40px; + justify-content: space-evenly; + border-radius: 30px; + height: 100%; +} + +.section-fourth-child > .item { + background: #f5ebd9; + display: flex; + width: 100%; + height: 100px; + align-items: center; + justify-content: center; + border-radius: 30px; +} + + +.section-first-child .item { + height: 100%; +} + +nav a::before { + content: '# '; + color: #00000061; +} + +section-third-child > .item { + height: 100px; +} + +section-third-child .item { + height: 100px; +} + +.section-third-child .item { + height: 100px; + display: flex; + align-content: center; + align-items: center; + justify-content: center; +} \ No newline at end of file diff --git a/nissim/stuff/flex-layout.html b/nissim/stuff/flex-layout.html new file mode 100644 index 0000000..6bbdc35 --- /dev/null +++ b/nissim/stuff/flex-layout.html @@ -0,0 +1,98 @@ + + + + + Title + + + + +
+ +
+
+
Image 1
+
Image 2
+
Image 3
+ +
+ +
+
+
text
+
+
+
text
+
text
+
text
+
text
+
+
+ +
+
text
+
+ +
+
text
+
text
+
+ +
+
+
text
+
+
+
text
+
text
+
text
+
text
+
+
+ + + + + + + + + + + + + +
+
+ +
+
+ + \ No newline at end of file diff --git a/nissim/stuff/formclass.html b/nissim/stuff/formclass.html new file mode 100644 index 0000000..69d4990 --- /dev/null +++ b/nissim/stuff/formclass.html @@ -0,0 +1,335 @@ + + + + + HTML Forms Exercise + + + + + + + +
+
+ Contact Us +
+
+
+
+ + +
+
+ + diff --git a/nissim/stuff/greenButton.html b/nissim/stuff/greenButton.html new file mode 100644 index 0000000..a1a7d23 --- /dev/null +++ b/nissim/stuff/greenButton.html @@ -0,0 +1,76 @@ + + + + + button + + + + + +
+ +
+ +

+ nissim
kissim +

+ +
+ +
+ + \ No newline at end of file diff --git a/nissim/stuff/grid-layout.css b/nissim/stuff/grid-layout.css new file mode 100644 index 0000000..051bbea --- /dev/null +++ b/nissim/stuff/grid-layout.css @@ -0,0 +1,70 @@ +* { + box-sizing: border-box; +} + +html, body { + height: 100%; + width: 100%; + margin: 0; + padding: 0; + background: #1e1f22; + box-sizing: border-box; + font-family: "Miriam Libre", sans-serif; + color: #fff; + background-size: cover; + background: linear-gradient(0deg, #1e1f22, #1e1f22de), + url(https://wallpaper.dog/large/10940905.jpg); + backdrop-filter: blur(10px); +} + + +.grid-container { + grid-template-rows: 100px 1fr 1fr 100PX; + display: grid; + grid-template-columns: 200px 1fr 1fr; + grid-gap: 20px; + height: 100%; + padding: 20px; +} + +.item { + height: 100%; + width: 100%; + color: whitesmoke; + text-align: center; + font-weight: 100; + display: flex; + justify-content: center; + align-items: center; + background: #ffffff20; + border: 1px solid #8b8b8b60; + box-shadow: 0 0 30px #00000040; + border-radius: 10px; +} + +.header { + grid-column: 1/4; + grid-row: 1/1; +} + +.sidebar { + grid-row: 2/4; +} + +.content1 {grid-column: 2/4;} + +.content2 { + grid-column: 2/3; + +} + +.content3 { + grid-column: 3/4; + +} + +.footer { + grid-column: 1/4; + grid-row: 4/5; + +} \ No newline at end of file diff --git a/nissim/stuff/grid-layout.html b/nissim/stuff/grid-layout.html new file mode 100644 index 0000000..5aab2d3 --- /dev/null +++ b/nissim/stuff/grid-layout.html @@ -0,0 +1,22 @@ + + + + + Title + + + + +
+
Header
+
Sidebar
+
Content-1
+
Content-2
+
Content-3
+
Footer
+
+ + \ No newline at end of file diff --git a/nissim/stuff/js-exercise.html b/nissim/stuff/js-exercise.html new file mode 100644 index 0000000..10882e9 --- /dev/null +++ b/nissim/stuff/js-exercise.html @@ -0,0 +1,24 @@ + + + + + JavaScript + + + + + \ No newline at end of file diff --git a/nissim/stuff/js/async-await.js b/nissim/stuff/js/async-await.js new file mode 100644 index 0000000..e69de29 diff --git a/nissim/stuff/js/banking-sys.html b/nissim/stuff/js/banking-sys.html new file mode 100644 index 0000000..30a66de --- /dev/null +++ b/nissim/stuff/js/banking-sys.html @@ -0,0 +1,64 @@ + + + + + nissimDEV + + + + + + + + +
+
+
+ +
+ nissimDEV + 1,000,238 +
+
+ +
+
+ +
+
+

+ Transactions +

+
+
+
+

Articles

+
+
+
+

Testing

+

+ :target +

+

+ attribute +

+
+
+
+ +
+ + + + \ No newline at end of file diff --git a/nissim/stuff/js/banking-sys.js b/nissim/stuff/js/banking-sys.js new file mode 100644 index 0000000..a0b76b3 --- /dev/null +++ b/nissim/stuff/js/banking-sys.js @@ -0,0 +1,47 @@ +const bankAccount = { + balance: 0, + accountHistory: [], + deposit: function (amount) { + if (!(amount === "number")) { + this.balance += amount; + this.accountHistory.push(`${amount}$ has been added to your account`) + + return `SUCCESS: ${amount}$ has been added to your account` + } + return "Deposit Error: The input entered is not a number"; + }, + withdraw: function (amount) { + if (!(amount === "number")) { + if (this.balance >= amount) { + this.balance -= amount; + this.accountHistory.push(`${amount}$ has been deducted from your account`) + + return `SUCCESS: ${amount}$ has been deducted from your account` + } + return "Withdraw Error: Insufficient funds"; + } + return "Withdraw Error: The input entered is not a number"; + }, + getBalance: function () { + return `Balance: ${this.balance}$` + }, + showAccountHistory: function () { + return this.accountHistory.map((transaction, index) => { + return `Transaction ${index + 1}: ${transaction}`; + }).join('\n'); + } + + +}; + +console.log(bankAccount.deposit(100)); +console.log(bankAccount.withdraw(50)); +console.log(bankAccount.withdraw(50)); +console.log(bankAccount.withdraw(50)); +console.log(bankAccount.withdraw(50)); + + +console.log(" "); +console.log(bankAccount.showAccountHistory()); +console.log(" "); +console.log(bankAccount.getBalance()); \ No newline at end of file diff --git a/nissim/stuff/js/banking-with-ui.css b/nissim/stuff/js/banking-with-ui.css new file mode 100644 index 0000000..1a02bc9 --- /dev/null +++ b/nissim/stuff/js/banking-with-ui.css @@ -0,0 +1,547 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: "Alef", sans-serif; +} + +html, body { + height: 100%; + width: auto; + background: #1e1f22; + box-sizing: border-box; + color: #fff; + background: linear-gradient(0deg, #1e1f22, #1e1f22bf), + url(https://i.imgur.com/tqADd4Q.jpeg); + backdrop-filter: blur(4px); + background-size: 100%; + /* display: grid; */ + flex-direction: column; + /* padding: 10%; */ + align-content: center; + justify-content: center; +} + + +/* width */ +::-webkit-scrollbar { + width: 4px; +} + +/* Track */ +::-webkit-scrollbar-track { + background: none; +} + +/* Handle */ +::-webkit-scrollbar-thumb { + background: #cfcfcf; + border-radius: 10px; +} + +/* Handle on hover */ +::-webkit-scrollbar-thumb:hover { + background: #555; +} + +.userAlert { + height: 30%; + background: #515151a8; + width: 30%; + border: 2px solid #4e4e4e; + border-radius: 10px; + backdrop-filter: blur(10px); + font-size: 1.5em; + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + padding: 20px; +} + +.grid-container { + grid-template-rows: 100px 1fr 1fr 1fr 100PX; + display: grid; + grid-template-columns: 1fr 300px; + grid-gap: 20px; + height: 100%; + padding: 10% 30%; +} + +.item { + height: 100%; + width: 100%; + color: whitesmoke; + text-align: center; + font-weight: 100; + display: flex; + justify-content: center; + align-items: center; + background: #ffffff20; + border: 1px solid #8b8b8b60; + box-shadow: 0 0 30px #00000040; + border-radius: 10px; + backdrop-filter: blur(6px); +} + +.header { + grid-column: 1/4; + grid-row: 1/1; + direction: rtl; + font-size: 2em; + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + padding: 0 30px; + gap: 20px; +} + +.sidebar { + grid-row: 2/5; + display: flex; + flex-direction: column; + gap: 20px; + padding: 20px; + grid-column: 1/2; +} + +.content1 { + grid-row: 2/3; + grid-column: 2/4; + padding: 30px; +} + +.content2 { + grid-row: 3/4; + grid-column: 2/4; + padding: 30px; +} + +.content3 { + grid-row: 4/5; + grid-column: 2/4; + padding: 10px; +} + +#userAvatar { + border-radius: 50%; + width: 64px; + height: 64px; + background-size: contain; + /* border: 1px solid #7e7e7e; */ + box-shadow: inset 0 0 20px #00000080; +} + +.footer { + grid-column: 1/4; + grid-row: 5/5; + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 40px; +} + +.balance { + background: #75828cc4; + border: 1px solid #9da5ad; + display: inline; + height: fit-content; +} + +/*.balance::after {*/ +/* content: " יתרת עו\"ש "*/ +/*}*/ + +.balance::before { + content: "₪ " +} + +label { + display: flex; + flex-direction: column; +} + +.item.content3 { + display: flex; + flex-direction: column; + direction: rtl; +} + +.transaction { + width: 100%; + /* background: #ffffff73; */ + border-radius: 10px; + font-size: 1.5em; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + color: white; + font-weight: 900; + /*border: 1px solid white;*/ + flex-direction: row-reverse; +} + +.withdraw { + background: #fa807287; + border: 1px solid #ff7458; +} + +/*.withdraw::after {*/ +/* content: "- ₪ \00a0";*/ +/* font-weight: 100;*/ +/*}*/ + +.deposit { + background: #72fa9d30; + border: 1px solid #72fa9d80; +} + +/*.deposit::after {*/ +/* content: "+ ₪ \00a0";*/ +/* font-weight: 100;*/ +/*}*/ + +.transactions { + border: 1px solid #838383; + overflow: auto; + display: flex; + gap: 8px; + justify-content: flex-start; + backdrop-filter: none; + max-height: 400px; +} + + +button { + background: none; + border: none; +} + +#userAlertClose { + color: #bababa; + font-size: 1em; + cursor: pointer; +} + +#userAlertClose:hover { + color: whitesmoke; +} + +.userButton { + padding: 8px; + border-radius: 10px; + margin-top: 10px; + font-weight: 900; + font-family: alef; + font-size: 1em; + color: black; + box-shadow: 0px 1px 0px #aeaeae, inset 0px 2px 3px #ffffff; + border: solid 1px transparent; + display: block; + text-decoration: none; + background-color: #f7f7f7; + background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7)); + background-image: -webkit-linear-gradient(top, #d3d3d3, #fafafa); + transition: ease 0.3s all; +} + +input { + background: #d3d3d350; + border: 1px solid #d3d3d363; + padding: 20px; + border-radius: 10px; + outline: none; + text-align: center; + color: white; +} + +.bankIcon { + color: whitesmoke; +} + +.userInfo { + display: flex; + flex-direction: row-reverse; + align-items: center; + gap: 20px; +} + +.quote { + display: flex; + flex-direction: row-reverse; +} + +.quotePre { + background: #ffffffa8; + padding: 10px; + border-radius: 10px; + border: 1px solid #bababa9c; +} + +.author::after { + content: "—"; + margin: 0 6px; + color: lightgray; +} + + +.userAlertContainer { + display: flex; + width: 100%; + height: 100%; + background: #000000b3; + position: absolute; + align-content: center; + justify-content: center; + align-items: center; + flex-wrap: wrap; + z-index: 1; + display: none; + backdrop-filter: blur(10px); +} + +.userAlertHint { + color: #d7d7d7; + font-size: 0.5em; + font-weight: 900; + width: 100%; + text-align: center; + border-top: 1px solid #666666; + padding-top: 16px; +} + +.userAlertContent { + width: 80%; + text-align: center; +} + +.userAlertHeader { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 20px; + width: 100%; +} + +.userAlertHeaderIcon { + color: salmon; +} + +.notifications { + overflow: auto; + height: 100px; + display: flex; + width: 100%; + font-weight: 100; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 10px; +} + +.notificationsHeader { + border-bottom: 1px solid #8e8e8e; + width: 80%; + padding: 10px 0; + font-weight: 900; +} + +.author { + color: #74c3ff; +} + +.userButton:hover { + box-shadow: 0px 3px 0px #aeaeae, inset 0px 2px 3px #fff; + cursor: pointer; +} + +.userButton:active { + box-shadow: 0px 3px 0px #747474, inset 0px 2px 3px #8b8b8b; +} + +span { + padding: 0; + margin: 0; + line-height: .5; +} + + +/* +TOOL TIP FROM CODEPEN - I DIDNT MAKE IT +https://codepen.io/tutsplus/pen/WROvdG +*/ + + +/* START TOOLTIP STYLES */ +[tooltip] { + position: relative; /* opinion 1 */ +} + +/* Applies to all tooltips */ +[tooltip]::before, +[tooltip]::after { + text-transform: none; /* opinion 2 */ + font-size: .5em; /* opinion 3 */ + line-height: 1; + user-select: none; + pointer-events: none; + position: absolute; + display: none; + opacity: 0; +} + +[tooltip]::before { + content: ''; + border: 5px solid transparent; /* opinion 4 */ + z-index: 1001; /* absurdity 1 */ +} + +[tooltip]::after { + content: attr(tooltip); /* magic! */ + + /* most of the rest of this is opinion */ + font-family: Helvetica, sans-serif; + text-align: center; + + /* + Let the content set the size of the tooltips + but this will also keep them from being obnoxious + */ + min-width: 3em; + max-width: 21em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding: 1ch 1.5ch; + border-radius: .3ch; + box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35); + background: #727272; + color: #fff; + z-index: 1000; /* absurdity 2 */ +} + +/* Make the tooltips respond to hover */ +[tooltip]:hover::before, +[tooltip]:hover::after { + display: block; +} + +/* don't show empty tooltips */ +[tooltip='']::before, +[tooltip='']::after { + display: none !important; +} + +/* FLOW: UP */ +[tooltip]:not([flow])::before, +[tooltip][flow^="up"]::before { + bottom: 100%; + border-bottom-width: 0; + border-top-color: #333; +} + +[tooltip]:not([flow])::after, +[tooltip][flow^="up"]::after { + bottom: calc(100% + 12px); +} + +[tooltip]:not([flow])::before, +[tooltip]:not([flow])::after, +[tooltip][flow^="up"]::before, +[tooltip][flow^="up"]::after { + left: 50%; + transform: translate(-50%, -.5em); +} + +/* FLOW: DOWN */ +[tooltip][flow^="down"]::before { + top: 100%; + border-top-width: 0; + border-bottom-color: #727272; + bottom: calc(0em - 12px); +} + +[tooltip][flow^="down"]::after { + top: calc(100% + 12px); +} + +[tooltip][flow^="down"]::before, +[tooltip][flow^="down"]::after { + left: 50%; + transform: translate(-50%, .5em); +} + +/* FLOW: LEFT */ +[tooltip][flow^="left"]::before { + top: 50%; + border-right-width: 0; + border-left-color: #333; + left: calc(0em - 12px); + transform: translate(-.5em, -50%); +} + +[tooltip][flow^="left"]::after { + top: 50%; + right: calc(100% + 12px); + transform: translate(-.5em, -50%); +} + +/* FLOW: RIGHT */ +[tooltip][flow^="right"]::before { + top: 50%; + border-left-width: 0; + border-right-color: #333; + right: calc(0em - 5px); + transform: translate(.5em, -50%); +} + +[tooltip][flow^="right"]::after { + top: 50%; + left: calc(100% + 12px); + transform: translate(.5em, -50%); +} + +/* KEYFRAMES */ +@keyframes tooltips-vert { + to { + opacity: .9; + transform: translate(-50%, 0); + } +} + +@keyframes tooltips-horz { + to { + opacity: .9; + transform: translate(0, -50%); + } +} + +/* FX All The Things */ +[tooltip]:not([flow]):hover::before, +[tooltip]:not([flow]):hover::after, +[tooltip][flow^="up"]:hover::before, +[tooltip][flow^="up"]:hover::after, +[tooltip][flow^="down"]:hover::before, +[tooltip][flow^="down"]:hover::after { + animation: tooltips-vert 300ms ease-out forwards; +} + +[tooltip][flow^="left"]:hover::before, +[tooltip][flow^="left"]:hover::after, +[tooltip][flow^="right"]:hover::before, +[tooltip][flow^="right"]:hover::after { + animation: tooltips-horz 300ms ease-out forwards; +} + + +.quoteContainer { + display: flex; +} + +.QuoteSign { + color: gray; + text-shadow: 0 0 5px #00000030; + font-size: 1.5em; +} \ No newline at end of file diff --git a/nissim/stuff/js/banking-with-ui.html b/nissim/stuff/js/banking-with-ui.html new file mode 100644 index 0000000..e7022d6 --- /dev/null +++ b/nissim/stuff/js/banking-with-ui.html @@ -0,0 +1,87 @@ + + + + + + + + + Banking with UI + + + +
+
+
+ +
התראה
+
+
+
בחשבונך קיימת יתרה שלילית, יש להסדיר את התשלום על ידי הפקדת מזומן
+
לסגירת ההתראה לחץ על כפתור האיקס
+
+
+ +
+
+
+ + + +
+
+

+
+
+
+
+ + +
+
+ +
+
+
+
+
+ התראות +
+
+
+
+
+ +
+ +
+ +
+
אלברט איינשטיין
+
אי שפיות זה לעשות את אותו הדבר שוב ושוב ולצפות לתוצאות שונות
+
+ +
+ +
+ +
+
+ + + + \ No newline at end of file diff --git a/nissim/stuff/js/banking-with-ui.js b/nissim/stuff/js/banking-with-ui.js new file mode 100644 index 0000000..e37942c --- /dev/null +++ b/nissim/stuff/js/banking-with-ui.js @@ -0,0 +1,112 @@ +const depositBtn = document.querySelector("#depositBtn"), + depositInput = document.querySelector("#deposit"), + notifications = document.querySelector(".notifications"), + withdrawBtn = document.querySelector("#withdrawBtn"), + withdrawInput = document.querySelector("#withdraw"), + userBalance = document.querySelector("#userBalance"), + greetings = document.querySelector("#greetings"), + avatar = document.querySelector("#userAvatar"), + userAlert = document.querySelector(".userAlertContainer"), + alertContent = document.querySelector(".userAlertContent"), + alertCloseBtn = document.querySelector("#userAlertClose"), + transactions = document.querySelector("#transactions"); + +function formattedNumber(num) { + return num.toLocaleString("en-US"); +} + +const names = ["יאן", "חושן", "עמית", "עומר", "אביב", "דני", "רון"] + +function alertTheUser(text) { + userAlert.style.display = "flex"; + alertContent.innerText = text; +} + +function notify(text) { + const notification = document.createElement("span"); + notification.innerText = text; + notifications.prepend(notification); +} + + +const bankAccount = { + balance: 1000, + person: { + name: names[Math.floor(Math.random() * names.length)], + avatar: "https://thispersondoesnotexist.com/", + accountAge: "", + dateOfBirth: "" + }, + accountHistory: [], + deposit: function (amount) { + if (!(amount === "number")) { + if (amount > 0) { + this.balance += amount; + + let transaction = document.createElement("div"); + transaction.classList.add("transaction", "deposit"); + transaction.innerText = ` ₪ ${formattedNumber(amount)} נוספו לחשבונך ` + transactions.prepend(transaction); + // this.accountHistory.push(`${amount}$ has been added to your account`) + + return userBalance.innerText = ` יתרת עו"ש ${formattedNumber(+this.balance)}`; + + } + return notify(`\nיש להכניס סכום גדול מ- 0`); + } + return notifications.innerText += `\nיש להזין מספר תקין`; + }, + withdraw: function (amount) { + if (!(amount === "number")) { + if (amount > 0) { + + + if (this.balance >= amount) { + + this.balance -= amount; + + let transaction = document.createElement("div"); + console.log(transaction); + transaction.classList.add("transaction", "withdraw"); + transaction.innerText = ` ₪ ${formattedNumber(+amount)} נלקחו מחשבונך ` + transactions.prepend(transaction); + // this.accountHistory.push(`${amount}$ has been added to your account`) + + return userBalance.innerText = ` יתרת עו"ש ${formattedNumber(+this.balance)}`; + } + + return notifications.innerText += `\nיש להכניס סכום נמוך יותר`; + } + return notifications.innerText += `\nיש להכניס סכום גדול מ- 0`; + } + + return notifications.innerText += `\nיש להזין מספר תקין`; + } + + +}; + + +document.addEventListener("DOMContentLoaded", function () { + avatar.style.backgroundImage = `url(${bankAccount.person.avatar})` + greetings.innerHTML = `היי, ${bankAccount.person.name}. איך אפשר לעזור?` + userBalance.innerText = ` יתרת עו"ש ${formattedNumber(bankAccount.balance)}`; + + alertTheUser(`היי ${bankAccount.person.name}, ברוכים הבאים לבנק האישי החדש שלך`) +}); + +depositBtn.addEventListener("click", function () { + bankAccount.deposit(Number(depositInput.value)) +}); + +withdrawBtn.addEventListener("click", function () { + bankAccount.withdraw(withdrawInput.value) +}); + +alertCloseBtn.addEventListener("click", function () { + if (userAlert.style.display === "") { + userAlert.style.display = "none" + } else { + userAlert.style.display = "" + } +}); \ No newline at end of file diff --git a/nissim/stuff/js/callback.js b/nissim/stuff/js/callback.js new file mode 100644 index 0000000..24b29f8 --- /dev/null +++ b/nissim/stuff/js/callback.js @@ -0,0 +1,29 @@ +// const content = document.querySelector(".rawContent"); + +// async function iTunesLookup(term) { +// const response = await fetch("https://itunes.apple.com/search?term=" + term); +// const terms = await response.json(); + +// content.innerText = JSON.stringify(terms, null, 2); +// } + +// iTunesLookup("depeche mode") + +const url = "https://itunes.apple.com/search?term=", + keyword = "depeche mode"; + +const xhr = new XMLHttpRequest(); +xhr.open("GET", url + keyword, true); +xhr.onload = (e) => { + if (xhr.readyState === 4) { + if (xhr.status === 200) { + console.log(xhr.responseText); + } else { + console.error(xhr.statusText); + } + } +}; +xhr.onerror = (e) => { + console.error(xhr.statusText); +}; +xhr.send(null); \ No newline at end of file diff --git a/nissim/stuff/js/creating-the-dom.css b/nissim/stuff/js/creating-the-dom.css new file mode 100644 index 0000000..8de08b0 --- /dev/null +++ b/nissim/stuff/js/creating-the-dom.css @@ -0,0 +1,82 @@ +* { + box-sizing: border-box; +} + +html, body { + height: 100%; + width: 100%; + margin: 0; + padding: 0; + background: #1e1f22; + box-sizing: border-box; + font-family: "Miriam Libre", sans-serif; + color: #fff; + background-size: cover; + background: linear-gradient(0deg, #1e1f22, #1e1f22de), + url(https://wallpaper.dog/large/10940905.jpg); + backdrop-filter: blur(10px); +} + + +.grid-container { + grid-template-rows: 100px 1fr 1fr 100PX; + display: grid; + grid-template-columns: 200px 1fr 1fr; + grid-gap: 20px; + height: 100%; + padding: 20px; +} + +.item { + height: 100%; + width: 100%; + color: whitesmoke; + text-align: center; + font-weight: 100; + display: flex; + justify-content: center; + align-items: center; + background: #ffffff20; + border: 1px solid #8b8b8b60; + box-shadow: 0 0 30px #00000040; + border-radius: 10px; + padding: 20px; +} + +.header { + grid-column: 1/4; + grid-row: 1/1; +} + +.sidebar { + grid-row: 2/4; + display: flex; + flex-direction: column; + justify-content: flex-start; + padding: 20px; + align-items: flex-start; + text-align: left; +} + +.content { + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + grid-column: 2/4; + grid-row: 2/4; + justify-content: center; +} + +.footer { + grid-column: 1/4; + grid-row: 4/5; + +} + +.item .content section { +} + +.item .content section p { + font-size: 1em; +} \ No newline at end of file diff --git a/nissim/stuff/js/creating-the-dom.html b/nissim/stuff/js/creating-the-dom.html new file mode 100644 index 0000000..b3e1395 --- /dev/null +++ b/nissim/stuff/js/creating-the-dom.html @@ -0,0 +1,12 @@ + + + + + Creating the DOM + + + + + + + \ No newline at end of file diff --git a/nissim/stuff/js/creating-the-dom.js b/nissim/stuff/js/creating-the-dom.js new file mode 100644 index 0000000..ce7333b --- /dev/null +++ b/nissim/stuff/js/creating-the-dom.js @@ -0,0 +1,75 @@ +document.addEventListener("DOMContentLoaded", function () { + const + container = document.createElement("div"), + header = document.createElement("header"), + headerH1 = document.createElement("h1"), + mainSection = document.createElement("main"), + + sectionOne = document.createElement("section"), + sectionOneDesc = document.createElement("p"), + + sectionTwo = document.createElement("section"), + sectionTwoDesc = document.createElement("p"), + + sectionThree = document.createElement("section"), + sectionThreeDesc = document.createElement("p"), + + navBar = document.createElement("nav"), + liHTML = document.createElement("li"), + descHTML = document.createElement("p"), + liCSS = document.createElement("li"), + descCSS = document.createElement("p"), + liJS = document.createElement("li"), + descJS = document.createElement("p"), + liJQ = document.createElement("li"), + descJQ = document.createElement("p"), + + footer = document.createElement("footer"); + + + header.append(headerH1); + header.classList.add("item", "header") + headerH1.innerText = "DOM Class"; + + sectionOne.innerText = "What did we learn about HTML?"; + sectionOneDesc.innerText = "What did we learn about HTML?"; + sectionTwo.innerText = "What did we learn about CSS?"; + sectionTwoDesc.innerText = "What did we learn about CSS?"; + sectionThree.innerText = "What did we learn about Javascript?"; + sectionOneDesc.innerText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"; + sectionThreeDesc.innerText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"; + sectionTwoDesc.innerText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"; + + sectionOne.append(sectionOneDesc); + sectionTwo.append(sectionTwoDesc); + sectionThree.appendChild(sectionThreeDesc); + + mainSection.classList.add("item", "content"); + mainSection.append(sectionOne, sectionTwo, sectionThree); + + navBar.classList.add("item", "sidebar") + navBar.append(liHTML, liCSS, liJS, liJQ); + + + liHTML.innerText = "HTML"; + descHTML.innerText = "Semantics, lists, building a webpage."; + liCSS.innerText = "CSS"; + descCSS.innerText = "Selectors, Colors, Box Model, display."; + liJS.innerText = "JavaScript"; + descJS.innerText = "Primitives, Objects, function, 'this'."; + liJQ.innerText = "JQuery"; + + + liHTML.appendChild(descHTML); + liCSS.appendChild(descCSS); + liJS.appendChild(descJS); + liJQ.appendChild(descJQ); + + container.append(header, navBar, mainSection, footer); + container.classList.add("grid-container"); + + footer.innerText = "A footer"; + footer.classList.add("item", "footer"); + + document.body.append(container); +}); \ No newline at end of file diff --git a/nissim/stuff/js/exercise.html b/nissim/stuff/js/exercise.html new file mode 100644 index 0000000..95ff6fb --- /dev/null +++ b/nissim/stuff/js/exercise.html @@ -0,0 +1,138 @@ + + + + + nUtilities + + + + + +

+ + Text Utilities +

+ + + +
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/nissim/stuff/js/exercise.js b/nissim/stuff/js/exercise.js new file mode 100644 index 0000000..f724acf --- /dev/null +++ b/nissim/stuff/js/exercise.js @@ -0,0 +1,170 @@ +const log = console.log +let write = document.write +// +// const massMark = 92, +// heightMark = 1.69, +// massJohn = 78, +// heightJohn = 1.95; +// +// let markBMI = (massMark / (heightMark * heightMark)); +// let johnBMI = (massJohn / (heightJohn * heightJohn)); +// +// +// log("Mark's BMI ", markBMI) +// log("John's BMI ", johnBMI) +// if (markBMI < johnBMI) { +// log(`Johns BMI (${johnBMI}) is higher than Mark's BMI (${markBMI})`); +// } else if (markBMI === johnBMI) { +// log(`Identical BMI (${markBMI})`); +// } else { +// log(`Marks BMI (${markBMI}) is higher than John's BMI (${johnBMI})`); +// } + + +// There are two gymnastics teams: Dolphins and Koalas. They compete against each other 3 times. The winner with the highest average score wins a trophy! +// +// +// 1. Calculate the average score for each team, using the test data included below. The average score for Dolphins should be assigned to the scoreDolphins variable, and the average score of Koalas should be assigned to the scoreKoalas variable. +// +// 2. Compare the team's average scores to determine the winner of the competition, and print to the console: +// "Dolphins win the trophy" if Dolphins win, or +// "Koalas win the trophy" if Koalas win, or +// "Both win the trophy" if their average scores are equal. +// +// Dolphins scored 96, 108, and 89. Koalas scored 88, 91, and 110. + + +// const scoreDolphins = (96 + 108 + 89) / 3, +// scoreKoalas = (88 + 91 + 110) / 3; +// +// if (scoreDolphins > scoreKoalas) { +// log("Dolphins win the trophy"); +// } else if (scoreDolphins === scoreDolphins) { +// log("Both win the trophy"); +// } else { +// log("Koalas win the trophy"); +// } +// + + +// Steven needs a very simple tip calculator for whenever he goes to eat in a restaurant. In his country, it's usual to tip 15% if the bill value is between 50 and 300. If the value is different, the tip is 20%. +// Calculate the tip, depending on the bill value. Create a variable called tip for this. It's not allowed to use an if...else statement (if it's easier for you, you can start with an if...else statement, and then try to convert it to a ternary operator). +// Print a string to the console containing the billvalue, the tip, and the final value (bill+ tip). +// Example: The bill was 275, the tip was 41.25, and the total value 316.25. +// Use the values of the bill and tip variables to construct this string. Don't hard-code them 🙂 +// Test with different bill values: 275, 40, and 430 + +// const bill = 275, +// tip = bill >= 50 && bill <= 300 ? (bill * 0.15) : (bill * 0.20), +// // total = bill * Number(String("1." + tip)); +// total = bill + tip; +// +// log(`The bill is ${bill}, the tip is ${tip}, and the total value is ${total}`); + +// let str = "ayoo"; +// +// let outcome = str.replaceAll("o", "!"); +// write(outcome) +// +// log(outcome); +// +// write(outcome); + +// function printTextToConsole(text = "no text to render") { +// return `${text} ${text.length}` +// } +// +// const loggedText = printTextToConsole(`hello!`); +// +// console.log(loggedText); + + +// prompt text to reverse + +// let promptText = prompt("Message:", "The Message You Want To Reverse") +// +// function reverseText(text) { +// let reversedText = "", +// i = text.length - 1; +// for (; i >= 0; i--) { +// reversedText += text[i]; +// } +// return reversedText; +// } +// +// document.write(` +//

+// Normal
+//

The text you entered earlier

+//
+//

${promptText}

+//

+//
+//
+//
+//

+// Reversed
+//

The reversed text, outcome.

+//
+//
+//

${reverseText(promptText)}

+//

+// `); + +let inputText = "no text"; + +function countLowercase(text = "no text") { + return (text.match(/[a-z]/g) || []).length; +} + +console.log(`A total of ${countLowercase("abcABC123!@!#$#_@$!$_SAD?@!#!@#!")} lowercase letters`); + +// let promptText = prompt("Message:", "abcABC123!@!#$#_@$!$_SAD?@!#!@#!") + + +function reverseText(text) { + let reversedText = "", + i = text.length - 1; + for (; i >= 0; i--) { + reversedText += text[i]; + } + return reversedText; +} + + +function updateDom() { + inputText = document.getElementById("text").value; + + const NormalWrapper = document.getElementById("Normal"), + ReverseWrapper = document.getElementById("Reverse"), + LowercaseWrapper = document.getElementById("Lowercase"); + NormalWrapper.innerHTML = ` +

+ Normal Text
+

The text you entered earlier

+

${inputText}

+

+ `; + ReverseWrapper.innerHTML = ` +

+ Reversed Text
+

The text you entered but reversed.

+

${reverseText(inputText)}

+

+ `; + + LowercaseWrapper.innerHTML = ` +

+ Lowercase Counter
+

Count lowercase letters in your text.

+

This text contains a total of ${countLowercase(inputText)} lowercase letters

+

+ `; +} + +function copyText(element) { + console.log(element) + console.log(element.textContent) + navigator.clipboard.writeText(element.textContent); + alert(`Text copied: ${element.textContent}`); +} \ No newline at end of file diff --git a/nissim/stuff/js/exercise2.html b/nissim/stuff/js/exercise2.html new file mode 100644 index 0000000..e45c186 --- /dev/null +++ b/nissim/stuff/js/exercise2.html @@ -0,0 +1,48 @@ + + + + + + + Document + + + + + + + +
+

DOM Console!@#$%^&

+
+

Output:

+ +
+
+
+
// example comment ;)
+
+
+ +
+
+ +
+ + +
+ + + + \ No newline at end of file diff --git a/nissim/stuff/js/exercise2.js b/nissim/stuff/js/exercise2.js new file mode 100644 index 0000000..d4428e3 --- /dev/null +++ b/nissim/stuff/js/exercise2.js @@ -0,0 +1,64 @@ +// create a function that receive an array of numbers and return an object with two properties. +// +// max for the biggest number +// min for the lowest number +// + + +function runStuff(x) { + return eval(x); +} + +function log(text) { + const content = document.getElementById("console-content"); + const newP = document.createElement("p"); + content.appendChild(newP); + + const contentSize = content.children.length; + + + console.log(contentSize) + if (contentSize % 2 === 0 && contentSize > 0) { + newP.classList.add("even") + } else { + newP.classList.add("odd") + } + newP.innerHTML += text + `
`; + // const paragraph = document.createElement("p") + +} + +// log(content.childElementCount); + +const testDataArr = [1, 4, 5]; + +function avgNumber(...numbers) { + if (numbers.length <= 2) { + return 0; + } + + const sum = numbers.reduce((total, num) => total + num, 0); + return sum / numbers.length; +} + + +log(avgNumber(...testDataArr)); +log(avgNumber(...testDataArr)); + +log(avgNumber(...testDataArr)); +log(avgNumber(...testDataArr)); +log(avgNumber(...testDataArr)); +log(avgNumber(...testDataArr)); +log(avgNumber(...testDataArr)); + + +log("hey"); + +const input = document.getElementById("actualInput"); + +runStuff(` + +log("hello") + +`) + diff --git a/nissim/stuff/js/isarray.html b/nissim/stuff/js/isarray.html new file mode 100644 index 0000000..b8bd48f --- /dev/null +++ b/nissim/stuff/js/isarray.html @@ -0,0 +1,14 @@ + + + + + + + + Document + + + + + \ No newline at end of file diff --git a/nissim/stuff/js/isarray.js b/nissim/stuff/js/isarray.js new file mode 100644 index 0000000..0c71a0d --- /dev/null +++ b/nissim/stuff/js/isarray.js @@ -0,0 +1,17 @@ +// צרו פונקציה שמקבלת מערך (ובודקת אם הוא מערך ואם יש בו אלמנטים) +// שתחזיר את האלמנט שבמיקום האחרון +// +// במידה והתקבל מערך שאין בו אלמנטים הפונקציה צריכה להחזיר (1-) +// במידה ומה שהתקבל אינו מערך הפונקציה תחזיר ״this is not an array" + +function checkArray(arr) { + if (Array.isArray(arr)) { + if (arr.length > 0) { + return arr[arr.length - 1]; + } + return -1 + } + return "This is not an array" +} + +console.log(checkArray(["hey", 2, "what"])); \ No newline at end of file diff --git a/nissim/stuff/js/koalas.html b/nissim/stuff/js/koalas.html new file mode 100644 index 0000000..2b9b0f0 --- /dev/null +++ b/nissim/stuff/js/koalas.html @@ -0,0 +1,14 @@ + + + + + + + Function for the Dolphins and the Koalas + + + + + + \ No newline at end of file diff --git a/nissim/stuff/js/koalas.js b/nissim/stuff/js/koalas.js new file mode 100644 index 0000000..51c182e --- /dev/null +++ b/nissim/stuff/js/koalas.js @@ -0,0 +1,31 @@ +FizzBuzz = (num) => { + if (num <= 1) { + console.log("number cannot be smaller or equal to 1") + } else { + let arr = []; + for (let i = 0; i < num; i++) { + if (Number.isInteger(i / 3)) { + arr.push("Fizz"); + console.log(arr[i]); + } else if (Number.isInteger(i / 5)) { + arr.push("Buzz"); + console.log(arr[i]); + + } else if (Number.isInteger(i / 5) && (Number.isInteger(i / 3))) { + arr.push("FizzBuzz"); + console.log(arr[i]); + + + } else { + arr.push(i); + console.log(arr[i]); + } + } + return arr; + + } +} + +console.log("------------ End of Run 1 ------------", FizzBuzz(5)); +console.log("------------ End of Run 2 ------------", FizzBuzz(15)); +console.log("------------ End of Run 3 ------------", FizzBuzz(30)); \ No newline at end of file diff --git a/nissim/stuff/js/library-sys.html b/nissim/stuff/js/library-sys.html new file mode 100644 index 0000000..191f758 --- /dev/null +++ b/nissim/stuff/js/library-sys.html @@ -0,0 +1,11 @@ + + + + + + Library System + + + + + \ No newline at end of file diff --git a/nissim/stuff/js/library-sys.js b/nissim/stuff/js/library-sys.js new file mode 100644 index 0000000..6481d61 --- /dev/null +++ b/nissim/stuff/js/library-sys.js @@ -0,0 +1,70 @@ +// Imagine you are tasked with creating a basic library system. +// Design an object named library with the following properties and methods: +// +// Properties: +// +// books: An array of book titles. +// currentLent: An object that tracks which books are currently lent out and +// to whom. +// Methods: +// +// addBook(bookTitle): Adds a new book title to the books array. +// lendBook(bookTitle, personName): Registers a book as lent to a specific person. +// The method should check if the book is in the books array and is not already lent +// out. If the book can be lent, it should be added to the currentLent +// object with the person's name as the value. +// returnBook(bookTitle): Marks a book as returned. It should remove the book's entry +// from the currentLent object. + +// listLentBooks(): Logs all books that are currently lent out and to whom. +// Requirements: +// +// Your solution must use the this keyword to reference the library object's +// properties and methods. +// Ensure that the methods account for possible edge cases, such as attempting +// to lend an already lent book. +// Once done, test your library system with a series of book additions, +// lendings, and returns to validate its functionality. + +const library = { + books: [], + currentLent: {}, + addBook: function (bookName) { + if (!this.books.includes(bookName)) { + this.books.push(bookName); + return `Book ${bookName} has been added to the list`; + } + return `Error book ${bookName} already exists`; + }, + returnBook: function (bookName) { + if (!this.books.includes(bookName)) { + console.log(`We do not own this book: ${bookName}`); + return; + } + delete this.currentLent[bookName]; + console.log(`Book: ${bookName} has been returned`); + }, + lendBook: function (bookName, personName) { + if (!this.books.includes(bookName)) { + this.currentLent[bookName] = personName; + return `Book ${bookName} has been lent to ${personName}.`; + } + return `The book ${bookName} has already been lent.`; + }, + listLentBooks: function () { + return this.currentLent; + } +}; + +console.log(library.addBook("a")); +console.log(library.addBook("b")); +console.log(library.addBook("c")); +console.log(library.addBook("d")); +console.log(library.addBook("e")); +console.log(library.addBook("f")); + +console.log(library.lendBook("a", "David")); +console.log(library.lendBook("z", "John")); +console.log(library.lendBook("b", "John")); + +console.log(library.listLentBooks()); diff --git a/nissim/stuff/js/promises.html b/nissim/stuff/js/promises.html new file mode 100644 index 0000000..cec2216 --- /dev/null +++ b/nissim/stuff/js/promises.html @@ -0,0 +1,10 @@ + + + + + Promises + + + + + \ No newline at end of file diff --git a/nissim/stuff/js/promises.js b/nissim/stuff/js/promises.js new file mode 100644 index 0000000..65602d8 --- /dev/null +++ b/nissim/stuff/js/promises.js @@ -0,0 +1,31 @@ +function getRandomNumber(min, max) { + // Generate a random number between min (inclusive) and max (inclusive) + return Math.round(Math.random() * (max - min) + min); +} + +function numberToPromise(num) { + let results = []; + + return new Promise((resolve, reject) => { + setTimeout(() => { + console.log(num); + resolve(num); + }, getRandomNumber(1, 5) * 1000) + }) +} + +Promise.race([ + numberToPromise(1), + numberToPromise(2), + numberToPromise(3), + numberToPromise(4), + numberToPromise(5), + numberToPromise(6), + numberToPromise(7), + numberToPromise(8), + numberToPromise(9), + numberToPromise(10) +]) + .then(value => { + console.log(value, "IS THE WINNER"); + }) \ No newline at end of file diff --git a/nissim/stuff/js/recursive-func.html b/nissim/stuff/js/recursive-func.html new file mode 100644 index 0000000..e20ef99 --- /dev/null +++ b/nissim/stuff/js/recursive-func.html @@ -0,0 +1,11 @@ + + + + + + Recursive Functions + + + + + \ No newline at end of file diff --git a/nissim/stuff/js/recursive-func.js b/nissim/stuff/js/recursive-func.js new file mode 100644 index 0000000..c8be733 --- /dev/null +++ b/nissim/stuff/js/recursive-func.js @@ -0,0 +1,60 @@ +const people = { + name: "John", + age: 59, + isMarried: true, + children: [{ + name: "James", + age: 12, + children: [] + }, + { + name: "Jane", + age: 45, + children: [{ + // .. + }] + }] +} + +// write a function that transforms the object into array of name and age TUPLE. +// (we don't know how many levels are there); + +//example : +let requiredResult = [["John", 59], ["James", 12], ["Jane", 45]]; + +function printNameAndAge(obj) { + let arr = []; + + function lookThroughNested(obj) { + for (const key in obj) { + + } + } +} + +function nameAndAge(obj) { + const arr = []; + + function worm(obj) { + for (const key in obj) { + if (key === "name") { + console.log(obj[key]) + arr.push(obj[key]) + } + + if (key === "age") { + console.log(obj[key]) + arr.push(obj[key]) + } + + if (typeof obj[key] === "object") { + worm(obj[key]) + } + } + } + + worm(obj) + return arr +} + +console.log(nameAndAge(people)); \ No newline at end of file diff --git a/nissim/stuff/js/style.css b/nissim/stuff/js/style.css new file mode 100644 index 0000000..aeb677c --- /dev/null +++ b/nissim/stuff/js/style.css @@ -0,0 +1,154 @@ +html { + height: 100vh; + margin: 0; + padding: 0; +} + +body { + background: #232323; + display: flex; + justify-content: center; + align-items: center; + height: 100%; + margin: 0; + padding: 0; + font-family: "Miriam Libre", sans-serif; + flex-direction: column; +} + +.d-flex { + display: flex; +} + +.space-between { + justify-content: space-between; +} + +.align-items-center { + align-items: center; +} + +h1 { + font-size: 2rem; + margin-bottom: 20px; +} + +#console-content p { + margin: 0; + padding: 2px; + padding-left: 20px; +} + +.refresh { + font-size: 1em; + background: #96ad77; + padding: 2px 6px; + border-radius: 6px; + cursor: pointer; + border: 2px solid #96ad77; + transition: 0.1s all ease-out; +} + +.refresh:hover { + border: 2px solid #96ad77; + background: none; + color: #96ad77; + transition: 0.1s all ease-in; +} + +.green { + color: #96ad77; +} + +.green-bg { + background-color: #96ad77; +} + +.green-bg-light { + background-color: #96ad7740; +} + +.green-dashed { + border: 1px dashed #96ad77; +} + +.gray-light { + color: #cbcbcb50; +} + +.whitesmoke { + color: whitesmoke; +} + +.navajowhite { + color: navajowhite; +} + +.blue { + color: #47a7f4; +} + +.block { + display: block; +} + +.console { + width: 400px; + background: #19191950; + min-height: 200px; + border: 1px dashed #191919; + margin: 20px 0; + border-radius: 10px; + max-height: 1000px; +} + +.console-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.console-title { + color: #cbcbcb; + margin: 0; +} + +.console-input { + padding: 20px; +} + +.console-input-content { + /*margin-left: 20px;*/ +} + +.console-comment { + margin-bottom: 10px; + border-radius: 2px; + padding: 2px 6px; +} + +.even { + background: #cbcbcb10; + border-radius: 2px; + border: 1px dashed #373737; +} + +.odd { + background: #cbcbcb05; + border-radius: 2px; + /*border: 1px dashed #373737;*/ +} + +#console-user-input { + display: flex; + flex-direction: column; +} + +#console-user-input input[type="text"] { + background: #363636; + border: none; + outline: none; + color: white; + font-size: 1em; + width: 100%; +} \ No newline at end of file diff --git a/nissim/stuff/layout.css b/nissim/stuff/layout.css new file mode 100644 index 0000000..d542d4f --- /dev/null +++ b/nissim/stuff/layout.css @@ -0,0 +1,21 @@ +body { + background: #232323; + color: white; +} + +header { + +} +nav{ + +border: 1px solid; +} +aside{ + +} +main{ + +} +footer{ + +} \ No newline at end of file diff --git a/nissim/stuff/perspective.css b/nissim/stuff/perspective.css new file mode 100644 index 0000000..4850f53 --- /dev/null +++ b/nissim/stuff/perspective.css @@ -0,0 +1,59 @@ +* { + height: 100vh; +} + +body { + height: 100%; + margin: 0; + background-color: #fff; + display: flex; + justify-content: center; + align-items: center; +} + + +.container { + display: flex; + justify-content: center; + align-items: center; + perspective: 500px; + border: solid; + flex-direction: column; + height: 200px; +} + +div { + width: 200px; + height: 200px; +} + +.one { + background: blue; + transform-style: preserve-3d; + transform: rotateY(50deg); + transition: ease-in-out 0.3s; +} + +.two { + transform-origin: bottom; + transform: rotateX(0deg); + background: lawngreen; + transition: ease-in-out 0.3s; +} + +.container:hover > .one > .two { + transform: rotateX(-40deg); + cursor: pointer; +} + +.container:hover > .one { + background: #232323; +} + +.two:hover { + background: #48484c; +} + +p { + font-family: sans-serif; +} diff --git a/nissim/stuff/perspective.html b/nissim/stuff/perspective.html new file mode 100644 index 0000000..0b1ec59 --- /dev/null +++ b/nissim/stuff/perspective.html @@ -0,0 +1,23 @@ + + + + + Perspective + + + +
+ +
+ +
+ +
+

Perspective Exercise

+ +
+ +
+ + + \ No newline at end of file diff --git a/nissim/stuff/style.css b/nissim/stuff/style.css new file mode 100644 index 0000000..2cbe101 --- /dev/null +++ b/nissim/stuff/style.css @@ -0,0 +1,208 @@ +html { + height: 100%; +} + +body { + background: #1e1f22; + margin: 0; + box-sizing: border-box; + font-family: "Miriam Libre", sans-serif; + color: #fff; + height: 100vh; + background-size: cover; + background: linear-gradient(0deg, #1e1f22, #1e1f22de), + url(https://wallpaper.dog/large/10940905.jpg); + backdrop-filter: blur(10px); +} + +*::-webkit-scrollbar-track { + border-radius: 0; + width: 4px; + background-color: none; +} + +*::-webkit-scrollbar-thumb { + border-radius: 2px; + background-color: #9a9fa5; +} + +*::-webkit-scrollbar { + width: 5px; + background-color: none; +} + +.container { + display: flex; + align-content: center; + align-items: center; + height: 100%; + flex-direction: column; + overflow: auto; +} + +.containerSec { + margin: 0 10px; +} + +iframe { + margin: 0 auto; + border-radius: 10px; + /*background-color: #2b2d30;*/ + background: linear-gradient(120deg, #323334, #3c3d3f, #323334); +} + +a { + text-decoration: none; + color: #fff; +} + +.ancSec { + font-weight: 900; +} + +.ancSec:hover { + text-decoration: underline; +} + +button { + all: unset; + font-family: "Miriam Libre", sans-serif; + font-weight: 600; + margin: 4em; +} + +button a, +button a { + text-decoration: none; + background: white; + padding: 0.5rem; + border-radius: 6px; + color: black; + transition: ease-in-out all 0.1s; + text-shadow: 0 0 3px #87878780; +} + +button a:hover, +button a:hover { + background: #e1e1e1; + transition: ease-in-out all 0.1s; +} + +.profile { + border-radius: 100%; + margin: 1.2em; + border: 5px solid #48484c; + box-shadow: 0 0 30px #00000040; + width: 128px; +} + +.username { + color: #fff; + background: #ffffff20; + padding: 4px 6px; + border-radius: 6px; + border: 1px solid #8b8b8b60; + box-shadow: 0 0 30px #00000040; +} + +.username::before { + content: "@"; + font-weight: 100; + color: lightgray; +} + +footer { + color: #ffffff60; + margin: 6em 0 1em 0; +} + +nav { + display: inline-block; +} + +nav ul { + list-style-type: none; + display: flex; + gap: 2em; + flex-direction: row-reverse; + position: absolute; + top: 0; + right: 0; + width: 100%; + padding: 0 2em; +} + +nav ul li::after { + content: " #"; + font-weight: 100; + color: gray; +} + +nav ul a li::after { + transition: 0.05s ease-in-out all; +} + +nav ul a:hover li::after { + content: " #"; + font-weight: 100; + color: gray; + margin: 0 2px; + transition: 0.05s ease-in-out all; +} + +a img { + transform: scale(1); + transition: 0.1s ease-in-out all; +} + +a img:hover { + transform: scale(1.01); + transition: 0.1s ease-in-out all; + box-shadow: 0 0 30px #00000020; +} + +img { + border-radius: 10px; + margin: 6px 0; +} + +p.content { + width: 400px; +} + +figure { + margin: 0; +} + +figure figcaption { + opacity: 0.8; +} + +article { + display: flex; + flex-direction: column; + align-items: center; +} + +.label { + background: #4bff6b30; + border: 1px solid #4bff6b60; + padding: 4px; + border-radius: 6px; +} + +.price { +} + +.price::before { + content: "Price: "; + font-weight: 100; +} + +.test { + color: green; +} + +.test[nissim] { + color: red; +} diff --git a/nissim/stuff/table-exercise-2.html b/nissim/stuff/table-exercise-2.html new file mode 100644 index 0000000..2f97235 --- /dev/null +++ b/nissim/stuff/table-exercise-2.html @@ -0,0 +1,39 @@ + + + + + Table + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + diff --git a/nissim/stuff/table-exercise.html b/nissim/stuff/table-exercise.html new file mode 100644 index 0000000..2e5576a --- /dev/null +++ b/nissim/stuff/table-exercise.html @@ -0,0 +1,95 @@ + + + + + Table + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
A complex table
Invoice #12345678914 January 2025
+

Pay to:

+ Acme Billing Co.
123 Main St.
Cityville, NA 12345 + 		+

Customer:

+ John Smith
+ 321 Willow Way
+ Southeast Nortwestershire, MA 54321 +
Name / DescriptionQty.@Cost
Paperclips10000.0110.00
Staples (box)1001.00100.00
Subtotal110.00
Tax8%8.80
Grand Total$ 118
+ + diff --git a/nissim/stuff/targetelement.html b/nissim/stuff/targetelement.html new file mode 100644 index 0000000..aa7d597 --- /dev/null +++ b/nissim/stuff/targetelement.html @@ -0,0 +1,33 @@ + + + + + + Document + + + +
Click me
+
+

+ Highlighted div +
+ + diff --git a/nissim/style.css b/nissim/style.css new file mode 100644 index 0000000..0156b41 --- /dev/null +++ b/nissim/style.css @@ -0,0 +1,277 @@ +html { + height: 100%; +} + +body { + background: #1e1f22; + margin: 0; + box-sizing: border-box; + font-family: "Miriam Libre", sans-serif; + color: #fff; + min-height: 100%; + background-size: cover; + background: linear-gradient(0deg, #1e1f22, #1e1f22de), + url(https://wallpaper.dog/large/10940905.jpg); + backdrop-filter: blur(10px); + height: 100vh; +} + +.container { + display: flex; + align-content: center; + align-items: center; + height: 100%; + flex-direction: column; + justify-content: center; +} + +.containerSec { + margin: 0 10px; +} + +iframe { + margin: 0 auto; + border-radius: 10px; + /*background-color: #2b2d30;*/ + background: linear-gradient(120deg, #323334, #3c3d3f, #323334); +} + +a { + text-decoration: none; + color: #fff; +} + +.ancSec { + text-decoration: underline; +} + +h3 a, +h5 a { + text-decoration: none; + background: white; + padding: 0.5rem; + border-radius: 6px; + color: black; + transition: ease-in-out all 0.1s; + text-shadow: 0 0 3px #87878780; +} + +h3 a:hover, +h5 a:hover { + background: #e1e1e1; + transition: ease-in-out all 0.1s; +} + +.profile { + border-radius: 100%; + margin: 1.2em; + border: 5px solid #48484c; + box-shadow: 0 0 30px #00000040; + width: 128px; +} + +.username { + color: #fff; + background: #ffffff20; + padding: 4px 6px; + border-radius: 6px; + border: 1px solid #8b8b8b60; + box-shadow: 0 0 30px #00000040; +} + +.username::before { + content: "@"; + font-weight: 100; + color: lightgray; +} + +footer { + bottom: 4%; + position: fixed; + color: #ffffff60; + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; +} + +nav { + display: inline-block; +} + +nav ul { + list-style-type: none; + display: flex; + gap: 2em; + flex-direction: row; + position: absolute; + top: 10px; + left: 10px; +} + +li::before { + content: "# "; + font-weight: 100; + color: gray; +} + +a li::before { + transition: 0.05s ease-in-out all; +} + +a:hover li::before { + content: "# "; + font-weight: 100; + color: gray; + margin: 0 2px; + transition: 0.05s ease-in-out all; +} + +img { + border-radius: 10px; + margin: 6px 0; +} + +main { + display: grid; + gap: 2em; + flex-direction: row; + grid: auto-flow / 1fr 1fr 1fr; + align-items: start; + justify-content: center; + align-content: center; +} + +section { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} + +section p { + color: lightgray; + font-size: 1em; + margin: 0.5em; + text-align: left; +} + +#articles, +#testing, +#exercises { + background-color: inherit; + margin: 0; + border: 1px solid #8b8b8b00; + padding: 4px; +} + +#articles:target, +#testing:target, +#exercises:target { + animation: highlight 3.5s forwards; +} + +@keyframes highlight { + 0% { + background: #ff000010; + border-radius: 6px; + padding: 4px; + border: 1px solid #ff000030; + } + 100% { + background-color: #ff000000; + padding: 4px; + + border: 1px solid #ff000000; + } +} + +@keyframes explore { + from { + margin-right: -20px; + } + to { + margin-right: 20px; + rotate: 10deg; + } +} + +.explore-anim { + /* animation: ease-in-out 1.3s explore alternate-reverse infinite; */ + /* font-size: 1em; */ +} + +footer p { + margin: 0; +} + +.socials { + display: flex; + gap: 20px; + font-size: 1.2em; + justify-content: center; + align-items: center; +} + +.bigger-20 { + font-size: 120%; +} + +.rights { + border-bottom: 1px dashed #505050; + width: 100%; + display: flex; + justify-content: center; + padding: 10px; + color: #a9a9a9; + /* border-style: outset; */ +} + + +.available-on { + color: #fff; + background: #ffffff20; + padding: 4px 10px; + border-radius: 6px; + border: 1px solid #ffffff60; + box-shadow: 0 0 30px #00000040; + font-size: 14px; + margin: 0; + /*line-height: 2;*/ +} + +.socials a:hover { + cursor: pointer; +} + +/** DOM Manipulation related **/ + +.list-container { + color: #fff; + background: #ffffff20; + padding: 4px 10px; + border-radius: 6px; + border: 1px solid #ffffff60; + box-shadow: 0 0 30px #00000040; +} + +#my-list { + color: #fff; + background: #ffffff20; + padding: 4px 10px; + border-radius: 6px; + border: 1px solid #ffffff60; + box-shadow: 0 0 30px #00000040; + margin: 8px 0; +} + +.list-item { + color: #fff; + background: #ffffff20; + padding: 4px 10px; + border-radius: 6px; + border: 1px solid #ffffff60; + box-shadow: 0 0 30px #00000040; + list-style: none; + margin: 6px 0; +} \ No newline at end of file