├── day-18 Sep-8-2025 ├── tailwind.config.js ├── images │ └── Natural_Beauty_of_BD.jpg └── index.html ├── day-19 Sep-15-2025 ├── tailwind.config.js └── index.html ├── day-21 Sep-22-2025 ├── tailwind.config.js └── index.html ├── day-22 Sep-25-2025 ├── tailwind.config.js ├── css │ └── style.css └── index.html ├── day-23 Sep-29-2025 ├── tailwind.config.js └── index.html ├── day-30 Oct-30-2025 ├── tailwind.config.js ├── images │ ├── pic_bulbon.gif │ └── pic_bulboff.gif ├── script.js └── index.html ├── day-31 Nov-03-2025 ├── tailwind.config.js ├── script.js └── index.html ├── day-36 D - 37 Dec-01-2025 - Dec-04-2025 ├── js │ └── script.js ├── tailwind.config.js ├── images │ ├── eye.png │ └── logo.png ├── forgot-password.html ├── index.html ├── signup.html ├── login.html └── dashboard.html ├── da-36 Nov-24-2025 ├── loop.js ├── storage.js ├── Pre-PostIncrementDecrement.js ├── json.js ├── index.html ├── passByValueVsPassByReference.js └── closure.js ├── Untitled document.pdf ├── day-15 - 16 ├── images │ ├── logo.png │ ├── banner.jpg │ ├── person-1.jpg │ ├── person-2.jpg │ └── person-3.jpg ├── blog.html ├── contact.html ├── about.html ├── index.html ├── gallery.html └── css │ └── style.css ├── day-2 Jul-14-2025 ├── images │ ├── fb.ico │ ├── front-end.jpg │ └── humberger-svgrepo-com.svg ├── videos │ └── videoplayback.mp4 └── index.html ├── day-6 Jul-28-2025 ├── images │ └── tick.png ├── index.html └── css │ └── style.css ├── day-9 Aug-11-2025 ├── images │ └── sea.webp ├── index.html └── css │ └── style.css ├── day-35 Nov-20-2025 ├── practice.js └── index.html ├── day-24 & 25 Oct-09-2025 & Oct-13-2025 ├── images │ ├── asif.jpg │ ├── banner.jpg │ ├── rasmus.jpg │ └── person-2.webp ├── css │ ├── style.min.css.map │ ├── style.min.css │ └── style.scss └── index.html ├── Finance Management Mobile App UI UX Kit for Budget Tracker Financial Prototype Design (Community).fig ├── day-32 Nov-06-2025 ├── src │ ├── main.jsx │ ├── App.css │ ├── App.jsx │ ├── index.css │ └── assets │ │ └── react.svg ├── vite.config.js ├── .gitignore ├── index.html ├── package.json ├── eslint.config.js ├── README.md └── public │ └── vite.svg ├── day-29 Oct-27-2025 ├── part-1 │ └── promise.js └── part-2 │ ├── index.html │ └── js │ └── script.js ├── day-8 Aug-7-2025 ├── index.html └── css │ └── style.css ├── day-12 Aug-21-2025 ├── index.html └── css │ └── style.css ├── day-27 Oct-20-2025 └── index.js ├── day-7 Jul-31-2025 ├── details.html ├── css │ └── style.css └── index.html ├── day-1 Jul-10-2025 └── index.html ├── day-10 Aug-14-2025 ├── index.html └── css │ └── style.css ├── day-11 Aug-18-2025 ├── index.html └── css │ └── style.css ├── day-5 Jul-24-2025 ├── index.html └── style.css ├── day-20 Sep-18-2025 └── index.html ├── day-28 Oct-23-2025 └── condition.js ├── day-26 Oct-16-2025 └── index.js ├── day-4 Jul-21-2025 ├── about.html └── index.html ├── day-34 Nov-13-2025 ├── shorthand .js └── index.html ├── day-3 Jul-17-2025 └── index.html └── day-33 Nov-10-2025 └── index.js /day-18 Sep-8-2025/tailwind.config.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-19 Sep-15-2025/tailwind.config.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-21 Sep-22-2025/tailwind.config.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-22 Sep-25-2025/tailwind.config.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-23 Sep-29-2025/tailwind.config.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-30 Oct-30-2025/tailwind.config.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-31 Nov-03-2025/tailwind.config.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-36 D - 37 Dec-01-2025 - Dec-04-2025/js/script.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-36 D - 37 Dec-01-2025 - Dec-04-2025/tailwind.config.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-22 Sep-25-2025/css/style.css: -------------------------------------------------------------------------------- 1 | .kuddus { 2 | background-color: #4a90e2; 3 | } -------------------------------------------------------------------------------- /da-36 Nov-24-2025/loop.js: -------------------------------------------------------------------------------- 1 | for (let i = 0; i < 5; i++) { 2 | console.log(i); 3 | } -------------------------------------------------------------------------------- /Untitled document.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/Untitled document.pdf -------------------------------------------------------------------------------- /day-15 - 16/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/day-15 - 16/images/logo.png -------------------------------------------------------------------------------- /day-15 - 16/images/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/day-15 - 16/images/banner.jpg -------------------------------------------------------------------------------- /day-15 - 16/images/person-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/day-15 - 16/images/person-1.jpg -------------------------------------------------------------------------------- /day-15 - 16/images/person-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/day-15 - 16/images/person-2.jpg -------------------------------------------------------------------------------- /day-15 - 16/images/person-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/day-15 - 16/images/person-3.jpg -------------------------------------------------------------------------------- /day-2 Jul-14-2025/images/fb.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/day-2 Jul-14-2025/images/fb.ico -------------------------------------------------------------------------------- /day-6 Jul-28-2025/images/tick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/day-6 Jul-28-2025/images/tick.png -------------------------------------------------------------------------------- /day-9 Aug-11-2025/images/sea.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/day-9 Aug-11-2025/images/sea.webp -------------------------------------------------------------------------------- /day-2 Jul-14-2025/images/front-end.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/day-2 Jul-14-2025/images/front-end.jpg -------------------------------------------------------------------------------- /day-30 Oct-30-2025/images/pic_bulbon.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/day-30 Oct-30-2025/images/pic_bulbon.gif -------------------------------------------------------------------------------- /day-35 Nov-20-2025/practice.js: -------------------------------------------------------------------------------- 1 | console.log(a); 2 | var a = 5; 3 | 4 | greet(); 5 | function greet() { 6 | console.log("Hello!"); 7 | } -------------------------------------------------------------------------------- /day-2 Jul-14-2025/videos/videoplayback.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/day-2 Jul-14-2025/videos/videoplayback.mp4 -------------------------------------------------------------------------------- /day-30 Oct-30-2025/images/pic_bulboff.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/day-30 Oct-30-2025/images/pic_bulboff.gif -------------------------------------------------------------------------------- /day-18 Sep-8-2025/images/Natural_Beauty_of_BD.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/day-18 Sep-8-2025/images/Natural_Beauty_of_BD.jpg -------------------------------------------------------------------------------- /day-24 & 25 Oct-09-2025 & Oct-13-2025/images/asif.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/day-24 & 25 Oct-09-2025 & Oct-13-2025/images/asif.jpg -------------------------------------------------------------------------------- /day-24 & 25 Oct-09-2025 & Oct-13-2025/images/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/day-24 & 25 Oct-09-2025 & Oct-13-2025/images/banner.jpg -------------------------------------------------------------------------------- /day-24 & 25 Oct-09-2025 & Oct-13-2025/images/rasmus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/day-24 & 25 Oct-09-2025 & Oct-13-2025/images/rasmus.jpg -------------------------------------------------------------------------------- /day-36 D - 37 Dec-01-2025 - Dec-04-2025/images/eye.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/day-36 D - 37 Dec-01-2025 - Dec-04-2025/images/eye.png -------------------------------------------------------------------------------- /day-36 D - 37 Dec-01-2025 - Dec-04-2025/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/day-36 D - 37 Dec-01-2025 - Dec-04-2025/images/logo.png -------------------------------------------------------------------------------- /day-24 & 25 Oct-09-2025 & Oct-13-2025/images/person-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/day-24 & 25 Oct-09-2025 & Oct-13-2025/images/person-2.webp -------------------------------------------------------------------------------- /da-36 Nov-24-2025/storage.js: -------------------------------------------------------------------------------- 1 | localStorage.setItem('myName', "Asif Abir"); 2 | const getName = localStorage.getItem('myName'); 3 | localStorage.removeItem('myName'); 4 | console.log(getName); -------------------------------------------------------------------------------- /Finance Management Mobile App UI UX Kit for Budget Tracker Financial Prototype Design (Community).fig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/cmbd327/main/Finance Management Mobile App UI UX Kit for Budget Tracker Financial Prototype Design (Community).fig -------------------------------------------------------------------------------- /da-36 Nov-24-2025/Pre-PostIncrementDecrement.js: -------------------------------------------------------------------------------- 1 | let x = 1; 2 | ++x; // Pre-increment: x becomes 2 3 | console.log(x); // 2 4 | x++; // Post-increment: x becomes 3 5 | console.log(x); // 3 6 | console.log(x++); // Outputs 3, then x becomes 4 7 | console.log(++x); -------------------------------------------------------------------------------- /day-15 - 16/blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /day-15 - 16/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /day-15 - 16/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

About Us

10 | 11 | -------------------------------------------------------------------------------- /day-32 Nov-06-2025/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /da-36 Nov-24-2025/json.js: -------------------------------------------------------------------------------- 1 | const myInfo = { 2 | name: "Asif", 3 | age: 22, 4 | city: "Dhaka" 5 | }; 6 | 7 | console.log(myInfo); 8 | 9 | const myInfoJSON = JSON.stringify(myInfo); 10 | 11 | console.log(myInfoJSON); 12 | 13 | const myInfoObj = JSON.parse(myInfoJSON); 14 | 15 | console.log(myInfoObj); -------------------------------------------------------------------------------- /da-36 Nov-24-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /day-32 Nov-06-2025/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [ 7 | react({ 8 | babel: { 9 | plugins: [['babel-plugin-react-compiler']], 10 | }, 11 | }), 12 | ], 13 | }) 14 | -------------------------------------------------------------------------------- /day-32 Nov-06-2025/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /day-32 Nov-06-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | day-32-nov-06-2025 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-21 Sep-22-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

10 | Hello world! 11 |

12 | 13 | -------------------------------------------------------------------------------- /da-36 Nov-24-2025/passByValueVsPassByReference.js: -------------------------------------------------------------------------------- 1 | // Pass by Value 2 | let a = 10; 3 | function modifyValue(x) { 4 | x = x + 5; 5 | console.log('Inside modifyValue:', x); // 15 6 | } 7 | modifyValue(a); 8 | console.log('Outside modifyValue:', a); // 10 9 | 10 | // Pass by Reference 11 | let obj = { value: 10 }; 12 | function modifyObject(o) { 13 | o.value = o.value + 5; 14 | console.log('Inside modifyObject:', o.value); // 15 15 | } 16 | modifyObject(obj); 17 | console.log('Outside modifyObject:', obj.value); // 15 -------------------------------------------------------------------------------- /day-29 Oct-27-2025/part-1/promise.js: -------------------------------------------------------------------------------- 1 | // Creating promise 2 | const myPromise = new Promise((resolve, reject) => { 3 | const isSuccess = false; 4 | const returnResFunc = s => s === true ? resolve("Promise kept") : reject("Promise didn\'t kept"); 5 | setTimeout(() => returnResFunc(isSuccess), 3000); 6 | }); 7 | 8 | 9 | const usePromise = async () => { 10 | try{ 11 | const res = await myPromise; 12 | console.log(res); 13 | }catch(err){ 14 | console.error(err); 15 | } 16 | } 17 | 18 | usePromise() -------------------------------------------------------------------------------- /day-8 Aug-7-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 | Kamal 12 |
13 | 14 |
15 | 16 | 17 | 18 | Click here 19 | 20 | -------------------------------------------------------------------------------- /day-12 Aug-21-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /da-36 Nov-24-2025/closure.js: -------------------------------------------------------------------------------- 1 | // Closure 2 | function outerFunction(outerVariable) { 3 | function innerFunction(innerVariable) { 4 | console.log('Outer Variable: ' + outerVariable); 5 | console.log('Inner Variable: ' + innerVariable); 6 | } 7 | return innerFunction; 8 | } 9 | const newFunction = outerFunction('outside'); 10 | newFunction('inside'); 11 | 12 | // Example of closure with a counter 13 | function makeCounter() { 14 | let count = 0; 15 | return function() { 16 | count += 1; 17 | return count; 18 | }; 19 | } 20 | 21 | const counter = makeCounter(); 22 | console.log(counter()); 23 | console.log(counter()); 24 | console.log(counter()); 25 | -------------------------------------------------------------------------------- /day-27 Oct-20-2025/index.js: -------------------------------------------------------------------------------- 1 | function studentInfo (g = "Hi", p = "Delowar") { 2 | return g + " " + p; 3 | } 4 | 5 | console.log(studentInfo("Hello", "Anee")); 6 | console.log(studentInfo("Assalamuwayalaikum", "Maskura")); 7 | console.log(studentInfo()); 8 | 9 | // Sum 10 | function sum (n1, n2) { 11 | return n1 + n2 12 | } 13 | 14 | // Sub 15 | function sub (n1, n2) { 16 | return n1 - n2; 17 | } 18 | 19 | // function myFunc (m) { 20 | // return m; 21 | // } 22 | 23 | // const myFunc = function (m) { 24 | // return m; 25 | // } 26 | 27 | // const myFunc = (m) => { 28 | // return m; 29 | // } 30 | 31 | // const myFunc = m => { 32 | // return m; 33 | // } 34 | 35 | const myFunc = m => m; -------------------------------------------------------------------------------- /day-29 Oct-27-2025/part-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

10 |

11 |
12 |

13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /day-29 Oct-27-2025/part-2/js/script.js: -------------------------------------------------------------------------------- 1 | const heading1 = document.getElementById("heading1"); 2 | heading1.innerHTML = "This message is provided by js"; 3 | 4 | const myClass = document.getElementsByClassName("myClass")[0]; 5 | myClass.textContent = "This is my class."; 6 | 7 | const p = document.getElementsByTagName("p")[0]; 8 | p.innerText = "This is a paragraph"; 9 | 10 | 11 | const myId = document.querySelector("#myId"); 12 | myId.innerHTML = "This is my div."; 13 | 14 | const myOtherClass = document.querySelector(".myOtherClass"); 15 | myOtherClass.textContent = "This is my other div"; 16 | 17 | const myOtherClass2 = document.querySelectorAll(".myOtherClass")[1]; 18 | myOtherClass2.textContent = "ha ha ha ha ha"; 19 | 20 | 21 | -------------------------------------------------------------------------------- /day-6 Jul-28-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | Go There 12 | 13 | 20 | 21 | -------------------------------------------------------------------------------- /day-7 Jul-31-2025/details.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem excepturi odio esse deserunt facere inventore dolorem recusandae similique animi quidem. Quo quia, exercitationem placeat repellat unde eaque perferendis molestias accusamus vel commodi modi autem voluptas quasi quas deserunt laborum, ratione, eum similique laboriosam magnam. Officia delectus et similique quam, distinctio dolor quisquam rerum aliquid deserunt ea, nostrum recusandae quo eaque. 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day-32 Nov-06-2025/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "day-32-nov-06-2025", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^19.1.1", 14 | "react-dom": "^19.1.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.36.0", 18 | "@types/react": "^19.1.16", 19 | "@types/react-dom": "^19.1.9", 20 | "@vitejs/plugin-react": "^5.0.4", 21 | "babel-plugin-react-compiler": "^19.1.0-rc.3", 22 | "eslint": "^9.36.0", 23 | "eslint-plugin-react-hooks": "^5.2.0", 24 | "eslint-plugin-react-refresh": "^0.4.22", 25 | "globals": "^16.4.0", 26 | "vite": "^7.1.7" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /day-32 Nov-06-2025/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /day-1 Jul-10-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Welcome 7 | 8 | 9 |

This is heading 1

10 |

11 | 12 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores ut assumenda veritatis hic. Corporis quibusdam laboriosam error vel dolore qui earum eos blanditiis libero corrupti adipisci, harum veniam, quidem maiores? 13 | 14 |

15 |
16 |

17 | Click here 18 |
19 | 20 | -------------------------------------------------------------------------------- /day-10 Aug-14-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |
1
12 |
2
13 |
3
14 |
4
15 |
16 | 17 | 18 |
19 |

Hello World

20 |

21 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus saepe itaque debitis consectetur minima unde, est nemo maxime iusto nam expedita provident quam, excepturi illum animi dolores aperiam ut quod. 22 |

23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /day-32 Nov-06-2025/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import { defineConfig, globalIgnores } from 'eslint/config' 6 | 7 | export default defineConfig([ 8 | globalIgnores(['dist']), 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | extends: [ 12 | js.configs.recommended, 13 | reactHooks.configs['recommended-latest'], 14 | reactRefresh.configs.vite, 15 | ], 16 | languageOptions: { 17 | ecmaVersion: 2020, 18 | globals: globals.browser, 19 | parserOptions: { 20 | ecmaVersion: 'latest', 21 | ecmaFeatures: { jsx: true }, 22 | sourceType: 'module', 23 | }, 24 | }, 25 | rules: { 26 | 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }], 27 | }, 28 | }, 29 | ]) 30 | -------------------------------------------------------------------------------- /day-11 Aug-18-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 | 16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | 32 |
33 |
1
34 |
2
35 |
3
36 |
4
37 |
5
38 |
39 | 40 | -------------------------------------------------------------------------------- /day-2 Jul-14-2025/images/humberger-svgrepo-com.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /day-32 Nov-06-2025/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import reactLogo from './assets/react.svg' 3 | import viteLogo from '/vite.svg' 4 | import './App.css' 5 | 6 | function App() { 7 | const [count, setCount] = useState(0) 8 | 9 | return ( 10 | <> 11 |
12 | 13 | Vite logo 14 | 15 | 16 | React logo 17 | 18 |
19 |

Vite + React

20 |
21 | 24 |

25 | Edit src/App.jsx and save to test HMR 26 |

27 |
28 |

29 | Click on the Vite and React logos to learn more 30 |

31 | 32 | ) 33 | } 34 | 35 | export default App 36 | -------------------------------------------------------------------------------- /day-36 D - 37 Dec-01-2025 - Dec-04-2025/forgot-password.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 18 | 19 | 20 | 21 |
22 |
24 | 25 |
26 |
27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /day-32 Nov-06-2025/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## React Compiler 11 | 12 | The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information. 13 | 14 | Note: This will impact Vite dev & build performances. 15 | 16 | ## Expanding the ESLint configuration 17 | 18 | If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. 19 | -------------------------------------------------------------------------------- /day-5 Jul-24-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS 7 | 8 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
Hello World
23 |
This is a test text!
24 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis eveniet sint quidem consectetur dignissimos ex molestiae magni ipsa laboriosam possimus saepe obcaecati, libero, cumque asperiores, quia quas voluptates ab distinctio.
25 |
26 |

This is a heading

27 |
28 |
29 |
30 | 31 |
Demo Text
32 | 33 |
34 |
35 | 36 | -------------------------------------------------------------------------------- /day-10 Aug-14-2025/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .parent { 8 | width: 600px; 9 | height: 400px; 10 | background: greenyellow; 11 | padding: 20px; 12 | display: flex; 13 | justify-content: center; 14 | /* align-items: center; */ 15 | align-content: center; 16 | gap: 20px; 17 | /* flex-wrap: wrap; */ 18 | /* flex-direction: row; */ 19 | flex-flow: wrap row; 20 | } 21 | 22 | .child { 23 | width: 200px; 24 | height: 150px; 25 | background: brown; 26 | color: #fff; 27 | font-weight: 600; 28 | font-size: 24px; 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | } 33 | 34 | .child:first-child { 35 | order: 3; 36 | flex-grow: 1; 37 | } 38 | 39 | .child:nth-child(2) { 40 | order: 1; 41 | } 42 | 43 | .child:nth-child(3) { 44 | order: 4; 45 | /* flex-shrink: 2; */ 46 | flex-basis: 100px; 47 | } 48 | 49 | .child:last-child { 50 | order: 2; 51 | } 52 | 53 | .left { 54 | width: 50%; 55 | height: 400px; 56 | border: 1px solid #000; 57 | display: flex; 58 | flex-direction: column; 59 | justify-content: center; 60 | align-items: start; 61 | padding: 20px; 62 | } -------------------------------------------------------------------------------- /day-20 Sep-18-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 20 | Settings 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /day-31 Nov-03-2025/script.js: -------------------------------------------------------------------------------- 1 | const head = document.querySelector(".head"); 2 | const details = document.querySelector(".details"); 3 | const headArr = Array.from(head.children); 4 | const detailsArr = Array.from(details.children); 5 | 6 | headArr.forEach((hd, ind) => { 7 | hd.addEventListener('click', () => { 8 | headArr.forEach((h, i) => { 9 | if(ind === i) { 10 | if(headArr.length - 1 > i){ 11 | h.classList = "w-full text-center text-xl cursor-pointer py-2 border-r font-bold bg-gray-300"; 12 | }else{ 13 | h.classList = "w-full text-center text-xl cursor-pointer py-2 font-bold bg-gray-300"; 14 | } 15 | detailsArr[i].classList = "p-4 italic bg-gray-300 transition-opacity duration-500 opacity-100 pointer-events-auto"; 16 | }else{ 17 | if(headArr.length - 1 > i){ 18 | h.classList = "w-full text-center text-xl hover:bg-gray-200 cursor-pointer py-2 border-b border-r"; 19 | }else{ 20 | h.classList = "w-full text-center text-xl hover:bg-gray-200 cursor-pointer py-2 border-b"; 21 | } 22 | detailsArr[i].classList = "-4 italic transition-opacity duration-500 opacity-0 pointer-events-none absolute inset-0"; 23 | } 24 | }) 25 | }) 26 | }) -------------------------------------------------------------------------------- /day-19 Sep-15-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | 12 | 13 | 14 |

15 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae cumque ipsa, molestiae sunt odio officia 16 | sed. Quibusdam consectetur neque unde aliquid harum impedit expedita. Fuga tempora quo eligendi. Ducimus, 17 | quaerat! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi iste rerum, atque unde facere, enim odio neque dolore assumenda voluptatum, consequuntur dolores quas sint ab! Obcaecati incidunt error et numquam aspernatur hic distinctio, ut vitae animi nesciunt maiores enim ratione tempore quibusdam consequatur quam tempora blanditiis velit eaque culpa fugit? Earum mollitia error veritatis magnam eveniet dolores in quae sequi? 18 |

19 | 20 |

1/2

21 | 22 | 23 | -------------------------------------------------------------------------------- /day-32 Nov-06-2025/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /day-32 Nov-06-2025/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-28 Oct-23-2025/condition.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Conditional operators 3 | * == 4 | * === 5 | * != 6 | * !== 7 | * > 8 | * < 9 | * >= 10 | * <= 11 | */ 12 | 13 | if (5 === "5") { 14 | console.log("Condition is true"); 15 | } else if (5 == "5") { 16 | console.log("2nd else if Condition is true"); 17 | } else if (5 !== "5") { 18 | console.log("3rd else if Condition is true"); 19 | } else { 20 | console.log("Condition is false"); 21 | } 22 | 23 | const city = "Gazipur"; 24 | 25 | switch (city) { 26 | case "Kuakata": 27 | console.log("Your city is Kuakata"); 28 | break; 29 | 30 | case "Rangamati": 31 | console.log("Your city is Rangamati"); 32 | break; 33 | 34 | case "Dhaka": 35 | console.log("Your city is Dhaka"); 36 | break; 37 | 38 | default: 39 | console.log("We don\'t know your city"); 40 | } 41 | 42 | // Loops 43 | let n = 0; 44 | while (n < 10) { 45 | console.log(n); 46 | n++; 47 | } 48 | 49 | for (let i = 0; i < 10; i++) { 50 | console.log(i); 51 | } 52 | 53 | let m = 30; 54 | do { 55 | console.log(m); 56 | m++; 57 | }while (m < 10); 58 | 59 | const studentList = ["Abul", "Baabul", "Kabul", "Bulbul"]; 60 | for(let i = 0; i < studentList.length; i++) { 61 | console.log(studentList[i]); 62 | } 63 | 64 | studentList.forEach((v, i) => console.log(`${i} = ${v}`)); 65 | 66 | const j = "Ami" 67 | console.log(j + " vaat khai"); 68 | console.log(`${j} vaat khai`); 69 | -------------------------------------------------------------------------------- /day-8 Aug-7-2025/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .main { 8 | width: 300px; 9 | height: 200px; 10 | background: cornflowerblue; 11 | } 12 | 13 | .main:hover { 14 | background: lightcoral; 15 | } 16 | 17 | .main::before { 18 | content: "Mr."; 19 | } 20 | 21 | .main::after { 22 | content: "Khan"; 23 | } 24 | 25 | .pain { 26 | width: 300px; 27 | height: 200px; 28 | background: limegreen; 29 | position: relative; 30 | overflow: hidden; 31 | } 32 | 33 | .pain::before { 34 | content: ""; 35 | width: 100%; 36 | height: 50%; 37 | background: darkorange; 38 | position: absolute; 39 | bottom: -50%; 40 | left: 0; 41 | transition: 0.5s; 42 | } 43 | 44 | .pain::after { 45 | content: ""; 46 | width: 100%; 47 | height: 50%; 48 | background: darkorange; 49 | position: absolute; 50 | top: -50%; 51 | left: 0; 52 | transition: 0.5s; 53 | } 54 | 55 | .pain:hover::before { 56 | bottom: 0%; 57 | } 58 | 59 | .pain:hover::after{ 60 | top: 0%; 61 | } 62 | 63 | .input-field { 64 | margin: 20px; 65 | border: 1px solid #000; 66 | padding: 10px; 67 | border-radius: 6px; 68 | } 69 | 70 | .input-field:active { 71 | background: lightblue; 72 | } 73 | 74 | .input-field:focus { 75 | background: hotpink; 76 | } 77 | 78 | .mylink { 79 | color: red; 80 | font-size: 24px; 81 | font-weight: bold; 82 | } 83 | 84 | .mylink:visited { 85 | color: aqua; 86 | } 87 | -------------------------------------------------------------------------------- /day-26 Oct-16-2025/index.js: -------------------------------------------------------------------------------- 1 | var myData = "Hello World"; 2 | console.log(myData); 3 | 4 | // Data types 5 | console.log(typeof "Codemanbd"); 6 | console.log(typeof 123); 7 | console.log(typeof true); 8 | console.log(typeof null); 9 | console.log(typeof ["Dhaka", "CTG", "Bogura"]); 10 | console.log(typeof {name: "ASif Abir"}); 11 | console.log(typeof xyz); 12 | console.log(typeof 900719925474099143243242n); 13 | console.log(typeof Symbol()); 14 | 15 | console.log(Number.MAX_SAFE_INTEGER); 16 | 17 | // operator 18 | /** 19 | * Arithmetic operators 20 | * + 21 | * - 22 | * * 23 | * / 24 | * % 25 | * ** 26 | */ 27 | 28 | /** 29 | * Assignment operators 30 | * = 31 | * += 32 | * -= 33 | * *= 34 | * /= 35 | * %= 36 | * **= 37 | */ 38 | 39 | /** 40 | * comparison operators 41 | * == 42 | * === 43 | * != 44 | * !== 45 | * < 46 | * > 47 | * <= 48 | * >= 49 | */ 50 | 51 | /** 52 | * logical operators 53 | * && 54 | * || 55 | */ 56 | 57 | /** 58 | * increment/decrement operators 59 | * ++ 60 | * -- 61 | */ 62 | 63 | /** 64 | * ? : 65 | * ?? 66 | */ 67 | 68 | /** 69 | * concatenation operator 70 | * + 71 | */ 72 | 73 | var cityList = ["Dhaka", "Barishal", "Bogura", "Ctg"]; 74 | console.log(cityList[2] + " " + cityList[3]); 75 | console.log(cityList.length); 76 | console.log(cityList.push("Gazipur")); 77 | console.log(cityList.push("Rajshahi", "Rongpur")); 78 | console.log(cityList.pop()); 79 | console.log(cityList.shift()); 80 | console.log(cityList.unshift("Kuakata")); 81 | console.log(cityList.unshift("Bandarban", "Coxbazar")); 82 | console.log(cityList); -------------------------------------------------------------------------------- /day-23 Sep-29-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione magni deserunt tempora iste velit eos rerum rem, consequatur suscipit aspernatur soluta et voluptatum dolorem similique modi! Nulla voluptas eos corrupti? 15 |
16 |
17 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis nam facere omnis cupiditate deleniti id quos deserunt inventore eligendi, odio praesentium! Nihil perspiciatis eius beatae corrupti laborum quo totam nobis! 18 |
19 |
20 |
21 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio sed minima reprehenderit eaque asperiores repellat magni nisi sit vitae numquam?
22 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio sed minima reprehenderit eaque asperiores repellat magni nisi sit vitae numquam?
23 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio sed minima reprehenderit eaque asperiores repellat magni nisi sit vitae numquam?
24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /day-12 Aug-21-2025/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | 8 | .transform { 9 | width: 100%; 10 | padding: 20px; 11 | gap: 20px; 12 | display: grid; 13 | grid-template-columns: repeat(auto-fill, 100px); 14 | } 15 | 16 | .transform > div { 17 | width: 100px; 18 | height: 100px; 19 | background: cornflowerblue; 20 | transition: 0.5s; 21 | } 22 | 23 | .transform-1:hover { 24 | transform: translate(50px, 50px); 25 | } 26 | 27 | .transform-2:hover { 28 | transform: scale(120%); 29 | } 30 | 31 | .transform-3:hover { 32 | transform: skew(15deg, 15deg); 33 | } 34 | 35 | .transform-4:hover { 36 | transform: rotate(360deg); 37 | } 38 | 39 | .transform-5:hover { 40 | transform: matrix(1.2, 1, 0, 1.2, 50, 50); 41 | } 42 | 43 | .transform-6:hover { 44 | transform: translate(25%, 25%) skew(10deg, 10deg) scale(1.2, 1.2) rotate(360deg); 45 | } 46 | 47 | .animation { 48 | /* animation: cmbd 2s infinite linear; */ 49 | animation-name: cmbd; 50 | animation-duration: 2s; 51 | animation-iteration-count: infinite; 52 | animation-timing-function: linear; 53 | } 54 | 55 | @keyframes cmbd { 56 | 0% { 57 | background: dodgerblue; 58 | transform: translate(0%, 0%) skew(0deg, 0deg) scale(1, 1) rotate(0deg); 59 | } 60 | 50% { 61 | background: limegreen; 62 | transform: translate(25%, 25%) skew(10deg, 10deg) scale(1.2, 1.2) rotate(180deg); 63 | border-radius: 50%; 64 | } 65 | 100% { 66 | background: dodgerblue; 67 | transform: translate(0%, 0%) skew(0deg, 0deg) scale(1, 1) rotate(360deg); 68 | } 69 | } -------------------------------------------------------------------------------- /day-30 Oct-30-2025/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | const q1 = document.querySelector("#q1"); 3 | const ans1 = document.querySelector("#ans1"); 4 | const q2 = document.querySelector("#q2"); 5 | const ans2 = document.querySelector("#ans2"); 6 | 7 | q1.addEventListener("click", e => { 8 | e.target.classList.toggle("bg-black"); 9 | e.target.classList.toggle("text-white"); 10 | ans1.classList.toggle("hidden"); 11 | }) 12 | 13 | q2.addEventListener("click", e => { 14 | e.target.classList.toggle("bg-black"); 15 | e.target.classList.toggle("text-white"); 16 | ans2.classList.toggle("hidden"); 17 | }) 18 | */ 19 | 20 | const aHead = document.querySelectorAll(".aHead"); 21 | const aHeadArr = Array.from(aHead); 22 | aHeadArr.forEach(head => { 23 | head.addEventListener("click", e => { 24 | const ci = aHeadArr.indexOf(e.target); 25 | aHeadArr.forEach((h, i) => { 26 | if(ci == i){ 27 | h.classList.toggle("bg-black"); 28 | h.classList.toggle("text-white"); 29 | h.nextElementSibling.classList.toggle("hidden") 30 | }else{ 31 | h.classList.remove("bg-black"); 32 | h.classList.remove("text-white"); 33 | h.nextElementSibling.classList.add("hidden") 34 | } 35 | }) 36 | }) 37 | }) 38 | 39 | const onBtn = document.querySelector("#onBtn"); 40 | const offBtn = document.querySelector("#offBtn"); 41 | const bulbImg = document.querySelector("#bulbImg"); 42 | 43 | offBtn.addEventListener("click", e => { 44 | bulbImg.src = "./images/pic_bulboff.gif"; 45 | }) 46 | 47 | onBtn.addEventListener("click", e => { 48 | bulbImg.src = "./images/pic_bulbon.gif"; 49 | }) -------------------------------------------------------------------------------- /day-4 Jul-21-2025/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About us 7 | 8 | 9 |
10 | 11 | 12 | 13 |
14 |

15 | 16 | 17 | Ajke akta fighter jet biddhosto hoyeche | aj cmbd er batch 326 & 327 er web class er episode 5 choltese | aj shob bar 18 | 19 | 20 |

21 |
22 | 23 | 24 |
25 | 26 |
27 |

28 |
29 | 30 | 31 | 32 |
33 | 34 | -------------------------------------------------------------------------------- /day-7 Jul-31-2025/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .main { 8 | display: block; 9 | width: 300px; 10 | height: 200px; 11 | background: green; 12 | margin: 20px auto; 13 | position: relative; 14 | } 15 | 16 | .pain { 17 | width: 150px; 18 | height: 150px; 19 | background: red; 20 | position: absolute; 21 | top: 25px; 22 | left: 75px; 23 | border-radius: 50%; 24 | } 25 | 26 | .a { 27 | color: blue; 28 | /* display: none; */ 29 | /* display: block; */ 30 | /* display: inline; */ 31 | display: inline-block; 32 | background: lightblue; 33 | padding: 20px; 34 | width: 300px; 35 | } 36 | 37 | .table { 38 | display: table; 39 | } 40 | 41 | .row { 42 | display: table-row; 43 | } 44 | 45 | .col { 46 | display: table-cell; 47 | border: 1px solid #000; 48 | padding: 6px 12px; 49 | } 50 | 51 | .cmbd { 52 | width: 300px; 53 | /* height: 100px; */ 54 | padding: 20px; 55 | border: 1px solid #000; 56 | margin: 20px auto; 57 | /* overflow: hidden; */ 58 | /* overflow: scroll; */ 59 | /* overflow-x: scroll; */ 60 | /* overflow-y: hidden; */ 61 | /* overflow-y: scroll; */ 62 | } 63 | 64 | .cmbd > p { 65 | overflow-x: hidden; 66 | white-space: nowrap; 67 | text-overflow: ellipsis; 68 | 69 | } 70 | 71 | /* .cmbd p */ 72 | 73 | .box { 74 | width: 300px; 75 | border: 1px solid #000; 76 | margin: auto; 77 | margin-bottom: 20px; 78 | padding: 20px; 79 | /* box-sizing: content-box; */ 80 | box-shadow: 10px 10px 20px #000; 81 | text-shadow: 1px 1px 1px blue; 82 | font-weight: bold; 83 | } 84 | 85 | .dhanmondi + .mohammadpur { 86 | background: red; 87 | } 88 | 89 | .dhanmondi ~ .kalabagan { 90 | background: red; 91 | } -------------------------------------------------------------------------------- /day-24 & 25 Oct-09-2025 & Oct-13-2025/css/style.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAQ,mFAAA,CAER,EACI,QAAA,CACA,SAAA,CACA,6BAAA,CAAA,0BAAA,CAAA,qBAAA,CACA,+BAAA,CACA,sBAAA,CAGJ,OACI,cAAA,CACA,gBAAA,CACA,eAAA,CACA,8BAAA,CAAA,2BAAA,CAAA,sBAAA,CACA,cAAA,CAEA,aACI,kBAAA,CACA,UAAA,CACA,cAAA,CACA,4BAAA,CAIR,EACI,iBAAA,CACA,UAAA,CAGJ,GACI,iBAAA,CACA,aAAA,CACA,4BAAA,CACA,aAAA,CAGJ,KACI,eAAA,CAEA,QACI,eAAA,CACA,mBAAA,CAAA,oBAAA,CAAA,gBAAA,CAAA,mBAAA,CAAA,YAAA,CAGI,aACI,oBAAA,CACA,UAAA,CACA,gBAAA,CACA,aAAA,CACA,uBAAA,CACA,eAAA,CACA,cAAA,CAGJ,iBACI,kBAAA,CAEA,mBACI,UAAA,CAOpB,MACI,mBAAA,CAAA,oBAAA,CAAA,gBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,QAAA,CAGI,sBAMI,mBAAA,CAAA,oBAAA,CAAA,gBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,2BAAA,CAAA,4BAAA,CAAA,6BAAA,CAAA,wBAAA,CAAA,yBAAA,CAAA,yBAAA,CAAA,qBAAA,CACA,uBAAA,CAAA,8BAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,sBAAA,CACA,uBAAA,CAAA,yBAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,iBAAA,CACA,QAAA,CATA,yBACI,aAAA,CACA,4BAAA,CAWJ,yBACI,UAAA,CACA,gBAAA,CACA,mBAAA,CAAA,gBAAA,CAMhB,MACI,YAAA,CACA,QAAA,CACA,UACI,iBAAA,CACA,qBAAA,CACA,yBAAA,CAAA,sBAAA,CAAA,iBAAA,CACA,YAAA,CACA,cACI,UAAA,CACA,YAAA,CACA,qBAAA,CACA,yBAAA,CAAA,sBAAA,CAAA,iBAAA,CACA,gBAAA,CAKZ,OACI,UAAA,CACA,eAAA,CACA,UAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,gBAAA,CAGJ,qCACI,KACI,cAAA,CACA,YAAA,CAEA,QACI,YAAA,CACA,2BAAA,CAAA,4BAAA,CAAA,6BAAA,CAAA,wBAAA,CAAA,yBAAA,CAAA,yBAAA,CAAA,qBAAA,CACA,uBAAA,CAAA,yBAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,iBAAA,CAEA,WACI,UAAA,CAEA,aACI,cAAA,CAGI,4BACI,YAAA,CAOpB,gBACI,aAAA,CAGJ,cACI,WAAA,CACA,gBAAA,CACA,cAAA,CAIR,MACI,UAAA,CACA,YAAA,CACA,2BAAA,CAAA,6BAAA,CAAA,qCAAA,CAAA,wBAAA,CAAA,0BAAA,CAAA,iCAAA,CAAA,6BAAA,CAGJ,MACI,YAAA,CACA,oCAAA,CAAA,CAIR,qCACI,KACI,gBAAA,CACA,aAAA,CAEA,QACI,uBAAA,CAAA,8BAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,sBAAA,CAGI,aACI,cAAA,CAKZ,cACI,YAAA,CAIR,MACI,gBAAA,CACA,aAAA,CACA,cAAA,CAEA,UACI,SAAA,CAIR,MACI,gBAAA,CACA,aAAA,CACA,oCAAA,CAAA","file":"style.min.css"} -------------------------------------------------------------------------------- /day-6 Jul-28-2025/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: "Poppins", sans-serif; 8 | } 9 | 10 | .btn { 11 | /* width: 150px; */ 12 | padding: 8px 20px; 13 | margin: 20px; 14 | border-width: 0; 15 | background: cornflowerblue; 16 | color: white; 17 | border-radius: 20px/50%; 18 | cursor: pointer; 19 | text-transform: uppercase; 20 | letter-spacing: 2px; 21 | font-weight: bold; 22 | text-shadow: 2px 2px 2px black; 23 | font-size: 22px; 24 | } 25 | 26 | .btn:hover { 27 | background: green; 28 | box-shadow: 5px 5px 10px black; 29 | } 30 | 31 | .link { 32 | font-size: 22px; 33 | text-decoration: none; 34 | font-weight: bold; 35 | letter-spacing: 2px; 36 | text-transform: uppercase; 37 | color: white; 38 | background: cornflowerblue; 39 | text-shadow: 2px 2px 2px black; 40 | padding: 8px 20px; 41 | border-radius: 20px/50%; 42 | } 43 | 44 | .link:hover { 45 | background: green; 46 | box-shadow: 5px 5px 10px black; 47 | } 48 | 49 | .cityList { 50 | width: max-content; 51 | margin: 40px; 52 | /* list-style: upper-alpha; */ 53 | /* list-style-image: url("../images/tick.png"); */ 54 | /* list-style-position: inside; */ 55 | /* list-style: disc; */ 56 | font-size: 22px; 57 | background: lightgray; 58 | list-style-position: outside; 59 | padding: 20px; 60 | } 61 | 62 | .cityList > li { 63 | display: flex; 64 | align-items: center; 65 | gap: 6px; 66 | margin-bottom: 6px; 67 | font-family: "Roboto", sans-serif; 68 | } -------------------------------------------------------------------------------- /day-9 Aug-11-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

11 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, quidem dicta. Quam obcaecati ratione deleniti voluptate est commodi, velit at laboriosam ad veritatis blanditiis quia optio neque molestiae. Nesciunt, iure cum voluptates iusto amet corrupti hic eum debitis doloremque perferendis eaque illum saepe quaerat pariatur dolores? Pariatur atque vel quas explicabo error incidunt! Debitis temporibus corporis quaerat necessitatibus. Sunt mollitia unde labore laboriosam quibusdam nemo quis dignissimos nam, quidem harum sapiente facere amet alias perspiciatis eos laborum molestiae suscipit debitis excepturi ipsam doloremque maiores? Natus animi dignissimos totam blanditiis iste. Minus, at illo voluptatum accusantium ipsum officia ex doloribus quasi inventore, eos eum facere omnis, sit cupiditate amet unde soluta quos nobis quisquam quidem. Maiores veritatis omnis illum consequuntur explicabo! 12 |

13 |
14 |
15 |
16 |
17 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur porro harum dolores laudantium, voluptatum placeat et consectetur praesentium ipsam neque possimus necessitatibus vero laborum autem accusamus temporibus exercitationem tempora impedit aperiam excepturi dolorem minus quod aut. Maxime quos sed veniam molestias exercitationem vero soluta ab! Illum nisi voluptatem amet, unde quaerat numquam tempore. Sit harum maxime adipisci, laboriosam saepe doloremque.
18 | 19 | 20 | -------------------------------------------------------------------------------- /day-5 Jul-24-2025/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .demo { 8 | color: #666; 9 | width: 300px; 10 | } 11 | 12 | #dhaka { 13 | width: 300px; 14 | height: 200px; 15 | background: green; 16 | } 17 | 18 | h1 { 19 | color: blueviolet; 20 | } 21 | 22 | .main { 23 | width: 300px; 24 | height: 200px; 25 | background: green; 26 | display: flex; 27 | } 28 | 29 | .main > div { 30 | width: 140px; 31 | height: 140px; 32 | background: red; 33 | border-radius: 50%; 34 | margin: auto; 35 | } 36 | 37 | .demoText { 38 | width: max-content; 39 | /* border: 6px solid black; */ 40 | /* border-width: 6px; 41 | border-style: solid; 42 | border-color: #000; */ 43 | /* border-top: 6px dashed black; */ 44 | border-top-width: 6px; 45 | border-top-style: dashed; 46 | border-top-color: #000; 47 | border-right: 6px double black; 48 | border-left: 6px double black; 49 | border-bottom: 6px solid black; 50 | /* 51 | padding-top: 20px; 52 | padding-right: 20px; 53 | padding-bottom: 20px; 54 | padding-left: 20px; 55 | */ 56 | padding: 20px; 57 | /* 58 | padding: 20px 30px 40px 50px; 59 | padding: 20px 30px; 60 | padding: 20px 30px 40px; 61 | */ 62 | 63 | /* 64 | margin-top: 20px; 65 | margin-right: 20px; 66 | margin-bottom: 20px; 67 | margin-left: 20px; 68 | */ 69 | /* margin-left: auto; */ 70 | margin-right: auto; 71 | margin-top: -40px; 72 | /* 73 | margin: 20px 30px 40px 50px; 74 | margin: 20px 30px; 75 | margin: 20px 30px 40px; 76 | */ 77 | } 78 | 79 | .abul { 80 | width: 200px; 81 | height: 200px; 82 | background: blue; 83 | margin: 20px; 84 | padding: 20px; 85 | } 86 | 87 | .babul { 88 | width: 200px; 89 | height: 200px; 90 | background: blue; 91 | margin: 20px; 92 | } -------------------------------------------------------------------------------- /day-18 Sep-8-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | Hello world! 13 |
14 |
15 | 16 |
17 |
18 |
1
19 |
2
20 |
3
21 |
4
22 |
5
23 |
6
24 |
25 | 26 |
27 |

Well, let me tell you something, ...

28 |

29 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam, expedita odio sint ea modi perferendis 30 | dolorem aliquid dignissimos quae earum, porro animi obcaecati hic, cum corporis magnam quisquam officiis 31 | culpa! 32 |

33 |

Maybe we can live without...

34 |

Look. If you think this is...

35 |
36 | 37 |
38 | 39 | Hello
World 40 | 41 | 42 | Hello
World 43 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /day-35 Nov-20-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 | 15 |
16 | 56 | 57 | -------------------------------------------------------------------------------- /day-34 Nov-13-2025/shorthand .js: -------------------------------------------------------------------------------- 1 | // let a = 10; 2 | // let b = 20; 3 | // let c = 30; 4 | let a = 10, b = 20, c = 30; 5 | 6 | // Ternary Operator 7 | if (a > b) { 8 | console.log("a is greater than b"); 9 | } else { 10 | console.log("b is greater than a"); 11 | } 12 | a > b ? console.log("a is greater than b") : console.log("b is greater than a"); 13 | 14 | // Default Value shorthand 15 | let myName; 16 | if(!myName) { 17 | myName = "Asif"; 18 | } 19 | 20 | myName = myName || "Asif"; 21 | 22 | myName = myName ?? "Abir"; 23 | 24 | // Arrow Function shorthand 25 | function sum1(x, y) { 26 | return x + y; 27 | } 28 | 29 | const sum2 = (x, y) => x + y; 30 | 31 | // emplate Literal 32 | let greeting1 = "Hello " + a + ", welcome to the world of JavaScript."; 33 | let greeting2 = `Hello ${a}, welcome to the world of JavaScript.`; 34 | 35 | // Object Property shorthand 36 | const name = "Asif Abir"; 37 | const city = "Dhaka"; 38 | 39 | const person1 = { 40 | name: name, 41 | city: city 42 | }; 43 | 44 | const person2 = {name, city}; 45 | 46 | // Logical AND / OR shorthand 47 | if(a > 5) { 48 | console.log("a is greater than 5"); 49 | } 50 | 51 | a > 5 && console.log("a is greater than 5"); 52 | 53 | // Destructuring shorthand 54 | const myInfo = { 55 | myProfession : "Web Developer", 56 | myCity : "Dhaka" 57 | } 58 | // const myProfession = myInfo.myProfession; 59 | // const myCity = myInfo.myCity; 60 | 61 | // const {myProfession, myCity} = myInfo; 62 | const {myProfession: myPro, myCity: mCity} = myInfo; 63 | console.log(myPro, mCity); 64 | 65 | const myFriends = ["Abir", "Kalam", "Jamal"]; 66 | // const friend1 = myFriends[0]; 67 | // const friend2 = myFriends[1]; 68 | // const friend3 = myFriends[2]; 69 | const [friend1, friend2, friend3] = myFriends; 70 | 71 | // Spread operator 72 | const arr1 = [1, 2, 3]; 73 | const arr2 = [4, 5, 6]; 74 | 75 | const combined1 = arr1.concat(arr2); 76 | const combined2 = [...arr1, ...arr2]; 77 | 78 | // Short-circuit Evaluation 79 | if(myInfo && myInfo.myProfession) { 80 | console.log("Profession exists"); 81 | } 82 | 83 | // Optional Chaining 84 | console.log(myInfo?.myProfession); -------------------------------------------------------------------------------- /day-9 Aug-11-2025/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | 8 | 9 | .bg-img { 10 | width: 200px; 11 | height: 200px; 12 | border: 1px solid #000; 13 | /* background: url("../images/sea.webp"); 14 | background-image: url("../images/sea.webp"); 15 | background-repeat: no-repeat; 16 | background-position: center; 17 | background-size: cover; */ 18 | background: url("../images/sea.webp") no-repeat center /cover; 19 | margin: 20px; 20 | } 21 | 22 | .bg-gradient { 23 | border: 1px solid #000; 24 | margin: 20px; 25 | background: linear-gradient(to top right, black, blue, white, blue, black); 26 | } 27 | 28 | .bg-gradient2 { 29 | width: 200px; 30 | height: 200px; 31 | border: 1px solid #000; 32 | margin: 20px; 33 | background: radial-gradient(white, black, blue); 34 | } 35 | 36 | .text-overflow { 37 | width: 200px; 38 | /* height: 200px; */ 39 | margin: 20px; 40 | padding: 20px; 41 | border: 1px solid #000; 42 | white-space: nowrap; 43 | overflow: hidden; 44 | text-overflow: ellipsis; 45 | /* overflow-y: scroll; */ 46 | 47 | /* 48 | max-width: calc(100% - 40px); 49 | min-width: 200px; 50 | max-height: 200px; 51 | min-height: 200px; 52 | */ 53 | } 54 | 55 | .bg-color { 56 | border: 1px solid #000; 57 | margin: 20px; 58 | } 59 | 60 | @media (max-width: 768px) { 61 | .bg-color { 62 | width: 200px; 63 | height: 200px; 64 | /* background: blue; */ 65 | background-color: blue; 66 | } 67 | .bg-gradient { 68 | width: 200px; 69 | height: 200px; 70 | } 71 | } 72 | 73 | @media (min-width: 768px) and (max-width: 1280px) { 74 | .bg-color { 75 | width: 300px; 76 | height: 300px; 77 | /* background: blue; */ 78 | background-color: green; 79 | } 80 | .bg-gradient { 81 | width: 300px; 82 | height: 300px; 83 | } 84 | } 85 | 86 | @media (min-width: 1280px) { 87 | .bg-color { 88 | width: 400px; 89 | height: 400px; 90 | /* background: blue; */ 91 | background-color: red; 92 | } 93 | .bg-gradient { 94 | width: 400px; 95 | height: 400px; 96 | } 97 | } -------------------------------------------------------------------------------- /day-36 D - 37 Dec-01-2025 - Dec-04-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 18 | 19 | 20 | 21 |
22 |
24 |
25 | 26 |

FinWise

27 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

28 |
29 |
30 | 31 | 32 | Forget Password? 33 |
34 |
35 |
36 | 37 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /day-30 Oct-30-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 |
11 |
What is your name?
12 | 15 |
16 |
17 |
What is your age?
18 | 21 |
22 |
23 |
What is your city?
24 | 27 |
28 |
29 |
30 | 31 |
32 |
33 | 40 | 41 | 48 |
49 |
50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /day-2 Jul-14-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Facebook (2) 7 | 8 | 9 | 10 | 11 |

12 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia ipsum natus ut doloremque distinctio reiciendis, quod exercitationem optio? Doloremque, sed? 13 |

14 |
15 |

- Asif

16 |
17 | 18 | 19 | 26 | 27 |
    28 |
  1. Raihan
    2. 29 |
  2. Munny
    3. 30 |
  3. Abdul
    4. 31 |
  4. Sujon
    5. 32 |
  5. Siam
    6. 33 |
34 | 35 | 36 | Click Me 37 | Bangladesh 38 | India 39 | USA 40 | 41 | Spain 42 | 43 | 44 |
Division
45 |

This is a heading

46 |

This is a paragraph

47 | 48 | 49 | 50 | Front-end development 51 |
52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 |
62 | 63 |
64 |
65 | 66 |
67 |
68 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo rem, molestiae, placeat beatae natus quam quibusdam, alias aperiam fuga sapiente distinctio. Esse rem ipsum ipsa doloremque libero nam et nesciunt! 69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 | 80 | 81 | -------------------------------------------------------------------------------- /day-34 Nov-13-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 |

This is a paragraph

11 |
12 | 13 | 14 | 15 | 16 | 17 |
18 | Outer Button 19 | 22 |
23 | 24 | 29 | 30 | 72 | 73 | -------------------------------------------------------------------------------- /day-7 Jul-31-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS - Practice 7 | 8 | 9 | 10 |
11 |
12 |
13 | Click Here 14 | 15 | Bangladesh 16 | India 17 | USA 18 | 19 | Spain 20 |

Heading 3

21 |
This is a div
22 |

This is a paragraph

23 |
This is a section
24 | 25 | Click Me 26 | 27 |
28 |
29 |
Bangladesh
30 |
India
31 |
32 |
33 |
Pakistan
34 |
Srilanka
35 |
36 |
37 | 38 |
39 |

40 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure libero, enim porro beatae quod delectus tenetur temporibus veniam! Commodi nisi accusamus inventore rerum maiores perferendis repudiandae, temporibus dolores quasi ad consectetur mollitia sint ex quo ipsum vel nemo deleniti obcaecati? Quasi architecto vel unde maiores facilis soluta. Amet cumque adipisci exercitationem aperiam. Quos aliquid ipsa molestias in debitis illum laborum. 41 |

42 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum doloribus illo maxime voluptatem molestiae repellendus fugit soluta eveniet necessitatibus non. 43 |

44 |

45 |

46 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores molestias sit nam eligendi deleniti voluptate repudiandae qui excepturi, in exercitationem! Enim rerum soluta voluptatum officiis doloribus molestiae quas nostrum quidem! 47 |

48 | 49 | 50 | 51 |
52 | 53 |
54 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure, quisquam sapiente? Doloremque eius, minus sint, minima tenetur debitis ut nam deleniti expedita corporis perferendis esse consectetur ex odit inventore tempora! 55 |
56 | 57 |
58 |
59 |
60 |
61 |
62 | 63 | -------------------------------------------------------------------------------- /day-24 & 25 Oct-09-2025 & Oct-13-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Responsive Website 8 | 11 | 12 | 13 | 14 | 15 | 16 | 27 | 28 | 29 | 30 |
31 |
32 |

This is a Heading

33 |

34 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, molestias esse voluptas inventore doloremque distinctio, pariatur quis eius a cumque nam voluptates nemo rerum animi mollitia optio ratione eaque iure enim accusamus magni illum quasi impedit! Consequatur maiores provident itaque. 35 |

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

Our Team

46 |
47 |
48 | 49 |

Mr. Asif

50 |

Our CEO

51 |
52 |
53 | 54 |

Mr. Asif

55 |

Our MD

56 |
57 |
58 | 59 |

Mr. Rasmus

60 |

Our Owner

61 |
62 |
63 | 64 | 67 | 68 | 69 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /day-31 Nov-03-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 |
Dhaka
13 |
Rajshahi
14 |
Khulna
15 |
Rangpur
16 |
17 |
18 |
19 | Dhaka Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus quam ducimus, ab tempora a qui unde ea eum est delectus rem possimus dicta quod neque accusantium modi cumque. Nobis officia ipsa ducimus necessitatibus omnis, corporis provident impedit odio hic earum? 20 |
21 |
22 | Rajshahi Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus quam ducimus, ab tempora a qui unde ea eum est delectus rem possimus dicta quod neque accusantium modi cumque. Nobis officia ipsa ducimus necessitatibus omnis, corporis provident impedit odio hic earum? 23 |
24 |
25 | Khulna Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus quam ducimus, ab tempora a qui unde ea eum est delectus rem possimus dicta quod neque accusantium modi cumque. Nobis officia ipsa ducimus necessitatibus omnis, corporis provident impedit odio hic earum? 26 |
27 |
28 | Rangpur Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus quam ducimus, ab tempora a qui unde ea eum est delectus rem possimus dicta quod neque accusantium modi cumque. Nobis officia ipsa ducimus necessitatibus omnis, corporis provident impedit odio hic earum? 29 |
30 |
31 |
32 |
33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /day-4 Jul-21-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Home 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
SNNameCityGenderSkill
01Md. KamalDhakaMaleReact.js
02Selena BegumKhulnaFemaleJavaScript
03Salman ChawdhuryRangpurMalePHP
39 |

40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 55 | 56 | 57 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 |
5
88 | 89 |

90 |
91 | 92 | 93 | 94 |
95 | 96 | -------------------------------------------------------------------------------- /day-11 Aug-18-2025/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container-1 { 8 | width: 100%; 9 | height: 100vh; 10 | background: limegreen; 11 | display: grid; 12 | grid-gap: 20px; 13 | padding: 20px; 14 | /* grid-template-rows: auto auto auto auto; */ 15 | /* grid-template-columns: auto auto auto; */ 16 | /* grid-template-columns: 1fr 1fr 1fr; */ 17 | /* grid-template-columns: 1fr 2fr 1fr; */ 18 | /* grid-template-columns: repeat(3, 1fr); */ 19 | grid-template-columns: minmax(100px, 150px) 2fr minmax(auto, 1fr); 20 | } 21 | 22 | .container-1 > div { 23 | background: yellow; 24 | } 25 | 26 | .container-2 { 27 | width: 100%; 28 | height: 100vh; 29 | display: grid; 30 | background: pink; 31 | grid-gap: 20px; 32 | padding: 20px; 33 | } 34 | 35 | .container-2 > div { 36 | background: hotpink; 37 | } 38 | 39 | .container-2 > div:first-child { 40 | grid-column: 1 / 3; 41 | grid-row: 1 / 2; 42 | } 43 | 44 | .container-2 > div:nth-child(2) { 45 | grid-column: 3 / 4; 46 | grid-row: 1 / 2; 47 | } 48 | 49 | .container-2 > div:nth-child(3) { 50 | grid-column: 4 / 5; 51 | grid-row: 1 / 3; 52 | } 53 | 54 | .container-2 > div:nth-child(4) { 55 | grid-column: 1 / 2; 56 | grid-row: 2 / 3; 57 | } 58 | 59 | .container-2 > div:last-child { 60 | grid-column: 2 / 4; 61 | grid-row: 2 / 3; 62 | } 63 | 64 | .container-3 { 65 | width: 100%; 66 | height: 100vh; 67 | display: grid; 68 | grid-gap: 20px; 69 | padding: 20px; 70 | background: cornflowerblue; 71 | grid-template-columns: repeat(4, 1fr); 72 | } 73 | 74 | .container-3 > div { 75 | background: skyblue; 76 | } 77 | 78 | .container-3 > div:first-child { 79 | grid-column: span 2; 80 | grid-row: span 1; 81 | } 82 | 83 | .container-3 > div:nth-child(2) { 84 | grid-column: span 1; 85 | grid-row: span 1; 86 | } 87 | 88 | .container-3 > div:nth-child(3) { 89 | grid-column: span 1; 90 | grid-row: span 2; 91 | } 92 | 93 | .container-3 > div:nth-child(4) { 94 | grid-column: span 1; 95 | grid-row: span 1; 96 | } 97 | 98 | .container-3 > div:last-child { 99 | grid-column: span 2; 100 | grid-row: span 1; 101 | } 102 | 103 | .container-4 { 104 | width: 100%; 105 | height: 100vh; 106 | display: grid; 107 | background: orangered; 108 | grid-gap: 20px; 109 | padding: 20px; 110 | grid-template-areas: 111 | "area1 area1 area2 area3" 112 | "area4 area5 area5 area3"; 113 | } 114 | 115 | .container-4 > div { 116 | background: lightyellow; 117 | /* display: flex; 118 | justify-content: center; 119 | align-items: center; */ 120 | display: grid; 121 | /* justify-content: center; 122 | align-items: center; */ 123 | place-items: center; 124 | } 125 | 126 | .container-4 > div:first-child { 127 | grid-area: area1; 128 | } 129 | 130 | .container-4 > div:nth-child(2) { 131 | grid-area: area2; 132 | } 133 | 134 | .container-4 > div:nth-child(3) { 135 | grid-area: area3; 136 | } 137 | 138 | .container-4 > div:nth-child(4) { 139 | grid-area: area4; 140 | } 141 | 142 | .container-4 > div:last-child { 143 | grid-area: area5; 144 | } -------------------------------------------------------------------------------- /day-24 & 25 Oct-09-2025 & Oct-13-2025/css/style.min.css: -------------------------------------------------------------------------------- 1 | @import"https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap";*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family:"Oswald",sans-serif;scroll-behavior:smooth}button{border-width:0;padding:8px 16px;background:#ccc;-webkit-border-radius:16px/50%;-moz-border-radius:16px/50%;border-radius:16px/50%;font-size:18px}button:hover{background:#32cd32;color:#fff;cursor:pointer;text-shadow:1px 1px 1px #000}p{font-style:italic;color:#333}h2{text-align:center;color:#90ee90;text-shadow:1px 1px 1px #000;margin:20px 0}.nav{background:#ccc}.nav>ul{list-style:none;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.nav>ul>li>a{text-decoration:none;color:#333;line-height:44px;display:block;font-variant:small-caps;font-weight:300;font-size:22px}.nav>ul>li:hover{background:#32cd32}.nav>ul>li:hover>a{color:#fff}.hero{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;gap:16px}.hero>div:first-child{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-webkit-align-items:start;-moz-box-align:start;-ms-flex-align:start;align-items:start;gap:16px}.hero>div:first-child>h1{color:#32cd32;text-shadow:2px 2px 2px #000}.hero>div:last-child>img{width:100%;max-height:400px;-o-object-fit:cover;object-fit:cover}.team{display:grid;gap:16px}.team>div{text-align:center;border:1px solid #333;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;padding:16px}.team>div>img{width:100%;padding:12px;border:1px solid #333;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;aspect-ratio:1/1}footer{width:100%;background:#000;color:#fff;font-size:14px;text-align:center;margin-top:40px;line-height:40px}@media screen and (max-width: 768px){.nav{max-width:100%;padding:10px}.nav>ul{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-webkit-align-items:start;-moz-box-align:start;-ms-flex-align:start;align-items:start}.nav>ul>li{width:100%}.nav>ul>li>a{padding:0 20px}.nav>ul>li>a>label>#showNav{display:none}.nav>ul.showNav{display:block}.nav>.nav-btn{padding:8px;margin-left:20px;cursor:pointer}.hero{width:100%;padding:12px;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-moz-box-orient:vertical;-moz-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.team{padding:12px;grid-template-columns:repeat(1, 1fr)}}@media screen and (min-width: 768px){.nav{max-width:1200px;margin:0 auto}.nav>ul{-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center}.nav>ul>li>a{padding:0 20px}.nav>.nav-btn{display:none}.hero{max-width:1200px;margin:0 auto;padding:60px 0}.hero>div{width:50%}.team{max-width:1200px;margin:0 auto;grid-template-columns:repeat(3, 1fr)}}/*# sourceMappingURL=style.min.css.map */ -------------------------------------------------------------------------------- /day-3 Jul-17-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Form 7 | 8 | 9 | 14 | 15 |
16 | 17 |

18 | 19 |

20 | 21 |

22 | 23 |

24 | 25 |

26 | Gender : 27 | 30 | 33 | 36 |

37 | Skills : 38 | 41 | 44 | 47 |

48 | 52 |

53 | 57 |

58 | 62 |

63 | 67 |

68 | 80 |

81 | 85 |

86 | 87 |
88 | 89 | -------------------------------------------------------------------------------- /day-32 Nov-06-2025/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-22 Sep-25-2025/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 27 | 28 |
29 |
30 | 31 |
32 |
33 | 38 |
39 |
40 | 41 |
42 |
43 | 44 |
45 |
46 | 47 |
48 | Hover করলে এই element scale হবে দ্রুত ও মসৃণভাবে। 49 |
50 |
51 | 52 | 53 | 54 | 55 | 56 |
57 | 58 |
59 |
60 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero deserunt amet placeat suscipit repellendus. Laudantium eum rem cum vitae expedita non ex saepe, vero ullam. Alias harum possimus dolore temporibus. 61 |
62 |
63 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero deserunt amet placeat suscipit repellendus. Laudantium eum rem cum vitae expedita non ex saepe, vero ullam. Alias harum possimus dolore temporibus. 64 |
65 |
66 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero deserunt amet placeat suscipit repellendus. Laudantium eum rem cum vitae expedita non ex saepe, vero ullam. Alias harum possimus dolore temporibus. 67 |
68 |
69 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero deserunt amet placeat suscipit repellendus. Laudantium eum rem cum vitae expedita non ex saepe, vero ullam. Alias harum possimus dolore temporibus. 70 |
71 |
72 | 73 | 74 | -------------------------------------------------------------------------------- /day-36 D - 37 Dec-01-2025 - Dec-04-2025/signup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 18 | 19 | 20 | 21 |
22 |
23 |
24 | Create Account
25 |
26 |
27 |
28 | 29 | 31 |
32 |
33 | 34 | 36 |
37 |
38 | 39 |
40 | 42 | 45 |
46 |
47 |
48 | 51 | Forget Password? 52 |
53 |
54 |
55 | Already have an account? Log In 56 |
57 |
58 |
59 |
60 | 61 | 67 | 78 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /day-24 & 25 Oct-09-2025 & Oct-13-2025/css/style.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: "Oswald", sans-serif; 8 | scroll-behavior: smooth; 9 | } 10 | 11 | button { 12 | border-width: 0; 13 | padding: 8px 16px; 14 | background: #ccc; 15 | border-radius: 16px/50%; 16 | font-size: 18px; 17 | 18 | &:hover { 19 | background: limegreen; 20 | color: #fff; 21 | cursor: pointer; 22 | text-shadow: 1px 1px 1px #000; 23 | } 24 | } 25 | 26 | p { 27 | font-style: italic; 28 | color: #333; 29 | } 30 | 31 | h2 { 32 | text-align: center; 33 | color: lightgreen; 34 | text-shadow: 1px 1px 1px #000; 35 | margin: 20px 0; 36 | } 37 | 38 | .nav { 39 | background: #ccc; 40 | 41 | >ul { 42 | list-style: none; 43 | display: flex; 44 | 45 | >li { 46 | >a { 47 | text-decoration: none; 48 | color: #333; 49 | line-height: 44px; 50 | display: block; 51 | font-variant: small-caps; 52 | font-weight: 300; 53 | font-size: 22px; 54 | } 55 | 56 | &:hover { 57 | background: limegreen; 58 | 59 | >a { 60 | color: #fff; 61 | } 62 | } 63 | } 64 | } 65 | } 66 | 67 | .hero { 68 | display: flex; 69 | gap: 16px; 70 | 71 | >div { 72 | &:first-child { 73 | >h1 { 74 | color: limegreen; 75 | text-shadow: 2px 2px 2px #000; 76 | } 77 | 78 | display: flex; 79 | flex-direction: column; 80 | justify-content: center; 81 | align-items: start; 82 | gap: 16px; 83 | } 84 | 85 | &:last-child { 86 | >img { 87 | width: 100%; 88 | max-height: 400px; 89 | object-fit: cover; 90 | } 91 | } 92 | } 93 | } 94 | 95 | .team { 96 | display: grid; 97 | gap: 16px; 98 | >div { 99 | text-align: center; 100 | border: 1px solid #333; 101 | border-radius: 8px; 102 | padding: 16px; 103 | >img { 104 | width: 100%; 105 | padding: 12px; 106 | border: 1px solid #333; 107 | border-radius: 50%; 108 | aspect-ratio: 1/1; 109 | } 110 | } 111 | } 112 | 113 | footer { 114 | width: 100%; 115 | background: #000; 116 | color: #fff; 117 | font-size: 14px; 118 | text-align: center; 119 | margin-top: 40px; 120 | line-height: 40px; 121 | } 122 | 123 | @media screen and (max-width: 768px) { 124 | .nav { 125 | max-width: 100%; 126 | padding: 10px; 127 | 128 | >ul { 129 | display: none; 130 | flex-direction: column; 131 | align-items: start; 132 | 133 | >li { 134 | width: 100%; 135 | 136 | >a { 137 | padding: 0 20px; 138 | 139 | >label { 140 | >#showNav { 141 | display: none; 142 | } 143 | } 144 | } 145 | } 146 | } 147 | 148 | >ul.showNav { 149 | display: block; 150 | } 151 | 152 | >.nav-btn { 153 | padding: 8px; 154 | margin-left: 20px; 155 | cursor: pointer; 156 | } 157 | } 158 | 159 | .hero { 160 | width: 100%; 161 | padding: 12px; 162 | flex-direction: column-reverse; 163 | } 164 | 165 | .team { 166 | padding: 12px; 167 | grid-template-columns: repeat(1, 1fr); 168 | } 169 | } 170 | 171 | @media screen and (min-width: 768px) { 172 | .nav { 173 | max-width: 1200px; 174 | margin: 0 auto; 175 | 176 | >ul { 177 | justify-content: center; 178 | 179 | >li { 180 | >a { 181 | padding: 0 20px; 182 | } 183 | } 184 | } 185 | 186 | >.nav-btn { 187 | display: none; 188 | } 189 | } 190 | 191 | .hero { 192 | max-width: 1200px; 193 | margin: 0 auto; 194 | padding: 60px 0; 195 | 196 | >div { 197 | width: 50%; 198 | } 199 | } 200 | 201 | .team { 202 | max-width: 1200px; 203 | margin: 0 auto; 204 | grid-template-columns: repeat(3, 1fr); 205 | } 206 | } -------------------------------------------------------------------------------- /day-36 D - 37 Dec-01-2025 - Dec-04-2025/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 18 | 19 | 20 | 21 |
22 |
23 |
24 | Welcome
25 |
26 |
27 |
28 | 29 | 31 |
32 |
33 | 34 |
35 | 37 | 40 |
41 |
42 |
43 | 44 | 47 | Forget Password? 48 |
49 |
50 |
51 |
52 |
53 | 54 | 60 | 61 | 72 | 73 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /day-33 Nov-10-2025/index.js: -------------------------------------------------------------------------------- 1 | for (let i = 0; i < 100; i++) { 2 | if(i == 5) { 3 | continue; 4 | }else if ( i == 10) { 5 | break; 6 | } 7 | console.log(i); 8 | } 9 | 10 | // Array - Access | Modify | Check Array 11 | let fruits = ['Apple', 'Banana', 'Cherry']; 12 | 13 | // Access elements 14 | console.log(fruits[0]); // Apple 15 | console.log(fruits[1]); // Banana 16 | console.log(fruits[2]); // Cherry 17 | 18 | // Modify elements 19 | fruits[1] = 'Blueberry'; 20 | console.log(fruits); // ['Apple', 'Blueberry', 'Cherry'] 21 | 22 | // Check Array 23 | console.log(Array.isArray(fruits)); // true 24 | console.log(fruits.length); // 3 25 | console.log(fruits.indexOf('Cherry')); // 2 26 | 27 | // Traverse Array 28 | for (let i = 0; i < fruits.length; i++) { 29 | console.log(fruits[i]); 30 | } 31 | 32 | // Reverse Array 33 | fruits.reverse(); 34 | console.log(fruits); // ['Cherry', 'Blueberry', 'Apple'] 35 | 36 | // Sort Array 37 | fruits.sort(); 38 | console.log(fruits); // ['Apple', 'Blueberry', 'Cherry'] 39 | 40 | // Copy Array 41 | let moreFruits = ['Date', 'Elderberry']; 42 | let allFruits = fruits.concat(moreFruits); 43 | console.log(allFruits); // ['Apple', 'Blueberry', 'Cherry', 'Date', 'Elderberry'] 44 | 45 | // 2D Array 46 | let matrix = [ 47 | [1, 2, 3], 48 | [4, 5, 6], 49 | [7, 8, 9] 50 | ]; 51 | 52 | console.log(matrix[0][0]); // 1 53 | console.log(matrix[1][1]); // 5 54 | 55 | for (let i = 0; i < matrix.length; i++) { 56 | for (let j = 0; j < matrix[i].length; j++) { 57 | console.log(matrix[i][j]); 58 | } 59 | } 60 | 61 | // Strings vs Array 62 | let str = "Hello, World!"; 63 | console.log(str[0]); // H 64 | console.log(str.length); // 13 65 | console.log(str.indexOf('World')); // 7 66 | 67 | // String Methods: 68 | console.log(str.toUpperCase()); // "HELLO, WORLD!" 69 | console.log(str.toLowerCase()); // "hello, world!" 70 | console.log(str.slice(0, 5)); // "Hello" 71 | console.log(str.replace('World', 'there')); // "Hello, there!" 72 | console.log(str.includes('Hello')); // true 73 | console.log(str.trim()); // "Hello, World!" 74 | console.log(str.charAt(7)); // W 75 | console.log(str.split(', ')); // ["Hello", "World!"] 76 | console.log(str.split(', ').reverse().join(', ')); // "World!, Hello" 77 | 78 | // Objects 79 | const person = { 80 | name: 'John', 81 | age: 30, 82 | city: 'New York' 83 | }; 84 | 85 | // Access properties 86 | console.log(person.name); // John 87 | console.log(person['age']); // 30 88 | 89 | // Modify properties 90 | person.age = 31; 91 | console.log(person.age); // 31 92 | 93 | // Delete property 94 | delete person.city; 95 | console.log(person.city); // undefined 96 | 97 | // Add property 98 | person.country = 'USA'; 99 | console.log(person.country); // USA 100 | 101 | // Traverse Object 102 | for (let key in person) { 103 | console.log(key + ": " + person[key]); 104 | } 105 | 106 | // Conditional Return 107 | function checkNumber(num) { 108 | if (num > 0) { 109 | return "Positive"; 110 | } else if (num < 0) { 111 | return "Negative"; 112 | } else { 113 | return "Zero"; 114 | } 115 | } 116 | 117 | console.log(checkNumber(10)); 118 | 119 | // Math 120 | console.log(Math.abs(-5)); // 5 121 | console.log(Math.max(1, 3, 2, 5)); // 5 122 | console.log(Math.min(1, 3, 2, -5)); // -5 123 | console.log(Math.pow(2, 3)); // 8 124 | console.log(Math.sqrt(16)); // 4 125 | console.log(Math.round(4.6)); // 5 126 | console.log(Math.ceil(4.2)); // 5 127 | console.log(Math.floor(4.8)); // 4 128 | console.log(Math.random()); // Random number between 0 and 1 129 | 130 | // Date Object 131 | let now = new Date(); 132 | console.log(now); 133 | console.log(now.getFullYear()); 134 | console.log(now.getMonth() + 1); 135 | console.log(now.getDate()); 136 | console.log(now.getHours()); 137 | console.log(now.getMinutes()); 138 | console.log(now.getSeconds()); 139 | console.log(now.getTime()); 140 | console.log(now.toLocaleDateString('en-US', { day: '2-digit', month: 'short', year: 'numeric' })); // e.g., "15 Jun 2024" 141 | console.log(now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true })); // e.g., "03:45:30 PM" 142 | 143 | // Swap Variable 144 | let a = 5; 145 | let b = 10; 146 | [a, b] = [b, a]; 147 | console.log(a); 148 | 149 | // Function Inside Function || Nested Function 150 | function outerFunction(x) { 151 | function innerFunction(y) { 152 | return y * 2; 153 | } 154 | return innerFunction(x) + 3; 155 | } 156 | 157 | console.log(outerFunction(5)); // 13 158 | 159 | // Recursion 160 | function factorial(n) { 161 | if (n === 0) { 162 | return 1; 163 | } else { 164 | return n * factorial(n - 1); 165 | } 166 | } 167 | 168 | console.log(factorial(5)); // 120 169 | const xyz = "hi"; 170 | // Error Handling 171 | try { 172 | xyz = "hello"; 173 | } catch (error) { 174 | console.error("Error occurred: " + error.message); 175 | } -------------------------------------------------------------------------------- /day-15 - 16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 44 | 45 | 46 | 47 |
48 |
49 |

My IT Farm

50 |

51 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate quod maiores itaque repellendus, hic possimus eaque quidem excepturi totam, odit ipsum architecto ut dolores aliquid vero consequatur iure. Officiis ullam sed nulla inventore doloremque facilis, reprehenderit illo tempora nobis sunt dignissimos vero odit minus iste sapiente nisi? Nobis velit autem ratione necessitatibus, cumque neque nostrum totam perferendis voluptate. Quam, repudiandae. 52 |

53 | 54 |
55 |
56 | 57 |
58 |
59 | 60 | 61 | 62 |
63 |

Our Team

64 |
65 |
66 | 67 |

Kamal Khan

68 |

Chairman

69 | 70 |
71 |
72 | 73 |

Rahim Rahman

74 |

CEO

75 | 76 |
77 |
78 | 79 |

Aslam ALom

80 |

Owner

81 | 82 |
83 |
84 |
85 | 86 | 87 | 88 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /day-15 - 16/gallery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 44 | 45 | 46 | 47 |
48 |

Our Gallery

49 |
50 |
51 | Gallery 1 52 |
53 |
54 | Gallery 2 55 |
56 |
57 | Gallery 3 58 |
59 |
60 | Gallery 4 61 |
62 |
63 |
64 |
65 | Gallery 5 66 |
67 |
68 | Gallery 6 69 |
70 |
71 | Gallery 7 72 |
73 |
74 | Gallery 8 75 |
76 |
77 |
78 |
79 | Gallery 9 80 |
81 |
82 | Gallery 10 83 |
84 |
85 | Gallery 11 86 |
87 |
88 | Gallery 12 89 |
90 |
91 |
92 |
93 | Gallery 13 94 |
95 |
96 | Gallery 14 97 |
98 |
99 | Gallery 15 100 |
101 |
102 | Gallery 16 103 |
104 |
105 |
106 | 107 | 108 | 109 | 147 | 148 | 149 | -------------------------------------------------------------------------------- /day-15 - 16/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap'); 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: "Oswald", sans-serif; 7 | } 8 | 9 | /* Common CSS */ 10 | button { 11 | width: max-content; 12 | padding: 6px 20px; 13 | border-radius: 20px/50%; 14 | border-width: 0; 15 | background: darkblue; 16 | color: white; 17 | cursor: pointer; 18 | transition: 0.3s; 19 | } 20 | 21 | button:hover { 22 | box-shadow: 6px 6px 6px #000; 23 | text-decoration: underline; 24 | } 25 | 26 | h1, h2, h3, h4, h5, h6 { 27 | color: #00008b; 28 | } 29 | 30 | /* navigation bar */ 31 | 32 | nav { 33 | width: 100%; 34 | display: flex; 35 | padding: 0 100px; 36 | align-items: center; 37 | justify-content: space-between; 38 | border-bottom: 1px solid lightblue; 39 | box-shadow: 0px 0px 3px blue; 40 | margin-bottom: 40px; 41 | } 42 | 43 | nav > img { 44 | flex-basis: 25%; 45 | max-height: 60px; 46 | width: auto; 47 | object-fit: contain; 48 | object-position: 0 center; 49 | } 50 | 51 | nav > ul { 52 | flex-grow: 1; 53 | list-style: none; 54 | display: flex; 55 | justify-content: flex-end; 56 | gap: 12px; 57 | font-size: 22px; 58 | color: darkblue; 59 | } 60 | 61 | nav > ul > li { 62 | position: relative; 63 | } 64 | 65 | nav > ul > li:hover { 66 | background: darkblue; 67 | } 68 | 69 | nav > ul > li:hover > a { 70 | color: white; 71 | } 72 | 73 | i { 74 | transition: 0.5s; 75 | } 76 | 77 | nav li:hover > a > i { 78 | transform: rotate(180deg); 79 | } 80 | 81 | nav > ul > li a { 82 | text-decoration: none; 83 | line-height: 60px; 84 | color: inherit; 85 | display: block; 86 | padding: 0 20px; 87 | } 88 | 89 | .snav { 90 | list-style: none; 91 | position: absolute; 92 | width: max-content; 93 | background: darkblue; 94 | color: #fff; 95 | transition: 0.5s; 96 | top: 140%; 97 | left: 0%; 98 | opacity: 0; 99 | visibility: hidden; 100 | border: 1px solid darkblue; 101 | } 102 | 103 | nav > ul > li:hover > .snav { 104 | top: 100%; 105 | opacity: 1; 106 | visibility: visible; 107 | } 108 | 109 | .snav > li { 110 | width: 100%; 111 | position: relative; 112 | z-index: 100; 113 | } 114 | 115 | .snav > li:hover { 116 | background: white !important; 117 | } 118 | 119 | .snav > li > a { 120 | color: inherit; 121 | } 122 | 123 | /* active link */ 124 | nav > ul > li > a.active { 125 | color: white; 126 | background: darkblue; 127 | } 128 | 129 | .snav > li:hover > a { 130 | color: darkblue; 131 | } 132 | 133 | .ssnav { 134 | position: absolute; 135 | top: 0; 136 | left: 140%; 137 | list-style: none; 138 | background: white; 139 | color: darkblue; 140 | width: max-content; 141 | border: 1px solid darkblue; 142 | transition: 0.5s; 143 | visibility: hidden; 144 | opacity: 0; 145 | 146 | } 147 | 148 | .ssnav > li { 149 | position: relative; 150 | } 151 | 152 | .ssnav > li > a { 153 | text-decoration: none; 154 | color: inherit; 155 | } 156 | 157 | .ssnav > li:hover { 158 | background: darkblue; 159 | } 160 | 161 | .ssnav > li:hover > a { 162 | color: #fff; 163 | } 164 | 165 | .snav > li:hover > .ssnav { 166 | visibility: visible; 167 | opacity: 1; 168 | left: 100%; 169 | } 170 | 171 | 172 | /* Hero Section */ 173 | 174 | .hero { 175 | width: 100%; 176 | padding: 0 100px; 177 | display: grid; 178 | grid-template-columns: repeat(2, 1fr); 179 | gap: 20px; 180 | margin-bottom: 40px; 181 | } 182 | 183 | .hero > .left { 184 | display: grid; 185 | justify-content: start; 186 | align-content: center; 187 | gap: 12px; 188 | } 189 | 190 | .hero > .left > h1 { 191 | font-size: 48px; 192 | } 193 | 194 | .hero > .left > p { 195 | font-size: 14px; 196 | font-style: italic; 197 | color: #333; 198 | } 199 | 200 | .hero > .right > img { 201 | width: 100%; 202 | } 203 | 204 | 205 | /* Team Section */ 206 | 207 | .team { 208 | width: 100%; 209 | padding: 0 100px; 210 | margin-bottom: 40px; 211 | } 212 | 213 | .team > h2 { 214 | text-align: center; 215 | font-size: 36px; 216 | padding: 20px; 217 | } 218 | 219 | .team > .members { 220 | display: grid; 221 | grid-template-columns: repeat(3, 1fr); 222 | grid-gap: 20px; 223 | } 224 | 225 | .team > .members > .member { 226 | border: 1px solid #666; 227 | padding: 20px; 228 | border-radius: 8px; 229 | box-shadow: 0 0 10px #666; 230 | text-align: center; 231 | transition: 0.3s; 232 | } 233 | 234 | .team > .members > .member > img { 235 | width: 100%; 236 | border-radius: 50%; 237 | border: 1px solid #666; 238 | padding: 12px; 239 | } 240 | 241 | .team > .members > .member > h3 { 242 | font-size: 28px; 243 | } 244 | 245 | .team > .members > .member > p { 246 | color: blue; 247 | margin-bottom: 20px; 248 | margin-top: -3px; 249 | } 250 | 251 | .team > .members > .member > p::before { 252 | content: "- "; 253 | } 254 | 255 | .team > .members > .member > p::after { 256 | content: " -"; 257 | } 258 | 259 | .team > .members > .member:hover { 260 | transform: translateY(-6px); 261 | } 262 | 263 | /* gallery section */ 264 | .gallery { 265 | width: 100%; 266 | padding: 0 100px; 267 | margin-bottom: 40px; 268 | } 269 | 270 | .gallery > h2 { 271 | text-align: center; 272 | font-size: 36px; 273 | padding: 20px; 274 | } 275 | 276 | .gallery > .images { 277 | display: grid; 278 | grid-template-columns: repeat(4, 1fr); 279 | gap: 12px; 280 | margin-bottom: 12px; 281 | } 282 | 283 | .gallery > .images > div { 284 | position: relative; 285 | overflow: hidden; 286 | } 287 | 288 | .gallery > .images > div::before { 289 | content: "View"; 290 | position: absolute; 291 | top: 100%; 292 | left: 0; 293 | width: 100%; 294 | height: 100%; 295 | background: rgba(0, 0, 0, 0.6); 296 | transition: 0.3s; 297 | display: grid; 298 | place-items: center; 299 | color: #fff; 300 | font-size: 22px; 301 | letter-spacing: 5px; 302 | text-transform: uppercase; 303 | } 304 | 305 | .gallery > .images > div:hover::before { 306 | top: 0%; 307 | } 308 | 309 | .gallery > .images > div > img { 310 | width: 100%; 311 | height: 200px; 312 | display: block; 313 | object-fit: cover; 314 | } 315 | 316 | /* footer section */ 317 | 318 | footer { 319 | width: 100%; 320 | padding: 40px 100px; 321 | background: #00008b; 322 | display: grid; 323 | grid-template-columns: repeat(4, 1fr); 324 | } 325 | 326 | footer > div > ul { 327 | list-style: none; 328 | } 329 | 330 | footer > div > ul >li:first-child { 331 | font-size: 20px; 332 | margin-bottom: 12px; 333 | color: #fff; 334 | } 335 | 336 | footer > div > ul >li { 337 | font-size: 14px; 338 | font-style: italic; 339 | color: #999; 340 | cursor: pointer; 341 | } 342 | 343 | footer > div > ul >li:hover { 344 | color: #fff; 345 | } -------------------------------------------------------------------------------- /day-36 D - 37 Dec-01-2025 - Dec-04-2025/dashboard.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 18 | 21 | 22 | 23 | 24 |
25 |
26 |
27 |
28 |

Dashboard

29 |

Available Balance: $0.00

30 |
31 |
32 | 34 |
35 |
36 |
38 | 39 |
41 | 42 | Add Money 43 |
44 | 45 |
47 | 48 | Cash Out 49 |
50 | 51 |
53 | 54 | Send Money 55 |
56 | 57 |
59 | 60 | Get Bonus 61 |
62 | 63 |
65 | 66 | Pay Bills 67 |
68 | 69 |
71 | 72 | Transactions 73 |
74 |
75 | 76 | 77 | 116 | 117 | 118 | 147 | 148 | 149 | 178 | 179 | 180 | 199 | 200 | 201 | 240 | 241 | 242 | 256 |
257 |
258 | 259 | 265 | 266 | 276 | 277 | 284 | 285 | 560 | 561 | 562 | --------------------------------------------------------------------------------