├── app.js ├── index.html └── style.css /app.js: -------------------------------------------------------------------------------- 1 | 2 | // document.getElementById("myBtn").onclick = function () { 3 | // alert('Welcome Ali'); 4 | // }; 5 | 6 | // document.getElementById("myBtn1").onmouseover = function () { 7 | // alert('Welcome Ali to the js course again'); 8 | // }; 9 | 10 | 11 | // // document.getElementById("myBtn2").addEventListener('click', function(){ 12 | // // alert("Hello ALi, ya addeventlistener hai") 13 | // // }); 14 | 15 | // document.getElementById("myBtn2").addEventListener('click', () => { 16 | // alert("Hello ALi, ya addeventlistener hai") 17 | // }); 18 | 19 | // document.getElementById("myBtn3").addEventListener('mouseover', () => { 20 | // alert("Hello ALi, ya addeventlistener hai") 21 | // }); 22 | 23 | // let myButton = document.getElementById("myButton"); 24 | // let rectangleDiv = document.querySelector(".rectangle"); 25 | 26 | // const handleMouseEvents = () => { 27 | // console.log("click"); 28 | // rectangleDiv.style.backgroundColor = "#f5ee62"; 29 | // }; 30 | 31 | // const handleMouseEvents2 = () =>{ 32 | // console.log("dblclick"); 33 | // rectangleDiv.classList.add("addTransition"); 34 | // }; 35 | 36 | // const handleMouseEvents3 = () => { 37 | // rectangleDiv.classList.add("addTransition3") 38 | // } 39 | 40 | // const handleMouseEvents4 = () => { 41 | // rectangleDiv.classList.add("addTransition4") 42 | // } 43 | 44 | // const handleMouseEvents5 = () => { 45 | // rectangleDiv.classList.add("addTransition5") 46 | // } 47 | 48 | // const handleMouseEvents6 = () => { 49 | // rectangleDiv.classList.add("addTransition6") 50 | // } 51 | 52 | // myButton.addEventListener('click', handleMouseEvents) 53 | // myButton.addEventListener('dblclick', handleMouseEvents2) 54 | // myButton.addEventListener('mouseover', handleMouseEvents3) 55 | // myButton.addEventListener('mouseout', handleMouseEvents4) 56 | // myButton.addEventListener('mousedown', handleMouseEvents5) 57 | // myButton.addEventListener('mouseup', handleMouseEvents6) 58 | 59 | 60 | // const handleKeyPress = (event) => { 61 | // console.log(event); 62 | // console.log("Key pressed:", event.key); 63 | // console.log("Key code:", event.code); 64 | // console.log("Event type:", event.type); 65 | // } 66 | 67 | // document.querySelector( 68 | // ".keyPressed" 69 | // ).textContent = `Key pressed: ${event.key}`; 70 | 71 | // document.querySelector( 72 | // ".keyCode" 73 | // ).textContent = `Key code: ${event.code}`; 74 | 75 | // document.querySelector( 76 | // ".charCode" 77 | // ).textContent = `Char code: ${event.key.charCodeAt(0)}`; 78 | 79 | // document.querySelector( 80 | // ".eventType" 81 | // ).textContent = `Key type: ${event.type}`; 82 | 83 | 84 | 85 | 86 | // let myInput = document.getElementById("myInput"); 87 | // myInput.addEventListener('keydown', handleKeyPress); 88 | // myInput.addEventListener('keyup', handleKeyPress); 89 | 90 | 91 | // const inputElem = document.getElementById("myInput"); 92 | // const handleInput = (event) =>{ 93 | // console.log(event); 94 | // console.log("Input value:", event.target.value); 95 | // console.log("Input name:", event.target.name); 96 | // console.log("Input type:", event.inputType); 97 | // console.log("Event type:", event.target.type); 98 | // }; 99 | // inputElem.addEventListener("input", handleInput); 100 | 101 | 102 | /////////////////////////////////////////////////////////////////////////end// 103 | ///////// start advance js 104 | 105 | // const jsonString = '{"name":"Vinod","age": 30, "city": "karachi"}'; 106 | // const parsedData = JSON.parse(jsonString); 107 | // console.log(parsedData); 108 | 109 | 110 | // const studentBioData = { 111 | // firstName: "Vinod", 112 | // lastName: "thapa", 113 | // age: 20, 114 | // gender: "male", 115 | // grade: "A", 116 | // courses: ["Math", "Science", "English"], 117 | // address: { 118 | // street: "123 Main St", 119 | // city: "cityVille", 120 | // state: "State", 121 | // zipCode: "12345", 122 | // }, 123 | // }; 124 | 125 | // const addTodoList = () => { 126 | // localStorage.setItem("objectData", JSON.stringify(studentBioData)); 127 | // }; 128 | 129 | // const getTodoList = () => { 130 | // const retrievedStudentData = JSON.parse(localStorage.getItem("objectData")); 131 | // console.log("Retrieved from local Storage:", retrievedStudentData); 132 | // }; 133 | 134 | // const removeTodoList = () => { 135 | // const removedData = localStorage.removeItem("objectData"); 136 | // console.log("Data after removal:", removedData); 137 | // } 138 | 139 | 140 | 141 | // document.getElementById("addBtn").addEventListener("click", () => { 142 | // addTodoList(); 143 | // }); 144 | 145 | // document.getElementById("getBtn").addEventListener("click", () => { 146 | // getTodoList(); 147 | // }); 148 | 149 | // document.getElementById("removeBtn").addEventListener("click", () => { 150 | // removeTodoList(); 151 | // }); 152 | 153 | 154 | //////////////// learn date time ogjects //////////////// 155 | 156 | // const currentDate = new Date(); 157 | // console.log(currentDate); 158 | 159 | // const dateString = "2024-02-19T10:44:09.274Z"; 160 | // const dataFromString = new Date(dateString); 161 | // console.log(dataFromString); 162 | 163 | 164 | // const Date1 = new Date(2024,7); 165 | // console.log(Date1); 166 | 167 | 168 | // const Date2 = new Date(2024,7,2); 169 | // console.log(Date2); 170 | 171 | 172 | // const Date3 = new Date(2024,7,1,10); 173 | // console.log(Date3); 174 | 175 | 176 | // const Date4 = new Date(2024,7,1,10,44); 177 | // console.log(Date4); 178 | 179 | 180 | // const Date5 = new Date(2024,7,1,10,44,20); 181 | // console.log(Date5); 182 | 183 | 184 | // const Date6 = new Date(2024,7,1,10,44,20,274); 185 | // console.log(Date6); 186 | 187 | // const currentDate = new Date(); 188 | // const year = currentDate.getFullYear(); 189 | // const month = currentDate.getMonth(); 190 | // const day = currentDate.getDay(); 191 | // const hours = currentDate.getHours(); 192 | // console.log(month); 193 | 194 | //////////////// set methods ///////////////////////////// 195 | 196 | // const currentDate = new Date(); 197 | // currentDate.setFullYear(2028); 198 | // currentDate.setMonth(5); 199 | // console.log(currentDate); 200 | 201 | 202 | ////////////////// get hours /////////////////// 203 | 204 | // const currentTime = new Date(); 205 | 206 | // const hours = currentTime.getHours(); 207 | // const minute = currentTime.getMinutes(); 208 | // const second = currentTime.getSeconds(); 209 | // const milliSecond = currentTime.getMilliseconds(); 210 | // const time = currentTime.getTime(); 211 | // console.log(hours); 212 | 213 | 214 | /////////////// set time methods///////////////// 215 | 216 | 217 | // const setTime = new Date(); 218 | // setTime.setHours(2); 219 | // setTime.setMinutes(50); 220 | // setTime.setSeconds(33); 221 | // setTime.setMilliseconds(111); 222 | 223 | // console.log(setTime); 224 | 225 | 226 | //////////// localtime //////////// 227 | 228 | // const date = new Date(); 229 | // const localString = date.toLocaleString(); 230 | // console.log(localString); 231 | 232 | 233 | 234 | // const newDate = new Date(); 235 | // console.log(Date.now()); 236 | // console.log(newDate.getTime()); 237 | 238 | 239 | // let getDaysDifference = (d1, d2) => { 240 | // let oneDay = 24 * 60 * 60 * 1000; 241 | // let diff = d2 - d1; 242 | // return Math.round(diff / oneDay); 243 | // }; 244 | // const date1 = new Date("2024-02-19"); 245 | // const date2 = new Date("2024-03-01"); 246 | // console.log(getDaysDifference(date1, date2)); 247 | 248 | 249 | ////////////////// setTimeout /////////////////////////////// 250 | 251 | // function setTime(){ 252 | // console.log("This is settime out"); 253 | // } 254 | // setTimeout(setTime, 5000); 255 | 256 | 257 | // function setTime(x){ 258 | // console.log("This is settime out", x); 259 | // } 260 | // setTimeout(() => setTime(10), 3000); 261 | 262 | 263 | // function setTime(){ 264 | // console.log("This is settime out", ); 265 | // } 266 | // setInterval(setTime, 3000); 267 | 268 | 269 | // function clearTime(){ 270 | // console.log("This is settime out", ); 271 | // } 272 | // const myWork = setTimeout(clearTime, 3000); 273 | // clearTimeout(myWork); 274 | 275 | 276 | // const reapedFunction = () => { 277 | // console.log("This is settime out"); 278 | // }; 279 | // const clearInter = setInterval(reapedFunction, 1000); 280 | // setTimeout(() => { 281 | // clearInterval(clearInter); 282 | // }, 5000); 283 | 284 | 285 | ////////////////////////////// objects .........////////////////// 286 | 287 | // const person = { 288 | // student: 10, 289 | // name: "ali", 290 | // greet: function(){ 291 | // console.log("world best js course"); 292 | // }, 293 | // }; 294 | // person.student = 15; 295 | // person.job = "web developer" 296 | // console.log(person); 297 | // person.greet(); 298 | 299 | 300 | // let idType = "studentId" 301 | 302 | // const person1 = { 303 | // sName: "Ali", [idType]: "A12345", class: 10, greet: function (){ 304 | // console.log(`My Name is ${person1["sName"]} and my is ${idType}, and my prsonal id ${person1[idType]}`); 305 | 306 | // } , 307 | // }; 308 | // person1.greet(); 309 | 310 | 311 | // let a = 10; 312 | // const modify = (x) => (a=20); 313 | // console.log(modify(a)); 314 | // console.log(a); 315 | 316 | 317 | // let obj = {id:5, name: "Zulfiqar"}; 318 | // let newObj = Object.assign({}, obj); 319 | // newObj.name = "Ali"; 320 | // console.log(newObj); 321 | // console.log("orginial", obj); 322 | 323 | // let obj1 = {name: "vinod"} 324 | // let obj2 = {name: "vinod"} 325 | // obj3 = obj1 326 | 327 | // const objResult = obj3 === obj1 ? true : false ; 328 | // console.log(objResult); 329 | 330 | 331 | 332 | // const person = { 333 | // student: 10, 334 | // name: "ali", 335 | // id: 1212, 336 | // greet: function(){ 337 | // console.log("world best js course"); 338 | // }, 339 | // }; 340 | 341 | // let keys = Object.keys(person); 342 | // console.log(keys); 343 | 344 | 345 | // let values = Object.values(person); 346 | // console.log(values); 347 | 348 | 349 | // let enteries = Object.entries(person); 350 | // console.log(enteries); 351 | 352 | // console.log(person.hasOwnProperty("name")); 353 | 354 | // const target = {a: 1, b: 4} 355 | // const source = {b: 3, c: 4} 356 | // const result = Object.assign(target, source); 357 | // console.log(result); 358 | 359 | // Object.freeze(person); 360 | // person.id = "2323"; 361 | // console.log(person); 362 | 363 | 364 | ///////////// How javascript works /////////////////////////////// 365 | 366 | ////////// what is synchronous /////////////////////////////// 367 | 368 | // const f2 = ()=>{ 369 | // console.log("fun2 start and ends"); 370 | // }; 371 | 372 | // const f1 = ()=>{ 373 | // console.log("fun1 is start"); 374 | // f2(); 375 | // console.log("fun1 is end"); 376 | // }; 377 | // f1(); 378 | 379 | 380 | /////////////// asynchronous ///////////////////////////// 381 | 382 | // const fun2 = () => { 383 | // setTimeout(() => { 384 | // console.log("fun2 is start and ends"); 385 | // }, 2000); 386 | // }; 387 | 388 | // const fun1 = () => { 389 | // console.log("fun1 is start"); 390 | // fun2(); 391 | // console.log("fun1 is ends"); 392 | // }; 393 | // fun1(); 394 | 395 | ////////////////////asynchronous//////////////////////// 396 | 397 | 398 | ///////////////////// Ecascript 2015 to 2023..... /////////////////////////// 399 | 400 | ////////////// ojects modern ////////////// 401 | 402 | // const name = "Zulfiqar"; 403 | // const age = 18; 404 | // const person = (name: name, age: age) /// old version 405 | // const person = {name, age};/// new version 406 | // console.log(person); 407 | 408 | ////////////////// array destruction / ////////// 409 | 410 | // const numbers = [10,20,30]; 411 | // // const first = numbers[2]; /// old version 412 | // // const [first, second, third] = numbers; // new versin destruction array/ 413 | // const [, , third] = numbers; // new versin ignoring element 414 | // console.log(third); 415 | 416 | // let a = 10; /// new version / /////////////// 417 | // let b = 30; 418 | // [a,b] = [b,a]; 419 | // console.log(a, b); 420 | 421 | 422 | // const user = {name: "ali", age: 18}; 423 | // console.log(user.name); /// old version 424 | // // const myName = user.name; 425 | // const {name,age} = user; 426 | // console.log(name,age); 427 | 428 | /////////////////////////// //////////////////////////////////// 429 | 430 | // const numbers1 = [1,2,3]; 431 | // const numbers2 = [4,5,6]; 432 | // const newNumbers = [...numbers1, ...numbers2]; 433 | // console.log(newNumbers); 434 | 435 | ///////////////////// Ecascript 2016 to 2023..... /////////////////////////// 436 | 437 | // let base = 2; 438 | // let exponent = 3; 439 | // console.log("using math.pow()", Math.pow(base, exponent)); // old version 440 | // console.log("using math.pow()", base ** exponent); // new version 441 | 442 | // let area = Math.PI*5**2; 443 | // console.log(area.toFixed(2)); 444 | 445 | 446 | ///////////////////// Ecascript 2017 to 2023..... /////////////////////////// 447 | 448 | // const myNames = "zulfiqar"; 449 | // // const paddName = myNames.padStart(15); 450 | // const paddName = myNames.padStart(15, "+"); 451 | // console.log(paddName); 452 | // console.log(paddName.length); 453 | 454 | ////////////////////// Ecascript 2018 to 2023..... /////////////////////////// 455 | 456 | // const student = { 457 | // age: 10, name: "ali", student: true, 458 | // } 459 | // const {age, ...others} = student; 460 | // console.log(others); /// rest operator 461 | 462 | 463 | // const obj1 = {a:10, b:20, c:50}; 464 | // const obj2 = {c:30, d:40};///// spread operator 465 | 466 | // const newObj = {...obj1, ...obj2}; 467 | // console.log(newObj); 468 | 469 | ///////////////////// Ecascript 2019 to 2023..... /////////////////////////// 470 | 471 | // const nestedArray = [1,2,[3,4],5]; 472 | // const flattendArray = nestedArray.flat(); 473 | // console.log(flattendArray); 474 | 475 | // const nestedArray1 = [1,[2,[3,4]],5]; 476 | // const flattendArray1 = nestedArray1.flat(2); /// 2 array change in one array 477 | // console.log(flattendArray1); 478 | 479 | // const arr = ["My name", "is vinod", "thapa"]; 480 | // const newArr = arr.flatMap((currValue)=> currValue.split(" ")); 481 | // console.log(newArr); 482 | 483 | // const person = {name: "vinod, age: 20"}; 484 | // const entries = Object.entries(person); 485 | // console.log(entries); 486 | // const newPerson = Object.fromEntries(entries); 487 | // console.log(newPerson); 488 | 489 | // let str = " thapa "; 490 | // console.log(str.length); 491 | // console.log(str.trim().length); 492 | // console.log(str.trimStart().length); 493 | // console.log(str.trimEnd().length); 494 | 495 | // const mySymbol = Symbol("This is my symbol"); 496 | // console.log(typeof mySymbol); 497 | // console.log(mySymbol.description); 498 | 499 | 500 | // const anotherLargeNumber = BigInt("0123456789012345678901234567890"); 501 | // console.log(anotherLargeNumber); 502 | // console.log(typeof anotherLargeNumber); 503 | 504 | 505 | // let maxNumber = Number.MAX_SAFE_INTEGER; 506 | // maxNumber = BigInt(maxNumber); 507 | // let num = maxNumber + 10n; 508 | // console.log(num); 509 | 510 | // let favNum = 0; /// o means fales in js agar 0 chhiya hi to hum use karta hai nullish operator 511 | // // let userFavNumber = favNum || 10; 512 | // let userFavNumber = favNum ?? 10; 513 | // console.log(userFavNumber); 514 | 515 | // const str = "Hello, world! Hello again"; 516 | // const str1 = str.replaceAll("Hello", "Hi"); 517 | // console.log(str1); 518 | 519 | // const str = "Hello, world! Hello again"; 520 | // const str1 = str.replaceAll(/\s+/g, " "); 521 | // console.log(str1); 522 | 523 | // let y = 10; 524 | // y &&= 20; 525 | // console.log(y); 526 | 527 | // const book = { 528 | // name: "thapa", author: "technical" 529 | // }; 530 | // // console.log(book.hasOwnProperty("name")); 531 | // // console.log(book.hasOwnProperty("price")); 532 | // console.log(Object.hasOwn(book, "name")); 533 | 534 | // const student = Object.create(null); 535 | // console.log(typeof student); 536 | // student.name = "Zulfiqar Bhai"; 537 | // // console.log(student.hasOwnProperty("name")); 538 | // console.log(Object.hasOwn(student, "name")); 539 | 540 | // const array = [1,2,3,4,5,6]; 541 | // console.log(array.findLast((currElem)=> currElem)); 542 | // console.log(array.findLastIndex((currElem)=> currElem)); 543 | 544 | 545 | // const myNames = ["ALi", "Muhammad", "Akbar"]; 546 | // const sortedArr = myNames.toSorted(); 547 | // console.log("sorted", sortedArr); 548 | 549 | // console.log("orginial", myNames); 550 | // console.log("reversed", myNames); 551 | 552 | /////////////////////////////////// start main advance javascript ///////////////////// 553 | 554 | // 1) Event propagation . 555 | // 2) Higher order function. 556 | // 3) Call back function . 557 | // 4) CLosures & function currying 558 | // 5) callback Hell 559 | // 6) Fetch API 560 | // 7) Promises 561 | // 8) Async-await 562 | // 9) Error Handing in js 563 | 564 | //////////// Higher-Order-Function amd callback function///////////////////; 565 | 566 | // function saying(name){ 567 | // return "Hello,"+name+ "!"; 568 | // }; 569 | // let saying2 = saying; 570 | // console.log(saying("Ali")); 571 | 572 | // function processUserInput(name, callback){ 573 | // console.log("Received input:"+ name); 574 | // callback(name); 575 | // } 576 | 577 | // function greetUser(name){ ///// callback function 578 | // console.log(`Hello! ${name}`); 579 | // } 580 | // processUserInput("Vinod", greetUser); /// higher order function 581 | 582 | 583 | // const fun1 = (a,b,operation)=>{ 584 | // return operation(a,b); 585 | // } 586 | // const fun2 = (a,b)=>{ /// fun2 is callback fun 587 | // return a+b; 588 | // } 589 | // const fun3 = (a,b)=>{ /// fun2 is callback fun 590 | // return a-b; 591 | // } 592 | 593 | // console.log(fun1(5,5,fun2)); /// fun1 is higher order function 594 | // console.log(fun1(5,10,fun3)); /// fun1 is higher order function 595 | 596 | /////////// Higher-Order-Function amd callback function///////////////////; 597 | 598 | 599 | ////////////// promise // promis ka andar 3 states hoti hai 1) promise 2) pending 600 | // 3) settled ka andar resolved and rejected //// 601 | 602 | // const pr = new Promise((resolve, reject) => { 603 | // setTimeout(()=>{ 604 | // reject("Hey, I dont"); /// yaha resolve aur reject ki condition lagagi 605 | // }, 3000) 606 | // }); 607 | 608 | // pr.then((res)=>{ 609 | // console.log(res); 610 | // }) 611 | // .catch((error)=>{ 612 | // console.log(error); 613 | // }) 614 | // .finally(()=>{ 615 | // console.log("Dont worry dear, We all miss you."); 616 | // }); 617 | 618 | 619 | // const studentName = "Vinod"; 620 | // const enrollStudent = (studentName) => { 621 | // return new Promise((resolve, reject) => { 622 | // setTimeout(()=>{ 623 | 624 | // const isSucessful = Math.round() > 0.4; 625 | // if(isSucessful){ 626 | // resolve(`EnrollStudent sucessful for ${studentName}`); 627 | // }else{ 628 | // reject(`Enrollstudent failed for ${studentName} Please try again`); 629 | // } 630 | // }, 2000) 631 | // }); 632 | // }; 633 | // enrollStudent(studentName) 634 | // .then((res)=>{ 635 | // console.log(res); 636 | // }) 637 | // .catch((err)=>{ 638 | // console.log(err); 639 | // }) 640 | // .finally(()=>{ 641 | // console.log("Enrollstudent process completed"); 642 | // }); 643 | 644 | /////// promise methods promise.all promise.allsettled promise.race ////////////////// 645 | 646 | // const promise1 = new Promise((resolve, reject)=>{ 647 | // setTimeout(()=>{ resolve("First")}, 2000) 648 | // }); 649 | 650 | // const promise2 = new Promise((resolve, reject)=>{ 651 | // setTimeout(()=>{ reject("Failed")}, 2000) 652 | // }); 653 | 654 | // const promise3 = new Promise((resolve)=>{ 655 | // setTimeout(()=>{ resolve("Third")}, 1000) 656 | // }); 657 | 658 | // // Promise.all([promise1, promise2 ,promise3]) // promiseAll 659 | // // .then((values)=>{ 660 | // // console.log(values); 661 | // // }) 662 | // // .catch((err)=>{ 663 | // // console.log(err); 664 | // // }); 665 | 666 | // // Promise.allSettled([promise1, promise2 ,promise3]) /// promise allsettled 667 | // // .then((values)=>{ 668 | // // console.log(values); 669 | // // }) 670 | // // .catch((err)=>{ 671 | // // console.log(err); 672 | // // }); 673 | 674 | // Promise.race([promise1, promise2 ,promise3]) // promise race 675 | // .then((values)=>{ 676 | // console.log(values); 677 | // }) 678 | // .catch((err)=>{ 679 | // console.log(err); 680 | // }); 681 | 682 | 683 | 684 | ///////////////////////////////////////// promise///////////////// 685 | 686 | 687 | 688 | //////////// fetch api asycn await arroe handling//////////////////////////////////////////////// 689 | 690 | const apiBody = document.querySelector(".api-body"); 691 | const apiUrl = "https://icanhazdadjoke.com/"; 692 | 693 | // async function fetchData( ){ async fun with simple fun 694 | const fetchData = async()=>{ // async fun with arrow fun 695 | try{ 696 | const res = await fetch(apiUrl,{ 697 | headers: { 698 | Accept: "application/json", 699 | }, 700 | }); 701 | const data = await res.json(); 702 | console.log(data.joke); 703 | apiBody.innerHTML = data.joke; 704 | }catch(error){ 705 | apiBody.innerHTML = error; 706 | console.log(error); 707 | } 708 | } 709 | fetchData(); 710 | 711 | 712 | 713 | 714 | //////////// fetch api //////////////////////////////////////////////// 715 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Advance-Javascript^.^ 7 | 8 | 22 | 23 | 24 | 25 | 26 | 27 | 32 | 33 | 34 | 38 | 39 | 40 | 41 | 45 | 46 | 47 | 52 | 53 | 60 | 61 | 72 | 73 | 74 | 75 | 76 | 81 | 82 | 83 | 84 | 85 |
86 |

Welcome to Dad jokes!

87 |
88 | 89 |
90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | 6 | } 7 | body{ 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | /* text-align: center; */ 12 | margin-top: 30px; 13 | height: 100vh; 14 | 15 | } 16 | /* 17 | .addTransition3{ 18 | translate: -30ream 0; 19 | border-radius: 50%; 20 | background-color: #f5ee62; 21 | } 22 | .addTransition4{ 23 | border-radius: 50%; 24 | background-color: #f5ee62; 25 | translate: 30rem 0; 26 | } 27 | 28 | .addTransition5{ 29 | border-radius: 50%; 30 | background-color: #f5ee62; 31 | translate: -30rem 0; 32 | } 33 | .addTransition6{ 34 | background: 0%; 35 | background-color: #f5ee62; 36 | translate: 0rem 0; 37 | } 38 | .rectangle{ 39 | width: 35rem; 40 | height: 35rem; 41 | background: #000; 42 | border-radius: 1rem; 43 | margin-bottom: 3.2rem; 44 | transition: all 0.6s linear; 45 | box-shadow: rgba(239, 247, 87, 0.2) 0px 8px 24px; 46 | } 47 | .addTransition{ 48 | border-radius: 50%; 49 | } */ 50 | ul{ 51 | display: flex; 52 | } 53 | ul li{ 54 | list-style: none; 55 | margin-left: 20px; 56 | font-size: 30px; 57 | } 58 | a{ 59 | transition: all 0.5s; 60 | border-radius: 0px !important; 61 | } 62 | a.active{ 63 | background-color: #333; 64 | padding: 20px; 65 | border-radius: 10px; 66 | } --------------------------------------------------------------------------------