├── Day 10 ├── readme.md ├── Beginner │ ├── style.css │ ├── index.html │ └── script.js ├── script.js ├── style.css └── index.html ├── Day 9 ├── Mid │ ├── style.css │ ├── script.js │ └── index.html ├── Beginner │ ├── style.css │ ├── script.js │ └── index.html └── readme.md ├── Day 6 ├── Beginner │ ├── style.css │ ├── index.html │ └── script.js └── readme.md ├── day10-13.zip ├── Day 2 ├── Beginner │ ├── script.js │ └── index.html ├── readme.md └── Mid │ ├── script.js │ ├── index.html │ └── style.css ├── Day 1 ├── Beginner │ ├── index.html │ └── script.js ├── Mid │ ├── script.js │ ├── index.html │ ├── quotes.json │ └── style.css ├── Advance │ ├── index.html │ ├── script.js │ └── style.css └── Readme.md ├── Day 4 ├── Beginner │ ├── script.js │ ├── index.html │ └── style.css ├── Mid │ ├── script.js │ ├── index.html │ └── style.css ├── readme.md └── Advance │ ├── index.html │ ├── script.js │ └── style.css ├── Day 3 ├── Mid │ ├── index.html │ ├── script.js │ └── style.css ├── Beginner │ ├── script.js │ ├── index.html │ └── style.css ├── readme.md └── Advance │ ├── script.js │ ├── style.css │ └── index.html ├── Day 5 ├── Beginner │ ├── index.html │ ├── script.js │ └── style.css ├── Mid │ ├── index.html │ ├── style.css │ └── script.js └── readme.md └── README.md /Day 10/readme.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Day 9/Mid/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 10/Beginner/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 6/Beginner/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 9/Beginner/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 9/Beginner/script.js: -------------------------------------------------------------------------------- 1 | const random = (min, max) => Math.floor(Math.random() * (max - min) + min); 2 | -------------------------------------------------------------------------------- /day10-13.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EhsanShahbazii/SabzLearn-JavaScript-Problems/HEAD/day10-13.zip -------------------------------------------------------------------------------- /Day 2/Beginner/script.js: -------------------------------------------------------------------------------- 1 | while (true) { 2 | let input = prompt("Enter your number:"); 3 | if (input) { 4 | console.log(input.length); 5 | break; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /Day 9/Mid/script.js: -------------------------------------------------------------------------------- 1 | let input = prompt("enter your sentence: "); 2 | 3 | // solution 1 4 | for (let i = 0; i < input.length; i++) { 5 | if (!input.substring(i + 1).includes(input[i])) { 6 | alert(input[i]); 7 | break; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Day 10/script.js: -------------------------------------------------------------------------------- 1 | const $ = document; 2 | let process = $.getElementsByClassName("process")[0]; 3 | 4 | window.onscroll = () => { 5 | let scrolled = window.pageYOffset; 6 | let allHeight = $.body.clientHeight - 800; 7 | process.style.width = `${(scrolled / allHeight) * 100}%`; 8 | console.log(scrolled, allHeight); 9 | }; 10 | -------------------------------------------------------------------------------- /Day 1/Beginner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Beginner 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Day 2/Beginner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Beginner 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Day 1/Beginner/script.js: -------------------------------------------------------------------------------- 1 | // solution 1 2 | let input = prompt("inter your number"); 3 | let sum = 0, 4 | i; 5 | 6 | for (i = 0; i < input.length; i++) sum += Number(input[i]); 7 | 8 | console.log(sum); 9 | 10 | // solution 2 11 | // let input = prompt("inter your number"); 12 | // let sum = 0; 13 | 14 | // Array.from(input).map((item) => (sum += Number(item))); 15 | 16 | // console.log(sum); 17 | -------------------------------------------------------------------------------- /Day 9/Mid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mid 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Day 10/Beginner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Beginner 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Day 6/Beginner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Beginner 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Day 9/Beginner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Beginner 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Day 1/Mid/script.js: -------------------------------------------------------------------------------- 1 | const $ = document; 2 | let btn = $.getElementById("qt"), 3 | box = $.getElementById("text"), 4 | quoter = $.getElementsByClassName("qouter")[0]; 5 | 6 | const randomNumber = () => { 7 | return Math.floor(Math.random() * 11); 8 | }; 9 | 10 | fetch("./quotes.json") 11 | .then((res) => res.json()) 12 | .then((data) => { 13 | btn.addEventListener("click", () => { 14 | let num = randomNumber(); 15 | box.innerText = data[num].quote; 16 | quoter.innerText = data[num].author; 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /Day 10/Beginner/script.js: -------------------------------------------------------------------------------- 1 | //solution 1 loop 2 | // let input = Number(prompt("Enter your number:")); 3 | // const factorial = (num) => { 4 | // let result = 1n, 5 | // i; 6 | // for (i = 1n; i <= num; i++) result *= i; 7 | // return result; 8 | // }; 9 | 10 | // alert(factorial(input)); 11 | 12 | //solution 2 recursive 13 | let input = BigInt(prompt("Enter your number:")); 14 | 15 | const factorial = (num) => { 16 | if (num == 1n) return 1n; 17 | else return num * factorial(num - 1n); 18 | }; 19 | 20 | alert(factorial(input)); 21 | -------------------------------------------------------------------------------- /Day 4/Beginner/script.js: -------------------------------------------------------------------------------- 1 | const $ = document; 2 | let numberInput = $.getElementById("first"), 3 | powInput = $.getElementById("second"), 4 | resultInput = $.getElementById("result"), 5 | btn = $.getElementById("submit_btn"); 6 | 7 | const power = (num, pow) => { 8 | let res = 1n; 9 | for (let i = 0; i < pow; i++) res *= num; 10 | return res; 11 | }; 12 | 13 | btn.addEventListener("click", () => { 14 | let number = numberInput.value; 15 | let pow = powInput.value; 16 | resultInput.innerText = power(BigInt(number), BigInt(pow)); 17 | }); 18 | -------------------------------------------------------------------------------- /Day 10/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | flex-direction: column; 12 | } 13 | 14 | .box { 15 | width: 80%; 16 | height: 400px; 17 | font-size: 1.5rem; 18 | } 19 | 20 | .bar { 21 | top: 0; 22 | left: 0; 23 | position: fixed; 24 | width: 100%; 25 | height: 30px; 26 | background-color: rebeccapurple; 27 | } 28 | 29 | .process { 30 | top: 0; 31 | left: 0; 32 | position: absolute; 33 | width: 0; 34 | height: 30px; 35 | background-color: greenyellow; 36 | z-index: 10; 37 | } 38 | -------------------------------------------------------------------------------- /Day 3/Mid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mid 9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 | 17 |
18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Day 6/Beginner/script.js: -------------------------------------------------------------------------------- 1 | //solution 1 loop 2 | // let index = prompt("Please Enter your index for generate fibonacci series:"); 3 | 4 | // const fibonacciLoop = (n) => { 5 | // const series = [0, 1]; 6 | // for (let i = 2; i < n; i++) series.push(series[i - 2] + series[i - 1]); 7 | // return series; 8 | // }; 9 | 10 | // console.log(fibonacciLoop(index)); 11 | 12 | //solution 2 recursive 13 | let index = prompt("Please Enter your index for generate fibonacci series:"); 14 | 15 | const fibonacciRecursive = (n) => { 16 | if (n == 1) { 17 | return [0]; 18 | } else if (n == 2) { 19 | return [0, 1]; 20 | } else { 21 | let series = fibonacciRecursive(n - 1); 22 | series.push(series[series.length - 1] + series[series.length - 2]); 23 | return series; 24 | } 25 | }; 26 | 27 | console.log(fibonacciRecursive(index)); 28 | -------------------------------------------------------------------------------- /Day 9/readme.md: -------------------------------------------------------------------------------- 1 | ### 📑 پروژه: جنریت کردن عدد رندوم 2 | #### 📊 سطح: #مبتدی 3 | #### 🌦 روز نهم 4 | 5 | #### 📌 شرح پروژه: یه فانکشن با دو پارامتر min و max بنویسین که یه عدد رندوم بین پارامتر‌ها جنریت کرده و return کند. 6 | 7 | ✅ بعنوان مثال: 8 | 9 | rand(5, 12) // 6, 11, 9, 10, ... 10 | 11 | ### 📑 پروژه: پیدا کردن کاراکتر بدون تکرار 12 | #### 📊 سطح: #متوسط 13 | #### 🌦 روز نهم 14 | 15 | #### 📌 شرح پروژه: یه جمله رو از کاربر بگیرین. 16 | اولین حرفی که تو کل جمله تکرار نداشته (فقط یک‌بار استفاده شده) رو تو خروجی نمایش بدید. 17 | 18 | ✅ بعنوان مثال: 19 | 20 | the quick brown fox jumps then quickly blow air 21 | 22 | تو این جمله اگه کاراکترا رو دونه دونه چک کنین، همشون تو جمله بیش از یک‌بار تکرار شدن، بجز f. 23 | حرف f اولین کاراکتری هست که تکرار نداره. 24 | پس خروجی میشه f. 25 | 26 | ✅ یه مثال دیگه: 27 | please dont park here 28 | 29 | تو این جمله اولین حرفی که تکرار نشده حرف l هست. 30 | -------------------------------------------------------------------------------- /Day 5/Beginner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Mid 10 | 11 | 12 |
13 | 14 |
Ehsan
15 |
16 |
17 |
18 | logo 19 |
20 |
21 |

22 | 23 |

24 |
25 | 26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /Day 4/Mid/script.js: -------------------------------------------------------------------------------- 1 | const $ = document; 2 | let container = $.getElementsByClassName("cont")[0]; 3 | 4 | const random = (min, max) => Math.floor(Math.random() * max + min); 5 | 6 | const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); 7 | 8 | let drops = []; 9 | 10 | const snow = () => { 11 | let w = random(1, 15), 12 | op = Math.random(), 13 | lef = random(0, 100), 14 | del = random(0, 15); 15 | sec = random(5, 15); 16 | let drop = `
`; 17 | 18 | drops.push(drop); 19 | }; 20 | 21 | const main = async () => { 22 | while (true) { 23 | for (let i = 0; i < random(50, 100); i++) snow(); 24 | for (let i = 0; i < drops.length; i++) container.innerHTML += drops[i]; 25 | await sleep(30000); 26 | container.innerHTML = ""; 27 | } 28 | }; 29 | 30 | main(); 31 | -------------------------------------------------------------------------------- /Day 1/Mid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | Mid 13 | 14 | 15 |
16 |
17 |
18 | 19 | The greatest glory in living lies not in never falling, but in 21 | rising every time we fall. 23 |
24 |
Nelson Mandela
25 |
26 | 27 |
28 |
29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Day 3/Mid/script.js: -------------------------------------------------------------------------------- 1 | const $ = document; 2 | let colorInput = $.querySelector("input[type='color']"), 3 | sizeInput = $.querySelector("input[type='range']"), 4 | randomCheck = $.querySelector("input[type='checkbox']"); 5 | 6 | let color = "#d6d2d2", 7 | size = 10; 8 | 9 | colorInput.addEventListener("change", (e) => { 10 | color = e.target.value; 11 | }); 12 | 13 | sizeInput.addEventListener("change", (e) => { 14 | size = Number(e.target.value); 15 | }); 16 | 17 | const randomNumber = (min, max) => 18 | Math.floor(Math.random() * (max - min) + min); 19 | 20 | window.onmousemove = (e) => { 21 | if (randomCheck.checked) { 22 | size = randomNumber(sizeInput.min, sizeInput.max); 23 | } 24 | let cx = e.clientX; 25 | let cy = e.clientY; 26 | let drop = $.createElement("div"); 27 | drop.className = "drop"; 28 | drop.style.left = `${cx}px`; 29 | drop.style.top = `${cy}px`; 30 | drop.style.width = `${size}px`; 31 | drop.style.height = `${size}px`; 32 | drop.style.backgroundColor = color; 33 | $.body.appendChild(drop); 34 | setTimeout(() => { 35 | $.body.removeChild(drop); 36 | }, 2000); 37 | }; 38 | -------------------------------------------------------------------------------- /Day 5/Mid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mid 9 | 10 | 11 |
12 |
13 | 14 | 22 |
23 |
0:30
24 |
25 | 26 | 34 |
35 |
36 |
37 |
38 |
39 |
40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Day 5/Mid/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Arbutus&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: "Arbutus", cursive; 8 | } 9 | body { 10 | overflow: hidden; 11 | background-image: linear-gradient( 12 | to right bottom, 13 | #03204a, 14 | #021d49, 15 | #021b49, 16 | #021848, 17 | #031547 18 | ); 19 | min-height: 100vh; 20 | color: #fff; 21 | } 22 | .computer { 23 | position: absolute; 24 | width: 25px; 25 | height: 25px; 26 | background-color: rgb(239, 13, 13); 27 | top: 200px; 28 | left: 700px; 29 | transition: left 1s linear, top 1s linear; 30 | } 31 | 32 | .user { 33 | position: absolute; 34 | width: 25px; 35 | height: 25px; 36 | border-radius: 50%; 37 | background-color: rgb(164, 255, 8); 38 | top: 10px; 39 | left: 10px; 40 | } 41 | 42 | .menu { 43 | position: relative; 44 | top: 0; 45 | left: 0; 46 | display: flex; 47 | align-items: center; 48 | justify-content: space-around; 49 | padding: 8px; 50 | letter-spacing: 3px; 51 | background-color: #5e5e5e; 52 | } 53 | 54 | .timer { 55 | font-size: 25px; 56 | font-weight: 600; 57 | } 58 | -------------------------------------------------------------------------------- /Day 3/Mid/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-light: #8abdff; 3 | --primary: #6d5dfc; 4 | --primary-dark: #5b0eeb; 5 | --white: #ffffff; 6 | --greyLight-1: #e4ebf5; 7 | --greyLight-2: #c8d0e7; 8 | --greyLight-3: #bec8e4; 9 | --greyDark: #9baacf; 10 | } 11 | 12 | *, 13 | *::before, 14 | *::after { 15 | margin: 0; 16 | padding: 0; 17 | box-sizing: inherit; 18 | } 19 | 20 | html { 21 | box-sizing: border-box; 22 | background: var(--primary); 23 | overflow: hidden; 24 | } 25 | 26 | .drop { 27 | width: 10px; 28 | height: 10px; 29 | border-radius: 50%; 30 | background-color: #d2691e; 31 | position: absolute; 32 | z-index: -1; 33 | } 34 | 35 | .controller { 36 | background-color: #9baacf; 37 | width: 200px; 38 | height: 300px; 39 | } 40 | 41 | input[type="color"] { 42 | width: 150px; 43 | height: 50px; 44 | margin: 4px; 45 | } 46 | 47 | input[type="range"] { 48 | width: 150px; 49 | margin-top: 3rem; 50 | margin-left: 1rem; 51 | } 52 | 53 | input[type="checkbox"] { 54 | height: 25px; 55 | width: 25px; 56 | margin-right: 8px; 57 | } 58 | 59 | .check { 60 | display: flex; 61 | align-items: center; 62 | justify-content: center; 63 | margin-top: 2rem; 64 | } 65 | -------------------------------------------------------------------------------- /Day 4/readme.md: -------------------------------------------------------------------------------- 1 | ### 📑 پروژه: توان 2 | #### 📊 سطح: #مبتدی 3 | #### 🌦 روز چهارم 4 | 5 | #### 📌 شرح پروژه: از کاربر 2 عدد دریافت کرده و عدد اولی رو به توان دومی برسونید. 6 | 7 | مثال: (ورودی اول = 2 | ورودی دوم = 3 | نتیجه = 2 به توان 3 = 8 | (2 * 2 * 2)) 8 | 9 | ✅ نحوه پیاده سازی: یک فانکشن بنویسید که 2 عدد ورودی دریافت کند. عدد اولی باید به تعداد عدد دومی در خودش ضرب شود. 10 | عمل ضرب به صورت مکرر انجام میشود، پس یک حلقه ایجاد کنید که از گام 0 شروع کرده و تا زمانی که به ورودی دوم برسد، ورودی اول رو در خودش ضرب کنه و در نهایت مقدار خروجی رو به کاربر نمایش بده. 11 | 12 | 📌نکته: از Math.pow و عملگر ** استفاده نشود! 13 | 14 | ### 📑 پروژه: بک‌گراند متحرک 15 | #### 📊 سطح: #متوسط 16 | #### 🌦 روز چهارم 17 | 18 | #### 📌 شرح پروژه: یک Header‌ معمولی داشته باشید که توپ های رنگی به تعداد لازم با سایز های مختلف و همچنین با استایل های دلخواه (مثلا border, shadow, radius و ...) که به صورت نرم و اهسته تو صفحه تکون بخورن و از صفحه خارج بشه 19 | 20 | ✅ نحوه پیاده سازی: بر عهده خودتون 21 | 22 | ### 📑 پروژه: مرتب سازی آرایه 23 | #### 📊 سطح: #پیشرفته 24 | #### 🌦 روز چهارم 25 | 26 | #### 📌 شرح پروژه: 10 عدد از کاربر دریافت کرده و آن ها را داخل آرایه ای ذخیره کنید و سپس اعداد رو از کوچیک به بزرگ مرتب کرده و به همان ترتیب صعودی رو در console چاپ کنین. 27 | 28 | ✅ نحوه پیاده سازی: داخل Google.com عزیز رر مورد الگوریتم مرتب سازی حبابی سرچ کنید. 29 | 30 | 📌 نکته: از متد sort استفاده نشود! 31 | 32 | -------------------------------------------------------------------------------- /Day 1/Mid/quotes.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "quote": "The greatest glory in living lies not in never falling, but in rising every time we fall.", 4 | "author": "Nelson Mandela" 5 | }, 6 | { 7 | "quote": "The way to get started is to quit talking and begin doing.", 8 | "author": "Walt Disney" 9 | }, 10 | { 11 | "quote": "If life were predictable it would cease to be life, and be without flavor.", 12 | "author": "Eleanor Roosevelt" 13 | }, 14 | { 15 | "quote": "Life is what happens when you're busy making other plans.", 16 | "author": "John Lennon" 17 | }, 18 | { 19 | "quote": "When you reach the end of your rope, tie a knot in it and hang on.", 20 | "author": "Franklin D. Roosevelt" 21 | }, 22 | { 23 | "quote": "Always remember that you are absolutely unique. Just like everyone else.", 24 | "author": "Margaret Mead" 25 | }, 26 | { 27 | "quote": "The future belongs to those who believe in the beauty of their dreams.", 28 | "author": "Eleanor Roosevelt" 29 | }, 30 | { 31 | "quote": "Tell me and I forget. Teach me and I remember. Involve me and I learn.", 32 | "author": "Benjamin Franklin" 33 | }, 34 | { 35 | "quote": "Whoever is happy will make others happy too.", 36 | "author": "Anne Frank" 37 | }, 38 | { 39 | "quote": "The future belongs to those who believe in the beauty of their dreams.", 40 | "author": "Eleanor Roosevelt" 41 | } 42 | ] 43 | -------------------------------------------------------------------------------- /Day 4/Mid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mid 9 | 10 | 11 | 24 |
28 |
29 |

30 | E 31 | h 32 | s 33 | a 34 | n 35 |    36 | S 37 | h 38 | a 39 | h 40 | b 41 | a 42 | z 43 | i 44 |

45 |
46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /Day 4/Beginner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Mid 16 | 17 | 18 |
19 |
20 |

Power

21 | 22 |
23 | 30 | ^ 31 | 38 |
39 |
40 |

256

41 |
42 |
43 |
44 | 47 |
48 | 51 |
52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /Day 1/Advance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Advance 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
EmployeeEhsaniumAmin
RoleAI researcherFull Stack Developer
24 |
25 |
26 |
27 |
28 |

Employee

29 | 30 | 31 | 32 | 33 | 34 |
35 |
36 |

Add Task

37 | 38 | 39 | 40 | 41 | 42 |
43 |
44 |
45 |

Mike Tyson

46 |

47 | try hard , practice well. then win. 48 |

49 | 50 | 51 | 52 |
53 |
54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /Day 6/readme.md: -------------------------------------------------------------------------------- 1 | ### 📑 پروژه: دنباله فیبوناچی 2 | #### 📊 سطح: #مبتدی 3 | #### 🌦 روز ششم 4 | 5 | #### 📌 شرح پروژه: به اعدادی با ترتیب زیر دنباله فیبوناچی گفته می‌شود: 6 | 7 | 0, 1, 1, 2, 3, 5, 8, 13, 21, ... 8 | 9 | همونطور که میبینین، هر عدد حاصل مجموع دو عدد قبلی هست. 10 | یک فانکشن بنویسید که یه ورودی به عنوان index بگیره و مجموع اولین عدد تا index ورودی از دنباله فیبوناچی را محاسبه کرده و چاپ کند. 11 | 12 | نحوه پیاده سازی: می‌تونین از Recursive Function یا loop استفاده کنید. 13 | 14 | ### 📑 پروژه: موزیک پلیر 15 | #### 📊 سطح: #متوسط 16 | #### 🌦 روز ششم 17 | 18 | #### 📌شرح پروژه: موزیک پلیر بنویسین که دکمه های play, next, stop و prev داشته باشه و یه Timeline برای نمایش مدت زمان باقی مانده و پخش شده آهنگ. 19 | 20 | ✅ نحوه پیاده سازی: اطلاعات آهنگ ها را داخل آرایه‌ای از آبجکت ها ذخیره کرده و برای دکمه های موزیک پلیر رویداد کلیک تعریف کنید. برای پخش شدن المنت audio میتونین از متد play و برای استپ شدن آن از pause استفاده کنین. 21 | جهت نمایش تایم موزیک میتونین از پروپرتی currentTime و استفاده کنین. 22 | 23 | 🔸 برای چالشی‌تر شدن پروژه می‌تونین قابلیت Like، ساخت Playlist، ساخت Favorites، قابلیت آپلود موزیک و ... هم هندل کرده و اطلاعات لازم رو تو Localstorage یا IndexedDB ذخیره کنین ✌❤ 24 | 25 | ### 📑 پروژه: توسعه داشبورد ادمین 26 | #### 📊 سطح: #پیشرفته 27 | #### 🌦 روز ششم 28 | 29 | #### 📌 شرح پروژه: این سورس‌کد استاتیک Html Css خدمت شما. 30 | بعنوان توسعه دهنده‌ جاوااسکریپت براش لاجیک بنویسین. 31 | بطوری ته به شکل Realtime بشه عملیات CRUD رو روی اطلاعات Cms انجام داد‌. 32 | 33 | برای این که پروژه واقعی‌تر باشه نیازه یه Structure برای دیتاهای پروژه در نظر بگیرین و تو فایل Json یا localStorage سیو کنین، مثلا: 34 | 35 | { 36 | users: [{}, {}, {}], 37 | products: [{}, {}, {}], 38 | articles: [{}, {}, {}], 39 | } 40 | 41 | 📌 نکته: فقط در حالتی می‌تونین این پروژه رو هندل کنین که دوره جاوا اسکریپت رو تا سطح پیشرفته بلد باشین! 42 | 43 | همین الان شروع کنید و بنویسید💪 44 | -------------------------------------------------------------------------------- /Day 3/Beginner/script.js: -------------------------------------------------------------------------------- 1 | const $ = document; 2 | let captchaShow = $.getElementById("captcha__text"), 3 | genBtn = $.getElementById("generate__captcha"), 4 | input = $.getElementById("input"), 5 | alert = $.getElementById("alert"), 6 | submitBtn = $.getElementById("submit_btn"); 7 | 8 | let fonts = [ 9 | "Architects Daughter", 10 | "Creepster", 11 | "Permanent Marker", 12 | "Press Start 2P", 13 | "Rubik Iso", 14 | ]; 15 | 16 | let captcha = "", 17 | fontRange = { min: 29, max: 40 }, 18 | letterRange1 = { min: 48, max: 57 }, 19 | letterRange2 = { min: 65, max: 90 }, 20 | captchaFalse = "Captcha is not correct", 21 | captchaTrue = "Captcha is correct"; 22 | 23 | const randomNumber = (min, max) => 24 | Math.floor(Math.random() * (max - min) + min); 25 | 26 | const createLetter = () => 27 | randomNumber(0, 10) % 2 === 0 28 | ? randomNumber(letterRange1.min, letterRange1.max) 29 | : randomNumber(letterRange2.min, letterRange2.max); 30 | 31 | const createCaptcha = () => { 32 | let i; 33 | for (i = 0; i < 5; i++) { 34 | let letter = String.fromCharCode(createLetter()); 35 | captcha += letter; 36 | let temp = `${letter}`; 42 | captchaShow.innerHTML += temp; 43 | } 44 | }; 45 | 46 | genBtn.addEventListener("click", () => { 47 | captcha = ""; 48 | captchaShow.innerHTML = ""; 49 | input.value = ""; 50 | createCaptcha(); 51 | }); 52 | 53 | submitBtn.addEventListener("click", () => { 54 | if (input.value.toUpperCase() === captcha && input.value !== "") { 55 | alert.innerHTML = captchaTrue; 56 | } else { 57 | alert.innerHTML = captchaFalse; 58 | } 59 | }); 60 | 61 | createCaptcha(); 62 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![preview](https://sabzlearn.ir/wp-content/uploads/2023/12/Com_JAVASCRIPT-1.webp) 2 | 3 | # SabzLearn-JavaScript-Problems 4 | Sabzleran questions and answers along with explanations and source codes are placed in this repository. 5 | 6 | ### Problems 7 | - **Day 1** 8 | - Sum of digits `Beginner`: [see preview](https://codepen.io/ehsanshahbazii/pen/qBMJpdW) 9 | - Random Quote `Mid`: [see preview](https://codepen.io/ehsanshahbazii/pen/BaOqJod) 10 | - Trello `Advance`: [see preview](https://codepen.io/ehsanshahbazii/pen/BaOqJzw) 11 | - **Day 2** 12 | - Number of digits `Beginner`: [see preview](https://codepen.io/ehsanshahbazii/pen/VwGEorj) 13 | - Guess the word `Mid`: [see preveiw](https://codepen.io/ehsanshahbazii/pen/JjamgMo) 14 | - Shopping Card `Advance`: not complete yet 15 | - **Day 3** 16 | - Generate captcha `Beginner`: [see preview](https://codepen.io/ehsanshahbazii/pen/dyqQLWy) 17 | - Mouse animation `Mid`: [see preveiw](https://codepen.io/ehsanshahbazii/pen/gOdQyxL) 18 | - Phone book `Advance`: [see preview](https://codepen.io/ehsanshahbazii/pen/vYzQMeL) 19 | - **Day 4** 20 | - Power in math `Beginner`: [see preview](https://codepen.io/ehsanshahbazii/pen/ExeGdRP) 21 | - Dynamic background `Mid`: [see preveiw](https://codepen.io/ehsanshahbazii/pen/PodXyae) 22 | - Sorting algorithms `Advance`: [see preview](https://codepen.io/ehsanshahbazii/pen/eYLbPjm) 23 | - **Day 5** 24 | - Image slider `Beginner`: [see preview](https://codepen.io/ehsanshahbazii/pen/bGMKEGx) 25 | - Tracker game `Mid`: [see preveiw](https://codepen.io/ehsanshahbazii/pen/bGxzomx) 26 | - Typing speed `Advance`: not complete yet 27 | - **Day 6** 28 | - Fibonacci series `Beginner`: [see preview](https://codepen.io/ehsanshahbazii/pen/NWLoaEO) 29 | - Music player `Mid`: not complete yet 30 | - Admin dashboard CRUD `Advance`: not complete yet 31 | - **Day 9** 32 | - Random number `Beginner`: [see preview]() 33 | - char with count one `Mid`: [see preview]() 34 | 35 | ### Days 10, 11, 12, 13 are available in Zip file 36 | -------------------------------------------------------------------------------- /Day 5/readme.md: -------------------------------------------------------------------------------- 1 | ### 📑 پروژه: اسلایدر ساده 2 | #### 📊 سطح: #مبتدی 3 | #### 🌦 روز پنجم 4 | 5 | #### ✅نحوه پیاده سازی: بر عهده خودتون (دکمه های next, prev و dots هم هندل کنید) 6 | 7 | ### 📑 پروژه: بازی ردیاب 8 | #### 📊 سطح: #متوسط 9 | #### 🌦 روز پنجم 10 | 11 | #### 📌 شرح پروژه: 2 تا آیتم (دایره یا مربع) در صفحه وجود دارد که یکی توسط کاربر کنترل می‌شود (با کلید های Arrow) و دیگری توسط سیستم جابجا می‌شود. 12 | کاربر باید با دایره خودش دایره سیستم رو بگیره و هر موقع این دو المنت به همدیگه خوردن، کاربر برنده میشه و بازی تموم میشه. 13 | یکم بازیو چالشی‌تر بکنیم 😋 14 | یه تایمر هم برای بازی بذارین که اگه تایمر تموم شد و کاربر نتونست سیستم رو بگیره Game Over بشه (بعد از GameOver شدن دیگه کاربر اجازه تکون دادن آیتمش رو نداره) 15 | 16 | ✅ نحوه پیاده سازی: بر عهده خودتون 17 | 18 | ### 📑 پروژه: Typing Speed 19 | #### 📊 سطح: #پیشرفته 20 | #### 🌦 روز پنجم 21 | 22 | #### 📌 شرح پروژه: چندین کلمه (مثلا 10 کلمه) داخل آرایه ای دارین، 23 | یکی از اونا رو به رندوم تو صفحه نمایش میدین، 24 | یک اینپوت هم دارین که کاربر باید اون کلمه نمایش داده شده رو تایپ بکنه، 25 | اما مدت زمان کاربر برای عمل تایپ محدوده(مثلا 4 ثانیه) که برای این موضوع باید تایمر بذارین. 26 | اگه کاربر تو این مدت زمان مشخص شده بتونه کلمه رو تایپ کنه میره مرحله بعد واسه تایپ کلمه بعدی، اما اگه نتونه کلمه رو تایپ 27 | کنه GameOver میشه. 28 | یکم چالشی‌ترش کنیم 😋 29 | می‌تونین واسه کاربر score هم در نظر بگیرین. 30 | وقتی که کاربر کلمه اول رو قبل از تموم شدن تایمر تایپ کرد، یه واحد به امتیازش اضافه کنین و تایمر رو ریستارت کنین و کلمه بعدی رو نمایش بدین و این روند رو تا GameOver شدن کاربر ادامه بدین. 31 | 32 | برای این که پروژه رو یکم پیچیده کنین و چالشی‌تر هم بشه، میتونین تایمر هر کلمه رو برابر با نصف تعداد کاراکتر های اون کلمه قرار بدین. 33 | چون منطقی نیست که تایم تایپ دو کلمه 3 حرفی و 10 حرفی یکسان در نظر گرفته شه. 34 | مثلا برای کلمه 5 حرفی، تایمرتون 2.5 ثانیه باشه. 35 | 36 | اگه خیلی سرسخت هستین و میخواین پیچیده‌تر از این هم بشه، رفته رفته تایمر رو بیارین پایین. مثلا تا 10 امتیاز اول، تایمر شما برای هر کلمه به نصف تعداد حروف اون کلمه ثانیه باشه و وقتی امتیاز به 10 رسید، بعدش تایمر رو نصف کنین. مثلا برای کلمه 6 حرفی 2 ثانیه زمان بدین. 37 | 38 | -------------------------------------------------------------------------------- /Day 1/Advance/script.js: -------------------------------------------------------------------------------- 1 | const $ = document; 2 | let tableEmployee = $.getElementById("tableEmployee"), 3 | tableRole = $.getElementById("tableRole"), 4 | employeeInput = $.getElementById("employee"), 5 | taskInput = $.getElementById("task"), 6 | addTask = $.getElementById("addTask"); 7 | 8 | let empName = $.getElementById("employees"), 9 | rolesField = $.getElementById("role"), 10 | addEmp = $.getElementById("addEmp"); 11 | 12 | let taskWho = $.getElementById("taskWho"), 13 | showTaskWho = $.getElementById("showTaskWho"), 14 | showt = $.getElementById("showt"), 15 | showTaskBtn = $.getElementById("showTaskBtn"); 16 | 17 | let task, name, role; 18 | let empData = [{}]; 19 | 20 | addTask.addEventListener("click", () => { 21 | name = employeeInput.value; 22 | task = taskInput.value; 23 | 24 | if (name && task) { 25 | let i = empData.findIndex((emp) => emp.name === name); 26 | if (i > 0) { 27 | empData[i].task = task; 28 | } else { 29 | alert("employee not found. try again."); 30 | } 31 | employeeInput.value = ""; 32 | taskInput.value = ""; 33 | alert(`employee name: ${name} with task: ${task} added.`); 34 | } else { 35 | alert("please fill the inputs"); 36 | } 37 | }); 38 | 39 | addEmp.addEventListener("click", () => { 40 | name = empName.value; 41 | role = rolesField.value; 42 | 43 | if (name && role) { 44 | tableEmployee.innerHTML += `${name}`; 45 | tableRole.innerHTML += `${role}`; 46 | empData.push({ name, role, task: "" }); 47 | empName.value = ""; 48 | rolesField.value = ""; 49 | alert(`new employee name: ${name} with role: ${role} is added!`); 50 | } else { 51 | alert("please fill the inputs"); 52 | } 53 | }); 54 | 55 | showTaskBtn.addEventListener("click", () => { 56 | name = showt.value; 57 | let i = empData.findIndex((em) => em.name === name); 58 | if (i > 0) { 59 | let user = empData[i]; 60 | taskWho.innerText = user.name; 61 | showTaskWho.innerText = user.task; 62 | showt.value = ""; 63 | } else { 64 | alert("please add correct employee name."); 65 | } 66 | }); 67 | -------------------------------------------------------------------------------- /Day 5/Beginner/script.js: -------------------------------------------------------------------------------- 1 | const $ = document; 2 | let img = $.querySelector("img"); 3 | let title = $.querySelector("h4"); 4 | let span = $.querySelector("span"); 5 | let text = $.querySelector("p"); 6 | let pre = $.getElementsByClassName("pre")[0]; 7 | let next = $.getElementsByClassName("next")[0]; 8 | 9 | const data = [ 10 | { 11 | id: 1, 12 | img: "https://randomuser.me/api/portraits/women/72.jpg", 13 | title: "lorem epson", 14 | span: "Web developer", 15 | text: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. ipsum dolor sit amet consecteturipsum dolor sit amet consectetur ", 16 | }, 17 | { 18 | id: 2, 19 | img: "https://randomuser.me/api/portraits/women/79.jpg", 20 | title: "many pixels", 21 | span: "Back-End developer", 22 | text: "Lorem ipsum ipsum dolor sit amet consectetur adipisicing elit. ipsum dolor sit amet consectetur", 23 | }, 24 | { 25 | id: 3, 26 | img: "https://randomuser.me/api/portraits/men/0.jpg", 27 | title: "scarllet jon", 28 | span: "Front-End developer", 29 | text: "Lorem ipsum dolor sitipsum dolor sit amet consecteturcteturipsum dolor sit amet consectetur, adipisicing elit.", 30 | }, 31 | { 32 | id: 4, 33 | img: "https://randomuser.me/api/portraits/men/84.jpg", 34 | title: "Thomas shelby", 35 | span: "Web developer", 36 | text: "Loipsum dolor sit amet conser sit amet consecteturipsum dolor sit amet consecteturipsum dolor sit amet consecteturtetur ", 37 | }, 38 | ]; 39 | 40 | let current = 1; 41 | 42 | window.onload = () => { 43 | setData(data); 44 | }; 45 | 46 | pre.addEventListener("click", () => { 47 | if (current != 1) { 48 | current--; 49 | } else { 50 | current = 4; 51 | } 52 | 53 | setData(data); 54 | }); 55 | 56 | next.addEventListener("click", () => { 57 | if (current != 4) { 58 | current++; 59 | } else { 60 | current = 1; 61 | } 62 | 63 | setData(data); 64 | }); 65 | 66 | const setData = (arr) => { 67 | img.src = arr[current - 1].img; 68 | title.innerText = arr[current - 1].title; 69 | span.innerText = arr[current - 1].span; 70 | text.innerText = arr[current - 1].text; 71 | }; 72 | -------------------------------------------------------------------------------- /Day 2/readme.md: -------------------------------------------------------------------------------- 1 | ### 📑 پروژه: تعداد ارقام عدد ورودی 2 | #### 📊 سطح: #مبتدی 3 | #### 🌦 روز دوم 4 | 5 | #### 📌 شرح پروژه: عددی از کاربر دریافت کنین و تعداد ارقام آن عدد را نمایش بدین. 6 | تا زمانی که عدد وارد نشده، بطور مداوم prompt نمایش داده شود: 7 | ورودی: 957 / خروجی: 3 8 | 9 | ✅ نحوه پیاده سازی: طبق این پروژه در صورت number بودن ورودی، آن را بصورت مداوم تقسیم بر 10 میکنید. 10 | یک Counter(شمارنده) تعریف کنین و در هر بار تقسیم، مقدار counter را ++ کنید و در نهایت counter تعداد تقسیم های شما خواهد بود. 11 | اگر ورودی عدد نبود، از 12 | حلقه while(true) استفاده کنید و prompt را مادامی که عدد وارد نشده، نمایش بدید‌. 13 | 14 | ### 📑 پروژه: بازی حدس کلمه 15 | #### 📊 سطح: #متوسط 16 | #### 🌦 روز دوم 17 | 18 | #### 📌 شرح پروژه: یک باکس، اینپوت و دکمه داشته باشید و کلمه مثلا 3 الی 5 حرفی بطور رندوم تولید و تو باکس نمایش بدین. 19 | حالا کاربر باید کلمه رندوم رو حدس بزنه. 20 | کلمه حدسیشو تو اینپوت مینویسه و رو دکمه کلیک میکنه، اگه چیزی که حدس زده بود درست باشه، به alert سبز رنگ و در صورت غلط بودن آلرت قرمز نمایش میدین. 21 | برای جذاب تر بودن بازی کلمه 3 الی 5 حرفی تولید شده را بطور ناقص داخل باکس نمایش بدین. 22 | مثلا اگر کلمه ریکت تولید شده، داخل باکس بعنوان راهنمایی ری*ت بنویسین ✌❤ 23 | 24 | ✅ نحوه پیاده سازی: کلمه رندوم تولید شده را در یک متغیر ذخیره کنید و با مقدار valueی اینپوت مقایسه کنید و درست یا غلط بودنش را تشخیص دهید. 25 | نحوه نمایش کلمه بصورت ناقص بر عهده خودتون. 26 | 27 | پروژه: سبد خرید 28 | 29 | ### 📑 پروژه: سبد خرید 30 | #### 📊 سطح: #پیشرفته 31 | #### 🌦 روز دوم 32 | 33 | #### 📌 شرح پروژه: یک سایت تک صفحه ای داشته باشید که در یک قسمت محصولات را لیست کرده باشید و در قسمت دیگر سبد خرید وجود داشته باشد. هر محصول یک دکمه Add داشته باشد که در صورت کلیک روی دکمه هر محصول، آن محصول به سبد خرید اضافه شود. 34 | اگر محصولی از قبل به سبد خرید اضافه شده بود، محصول جدیدی اضافه نشود، فقط تعداد آن محصول ++ شود. 35 | ضمنا، قیمت کل سبد خرید حساب شده و نمایش داده شود. 36 | 37 | ✅ نحوه پیاده سازی: روش های مختلفی وجود داره... 38 | میتونین دیتاها رو داخل آبجکت هایی در آرایه ذخیره کنین و آن ها را با ظاهر دلخواه در DOM نمایش بدید و با کلیک روی دکمه Add هر محصول اطلاعاتش رو دریافت کرده و به سبد خرید اضافه کنید. 39 | یک آرایه هم برای سبد خرید داشته باشید و با کلیک روی Add هر محصول، ابتدا تو سبد خرید سرچ کنین، اگه محصول از قبل وجود داشت فقط count اون رو ++ کنین کلی اگه وجود نداشت، یک آیتم جدید به آرایه و DOM اضافه کنین. 40 | -------------------------------------------------------------------------------- /Day 2/Mid/script.js: -------------------------------------------------------------------------------- 1 | const $ = document; 2 | let input = $.querySelector("input"), 3 | generate4Btn = $.getElementById("generate4_btn"), 4 | generate6Btn = $.getElementById("generate6_btn"), 5 | submitBtn = $.getElementById("submit_btn"), 6 | alert = $.getElementById("alert"); 7 | 8 | const words6Letter = [ 9 | "Accuse", 10 | "Admire", 11 | "Adored", 12 | "Bridge", 13 | "Bright", 14 | "Broken", 15 | "Budget", 16 | "Client", 17 | "Closed", 18 | "Closer", 19 | "Dollar", 20 | "Domain", 21 | "Double", 22 | "Driven", 23 | "Famous", 24 | "Father", 25 | "Fellow", 26 | "Gainly", 27 | "Gallop", 28 | "Gamble", 29 | ]; 30 | 31 | const words4Letter = [ 32 | "agar", 33 | "asps", 34 | "ahem", 35 | "able", 36 | "beta", 37 | "bets", 38 | "bevy", 39 | "case", 40 | "cent", 41 | "chop", 42 | "city", 43 | "deal", 44 | "deck", 45 | "deer", 46 | "daub", 47 | "dale", 48 | "evil", 49 | "exam", 50 | "exit", 51 | "garb", 52 | "gild", 53 | "gird", 54 | "girl", 55 | ]; 56 | 57 | const randomGenerate = (max) => { 58 | return Math.floor(Math.random() * max); 59 | }; 60 | 61 | let currentWord = "", 62 | word = "", 63 | finish = true, 64 | i; 65 | 66 | generate4Btn.addEventListener("click", () => { 67 | if (finish) { 68 | currentWord = ""; 69 | word = words4Letter[randomGenerate(words4Letter.length)].toUpperCase(); 70 | for (i = 0; i < 4; i++) { 71 | i % 2 == 0 ? (currentWord += word[i]) : (currentWord += "_"); 72 | } 73 | input.value = currentWord; 74 | finish = false; 75 | } 76 | }); 77 | 78 | generate6Btn.addEventListener("click", () => { 79 | if (finish) { 80 | currentWord = ""; 81 | let word = words6Letter[randomGenerate(words6Letter.length)].toUpperCase(); 82 | for (i = 0; i < 6; i++) { 83 | i % 2 == 0 ? (currentWord += word[i]) : (currentWord += "_"); 84 | } 85 | input.value = currentWord; 86 | finish = false; 87 | } 88 | }); 89 | 90 | submitBtn.addEventListener("click", () => { 91 | let userGuess = input.value.toUpperCase(); 92 | userGuess === word && word !== "" ? alert.classList.add("alert_true") : null; 93 | userGuess === word && word !== "" ? (finish = true) : (finish = false); 94 | }); 95 | -------------------------------------------------------------------------------- /Day 3/readme.md: -------------------------------------------------------------------------------- 1 | ###📑 پروژه: تولید کد کپچای 5 کاراکتری 2 | #### 📊 سطح: #مبتدی 3 | #### 🌦 روز سوم 4 | 5 | #### 📌 شرح پروژه: برنامه ای بنویسید که بصورت رندوم کد کپچای 5 کاراکتری تولید کند و آن را در console لاگ گرفته یا بصورت alert نمایش دهد. 6 | کد کپچا باید از اعداد و حروف تشکیل شده باشد. 7 | 8 | ✅ نحوه پیاده سازی: تمام کاراکتر هایی را که از بین آن ها کد کپچا درست کنید، داخل یک متغیر داشته باشید: 9 | 10 | let allChars = "abcdef112344" 11 | 12 | اگه میخواین کد کپچای شما 5 کاراکتر داشته باشد یک حلقه با طول 5 ایجاد کنید و در هر اجرای حلقه یک ایندکس رندوم بین 0 تا allChars.length ایجاد کنید (استرینگ‌ها نوعی آرایه هستند و میتونید به کمک ایندکس (از صفر تا length آنها) به کاراکتر هاشون دسترسی داشته باشید). 13 | به کمک عدد رندوم تولید شده، کاراکتری رو از allChars بردارید و به متغیر کد کپچای خودتون concat کنید: 14 | 15 | captcaCode += allChars[i] 16 | 17 | از کاربر بخواهید تا کپچا را وارد کند و سپس کپچای وارد شده توسط کاربر رو با کپچای اصلی مقایسه کنید. 18 | طبق نتیجه مقایسه یک متن متناسب رو نمایش دهید. 19 | 20 | ### 📑 پروژه: پروژه موس دنباله دار 21 | #### 📊 سطح: #متوسط 22 | #### 🌦 روز سوم 23 | 24 | #### 📌 شرح پروژه: یک صفحه وب خالی پیاده سازی کنید که یک دنباله (حلقه یا ستاره یا ....) به دنبال موس کاربر افتاده باشد 😄 25 | 26 | ✅ نحوه پیاده سازی: برای رویداد onMouseMove صفحه یک فانکشن تعریف کنید که event رو به عنوان parameter دریافت کنه و با createElement المنت های دلخواهی ساخته و به پشت موس کاربر append کنین. 27 | حالا از کجا باید بدونیم موس کجاست؟ 28 | مختصات و موقعیت موس رو میتونین از آبجکت event دریافت کنین. 29 | 30 | برای رعایت پرفورمنس پروژه آیتم های اضافه شده به دنبال موس رو از Dom ریمو کنید. 31 | 32 | ### 📑 پروژه: دفترچه شماره تلفن 33 | ####📊 سطح: #پیشرفته 34 | #### 🌦 روز سوم 35 | 36 | #####📌 شرح پروژه: یک باکس بعنوان لیست، دو تا اینپوت (نام و شماره تلفن) و یک دکمه تحت عنوان Add داشته باشید. پروژه شما این قابلیت رو داره که اسم و شماره تلفن شخص رو از اینپوت های لازم دریافت کنه و داخل باکس به صورت لیست نمایش بده(مثل دفترچه شماره تلفن) 37 | اگر صفحه کاربر رفرش شد، اطلاعات همچنان در صفحه موجود بوده و پاک نشده باشند. 38 | 39 | ✅ نحوه پیاده سازی: فانکشنی برای رویداد click دکمه Add پیاده سازی کنید که مقادیر رو از اینپوت دریافت کرده و ولیدیشن های لازم رو روی آن ها پیاده سازی کند و با روش دلخواه آن ها را به باکس شماره تلفن ها اضافه کند. 40 | فانکشن هایی برای ذخیره و دریافت اطلاعات از localStorage پیاده سازی کنید و در جاهای لازم پروژه ازشون استفاده کنید. 41 | -------------------------------------------------------------------------------- /Day 2/Mid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 16 | 23 | 24 | 25 | Mid 26 | 27 | 28 |
29 |
30 |
31 |
32 | 33 |
34 |

Guess the word

35 |
36 |
37 |
38 | 39 |
40 |
41 | 46 |
47 | 48 |
49 | 54 |
55 | 58 |
59 | 62 |
63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /Day 1/Advance/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-image: linear-gradient( 3 | to right top, 4 | #a9aaac, 5 | #92a8b8, 6 | #6baabb, 7 | #38abaf, 8 | #03aa92 9 | ); 10 | font-family: "Roboto", helvetica, arial, sans-serif; 11 | font-weight: 400; 12 | overflow: hidden; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: space-evenly; 17 | } 18 | 19 | .table { 20 | width: 100%; 21 | } 22 | 23 | th { 24 | color: #d5dde5; 25 | background: #1b1e24; 26 | border-bottom: 4px solid #9ea7af; 27 | border-right: 1px solid #343a45; 28 | font-size: 23px; 29 | font-weight: 100; 30 | padding: 24px; 31 | text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 32 | vertical-align: middle; 33 | } 34 | 35 | tr { 36 | color: #666b85; 37 | font-size: 16px; 38 | font-weight: normal; 39 | text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1); 40 | } 41 | 42 | td { 43 | background: #ffffff; 44 | padding: 20px; 45 | text-align: center; 46 | vertical-align: middle; 47 | font-weight: 300; 48 | font-size: 18px; 49 | } 50 | 51 | .head { 52 | background-color: #4e5066; 53 | color: #fff; 54 | } 55 | 56 | .right { 57 | display: flex; 58 | justify-content: space-between; 59 | } 60 | 61 | .manage { 62 | display: flex; 63 | width: 80%; 64 | } 65 | 66 | .box { 67 | width: 300px; 68 | margin: 0 1rem; 69 | display: flex; 70 | flex-direction: column; 71 | } 72 | 73 | .manage label { 74 | margin-top: 1rem; 75 | margin-bottom: 4px; 76 | font-size: 1rem; 77 | } 78 | 79 | input { 80 | width: 100%; 81 | font-size: 1rem; 82 | } 83 | 84 | input { 85 | height: 30px; 86 | } 87 | 88 | .box button, 89 | #showTaskBtn { 90 | margin-top: 1rem; 91 | width: 102%; 92 | background-color: rgb(3, 178, 3); 93 | border: none; 94 | font-size: 1.2rem; 95 | padding: 4px; 96 | cursor: pointer; 97 | transition: all 0.2s; 98 | } 99 | 100 | .box button:hover { 101 | background-color: rgb(6, 210, 6); 102 | } 103 | 104 | #showt { 105 | width: 300px; 106 | } 107 | 108 | #showTaskBtn { 109 | width: 100px; 110 | } 111 | 112 | .task { 113 | display: flex; 114 | flex-direction: column; 115 | width: 30%; 116 | } 117 | -------------------------------------------------------------------------------- /Day 3/Beginner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 16 | 23 | 24 | 25 | 29 | 30 | Mid 31 | 32 | 33 |
Write captcha in input
34 |
35 |
36 |

Captcha

37 |
38 |
39 |

40 |
41 |
42 | 47 |
48 |
49 |
50 | 57 |
58 | 61 |
62 | 65 |
66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /Day 4/Advance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Mid 16 | 17 | 18 |
19 |
20 |

Sorting

21 |
25 | 31 |
32 |
33 |

2, 5, 6, 9, 9, 0, 0, 1, 1, 10

34 |
35 |
36 |
37 | 42 | 47 | 52 | 57 | 62 |
63 |
64 | 67 |
68 | 71 |
72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /Day 1/Readme.md: -------------------------------------------------------------------------------- 1 | ### 📑 پروژه: مجموع ارقام عدد ورودی 2 | #### 📊 سطح: #مبتدی 3 | #### 🌦 روز اول 4 | 5 | #### 📌 شرح پروژه: عددی از کاربر دریافت کنید و مجموع ارقام آن را حساب کرده و به کاربر نمایش دهید. 6 | 7 | مثال: اگر کاربر عدد 198 رو وارد کرد خروجی بشه: 8 | 1 + 9 + 8 = 18 9 | و عدد 18 رو به کاربر نمایش دهد. 10 | 11 | ✅ نحوه پیاده سازی: عددی را به کمک متد prompt از کاربر دریافت کنید. با if و isNaN بررسی کنید که مقدار وارد شده توسط کاربر حتما عدد باشد (مطمئن شوید که کاربر متن وارد نکرده باشد). 12 | اگر ورودی کاربر عدد بود، عملیات جمع ارقام رو انجام بدین و در نهایت مجموع ارقام رو با alert یا console.log نمایش بدید اما اگر ورودی متن نبود، یک خروجی مناسب با alert نمایش بدید. (مثلا ورودی شما عدد نیست.) 13 | 14 | ⁉️ حالا عملیات جمع رقم چیه؟ 15 | چجوری باید ارقام یه عدد رو خارج کرد؟ 🤔 16 | با یه تقسیم خیلی ساده 17 | شما فرض کنید عدد 198 رو دارید. اگر 198 رو به عدد 10 تقسیم کنید، جواب تقسیم میشه 19 و باقی مانده آن میشه 8 18 | میتونین از باقی مانده تقسیم که عدد 8 هست، سمت راست ترین رقم در 198 رو داشته باشین. 19 | الان موند 19 20 | 19 رو بازم به 10 تقسیم میکنین، جوابش میشه 1 و باقی موندش میشه 9 21 | بفرمایین، 9 رو هم کشیدین بیرون 22 | موند فقط 1 23 | هر رقمی که از عدد خارج کردین، با قبلی جمع میکنید و در نهایت به کاربر نمایش میدین: 24 | 25 | finalResult += mainDigit 26 | 27 | ### 📑 پروژه: Random Quote 28 | #### 📊 سطح: #متوسط 29 | #### 🌦 روز اول 30 | 31 | #### 📌 شرح پروژه: در DOM خودتون یک باکس و یک Button داشته باشید و در صورت کلیک روی Button، یک جمله معروف مثلا از استیوجابز، بیلگیتس، ایلان ماسک یا ... همراه با گوینده اون سخن داخل باکس نمایش داده شود. 32 | 33 | ✅ نحوه پیاده سازی: یک آرایه داشته باشید و تمام Quote های لازم رو داخل آرایه ذخیره کنید. چون قرار است هم سخن و هم گوینده آن نمایش داده شود، هر ایندکس از آرایه رو یه آبجکت در نظر بگیرید که 2 تا Property داره، یکی متن سخن، یکی هم گوینده آن. 34 | یک فانکشن تعریف کنین که در هر موقع اجرا شدن، یک ایندکس بصورت رندوم از آرایه انتخاب کرده و Property های ایندکس انتخاب شده رو به innerHTML باکس مورد نظر نسبت دهید. 35 | برای تولید عدد رندوم از Math.random , Math.floor استفاده کنید. 36 | 37 | ### 📑 پروژه: Trello 38 | #### 📊 سطح: #پیشرفته 39 | #### 🌦 روز اول 40 | 41 | #### 📌 شرح پروژه: یک سیستمی پیاده سازی کنید که اسم اعضای یک تیم (مثلا تیم برنامه نویسی) بصورت جدول بندی شده در کنار هم قرار گرفته باشند. وظیفه های هر شخص را در زیر اسمش لیست شده باشد. 42 | مثلا اگر قرار است شخص "امین" قسمت فرانت اند پروژه رو انجام بده، زیر اسمش درج بشه "پیاده سازی فرانت اند" 43 | برای دریافت وظایف هر شخص از مدیر 2 تا اینپوت (یکی برای وظیفه و یکی برای اسم شخص) داشته و یک دکمه جهت اضافه کردن وظیفه داشته باشید. 44 | در نتیجه تسک مورد نظر رو به لیست تسک های شخص انتخاب شده (عضو تیم) Add کنین. 45 | 46 | ✅ نحوه پیاده سازی: روی دکمه مورد نظر یک رویداد onclick تعریف کرده و یک Event Handler برای آن تعیین کنید. داخل فانکشن value های اینپوت ها را دریافت کرده و یک Switch برای اینپوت اسم شخص پیاده سازی کرده و طبق اسمی که انتخاب شده، وظیفه اش رو به زیر خود آن شخص اضافه کنید(مثلا با appendChild) 47 | 48 | 📌 (علاوه بر روش توضیح داده شده سعی کنید به یک روش دلخواه دیگه هم توسعه بدید) 49 | -------------------------------------------------------------------------------- /Day 5/Beginner/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); 2 | 3 | * { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | font-family: "Poppins", sans-serif; 8 | transition: all 0.3s; 9 | } 10 | 11 | body { 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | flex-direction: column; 16 | min-height: 100vh; 17 | background-image: url("https://wallpaperaccess.com/full/1261770.jpg"); 18 | background-size: cover; 19 | background-repeat: no-repeat; 20 | background-position: center; 21 | } 22 | 23 | header { 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | width: 100%; 28 | display: flex; 29 | flex-direction: row; 30 | justify-content: space-evenly; 31 | align-items: center; 32 | height: 50px; 33 | background-color: #ddd; 34 | border-bottom: 1px solid #bbb; 35 | font-size: 24px; 36 | font-weight: 700; 37 | } 38 | 39 | .logo { 40 | color: rgb(161, 60, 255); 41 | } 42 | 43 | .myName { 44 | color: #333; 45 | font-size: 22px; 46 | font-family: "Pacifico", cursive; 47 | } 48 | 49 | img { 50 | max-width: 150px; 51 | clip-path: circle(); 52 | z-index: 2; 53 | } 54 | 55 | .img_con { 56 | position: relative; 57 | display: flex; 58 | align-items: center; 59 | justify-content: center; 60 | flex-direction: column; 61 | } 62 | 63 | .back { 64 | background-color: blueviolet; 65 | min-width: 130px; 66 | min-height: 130px; 67 | border-radius: 50%; 68 | position: absolute; 69 | left: 10%; 70 | bottom: 5px; 71 | z-index: 1; 72 | } 73 | 74 | .container { 75 | background-color: #fff; 76 | max-width: 600px; 77 | padding: 1.5rem; 78 | display: flex; 79 | height: 400px; 80 | flex-direction: column; 81 | align-items: center; 82 | justify-content: center; 83 | border-radius: 5px; 84 | } 85 | 86 | h4 { 87 | text-align: center; 88 | font-size: 22px; 89 | margin-top: 6px; 90 | letter-spacing: 2px; 91 | font-weight: 900; 92 | } 93 | 94 | span { 95 | font-size: 14px; 96 | opacity: 0.7; 97 | } 98 | 99 | p { 100 | text-align: center; 101 | } 102 | 103 | .pre, 104 | .next { 105 | outline: none; 106 | background: none; 107 | border: none; 108 | font-size: 40px; 109 | color: blueviolet; 110 | opacity: 0.7; 111 | transition: color 0.3s; 112 | cursor: pointer; 113 | } 114 | 115 | .pre:hover { 116 | color: #333; 117 | } 118 | 119 | .next:hover { 120 | color: #333; 121 | } 122 | 123 | .sup { 124 | outline: none; 125 | background: none; 126 | border-color: blueviolet; 127 | padding: 2px 8px; 128 | font-size: 16px; 129 | border-radius: 6px; 130 | color: blueviolet; 131 | transition: all 0.3; 132 | cursor: pointer; 133 | } 134 | 135 | .sup:hover { 136 | background-color: blueviolet; 137 | color: #fff; 138 | padding: 2px 32px; 139 | } 140 | -------------------------------------------------------------------------------- /Day 1/Mid/style.css: -------------------------------------------------------------------------------- 1 | /* style from codepen */ 2 | 3 | @import url("https://fonts.googleapis.com/css?family=Bitter:400,400i,700") * { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background: #667db6; /* fallback for old browsers */ 11 | background: linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6); 12 | } 13 | 14 | .main { 15 | width: 600px; 16 | margin: 8% auto auto auto; 17 | padding: 55px 55px; 18 | position: relative; 19 | border-radius: 7px; 20 | display: table; 21 | } 22 | 23 | .qoute-box { 24 | width: 600px; 25 | height: auto; 26 | border-radius: 4px; 27 | padding: 55px 55px; 28 | background-color: #c9d6ff; 29 | position: absolute; 30 | top: 55%; 31 | left: 5%; 32 | font-size: 1.7rem; 33 | background-color: -webkit-linear-gradient( 34 | to right, 35 | #e2e2e2, 36 | #c9d6ff 37 | ); /* Chrome 10-25, Safari 5.1-6 */ 38 | background-color: linear-gradient( 39 | to right, 40 | #e2e2e2, 41 | #c9d6ff 42 | ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 43 | -webkit-box-shadow: 10px 2px 21px 1px rgba(0, 0, 0, 0.26); 44 | -moz-box-shadow: 10px 2px 21px 1px rgba(0, 0, 0, 0.26); 45 | box-shadow: 10px 2px 21px 1px rgba(0, 0, 0, 0.26); 46 | color: #0f053b; 47 | font-family: Bitter; 48 | } 49 | 50 | .qoute-text { 51 | clear: both; 52 | height: auto; 53 | padding: 15px; 54 | font-size: 2.6rem; 55 | line-height: 2.8rem; 56 | } 57 | 58 | #text { 59 | font-size: 2.2rem; 60 | clear: both; 61 | } 62 | .qouter { 63 | height: auto; 64 | text-align: right; 65 | font-size: 1.1rem; 66 | padding: 25px; 67 | } 68 | 69 | .buttons { 70 | width: 550px; 71 | margin: auto; 72 | display: block; 73 | float: left; 74 | } 75 | 76 | .icn { 77 | color: #0082c8; 78 | font-size: 3rem; 79 | margin-left: 15px; 80 | } 81 | 82 | .icn:hover { 83 | color: #2cd174; 84 | text-decoration: none; 85 | } 86 | 87 | .btn { 88 | margin-top: 10px; 89 | -webkit-border-radius: 15; 90 | -moz-border-radius: 15; 91 | border-radius: 15px; 92 | font-family: Arial; 93 | color: #ffffff; 94 | font-size: 1rem; 95 | background: #0f053b; 96 | padding: 10px 20px 10px 20px; 97 | border: none; 98 | text-decoration: none; 99 | float: right; 100 | } 101 | 102 | .btn:hover { 103 | background: #2cd174; 104 | text-decoration: none; 105 | } 106 | 107 | @media (max-width: 575.98px) { 108 | .main { 109 | width: 350px; 110 | } 111 | .qoute-box { 112 | width: 300px; 113 | } 114 | 115 | .qoute-text { 116 | clear: both; 117 | height: auto; 118 | padding: 15px; 119 | font-size: 2rem; 120 | line-height: 2rem; 121 | } 122 | 123 | #text { 124 | font-size: 1.5rem; 125 | clear: both; 126 | } 127 | 128 | .qouter { 129 | height: auto; 130 | text-align: right; 131 | font-size: 2rem; 132 | padding: 25px; 133 | } 134 | 135 | .buttons { 136 | width: 210px; 137 | margin: auto; 138 | display: block; 139 | float: left; 140 | } 141 | 142 | .icn { 143 | font-size: 2.6rem; 144 | margin-left: 10px; 145 | } 146 | 147 | .btn { 148 | margin-top: 2px; 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /Day 3/Advance/script.js: -------------------------------------------------------------------------------- 1 | const $ = document; 2 | let clockInput = $.getElementsByClassName("top-left-time")[0], 3 | currentNumberInput = $.getElementsByClassName("currentNumber")[0], 4 | numKeys = $.getElementsByClassName("keys"), 5 | clearBtn = $.getElementById("clear"), 6 | saveBtn = $.getElementsByClassName("saveBtn")[0], 7 | nameModal = $.getElementsByClassName("nameModal")[0], 8 | closeBtn = $.getElementsByClassName("close")[0], 9 | keyContainer = $.getElementsByClassName("keyContainer")[0], 10 | numPad = $.getElementsByClassName("numPad")[0], 11 | sub = $.getElementById("sub"), 12 | userName = $.getElementById("userName"), 13 | contacts = $.getElementsByClassName("contacts")[0]; 14 | 15 | let date = new Date(), 16 | allContacts = []; 17 | 18 | setInterval(() => { 19 | clockInput.innerHTML = `${ 20 | date.getHours() < 9 ? "0" + date.getHours() : date.getHours() 21 | }:${date.getMinutes() < 9 ? "0" + date.getMinutes() : date.getMinutes()}`; 22 | }, 1000); 23 | 24 | [...numKeys].map((key) => { 25 | key.addEventListener("click", () => { 26 | currentNumberInput.innerHTML += key.innerHTML.replace(/\D/g, ""); 27 | }); 28 | }); 29 | 30 | clearBtn.addEventListener("click", () => { 31 | currentNumberInput.innerHTML = currentNumberInput.innerText.substring( 32 | 0, 33 | currentNumberInput.innerText.length - 1 34 | ); 35 | }); 36 | 37 | saveBtn.addEventListener("click", () => { 38 | nameModal.classList.toggle("active"); 39 | }); 40 | 41 | closeBtn.addEventListener("click", () => { 42 | keyContainer.classList.toggle("deactive"); 43 | numPad.classList.toggle("active"); 44 | }); 45 | 46 | numPad.addEventListener("click", () => { 47 | keyContainer.classList.remove("deactive"); 48 | numPad.classList.remove("active"); 49 | }); 50 | 51 | const createUser = (name, number) => { 52 | let temp = `
53 |
54 |
${name[0]}
60 | ${name} 61 |
62 |
65 | ${number} 66 | 70 |
71 |
`; 72 | contacts.innerHTML += temp; 73 | }; 74 | 75 | sub.addEventListener("click", () => { 76 | let fullName = userName.value; 77 | if (fullName !== "") { 78 | createUser(userName.value, currentNumberInput.innerText); 79 | } else { 80 | alert("please add a full name."); 81 | } 82 | allContacts != null && 83 | allContacts.push({ 84 | name: userName.value, 85 | number: currentNumberInput.innerText, 86 | }); 87 | localStorage.setItem("contacts", JSON.stringify(allContacts)); 88 | userName.value = ""; 89 | currentNumberInput.innerText = ""; 90 | nameModal.classList.remove("active"); 91 | }); 92 | 93 | window.onload = () => { 94 | let store = JSON.parse(localStorage.getItem("contacts")); 95 | console.log(store); 96 | if (store !== null) { 97 | allContacts = store; 98 | allContacts.map((contact) => createUser(contact.name, contact.number)); 99 | } 100 | }; 101 | -------------------------------------------------------------------------------- /Day 4/Mid/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Nabla&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | :root { 10 | --anime-word-duration: 5s; 11 | --hide-loader: none; 12 | } 13 | 14 | body { 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | flex-direction: column; 19 | width: 100%; 20 | height: 100vh; 21 | background: #111; 22 | overflow: hidden; 23 | color: #fff; 24 | } 25 | 26 | .section-loader { 27 | position: absolute; 28 | width: 100%; 29 | height: 100vh; 30 | top: 0; 31 | background: #111; 32 | display: flex; 33 | align-items: center; 34 | justify-content: center; 35 | transition: all 3s; 36 | font-family: "Nabla", cursive; 37 | z-index: -10; 38 | } 39 | 40 | .section__h2 { 41 | font-size: 6em; 42 | color: #fff; 43 | text-transform: uppercase; 44 | text-align: center; 45 | display: flex; 46 | } 47 | 48 | .section__span { 49 | font-family: "Nabla", cursive; 50 | } 51 | 52 | @keyframes word-anime { 53 | 0%, 54 | 100% { 55 | opacity: 1; 56 | filter: blur(0); 57 | transform: scale(1); 58 | } 59 | 50% { 60 | filter: blur(15px); 61 | opacity: 0; 62 | transform: scale(2); 63 | } 64 | } 65 | 66 | .section__span:nth-child(14n + 1) { 67 | animation: word-anime var(--anime-word-duration) infinite 0s; 68 | } 69 | 70 | .section__span:nth-child(14n + 2) { 71 | animation: word-anime var(--anime-word-duration) infinite 0.1s; 72 | } 73 | 74 | .section__span:nth-child(14n + 3) { 75 | animation: word-anime var(--anime-word-duration) infinite 0.2s; 76 | } 77 | 78 | .section__span:nth-child(14n + 4) { 79 | animation: word-anime var(--anime-word-duration) infinite 0.3s; 80 | } 81 | 82 | .section__span:nth-child(14n + 5) { 83 | animation: word-anime var(--anime-word-duration) infinite 0.4s; 84 | } 85 | 86 | .section__span:nth-child(14n + 6) { 87 | animation: word-anime var(--anime-word-duration) infinite 0.5s; 88 | } 89 | 90 | .section__span:nth-child(14n + 7) { 91 | animation: word-anime var(--anime-word-duration) infinite 0.6s; 92 | } 93 | 94 | .section__span:nth-child(14n + 8) { 95 | animation: word-anime var(--anime-word-duration) infinite 0.7s; 96 | } 97 | 98 | .section__span:nth-child(14n + 9) { 99 | animation: word-anime var(--anime-word-duration) infinite 0.8s; 100 | } 101 | 102 | .section__span:nth-child(14n + 10) { 103 | animation: word-anime var(--anime-word-duration) infinite 0.9s; 104 | } 105 | 106 | .section__span:nth-child(14n + 11) { 107 | animation: word-anime var(--anime-word-duration) infinite 1s; 108 | } 109 | 110 | .section__span:nth-child(14n + 12) { 111 | animation: word-anime var(--anime-word-duration) infinite 1.1s; 112 | } 113 | 114 | .section__span:nth-child(14n + 13) { 115 | animation: word-anime var(--anime-word-duration) infinite 1.2s; 116 | } 117 | 118 | .section__span:nth-child(14n + 14) { 119 | animation: word-anime var(--anime-word-duration) infinite 1.3s; 120 | } 121 | 122 | @media screen and (max-width: 992px) { 123 | .section__h2 { 124 | font-size: 5em; 125 | } 126 | } 127 | 128 | @media screen and (max-width: 768px) { 129 | .section__h2 { 130 | font-size: 4em; 131 | } 132 | } 133 | 134 | @media screen and (max-width: 576px) { 135 | .section__h2 { 136 | font-size: 3em; 137 | } 138 | } 139 | 140 | @media screen and (max-width: 468px) { 141 | .section__h2 { 142 | font-size: 2em; 143 | } 144 | } 145 | 146 | @media screen and (max-width: 300px) { 147 | .section__h2 { 148 | font-size: 1em; 149 | } 150 | } 151 | 152 | .drop { 153 | width: 100px; 154 | height: 100px; 155 | position: absolute; 156 | background-color: #160e0e; 157 | z-index: 1000; 158 | filter: drop-shadow(0 0 10px white); 159 | border-radius: 50%; 160 | z-index: 1000; 161 | animation: name duration timing-function delay iteration-count direction 162 | fill-mode; 163 | } 164 | 165 | @keyframes snow { 166 | 0% { 167 | top: -2rem; 168 | } 169 | 100% { 170 | top: 120%; 171 | } 172 | } 173 | -------------------------------------------------------------------------------- /Day 5/Mid/script.js: -------------------------------------------------------------------------------- 1 | // This project has not been debugged yet :( 2 | // I will debug in due course. 3 | 4 | const $ = document; 5 | let computer = $.getElementsByClassName("computer")[0], 6 | user = $.getElementsByClassName("user")[0], 7 | timer = $.getElementsByClassName("timer")[0], 8 | userSpeedRange = $.getElementById("user_speed_range"), 9 | compSpeedRange = $.getElementById("comp_speed_range"); 10 | 11 | let win = false, 12 | finish = false; 13 | 14 | let userXY = { x: 10, y: 10 }, 15 | computerXY = { x: 700, y: 200 }; 16 | 17 | let computerSpeed = 5, 18 | userSpeed = 10, 19 | time = 30; 20 | 21 | const random = (min, max) => Math.floor(Math.random() * (max - min)) + min; 22 | 23 | const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); 24 | 25 | userSpeedRange.addEventListener("change", (e) => { 26 | userSpeed = e.target.value; 27 | }); 28 | 29 | compSpeedRange.addEventListener("change", (e) => { 30 | computerSpeed = e.target.value; 31 | }); 32 | 33 | window.addEventListener("keydown", (e) => { 34 | if (!win && !finish) { 35 | switch (e.keyCode) { 36 | case 37: 37 | user.style.left = `${userXY.x - 1 * userSpeed}px`; 38 | userXY.x = userXY.x - 1 * userSpeed; 39 | break; 40 | case 38: 41 | user.style.top = `${userXY.y - 1 * userSpeed}px`; 42 | userXY.y = userXY.y - 1 * userSpeed; 43 | break; 44 | case 39: 45 | user.style.left = `${userXY.x + 1 * userSpeed}px`; 46 | userXY.x = userXY.x + 1 * userSpeed; 47 | break; 48 | case 40: 49 | user.style.top = `${userXY.y + 1 * userSpeed}px`; 50 | userXY.y = userXY.y + 1 * userSpeed; 51 | } 52 | } else { 53 | alert("you win the game!"); 54 | } 55 | // frameControl(userXY); 56 | }); 57 | 58 | const frameControl = (obj) => { 59 | if (obj.x <= 0) obj.x = 1550; 60 | if (obj.x >= 1551) obj.x = 0; 61 | if (obj.y <= 0) obj.y = 750; 62 | if (obj.y >= 751) obj.y = 0; 63 | }; 64 | 65 | const moveItem = (step, direction) => { 66 | let curStep = 0; 67 | // time = Math.floor(4000 / step); 68 | let intl = setInterval(() => { 69 | if (curStep >= step) return null; 70 | if (win && !finish) { 71 | win = true; 72 | finish = true; 73 | clearInterval(intl); 74 | return null; 75 | } 76 | winning(); 77 | // test(); 78 | switch (direction) { 79 | case 37: 80 | computer.style.left = `${computerXY.x - 1 * computerSpeed}px`; 81 | computerXY.x = computerXY.x - 1 * computerSpeed; 82 | break; 83 | case 38: 84 | computer.style.top = `${computerXY.y - 1 * computerSpeed}px`; 85 | computerXY.y = computerXY.y - 1 * computerSpeed; 86 | break; 87 | case 39: 88 | computer.style.left = `${computerXY.x + 1 * computerSpeed}px`; 89 | computerXY.x = computerXY.x + 1 * computerSpeed; 90 | break; 91 | case 40: 92 | computer.style.top = `${computerXY.y + 1 * computerSpeed}px`; 93 | computerXY.y = computerXY.y + 1 * computerSpeed; 94 | } 95 | curStep++; 96 | // frameControl(computerXY); 97 | }, 300); 98 | }; 99 | 100 | const ai = () => { 101 | // moveItem(random(100, 200), random(37, 40)); 102 | moveItem(50, random(37, 40)); 103 | }; 104 | 105 | const winning = () => { 106 | // let distance = Math.abs(computerXY.x + computerXY.y - (userXY.x + userXY.y)); 107 | let distance = 108 | Math.abs(computerXY.x - userXY.x) + Math.abs(computerXY.y - userXY.y); 109 | distance < 25 ? (win = true) : null; 110 | // console.log(distance); 111 | }; 112 | 113 | const timeFunc = () => { 114 | const intl = setInterval(() => { 115 | timer.innerText = `0:${time - 1}`; 116 | time--; 117 | if (time <= 0 || win) { 118 | clearInterval(intl); 119 | if (!win) { 120 | alert("Game over"); 121 | finish = true; 122 | } 123 | } 124 | }, 1000); 125 | }; 126 | 127 | window.onload = () => { 128 | timeFunc(); 129 | ai(); 130 | const intl = setInterval(() => { 131 | ai(); 132 | if (finish || win) clearInterval(intl); 133 | }, 3000); 134 | }; 135 | 136 | const test = () => { 137 | console.log( 138 | `computer: (${computerXY.x},${computerXY.y}) and user: (${userXY.x}, ${userXY.y})` 139 | ); 140 | }; 141 | -------------------------------------------------------------------------------- /Day 4/Advance/script.js: -------------------------------------------------------------------------------- 1 | const $ = document; 2 | const input = $.getElementById("input"), 3 | output = $.getElementById("result"), 4 | btn = $.getElementById("submit_btn"), 5 | ctrl = $.getElementsByClassName("ctrl"), 6 | head = $.getElementsByClassName("head")[0]; 7 | 8 | let list = [], 9 | type; 10 | 11 | const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); 12 | 13 | const setData = () => { 14 | output.innerText = ""; 15 | for (let i = 0; i < list.length; i++) output.innerText += ` ${list[i]},`; 16 | }; 17 | 18 | const swap = (xp, yp) => { 19 | let temp = list[xp]; 20 | list[xp] = list[yp]; 21 | list[yp] = temp; 22 | }; 23 | 24 | // const merge2Array = (arr, leftIndex, middleIndex, rightIndex) => { 25 | // let size1 = middleIndex - leftIndex + 1, 26 | // size2 = rightIndex - middleIndex; 27 | 28 | // let leftArray = new Array(size1), 29 | // rightArray = new Array(size2); 30 | 31 | // for (let i = 0; i < size1; i++) leftArray[i] = arr[leftIndex + i]; 32 | // for (let j = 0; j < size2; j++) rightArray[j] = arr[middleIndex + 1 + j]; 33 | // let i = 0, 34 | // j = 0, 35 | // k = leftIndex; 36 | 37 | // while (i < size1 && j < size2) { 38 | // if (leftArray[i] <= rightArray[j]) { 39 | // arr[k] = leftArray[i]; 40 | // i++; 41 | // } else { 42 | // arr[k] = rightArray[j]; 43 | // j++; 44 | // } 45 | // k++; 46 | // } 47 | 48 | // while (i < size1) { 49 | // arr[k] = leftArray[i]; 50 | // i++; 51 | // k++; 52 | // } 53 | // while (j < size2) { 54 | // arr[k] = rightArray[j]; 55 | // j++; 56 | // k++; 57 | // } 58 | // }; 59 | 60 | const bubbleSort = async () => { 61 | let i, j; 62 | for (i = 0; i < list.length; i++) { 63 | for (j = 0; j < list.length - i - 1; j++) { 64 | if (list[j] > list[j + 1]) { 65 | swap(j, j + 1); 66 | await sleep(100); 67 | } 68 | setData(); 69 | } 70 | } 71 | output.innerText = output.innerText.substring(0, output.innerText.length - 1); 72 | }; 73 | 74 | const selectionSort = async () => { 75 | let i, j, min; 76 | for (i = 0; i < list.length - 1; i++) { 77 | min = i; 78 | for (j = i + 1; j < list.length; j++) if (list[j] < list[min]) min = j; 79 | swap(min, i); 80 | await sleep(100); 81 | setData(); 82 | } 83 | output.innerText = output.innerText.substring(0, output.innerText.length - 1); 84 | }; 85 | 86 | const insertionSort = async () => { 87 | let i, element, j; 88 | for (i = 1; i < list.length; i++) { 89 | element = list[i]; 90 | j = i - 1; 91 | while (j >= 0 && list[j] > element) { 92 | list[j + 1] = list[j]; 93 | j = j - 1; 94 | await sleep(100); 95 | setData(); 96 | } 97 | list[j + 1] = element; 98 | } 99 | output.innerText = output.innerText.substring(0, output.innerText.length - 1); 100 | }; 101 | 102 | // const quickSort = async (arr) => { 103 | // let pivot = arr[0], 104 | // left = [], 105 | // right = []; 106 | // let i; 107 | // for (i = 1; i < arr.length; i++) 108 | // list[i] < pivot ? left.push(arr[i]) : right.push(arr[i]); 109 | // await sleep(100); 110 | // setData(); 111 | // return quickSort(left).concat(pivot, quickSort(right)); 112 | // }; 113 | 114 | // const mergeSort = async (arr, leftIndex, rightIndex) => { 115 | // if (leftIndex >= rightIndex) return; 116 | 117 | // let middleIndex = leftIndex + parseInt((rightIndex - leftIndex) / 2); 118 | // mergeSort(arr, leftIndex, middleIndex); 119 | // mergeSort(arr, middleIndex + 1, rightIndex); 120 | // merge2Array(arr, leftIndex, middleIndex, rightIndex); 121 | // await sleep(100); 122 | // setData(); 123 | // }; 124 | 125 | btn.addEventListener("click", () => { 126 | let data, i; 127 | if (input.value !== "") { 128 | data = input.value.split(","); 129 | for (i = 0; i < data.length; i++) list.push(Number(data[i])); 130 | switch (type) { 131 | case "Bubble": 132 | bubbleSort(); 133 | break; 134 | case "Selection": 135 | selectionSort(); 136 | break; 137 | case "Insertion": 138 | insertionSort(); 139 | break; 140 | default: 141 | bubbleSort(); 142 | } 143 | } else { 144 | alert("please enter your on ordered list."); 145 | } 146 | }); 147 | 148 | [...ctrl].map((btn) => { 149 | btn.addEventListener("click", (e) => { 150 | [...ctrl].map((b) => b.children[0].classList.remove("active")); 151 | e.target.classList.add("active"); 152 | head.innerText = `${e.target.innerText} Sort`; 153 | type = e.target.innerText; 154 | }); 155 | }); 156 | -------------------------------------------------------------------------------- /Day 4/Beginner/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500&display=swap"); 2 | 3 | :root { 4 | --primary-light: #8abdff; 5 | --primary: #6d5dfc; 6 | --primary-dark: #5b0eeb; 7 | --white: #ffffff; 8 | --greyLight-1: #e4ebf5; 9 | --greyLight-2: #c8d0e7; 10 | --greyLight-3: #bec8e4; 11 | --greyDark: #9baacf; 12 | } 13 | 14 | *, 15 | *::before, 16 | *::after { 17 | margin: 0; 18 | padding: 0; 19 | box-sizing: inherit; 20 | } 21 | 22 | html { 23 | box-sizing: border-box; 24 | font-size: 62.5%; 25 | background: var(--greyLight-1); 26 | } 27 | @media screen and (min-width: 900px) { 28 | html { 29 | font-size: 75%; 30 | } 31 | } 32 | 33 | .container { 34 | min-height: 100vh; 35 | display: flex; 36 | justify-content: center; 37 | align-items: center; 38 | font-family: "Poppins", sans-serif; 39 | background: var(--greyLight-1); 40 | } 41 | 42 | .components { 43 | width: 75rem; 44 | height: 40rem; 45 | border-radius: 3rem; 46 | box-shadow: 0.8rem 0.8rem 1.4rem var(--greyLight-2), 47 | -0.2rem -0.2rem 1.8rem var(--white); 48 | padding: 4rem; 49 | display: flex; 50 | flex-direction: column; 51 | justify-content: center; 52 | align-items: center; 53 | } 54 | 55 | /* BUTTONS */ 56 | .btn { 57 | margin: 2rem; 58 | width: 15rem; 59 | height: 4rem; 60 | border-radius: 1rem; 61 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), 62 | -0.2rem -0.2rem 0.5rem var(--white); 63 | justify-self: center; 64 | display: flex; 65 | align-items: center; 66 | justify-content: center; 67 | cursor: pointer; 68 | transition: 0.3s ease; 69 | } 70 | .btn__primary { 71 | background: var(--primary); 72 | box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-light), 73 | inset -0.2rem -0.2rem 1rem var(--primary-dark), 74 | 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); 75 | color: var(--greyLight-1); 76 | } 77 | .btn__primary:hover { 78 | color: var(--white); 79 | } 80 | .btn__primary:active { 81 | box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-dark), 82 | inset -0.2rem -0.2rem 1rem var(--primary-light); 83 | } 84 | .btn p { 85 | font-size: 1.6rem; 86 | } 87 | 88 | /* CHIP */ 89 | .chip { 90 | margin: 2rem; 91 | width: 25rem; 92 | height: 5rem; 93 | border-radius: 1rem; 94 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), 95 | -0.2rem -0.2rem 0.5rem var(--white); 96 | display: flex; 97 | justify-content: center; 98 | align-items: center; 99 | } 100 | 101 | .chip p { 102 | font-size: 1.5rem; 103 | color: var(--greyDark); 104 | } 105 | 106 | /* FORM */ 107 | .form__input { 108 | margin: 2rem; 109 | width: 10rem; 110 | height: 4rem; 111 | border: none; 112 | border-radius: 1rem; 113 | font-size: 1.5rem; 114 | text-align: center; 115 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), 116 | inset -0.2rem -0.2rem 0.5rem var(--white); 117 | background: none; 118 | font-family: inherit; 119 | color: var(--greyDark); 120 | } 121 | .form__input::-moz-placeholder { 122 | color: var(--greyLight-3); 123 | } 124 | .form__input:-ms-input-placeholder { 125 | color: var(--greyLight-3); 126 | } 127 | .form__input::placeholder { 128 | color: var(--greyLight-3); 129 | } 130 | .form__input:focus { 131 | outline: none; 132 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), 133 | -0.2rem -0.2rem 0.5rem var(--white); 134 | } 135 | 136 | /* ICONS */ 137 | .icon__account, 138 | .icon__home, 139 | .icon__settings { 140 | margin: 1rem; 141 | width: 4rem; 142 | height: 4rem; 143 | border-radius: 50%; 144 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), 145 | -0.2rem -0.2rem 0.5rem var(--white); 146 | display: flex; 147 | justify-content: center; 148 | align-items: center; 149 | font-size: 2rem; 150 | cursor: pointer; 151 | color: var(--greyDark); 152 | transition: all 0.5s ease; 153 | } 154 | .icon__account:active, 155 | .icon__home:active, 156 | .icon__settings:active { 157 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), 158 | inset -0.2rem -0.2rem 0.5rem var(--white); 159 | color: var(--primary); 160 | } 161 | .icon__account:hover, 162 | .icon__home:hover, 163 | .icon__settings:hover { 164 | color: var(--primary); 165 | } 166 | 167 | .github { 168 | position: fixed; 169 | font-size: 2.6rem; 170 | right: 2rem; 171 | bottom: 1rem; 172 | color: #ea4c89; 173 | } 174 | 175 | button { 176 | border: none; 177 | background: none; 178 | } 179 | 180 | .captcha { 181 | display: flex; 182 | align-items: center; 183 | } 184 | 185 | h2 { 186 | color: var(--primary-dark); 187 | font-family: "Noto Sans", sans-serif; 188 | font-size: 2rem; 189 | opacity: 0.9; 190 | margin-bottom: 3rem; 191 | } 192 | 193 | #alert { 194 | position: absolute; 195 | font-size: 1.3rem; 196 | font-family: "Noto Sans", sans-serif; 197 | background-color: var(--primary); 198 | width: 200px; 199 | height: 50px; 200 | border-radius: 6px; 201 | margin: 1rem; 202 | display: flex; 203 | align-items: center; 204 | justify-content: center; 205 | color: #fff; 206 | } 207 | -------------------------------------------------------------------------------- /Day 3/Beginner/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500&display=swap"); 2 | 3 | :root { 4 | --primary-light: #8abdff; 5 | --primary: #6d5dfc; 6 | --primary-dark: #5b0eeb; 7 | --white: #ffffff; 8 | --greyLight-1: #e4ebf5; 9 | --greyLight-2: #c8d0e7; 10 | --greyLight-3: #bec8e4; 11 | --greyDark: #9baacf; 12 | } 13 | 14 | *, 15 | *::before, 16 | *::after { 17 | margin: 0; 18 | padding: 0; 19 | box-sizing: inherit; 20 | } 21 | 22 | html { 23 | box-sizing: border-box; 24 | font-size: 62.5%; 25 | background: var(--greyLight-1); 26 | } 27 | @media screen and (min-width: 900px) { 28 | html { 29 | font-size: 75%; 30 | } 31 | } 32 | 33 | .container { 34 | min-height: 100vh; 35 | display: flex; 36 | justify-content: center; 37 | align-items: center; 38 | font-family: "Poppins", sans-serif; 39 | background: var(--greyLight-1); 40 | } 41 | 42 | .components { 43 | width: 75rem; 44 | height: 40rem; 45 | border-radius: 3rem; 46 | box-shadow: 0.8rem 0.8rem 1.4rem var(--greyLight-2), 47 | -0.2rem -0.2rem 1.8rem var(--white); 48 | padding: 4rem; 49 | display: flex; 50 | flex-direction: column; 51 | justify-content: center; 52 | align-items: center; 53 | } 54 | 55 | /* BUTTONS */ 56 | .btn { 57 | margin: 2rem; 58 | width: 15rem; 59 | height: 4rem; 60 | border-radius: 1rem; 61 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), 62 | -0.2rem -0.2rem 0.5rem var(--white); 63 | justify-self: center; 64 | display: flex; 65 | align-items: center; 66 | justify-content: center; 67 | cursor: pointer; 68 | transition: 0.3s ease; 69 | } 70 | .btn__primary { 71 | background: var(--primary); 72 | box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-light), 73 | inset -0.2rem -0.2rem 1rem var(--primary-dark), 74 | 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); 75 | color: var(--greyLight-1); 76 | } 77 | .btn__primary:hover { 78 | color: var(--white); 79 | } 80 | .btn__primary:active { 81 | box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-dark), 82 | inset -0.2rem -0.2rem 1rem var(--primary-light); 83 | } 84 | .btn p { 85 | font-size: 1.6rem; 86 | } 87 | 88 | /* CHIP */ 89 | .chip { 90 | margin: 2rem; 91 | justify-self: center; 92 | width: 15rem; 93 | height: 5rem; 94 | border-radius: 1rem; 95 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), 96 | -0.2rem -0.2rem 0.5rem var(--white); 97 | display: flex; 98 | justify-content: center; 99 | align-items: center; 100 | } 101 | 102 | .chip p { 103 | font-size: 1.8rem; 104 | color: var(--greyDark); 105 | } 106 | 107 | /* FORM */ 108 | .form__input { 109 | margin: 2rem; 110 | width: 10rem; 111 | height: 4rem; 112 | border: none; 113 | border-radius: 1rem; 114 | font-size: 1.5rem; 115 | text-align: center; 116 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), 117 | inset -0.2rem -0.2rem 0.5rem var(--white); 118 | background: none; 119 | font-family: inherit; 120 | color: var(--greyDark); 121 | } 122 | .form__input::-moz-placeholder { 123 | color: var(--greyLight-3); 124 | } 125 | .form__input:-ms-input-placeholder { 126 | color: var(--greyLight-3); 127 | } 128 | .form__input::placeholder { 129 | color: var(--greyLight-3); 130 | } 131 | .form__input:focus { 132 | outline: none; 133 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), 134 | -0.2rem -0.2rem 0.5rem var(--white); 135 | } 136 | 137 | /* ICONS */ 138 | .icon__account, 139 | .icon__home, 140 | .icon__settings { 141 | margin: 1rem; 142 | width: 4rem; 143 | height: 4rem; 144 | border-radius: 50%; 145 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), 146 | -0.2rem -0.2rem 0.5rem var(--white); 147 | display: flex; 148 | justify-content: center; 149 | align-items: center; 150 | font-size: 2rem; 151 | cursor: pointer; 152 | color: var(--greyDark); 153 | transition: all 0.5s ease; 154 | } 155 | .icon__account:active, 156 | .icon__home:active, 157 | .icon__settings:active { 158 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), 159 | inset -0.2rem -0.2rem 0.5rem var(--white); 160 | color: var(--primary); 161 | } 162 | .icon__account:hover, 163 | .icon__home:hover, 164 | .icon__settings:hover { 165 | color: var(--primary); 166 | } 167 | 168 | .github { 169 | position: fixed; 170 | font-size: 2.6rem; 171 | right: 2rem; 172 | bottom: 1rem; 173 | color: #ea4c89; 174 | } 175 | 176 | button { 177 | border: none; 178 | background: none; 179 | } 180 | 181 | .captcha { 182 | display: flex; 183 | align-items: center; 184 | } 185 | 186 | h2 { 187 | color: var(--primary-dark); 188 | font-family: "Noto Sans", sans-serif; 189 | font-size: 2rem; 190 | opacity: 0.9; 191 | margin-bottom: 3rem; 192 | } 193 | 194 | #alert { 195 | position: absolute; 196 | font-size: 1.3rem; 197 | font-family: "Noto Sans", sans-serif; 198 | background-color: var(--primary); 199 | width: 200px; 200 | height: 50px; 201 | border-radius: 6px; 202 | margin: 1rem; 203 | display: flex; 204 | align-items: center; 205 | justify-content: center; 206 | color: #fff; 207 | } 208 | -------------------------------------------------------------------------------- /Day 2/Mid/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-light: #8abdff; 3 | --primary: #6d5dfc; 4 | --primary-dark: #5b0eeb; 5 | --white: #ffffff; 6 | --greyLight-1: #e4ebf5; 7 | --greyLight-2: #c8d0e7; 8 | --greyLight-3: #bec8e4; 9 | --greyDark: #9baacf; 10 | } 11 | 12 | *, 13 | *::before, 14 | *::after { 15 | margin: 0; 16 | padding: 0; 17 | box-sizing: inherit; 18 | } 19 | 20 | html { 21 | box-sizing: border-box; 22 | font-size: 62.5%; 23 | background: var(--greyLight-1); 24 | } 25 | @media screen and (min-width: 900px) { 26 | html { 27 | font-size: 75%; 28 | } 29 | } 30 | 31 | .container { 32 | min-height: 100vh; 33 | display: flex; 34 | justify-content: center; 35 | align-items: center; 36 | font-family: "Poppins", sans-serif; 37 | background: var(--greyLight-1); 38 | } 39 | 40 | .components { 41 | width: 75rem; 42 | height: 40rem; 43 | border-radius: 3rem; 44 | box-shadow: 0.8rem 0.8rem 1.4rem var(--greyLight-2), 45 | -0.2rem -0.2rem 1.8rem var(--white); 46 | padding: 4rem; 47 | display: flex; 48 | flex-direction: column; 49 | justify-content: center; 50 | align-items: center; 51 | } 52 | 53 | /* BUTTONS */ 54 | .btn { 55 | margin: 2rem; 56 | width: 15rem; 57 | height: 4rem; 58 | border-radius: 1rem; 59 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), 60 | -0.2rem -0.2rem 0.5rem var(--white); 61 | justify-self: center; 62 | display: flex; 63 | align-items: center; 64 | justify-content: center; 65 | cursor: pointer; 66 | transition: 0.3s ease; 67 | } 68 | .btn__primary { 69 | background: var(--primary); 70 | box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-light), 71 | inset -0.2rem -0.2rem 1rem var(--primary-dark), 72 | 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); 73 | color: var(--greyLight-1); 74 | } 75 | .btn__primary:hover { 76 | color: var(--white); 77 | } 78 | .btn__primary:active { 79 | box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-dark), 80 | inset -0.2rem -0.2rem 1rem var(--primary-light); 81 | } 82 | .btn p { 83 | font-size: 1.6rem; 84 | } 85 | 86 | /* CHIP */ 87 | .chip { 88 | margin: 2rem; 89 | justify-self: center; 90 | width: 17rem; 91 | height: 4rem; 92 | border-radius: 1rem; 93 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), 94 | -0.2rem -0.2rem 0.5rem var(--white); 95 | display: flex; 96 | justify-content: space-between; 97 | align-items: center; 98 | } 99 | .chip__icon { 100 | width: 3rem; 101 | height: 3rem; 102 | border-radius: 1rem; 103 | margin: 0 0 0 0.2rem; 104 | display: flex; 105 | justify-content: center; 106 | align-items: center; 107 | font-size: 1.8rem; 108 | color: var(--primary); 109 | } 110 | .chip p { 111 | font-size: 1.2rem; 112 | color: var(--greyDark); 113 | } 114 | .chip__close { 115 | width: 1.6rem; 116 | height: 1.6rem; 117 | margin: 0 0.5rem; 118 | display: flex; 119 | font-size: 1.6rem; 120 | color: var(--greyLight-3); 121 | cursor: pointer; 122 | } 123 | 124 | /* FORM */ 125 | .form__input { 126 | margin: 2rem; 127 | width: 20rem; 128 | height: 4rem; 129 | border: none; 130 | border-radius: 1rem; 131 | font-size: 2rem; 132 | text-align: center; 133 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), 134 | inset -0.2rem -0.2rem 0.5rem var(--white); 135 | background: none; 136 | font-family: inherit; 137 | color: var(--greyDark); 138 | } 139 | .form__input::-moz-placeholder { 140 | color: var(--greyLight-3); 141 | } 142 | .form__input:-ms-input-placeholder { 143 | color: var(--greyLight-3); 144 | } 145 | .form__input::placeholder { 146 | color: var(--greyLight-3); 147 | } 148 | .form__input:focus { 149 | outline: none; 150 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), 151 | -0.2rem -0.2rem 0.5rem var(--white); 152 | } 153 | 154 | /* ICONS */ 155 | .icon { 156 | display: flex; 157 | justify-content: space-between; 158 | } 159 | .icon__account, 160 | .icon__home, 161 | .icon__settings { 162 | margin: 1rem; 163 | width: 4rem; 164 | height: 4rem; 165 | border-radius: 50%; 166 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), 167 | -0.2rem -0.2rem 0.5rem var(--white); 168 | display: flex; 169 | justify-content: center; 170 | align-items: center; 171 | font-size: 2rem; 172 | cursor: pointer; 173 | color: var(--greyDark); 174 | transition: all 0.5s ease; 175 | } 176 | .icon__account:active, 177 | .icon__home:active, 178 | .icon__settings:active { 179 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), 180 | inset -0.2rem -0.2rem 0.5rem var(--white); 181 | color: var(--primary); 182 | } 183 | .icon__account:hover, 184 | .icon__home:hover, 185 | .icon__settings:hover { 186 | color: var(--primary); 187 | } 188 | 189 | .github { 190 | position: fixed; 191 | font-size: 2.6rem; 192 | right: 2rem; 193 | bottom: 1rem; 194 | color: #ea4c89; 195 | } 196 | 197 | button { 198 | border: none; 199 | background: none; 200 | } 201 | 202 | #alert { 203 | background-color: rgb(255, 26, 26); 204 | color: #ffffff; 205 | } 206 | 207 | .alert_true { 208 | background-color: rgb(15, 195, 15) !important; 209 | } 210 | -------------------------------------------------------------------------------- /Day 4/Advance/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500&display=swap"); 2 | 3 | :root { 4 | --primary-light: #8abdff; 5 | --primary: #6d5dfc; 6 | --primary-dark: #5b0eeb; 7 | --white: #ffffff; 8 | --greyLight-1: #e4ebf5; 9 | --greyLight-2: #c8d0e7; 10 | --greyLight-3: #bec8e4; 11 | --greyDark: #9baacf; 12 | } 13 | 14 | *, 15 | *::before, 16 | *::after { 17 | margin: 0; 18 | padding: 0; 19 | box-sizing: inherit; 20 | } 21 | 22 | html { 23 | box-sizing: border-box; 24 | font-size: 62.5%; 25 | background: var(--greyLight-1); 26 | } 27 | @media screen and (min-width: 900px) { 28 | html { 29 | font-size: 75%; 30 | } 31 | } 32 | 33 | .container { 34 | min-height: 100vh; 35 | display: flex; 36 | justify-content: center; 37 | align-items: center; 38 | font-family: "Poppins", sans-serif; 39 | background: var(--greyLight-1); 40 | } 41 | 42 | .components { 43 | width: 75rem; 44 | height: 40rem; 45 | border-radius: 3rem; 46 | box-shadow: 0.8rem 0.8rem 1.4rem var(--greyLight-2), 47 | -0.2rem -0.2rem 1.8rem var(--white); 48 | padding: 4rem; 49 | display: flex; 50 | flex-direction: column; 51 | justify-content: center; 52 | align-items: center; 53 | } 54 | 55 | /* BUTTONS */ 56 | .btn { 57 | margin: 2rem; 58 | width: 15rem; 59 | height: 4rem; 60 | border-radius: 1rem; 61 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), 62 | -0.2rem -0.2rem 0.5rem var(--white); 63 | justify-self: center; 64 | display: flex; 65 | align-items: center; 66 | justify-content: center; 67 | cursor: pointer; 68 | transition: 0.3s ease; 69 | } 70 | .btn__primary { 71 | background: var(--primary); 72 | box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-light), 73 | inset -0.2rem -0.2rem 1rem var(--primary-dark), 74 | 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white); 75 | color: var(--greyLight-1); 76 | } 77 | .btn__primary:hover { 78 | color: var(--white); 79 | } 80 | .btn__primary:active { 81 | box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-dark), 82 | inset -0.2rem -0.2rem 1rem var(--primary-light); 83 | } 84 | .btn p { 85 | font-size: 1.6rem; 86 | } 87 | 88 | /* CHIP */ 89 | .chip { 90 | margin: 2rem; 91 | width: 50rem; 92 | height: 5rem; 93 | border-radius: 1rem; 94 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), 95 | -0.2rem -0.2rem 0.5rem var(--white); 96 | display: flex; 97 | justify-content: center; 98 | align-items: center; 99 | } 100 | 101 | .chip p { 102 | font-size: 1.5rem; 103 | color: var(--greyDark); 104 | } 105 | 106 | /* FORM */ 107 | .form__input { 108 | margin: 0 2rem; 109 | width: 50rem; 110 | height: 4rem; 111 | border: none; 112 | border-radius: 1rem; 113 | font-size: 1.5rem; 114 | text-align: center; 115 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), 116 | inset -0.2rem -0.2rem 0.5rem var(--white); 117 | background: none; 118 | font-family: inherit; 119 | color: var(--greyDark); 120 | } 121 | .form__input::-moz-placeholder { 122 | color: var(--greyLight-3); 123 | } 124 | .form__input:-ms-input-placeholder { 125 | color: var(--greyLight-3); 126 | } 127 | .form__input::placeholder { 128 | color: var(--greyLight-3); 129 | } 130 | .form__input:focus { 131 | outline: none; 132 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), 133 | -0.2rem -0.2rem 0.5rem var(--white); 134 | } 135 | 136 | /* ICONS */ 137 | .icon__account, 138 | .icon__home, 139 | .icon__settings { 140 | margin: 1rem; 141 | width: 4rem; 142 | height: 4rem; 143 | border-radius: 50%; 144 | box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), 145 | -0.2rem -0.2rem 0.5rem var(--white); 146 | display: flex; 147 | justify-content: center; 148 | align-items: center; 149 | font-size: 2rem; 150 | cursor: pointer; 151 | color: var(--greyDark); 152 | transition: all 0.5s ease; 153 | } 154 | .icon__account:active, 155 | .icon__home:active, 156 | .icon__settings:active { 157 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), 158 | inset -0.2rem -0.2rem 0.5rem var(--white); 159 | color: var(--primary); 160 | } 161 | .icon__account:hover, 162 | .icon__home:hover, 163 | .icon__settings:hover { 164 | color: var(--primary); 165 | } 166 | 167 | .github { 168 | position: fixed; 169 | font-size: 2.6rem; 170 | right: 2rem; 171 | bottom: 1rem; 172 | color: #ea4c89; 173 | } 174 | 175 | button { 176 | border: none; 177 | background: none; 178 | } 179 | 180 | .captcha { 181 | display: flex; 182 | align-items: center; 183 | } 184 | 185 | h2 { 186 | color: var(--primary-dark); 187 | font-family: "Noto Sans", sans-serif; 188 | font-size: 2rem; 189 | opacity: 0.9; 190 | margin-bottom: 3rem; 191 | } 192 | 193 | #alert { 194 | position: absolute; 195 | font-size: 1.3rem; 196 | font-family: "Noto Sans", sans-serif; 197 | background-color: var(--primary); 198 | width: 200px; 199 | height: 50px; 200 | border-radius: 6px; 201 | margin: 1rem; 202 | display: flex; 203 | align-items: center; 204 | justify-content: center; 205 | color: #fff; 206 | } 207 | 208 | .controll { 209 | display: flex; 210 | align-items: center; 211 | justify-content: center; 212 | } 213 | 214 | .ch2 { 215 | width: 8rem; 216 | cursor: pointer; 217 | } 218 | 219 | .ch2 p { 220 | transition: all 0.3s; 221 | } 222 | 223 | .ch2:hover p { 224 | color: var(--primary); 225 | } 226 | 227 | .ch2:active { 228 | box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), 229 | inset -0.2rem -0.2rem 0.5rem var(--white); 230 | color: var(--primary); 231 | } 232 | 233 | .active p { 234 | color: var(--primary); 235 | } 236 | -------------------------------------------------------------------------------- /Day 3/Advance/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | min-height: 100vh; 14 | overflow: hidden; 15 | background-color: #d9d9d9; 16 | font-family: "Roboto", sans-serif; 17 | user-select: none; 18 | } 19 | 20 | .phoneBook { 21 | background-color: #fff; 22 | width: 380px; 23 | height: 650px; 24 | position: relative; 25 | } 26 | 27 | .header-top { 28 | max-width: 100%; 29 | padding: 17px 25px; 30 | display: flex; 31 | justify-content: space-between; 32 | z-index: 20; 33 | } 34 | .header-top-dial { 35 | position: absolute; 36 | width: 100%; 37 | top: -1px; 38 | } 39 | 40 | .top-left-time { 41 | font-size: 18px; 42 | } 43 | 44 | .top-left-weather { 45 | font-size: 14px; 46 | } 47 | .header-top-left span { 48 | margin: 0 1px; 49 | } 50 | .top-right-alarm { 51 | font-size: 14px; 52 | } 53 | .top-right-data_signal { 54 | font-size: 14px; 55 | } 56 | .header-top-right { 57 | align-items: center; 58 | display: flex; 59 | } 60 | .header-top-right span { 61 | margin: 0 2px; 62 | } 63 | 64 | .top-right-battery { 65 | font-weight: bold; 66 | font-size: 12px; 67 | border: 1px solid #000; 68 | border-radius: 3px; 69 | padding: 0 4px; 70 | } 71 | 72 | .contacts { 73 | width: 100%; 74 | height: 90%; 75 | /* background-color: cadetblue; */ 76 | overflow-y: auto; 77 | } 78 | 79 | .headh { 80 | display: flex; 81 | align-items: center; 82 | justify-content: center; 83 | margin-bottom: 1rem; 84 | } 85 | 86 | h3 { 87 | margin-top: 1rem; 88 | border-bottom: 2px solid blue; 89 | padding-bottom: 2px; 90 | display: inline; 91 | } 92 | 93 | .box { 94 | /* background-color: burlywood; */ 95 | padding: 0 1rem; 96 | display: flex; 97 | justify-content: space-between; 98 | align-items: center; 99 | height: 60px; 100 | transition: all 0.4s; 101 | cursor: pointer; 102 | } 103 | 104 | .box:hover { 105 | background-color: #ebebeb; 106 | } 107 | 108 | .img { 109 | background-color: yellowgreen; 110 | width: 40px; 111 | height: 40px; 112 | border-radius: 8px; 113 | margin-right: 8px; 114 | display: flex; 115 | align-items: center; 116 | justify-content: center; 117 | } 118 | 119 | .name { 120 | font-weight: 500; 121 | } 122 | 123 | .number { 124 | font-size: 14px; 125 | margin-right: 8px; 126 | } 127 | 128 | .keyContainer { 129 | width: 100%; 130 | height: 400px; 131 | background-color: #fff; 132 | position: absolute; 133 | bottom: 0; 134 | transition: all 0.5s; 135 | overflow: hidden; 136 | /* height: 20px; */ 137 | } 138 | 139 | .keyContainer.deactive { 140 | height: 20px; 141 | } 142 | 143 | .numKey { 144 | display: grid; 145 | grid-template-columns: 1fr 1fr 1fr; 146 | } 147 | 148 | .close { 149 | text-align: center; 150 | background-color: #ebebeb; 151 | cursor: pointer; 152 | height: 20px; 153 | } 154 | 155 | .currentNumber { 156 | width: 100%; 157 | height: 60px; 158 | display: flex; 159 | align-items: center; 160 | justify-content: center; 161 | font-size: 30px; 162 | } 163 | 164 | .keys { 165 | display: flex; 166 | flex-direction: column; 167 | align-items: center; 168 | justify-content: center; 169 | font-size: 2rem; 170 | padding: 0.4rem; 171 | cursor: pointer; 172 | transition: all 0.3s; 173 | } 174 | 175 | .more { 176 | font-size: 11px; 177 | opacity: 0.6; 178 | } 179 | 180 | .keys:hover { 181 | background-color: #ebebeb; 182 | } 183 | 184 | .submits { 185 | margin-top: 1rem; 186 | display: flex; 187 | align-items: center; 188 | justify-content: space-evenly; 189 | } 190 | 191 | .iKey { 192 | display: flex; 193 | align-items: center; 194 | justify-content: center; 195 | cursor: pointer; 196 | } 197 | 198 | .submit, 199 | .nameModal button { 200 | background-color: rgb(4, 170, 4); 201 | width: 100px; 202 | display: flex; 203 | align-items: center; 204 | justify-content: center; 205 | padding: 8px; 206 | border-radius: 30px; 207 | transition: all 0.3s; 208 | } 209 | 210 | .submit:active { 211 | background-color: rgb(0, 82, 0); 212 | } 213 | 214 | .nameModal { 215 | padding: 2.5rem; 216 | width: 300px; 217 | height: 200px; 218 | position: absolute; 219 | top: 50%; 220 | left: 50%; 221 | transform: translate(-50%, -50%); 222 | background-color: #ebebeb; 223 | display: flex; 224 | align-items: center; 225 | justify-content: center; 226 | flex-direction: column; 227 | transition: all 0.3s; 228 | display: none; 229 | } 230 | 231 | .nameModal.active { 232 | display: block; 233 | display: flex; 234 | align-items: center; 235 | justify-content: center; 236 | } 237 | 238 | .nameModal h4 { 239 | margin-bottom: 2rem; 240 | } 241 | 242 | .nameModal input { 243 | border: none; 244 | outline: none; 245 | padding: 4px 12px; 246 | font-size: 1rem; 247 | margin-bottom: 1rem; 248 | } 249 | 250 | .nameModal button { 251 | border: none; 252 | border-radius: 4px; 253 | font-size: 17px; 254 | color: #fff; 255 | cursor: pointer; 256 | } 257 | 258 | .numPad { 259 | position: absolute; 260 | bottom: 2rem; 261 | left: 50%; 262 | transform: translate(-50%, -50%); 263 | width: 50px; 264 | height: 50px; 265 | background-color: rgb(4, 170, 4); 266 | border-radius: 50%; 267 | transition: all 0.5s; 268 | cursor: pointer; 269 | display: none; 270 | } 271 | 272 | .numPad:active { 273 | background-color: rgb(0, 82, 0); 274 | } 275 | 276 | .numPad.active { 277 | display: block; 278 | display: flex; 279 | align-items: center; 280 | justify-content: center; 281 | } 282 | -------------------------------------------------------------------------------- /Day 3/Advance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Advance 9 | 10 | 11 |
12 |
13 |
14 |
15 | 17:15 16 | -12° 17 | ♠ 18 |
19 |
20 | ♮ 21 | ⛣ 22 | ⛕ 23 | 57 24 |
25 |
26 |
27 |
28 |

Contacts

29 |
30 |
31 |
32 |
33 |
EH
34 | Ehsan Shahbazi 35 |
36 |
39 | 0990****484 40 | 44 |
45 |
46 |
47 |
48 |
=
49 |
50 |
51 |
52 | 1 53 |
Z
54 |
55 |
56 | 2 57 |
ABC
58 |
59 |
60 | 3 61 |
DEF
62 |
63 |
64 | 4 65 |
GHI
66 |
67 |
68 | 5 69 |
JKL
70 |
71 |
72 | 6 73 |
MNO
74 |
75 |
76 | 7 77 |
PQR
78 |
79 |
80 | 8 81 |
STU
82 |
83 |
84 | 9 85 |
WXY
86 |
87 |
*
88 |
0
89 |
#
90 |
91 |
92 |
93 | 97 |
98 |
99 | 103 |
104 |
105 | 110 |
111 |
112 |
113 |
114 | 117 |
118 |
119 |

Full Name

120 | 121 | 122 |
123 |
124 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /Day 10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Beginner 9 | 10 | 11 |
12 |
13 |
14 |
15 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo atque 16 | recusandae aliquid velit pariatur vero fugit tenetur, eligendi aspernatur 17 | rem dignissimos veritatis ab nesciunt eius labore sint fuga nulla ex? 18 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta amet 19 | necessitatibus laboriosam quia voluptate incidunt similique vel impedit, 20 | inventore exercitationem, veniam itaque vero voluptates debitis 21 | dignissimos! Quos possimus minus nam. Lorem, ipsum dolor sit amet 22 | consectetur adipisicing elit. Reiciendis praesentium, accusamus 23 | voluptatibus enim rem ipsam iste, in natus iusto nisi nesciunt facere ex 24 | excepturi eligendi velit repellendus aliquam adipisci expedita? Lorem 25 | ipsum dolor sit amet consectetur adipisicing elit. Similique laudantium 26 | unde ratione nostrum optio. Vel commodi libero at fugit dolore asperiores 27 | labore soluta blanditiis, provident quidem expedita eveniet in unde. Lorem 28 | ipsum dolor sit amet consectetur adipisicing elit. Velit reprehenderit 29 | voluptate eos molestias, alias natus, similique quisquam laudantium ut a 30 | nesciunt sequi? Quam quasi labore recusandae odio magni facilis animi. 31 |
32 |
33 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo atque 34 | recusandae aliquid velit pariatur vero fugit tenetur, eligendi aspernatur 35 | rem dignissimos veritatis ab nesciunt eius labore sint fuga nulla ex? 36 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta amet 37 | necessitatibus laboriosam quia voluptate incidunt similique vel impedit, 38 | inventore exercitationem, veniam itaque vero voluptates debitis 39 | dignissimos! Quos possimus minus nam. Lorem, ipsum dolor sit amet 40 | consectetur adipisicing elit. Reiciendis praesentium, accusamus 41 | voluptatibus enim rem ipsam iste, in natus iusto nisi nesciunt facere ex 42 | excepturi eligendi velit repellendus aliquam adipisci expedita? Lorem 43 | ipsum dolor sit amet consectetur adipisicing elit. Similique laudantium 44 | unde ratione nostrum optio. Vel commodi libero at fugit dolore asperiores 45 | labore soluta blanditiis, provident quidem expedita eveniet in unde. Lorem 46 | ipsum dolor sit amet consectetur adipisicing elit. Velit reprehenderit 47 | voluptate eos molestias, alias natus, similique quisquam laudantium ut a 48 | nesciunt sequi? Quam quasi labore recusandae odio magni facilis animi. 49 |
50 |
51 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo atque 52 | recusandae aliquid velit pariatur vero fugit tenetur, eligendi aspernatur 53 | rem dignissimos veritatis ab nesciunt eius labore sint fuga nulla ex? 54 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta amet 55 | necessitatibus laboriosam quia voluptate incidunt similique vel impedit, 56 | inventore exercitationem, veniam itaque vero voluptates debitis 57 | dignissimos! Quos possimus minus nam. Lorem, ipsum dolor sit amet 58 | consectetur adipisicing elit. Reiciendis praesentium, accusamus 59 | voluptatibus enim rem ipsam iste, in natus iusto nisi nesciunt facere ex 60 | excepturi eligendi velit repellendus aliquam adipisci expedita? Lorem 61 | ipsum dolor sit amet consectetur adipisicing elit. Similique laudantium 62 | unde ratione nostrum optio. Vel commodi libero at fugit dolore asperiores 63 | labore soluta blanditiis, provident quidem expedita eveniet in unde. Lorem 64 | ipsum dolor sit amet consectetur adipisicing elit. Velit reprehenderit 65 | voluptate eos molestias, alias natus, similique quisquam laudantium ut a 66 | nesciunt sequi? Quam quasi labore recusandae odio magni facilis animi. 67 |
68 |
69 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo atque 70 | recusandae aliquid velit pariatur vero fugit tenetur, eligendi aspernatur 71 | rem dignissimos veritatis ab nesciunt eius labore sint fuga nulla ex? 72 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta amet 73 | necessitatibus laboriosam quia voluptate incidunt similique vel impedit, 74 | inventore exercitationem, veniam itaque vero voluptates debitis 75 | dignissimos! Quos possimus minus nam. Lorem, ipsum dolor sit amet 76 | consectetur adipisicing elit. Reiciendis praesentium, accusamus 77 | voluptatibus enim rem ipsam iste, in natus iusto nisi nesciunt facere ex 78 | excepturi eligendi velit repellendus aliquam adipisci expedita? Lorem 79 | ipsum dolor sit amet consectetur adipisicing elit. Similique laudantium 80 | unde ratione nostrum optio. Vel commodi libero at fugit dolore asperiores 81 | labore soluta blanditiis, provident quidem expedita eveniet in unde. Lorem 82 | ipsum dolor sit amet consectetur adipisicing elit. Velit reprehenderit 83 | voluptate eos molestias, alias natus, similique quisquam laudantium ut a 84 | nesciunt sequi? Quam quasi labore recusandae odio magni facilis animi. 85 |
86 |
87 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo atque 88 | recusandae aliquid velit pariatur vero fugit tenetur, eligendi aspernatur 89 | rem dignissimos veritatis ab nesciunt eius labore sint fuga nulla ex? 90 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta amet 91 | necessitatibus laboriosam quia voluptate incidunt similique vel impedit, 92 | inventore exercitationem, veniam itaque vero voluptates debitis 93 | dignissimos! Quos possimus minus nam. Lorem, ipsum dolor sit amet 94 | consectetur adipisicing elit. Reiciendis praesentium, accusamus 95 | voluptatibus enim rem ipsam iste, in natus iusto nisi nesciunt facere ex 96 | excepturi eligendi velit repellendus aliquam adipisci expedita? Lorem 97 | ipsum dolor sit amet consectetur adipisicing elit. Similique laudantium 98 | unde ratione nostrum optio. Vel commodi libero at fugit dolore asperiores 99 | labore soluta blanditiis, provident quidem expedita eveniet in unde. Lorem 100 | ipsum dolor sit amet consectetur adipisicing elit. Velit reprehenderit 101 | voluptate eos molestias, alias natus, similique quisquam laudantium ut a 102 | nesciunt sequi? Quam quasi labore recusandae odio magni facilis animi. 103 |
104 |
105 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo atque 106 | recusandae aliquid velit pariatur vero fugit tenetur, eligendi aspernatur 107 | rem dignissimos veritatis ab nesciunt eius labore sint fuga nulla ex? 108 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta amet 109 | necessitatibus laboriosam quia voluptate incidunt similique vel impedit, 110 | inventore exercitationem, veniam itaque vero voluptates debitis 111 | dignissimos! Quos possimus minus nam. Lorem, ipsum dolor sit amet 112 | consectetur adipisicing elit. Reiciendis praesentium, accusamus 113 | voluptatibus enim rem ipsam iste, in natus iusto nisi nesciunt facere ex 114 | excepturi eligendi velit repellendus aliquam adipisci expedita? Lorem 115 | ipsum dolor sit amet consectetur adipisicing elit. Similique laudantium 116 | unde ratione nostrum optio. Vel commodi libero at fugit dolore asperiores 117 | labore soluta blanditiis, provident quidem expedita eveniet in unde. Lorem 118 | ipsum dolor sit amet consectetur adipisicing elit. Velit reprehenderit 119 | voluptate eos molestias, alias natus, similique quisquam laudantium ut a 120 | nesciunt sequi? Quam quasi labore recusandae odio magni facilis animi. 121 |
122 |
123 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo atque 124 | recusandae aliquid velit pariatur vero fugit tenetur, eligendi aspernatur 125 | rem dignissimos veritatis ab nesciunt eius labore sint fuga nulla ex? 126 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta amet 127 | necessitatibus laboriosam quia voluptate incidunt similique vel impedit, 128 | inventore exercitationem, veniam itaque vero voluptates debitis 129 | dignissimos! Quos possimus minus nam. Lorem, ipsum dolor sit amet 130 | consectetur adipisicing elit. Reiciendis praesentium, accusamus 131 | voluptatibus enim rem ipsam iste, in natus iusto nisi nesciunt facere ex 132 | excepturi eligendi velit repellendus aliquam adipisci expedita? Lorem 133 | ipsum dolor sit amet consectetur adipisicing elit. Similique laudantium 134 | unde ratione nostrum optio. Vel commodi libero at fugit dolore asperiores 135 | labore soluta blanditiis, provident quidem expedita eveniet in unde. Lorem 136 | ipsum dolor sit amet consectetur adipisicing elit. Velit reprehenderit 137 | voluptate eos molestias, alias natus, similique quisquam laudantium ut a 138 | nesciunt sequi? Quam quasi labore recusandae odio magni facilis animi. 139 |
140 |
141 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo atque 142 | recusandae aliquid velit pariatur vero fugit tenetur, eligendi aspernatur 143 | rem dignissimos veritatis ab nesciunt eius labore sint fuga nulla ex? 144 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta amet 145 | necessitatibus laboriosam quia voluptate incidunt similique vel impedit, 146 | inventore exercitationem, veniam itaque vero voluptates debitis 147 | dignissimos! Quos possimus minus nam. Lorem, ipsum dolor sit amet 148 | consectetur adipisicing elit. Reiciendis praesentium, accusamus 149 | voluptatibus enim rem ipsam iste, in natus iusto nisi nesciunt facere ex 150 | excepturi eligendi velit repellendus aliquam adipisci expedita? Lorem 151 | ipsum dolor sit amet consectetur adipisicing elit. Similique laudantium 152 | unde ratione nostrum optio. Vel commodi libero at fugit dolore asperiores 153 | labore soluta blanditiis, provident quidem expedita eveniet in unde. Lorem 154 | ipsum dolor sit amet consectetur adipisicing elit. Velit reprehenderit 155 | voluptate eos molestias, alias natus, similique quisquam laudantium ut a 156 | nesciunt sequi? Quam quasi labore recusandae odio magni facilis animi. 157 |
158 |
159 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo atque 160 | recusandae aliquid velit pariatur vero fugit tenetur, eligendi aspernatur 161 | rem dignissimos veritatis ab nesciunt eius labore sint fuga nulla ex? 162 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta amet 163 | necessitatibus laboriosam quia voluptate incidunt similique vel impedit, 164 | inventore exercitationem, veniam itaque vero voluptates debitis 165 | dignissimos! Quos possimus minus nam. Lorem, ipsum dolor sit amet 166 | consectetur adipisicing elit. Reiciendis praesentium, accusamus 167 | voluptatibus enim rem ipsam iste, in natus iusto nisi nesciunt facere ex 168 | excepturi eligendi velit repellendus aliquam adipisci expedita? Lorem 169 | ipsum dolor sit amet consectetur adipisicing elit. Similique laudantium 170 | unde ratione nostrum optio. Vel commodi libero at fugit dolore asperiores 171 | labore soluta blanditiis, provident quidem expedita eveniet in unde. Lorem 172 | ipsum dolor sit amet consectetur adipisicing elit. Velit reprehenderit 173 | voluptate eos molestias, alias natus, similique quisquam laudantium ut a 174 | nesciunt sequi? Quam quasi labore recusandae odio magni facilis animi. 175 |
176 |
177 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo atque 178 | recusandae aliquid velit pariatur vero fugit tenetur, eligendi aspernatur 179 | rem dignissimos veritatis ab nesciunt eius labore sint fuga nulla ex? 180 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta amet 181 | necessitatibus laboriosam quia voluptate incidunt similique vel impedit, 182 | inventore exercitationem, veniam itaque vero voluptates debitis 183 | dignissimos! Quos possimus minus nam. Lorem, ipsum dolor sit amet 184 | consectetur adipisicing elit. Reiciendis praesentium, accusamus 185 | voluptatibus enim rem ipsam iste, in natus iusto nisi nesciunt facere ex 186 | excepturi eligendi velit repellendus aliquam adipisci expedita? Lorem 187 | ipsum dolor sit amet consectetur adipisicing elit. Similique laudantium 188 | unde ratione nostrum optio. Vel commodi libero at fugit dolore asperiores 189 | labore soluta blanditiis, provident quidem expedita eveniet in unde. Lorem 190 | ipsum dolor sit amet consectetur adipisicing elit. Velit reprehenderit 191 | voluptate eos molestias, alias natus, similique quisquam laudantium ut a 192 | nesciunt sequi? Quam quasi labore recusandae odio magni facilis animi. 193 |
194 |
195 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo atque 196 | recusandae aliquid velit pariatur vero fugit tenetur, eligendi aspernatur 197 | rem dignissimos veritatis ab nesciunt eius labore sint fuga nulla ex? 198 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta amet 199 | necessitatibus laboriosam quia voluptate incidunt similique vel impedit, 200 | inventore exercitationem, veniam itaque vero voluptates debitis 201 | dignissimos! Quos possimus minus nam. Lorem, ipsum dolor sit amet 202 | consectetur adipisicing elit. Reiciendis praesentium, accusamus 203 | voluptatibus enim rem ipsam iste, in natus iusto nisi nesciunt facere ex 204 | excepturi eligendi velit repellendus aliquam adipisci expedita? Lorem 205 | ipsum dolor sit amet consectetur adipisicing elit. Similique laudantium 206 | unde ratione nostrum optio. Vel commodi libero at fugit dolore asperiores 207 | labore soluta blanditiis, provident quidem expedita eveniet in unde. Lorem 208 | ipsum dolor sit amet consectetur adipisicing elit. Velit reprehenderit 209 | voluptate eos molestias, alias natus, similique quisquam laudantium ut a 210 | nesciunt sequi? Quam quasi labore recusandae odio magni facilis animi. 211 |
212 | 213 | 214 | 215 | --------------------------------------------------------------------------------