├── 02-progress-steps ├── README.md ├── optimize │ ├── README.md │ ├── index.html │ ├── index.js │ └── style.css ├── index.html ├── index.js └── style.css ├── 03-rotating-navigation-animation ├── README.md ├── optimize │ ├── README.md │ ├── index.js │ ├── style.css │ └── index.html ├── index.js ├── style.css └── index.html ├── 01-expanding-cards ├── index.js ├── index.html └── style.css └── README.md /02-progress-steps/README.md: -------------------------------------------------------------------------------- 1 | # 优化项 2 | 3 | 功能实现后看了源码，发现以下可优化项 4 | 5 | - 可以用 progress container 的伪元素 + div 来表示进度条，目前是用了 6 个 span，所以在快速点击的时候过渡效果有些问题 6 | -------------------------------------------------------------------------------- /02-progress-steps/optimize/README.md: -------------------------------------------------------------------------------- 1 | # 优化项 2 | 3 | 功能实现后看了源码，发现以下可优化项 4 | 5 | - 可以用 progress container 的伪元素 + div 来表示进度条，目前是用了 6 个 span，所以在快速点击的时候过渡效果有些问题 6 | -------------------------------------------------------------------------------- /03-rotating-navigation-animation/README.md: -------------------------------------------------------------------------------- 1 | # 优化项 2 | 3 | 功能实现后看了源码，发现以下可优化项 4 | 5 | - nav 从左到右的动画可以用 transform: translateX(百分比) 来实现，目前是用的 left + margin 6 | - 可以用 js 操作元素的 class 来执行动画，目前是通过 js 来设置元素 style 实现动画 7 | - 布局优化 8 | 9 | -------------------------------------------------------------------------------- /03-rotating-navigation-animation/optimize/README.md: -------------------------------------------------------------------------------- 1 | # 优化项 2 | 3 | 功能实现后看了源码，发现以下可优化项 4 | 5 | - nav 从左到右的动画可以用 transform: translateX(百分比) 来实现，目前是用的 left + margin 6 | - 可以用 js 操作元素的 class 来执行动画，目前是通过 js 来设置元素 style 实现动画 7 | - 布局优化 8 | 9 | -------------------------------------------------------------------------------- /01-expanding-cards/index.js: -------------------------------------------------------------------------------- 1 | const boxes = document.querySelectorAll('.box'); 2 | 3 | boxes.forEach(box => { 4 | box.addEventListener('click', function () { 5 | if (!this.classList.contains('expanded-box')) { 6 | boxes.forEach(box => { 7 | box.classList.remove('expanded-box'); 8 | }); 9 | this.classList.add('expanded-box'); 10 | } 11 | }); 12 | }); 13 | 14 | -------------------------------------------------------------------------------- /03-rotating-navigation-animation/index.js: -------------------------------------------------------------------------------- 1 | const btnBars = document.querySelector('.menu-btn.fa-bars'); 2 | const btnTimes = document.querySelector('.menu-btn.fa-times'); 3 | const menu = document.querySelector('.menu'); 4 | const wrapper = document.querySelector('.wrapper'); 5 | const nav = document.querySelector('.nav-list'); 6 | 7 | btnBars.addEventListener('click', () => { 8 | wrapper.style.transform = 'rotate(-20deg)'; 9 | menu.style.transform = 'rotate(-70deg)'; 10 | nav.style.left = '20px'; 11 | nav.classList.add('nav-list-show'); 12 | }); 13 | 14 | btnTimes.addEventListener('click', () => { 15 | menu.style.transform = 'rotate(0)'; 16 | wrapper.style.transform = 'rotate(0)'; 17 | nav.style.left = '-200px'; 18 | nav.classList.remove('nav-list-show'); 19 | }); 20 | 21 | -------------------------------------------------------------------------------- /03-rotating-navigation-animation/optimize/index.js: -------------------------------------------------------------------------------- 1 | const btnBars = document.querySelector('.menu-btn.fa-bars'); 2 | const btnTimes = document.querySelector('.menu-btn.fa-times'); 3 | const menu = document.querySelector('.menu'); 4 | const wrapper = document.querySelector('.wrapper'); 5 | const nav = document.querySelector('.nav-list'); 6 | 7 | btnBars.addEventListener('click', () => { 8 | wrapper.classList.add('show-nav') 9 | // wrapper.style.transform = 'rotate(-20deg)'; 10 | // menu.style.transform = 'rotate(-70deg)'; 11 | // nav.style.left = '20px'; 12 | // nav.classList.add('nav-list-show'); 13 | }); 14 | 15 | btnTimes.addEventListener('click', () => { 16 | wrapper.classList.remove('show-nav') 17 | // menu.style.transform = 'rotate(0)'; 18 | // wrapper.style.transform = 'rotate(0)'; 19 | // nav.style.left = '-200px'; 20 | // nav.classList.remove('nav-list-show'); 21 | }); 22 | 23 | -------------------------------------------------------------------------------- /02-progress-steps/optimize/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | progress steps 9 | 10 | 11 |
12 |
13 |
14 |
15 | 1 16 | 2 17 | 3 18 | 4 19 |
20 |
21 | 22 | 23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /01-expanding-cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | expand cards 9 | 10 | 11 |
12 | 34 |
35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /02-progress-steps/optimize/index.js: -------------------------------------------------------------------------------- 1 | const MIN_STEP = 1; 2 | const MAX_STEP = 4; 3 | let currentStep = MIN_STEP; 4 | 5 | const btnPrev = document.querySelector(".btn-prev"); 6 | 7 | const btnNext = document.querySelector(".btn-next"); 8 | 9 | const progressItems = document.querySelectorAll(".progress-item"); 10 | 11 | const progressLine = document.querySelector(".progress-line"); 12 | 13 | btnPrev.addEventListener("click", () => { 14 | if (currentStep > MIN_STEP) { 15 | currentStep--; 16 | progressItems[currentStep].classList.remove("active"); 17 | progressLine.style.width = 18 | (1 / (MAX_STEP - MIN_STEP)) * (currentStep - MIN_STEP) * 100 + "%"; 19 | if (currentStep === MIN_STEP) { 20 | btnPrev.disabled = true; 21 | } else { 22 | btnNext.disabled = false; 23 | } 24 | } 25 | }); 26 | 27 | btnNext.addEventListener("click", () => { 28 | if (currentStep < MAX_STEP) { 29 | currentStep++; 30 | progressItems[currentStep - 1].classList.add("active"); 31 | progressLine.style.width = 32 | (1 / (MAX_STEP - MIN_STEP)) * (currentStep - MIN_STEP) * 100 + "%"; 33 | if (currentStep === MAX_STEP) { 34 | btnNext.disabled = true; 35 | } else { 36 | btnPrev.disabled = false; 37 | } 38 | } 39 | }); 40 | -------------------------------------------------------------------------------- /02-progress-steps/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | progress steps 9 | 10 | 11 |
12 |
13 |
14 | 1 15 | 16 | 17 | 18 | 2 19 | 20 | 21 | 22 | 3 23 | 24 | 25 | 26 | 4 27 |
28 |
29 | 30 | 31 |
32 |
33 |
34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /02-progress-steps/index.js: -------------------------------------------------------------------------------- 1 | const MIN_STEP = 1; 2 | const MAX_STEP = 4; 3 | let currentStep = MIN_STEP; 4 | 5 | const btnPrev = document.querySelector(".btn-prev"); 6 | 7 | const btnNext = document.querySelector(".btn-next"); 8 | 9 | const getLastActiveItem = () => { 10 | const activeItems = document.querySelectorAll(".progress-item.active"); 11 | return activeItems[activeItems.length - 1]; 12 | }; 13 | 14 | btnPrev.addEventListener("click", () => { 15 | if (currentStep > MIN_STEP) { 16 | currentStep--; 17 | const lastActiveItem = getLastActiveItem(); 18 | lastActiveItem.classList.remove("active"); 19 | lastActiveItem.previousElementSibling.firstElementChild.classList.remove( 20 | "w-full" 21 | ); 22 | if (currentStep === MIN_STEP) { 23 | btnPrev.disabled = true; 24 | } else { 25 | btnNext.disabled = false; 26 | } 27 | } 28 | }); 29 | 30 | btnNext.addEventListener("click", () => { 31 | if (currentStep < MAX_STEP) { 32 | currentStep++; 33 | const lastActiveItem = getLastActiveItem(); 34 | const nextItem = lastActiveItem.nextElementSibling; 35 | nextItem.firstElementChild.classList.add("w-full"); 36 | nextItem.nextElementSibling.classList.add("active"); 37 | 38 | if (currentStep === MAX_STEP) { 39 | btnNext.disabled = true; 40 | } else { 41 | btnPrev.disabled = false; 42 | } 43 | } 44 | }); 45 | -------------------------------------------------------------------------------- /03-rotating-navigation-animation/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | margin: 0; 5 | font-family: 'Muli', sans-serif; 6 | background-color: #333; 7 | line-height: 1.8; 8 | overflow-x: hidden; 9 | } 10 | 11 | .wrapper { 12 | background-color: #fff; 13 | transition: transform 0.5s linear; 14 | transform-origin: 0 0; 15 | padding-top: 80px; 16 | padding-bottom: 100px; 17 | padding-left: max(50px, 15%); 18 | padding-right: max(50px, 15%); 19 | } 20 | 21 | .menu { 22 | width: 200px; 23 | height: 200px; 24 | background-color: #ff7979; 25 | border-radius: 50%; 26 | position: fixed; 27 | top: -100px; 28 | left: -100px; 29 | transition: transform 0.5s; 30 | } 31 | 32 | .menu-btn { 33 | font-size: 26px; 34 | color: #fff; 35 | position: absolute; 36 | cursor: pointer; 37 | } 38 | 39 | .menu-btn.fa-bars { 40 | left: 100px; 41 | top: 65%; 42 | left: 65%; 43 | } 44 | 45 | .menu-btn.fa-times { 46 | left: 100px; 47 | top: 65%; 48 | left: 25%; 49 | } 50 | 51 | .nav-list { 52 | padding: 0; 53 | list-style: none; 54 | font-size: 17px; 55 | text-transform: uppercase; 56 | position: absolute; 57 | bottom: 3%; 58 | left: -200px; 59 | color: #fff; 60 | transition: left 0.6s linear; 61 | } 62 | 63 | .nav-list li { 64 | margin-bottom: 30px; 65 | transition: margin 0.6s linear; 66 | } 67 | 68 | .nav-list-show li:nth-of-type(2) { 69 | margin-left: 20px; 70 | } 71 | 72 | .nav-list-show li:nth-of-type(3) { 73 | margin-left: 40px; 74 | } 75 | 76 | -------------------------------------------------------------------------------- /02-progress-steps/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | margin: 0; 5 | } 6 | 7 | :root { 8 | --bg-color: #f6f7fb; 9 | --primary-color: #3498db; 10 | --empty-color: #e0e0e0; 11 | } 12 | 13 | body .active { 14 | border-color: var(--primary-color); 15 | } 16 | 17 | body .w-full { 18 | width: 100%; 19 | } 20 | 21 | .wrapper { 22 | height: 100%; 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | background-color: var(--bg-color); 27 | } 28 | 29 | .progress { 30 | display: flex; 31 | justify-content: center; 32 | align-items: center; 33 | } 34 | 35 | .progress-item { 36 | display: inline-block; 37 | width: 25px; 38 | height: 25px; 39 | border-radius: 50%; 40 | border: 3px solid var(--empty-color); 41 | text-align: center; 42 | line-height: 25px; 43 | position: relative; 44 | transition: border 0.4s ease; 45 | } 46 | 47 | .line { 48 | display: flex; 49 | align-items: center; 50 | background-color: var(--empty-color); 51 | width: 60px; 52 | } 53 | 54 | .inner-line { 55 | display: inline-block; 56 | height: 3px; 57 | background-color: var(--primary-color); 58 | width: 0; 59 | transition: width 0.4s ease; 60 | } 61 | 62 | .btns { 63 | margin-top: 40px; 64 | display: flex; 65 | justify-content: center; 66 | } 67 | 68 | .btn { 69 | cursor: pointer; 70 | background-color: var(--primary-color); 71 | color: #fff; 72 | border-radius: 6px; 73 | padding: 8px 30px; 74 | margin: 5px; 75 | font-size: 14px; 76 | border: none; 77 | } 78 | 79 | .btn-next { 80 | margin-left: 10px; 81 | } 82 | 83 | .btn:disabled { 84 | background-color: var(--empty-color); 85 | cursor: not-allowed; 86 | } 87 | -------------------------------------------------------------------------------- /03-rotating-navigation-animation/optimize/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | margin: 0; 5 | font-family: 'Muli', sans-serif; 6 | background-color: #333; 7 | line-height: 1.8; 8 | overflow-x: hidden; 9 | } 10 | 11 | .wrapper { 12 | background-color: #fff; 13 | transition: transform 0.5s linear; 14 | transform-origin: top left; 15 | padding: 50px; 16 | box-sizing: border-box; 17 | } 18 | 19 | .main { 20 | margin: 50px auto; 21 | max-width: 1000px; 22 | } 23 | 24 | .wrapper.show-nav { 25 | transform-origin: 0 0; 26 | transform: rotate(-20deg); 27 | } 28 | 29 | .wrapper.show-nav .menu { 30 | transform: rotate(-75deg); 31 | } 32 | 33 | .menu { 34 | width: 200px; 35 | height: 200px; 36 | background-color: #ff7979; 37 | border-radius: 50%; 38 | position: fixed; 39 | top: -100px; 40 | left: -100px; 41 | transition: transform 0.5s; 42 | } 43 | 44 | .menu-btn { 45 | font-size: 26px; 46 | color: #fff; 47 | position: absolute; 48 | cursor: pointer; 49 | } 50 | 51 | .menu-btn.fa-bars { 52 | left: 75%; 53 | top: 75%; 54 | transform: translateX(-100%) translateY(-100%); 55 | } 56 | 57 | .menu-btn.fa-times { 58 | left: 25%; 59 | top: 75%; 60 | transform: translateY(-100%); 61 | } 62 | 63 | .nav-list { 64 | padding: 0; 65 | list-style: none; 66 | font-size: 17px; 67 | text-transform: uppercase; 68 | position: absolute; 69 | bottom: 3%; 70 | left: -200px; 71 | color: #fff; 72 | transition: left 0.6s linear; 73 | } 74 | 75 | .nav-list li { 76 | margin-bottom: 30px; 77 | transition: margin 0.6s linear; 78 | } 79 | 80 | .nav-list-show li:nth-of-type(2) { 81 | margin-left: 20px; 82 | } 83 | 84 | .nav-list-show li:nth-of-type(3) { 85 | margin-left: 40px; 86 | } 87 | 88 | -------------------------------------------------------------------------------- /01-expanding-cards/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | margin: 0; 5 | } 6 | 7 | .wrapper { 8 | height: 100%; 9 | padding: 60px; 10 | box-sizing: border-box; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | .box-wrapper { 17 | width: 100%; 18 | height: 100%; 19 | margin: 0; 20 | list-style: none; 21 | padding: 0; 22 | display: flex; 23 | gap: 20px; 24 | } 25 | 26 | .box { 27 | flex: 1; 28 | /* width: 100%; */ 29 | transition: flex 0.7s ease-in; 30 | position: relative; 31 | } 32 | 33 | .expanded-box { 34 | flex: 8; 35 | } 36 | 37 | .expanded-box .img-name { 38 | opacity: 1; 39 | } 40 | 41 | .img { 42 | cursor: pointer; 43 | display: inline-block; 44 | width: 100%; 45 | height: 100%; 46 | border-radius: 50px; 47 | 48 | background-position: center; 49 | background-size: auto cover; 50 | background-repeat: no-repeat; 51 | } 52 | 53 | .img1 { 54 | background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'); 55 | } 56 | 57 | .img2 { 58 | background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'); 59 | } 60 | 61 | .img3 { 62 | background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80'); 63 | } 64 | 65 | .img4 { 66 | background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80'); 67 | } 68 | 69 | .img5 { 70 | background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'); 71 | } 72 | 73 | .img-name { 74 | font-size: 23px; 75 | color: #fff; 76 | position: absolute; 77 | left: 30px; 78 | bottom: 30px; 79 | opacity: 0; 80 | transition: opacity 0.3s ease-in 0.4s; 81 | } 82 | 83 | -------------------------------------------------------------------------------- /02-progress-steps/optimize/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | margin: 0; 5 | } 6 | 7 | :root { 8 | --bg-color: #f6f7fb; 9 | --primary-color: #3498db; 10 | --empty-color: #e0e0e0; 11 | } 12 | 13 | body .active { 14 | border-color: var(--primary-color); 15 | } 16 | 17 | .wrapper { 18 | height: 100%; 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | background-color: var(--bg-color); 23 | } 24 | 25 | .progress { 26 | display: inline-block; 27 | position: relative; 28 | } 29 | 30 | .progress-line { 31 | height: 3px; 32 | background-color: var(--primary-color); 33 | position: absolute; 34 | transform: translateY(-50%); 35 | top: 50%; 36 | width: 0; 37 | transition: width 0.4s ease; 38 | } 39 | 40 | .progress::before { 41 | content: ""; 42 | height: 3px; 43 | position: absolute; 44 | width: 100%; 45 | background-color: var(--empty-color); 46 | transform: translateY(-50%); 47 | top: 50%; 48 | } 49 | 50 | .progress-item { 51 | z-index: 2; 52 | display: inline-block; 53 | width: 25px; 54 | height: 25px; 55 | border-radius: 50%; 56 | border: 3px solid var(--empty-color); 57 | text-align: center; 58 | line-height: 25px; 59 | position: relative; 60 | transition: border 0.4s ease; 61 | background-color: #fff; 62 | margin-right: 60px; 63 | } 64 | 65 | .progress-item:last-of-type { 66 | margin-right: 0; 67 | } 68 | 69 | .btns { 70 | margin-top: 40px; 71 | display: flex; 72 | justify-content: center; 73 | } 74 | 75 | .btn { 76 | cursor: pointer; 77 | background-color: var(--primary-color); 78 | color: #fff; 79 | border-radius: 6px; 80 | padding: 8px 30px; 81 | margin: 5px; 82 | font-size: 14px; 83 | border: none; 84 | } 85 | 86 | .btn:active { 87 | transform: scale(0.98); 88 | } 89 | 90 | .btn:focus { 91 | outline: 0; 92 | } 93 | 94 | .btn-next { 95 | margin-left: 10px; 96 | } 97 | 98 | .btn:disabled { 99 | background-color: var(--empty-color); 100 | cursor: not-allowed; 101 | } 102 | -------------------------------------------------------------------------------- /03-rotating-navigation-animation/optimize/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | 14 | 03-rotating-navigation-animation 15 | 16 | 17 | 33 | 34 |
35 |
36 | 37 | 38 |
39 |
40 |

Amazing Article

41 |

Florin Pop

42 |

43 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores 44 | cupiditate, maxime aliquid impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro 45 | laborum minus, illo, maiores recusandae cumque ipsa quos. Tenetur, consequuntur mollitia labore 46 | pariatur sunt quia harum aut. Eum maxime dolorem provident natus veritatis molestiae cumque quod 47 | voluptates ab non, tempore cupiditate? Voluptatem, molestias culpa. Corrupti, laudantium iure 48 | aliquam rerum sint nam quas dolor dignissimos in error placeat quae temporibus minus optio eum 49 | soluta cupiditate! Cupiditate saepe voluptates laudantium. Ducimus consequuntur perferendis 50 | consequatur nobis exercitationem molestias fugiat commodi omnis. Asperiores quia tenetur nemo ipsa. 51 |

52 |

My Dog

53 | 58 |

59 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit libero deleniti rerum quo, incidunt 60 | vel consequatur culpa ullam. Magnam facere earum unde harum. Ea culpa veritatis magnam at aliquid. 61 | Perferendis totam placeat molestias illo laudantium? Minus id minima doloribus dolorum fugit 62 | deserunt qui vero voluptas, ut quia cum amet temporibus veniam ad ea ab perspiciatis, enim accusamus 63 | asperiores explicabo provident. Voluptates sint, neque fuga cum illum, tempore autem maxime 64 | similique laborum odio, magnam esse. Aperiam? 65 |

66 |
67 |
68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /03-rotating-navigation-animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | 14 | 03-rotating-navigation-animation 15 | 16 | 17 | 33 | 34 |
35 |
36 |
37 | 38 | 39 |
40 | 41 |

Amazing Article

42 |

Florin Pop

43 |

44 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores 45 | cupiditate, maxime aliquid impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro 46 | laborum minus, illo, maiores recusandae cumque ipsa quos. Tenetur, consequuntur mollitia labore 47 | pariatur sunt quia harum aut. Eum maxime dolorem provident natus veritatis molestiae cumque quod 48 | voluptates ab non, tempore cupiditate? Voluptatem, molestias culpa. Corrupti, laudantium iure 49 | aliquam rerum sint nam quas dolor dignissimos in error placeat quae temporibus minus optio eum 50 | soluta cupiditate! Cupiditate saepe voluptates laudantium. Ducimus consequuntur perferendis 51 | consequatur nobis exercitationem molestias fugiat commodi omnis. Asperiores quia tenetur nemo ipsa. 52 |

53 |

My Dog

54 | 59 |

60 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit libero deleniti rerum quo, incidunt 61 | vel consequatur culpa ullam. Magnam facere earum unde harum. Ea culpa veritatis magnam at aliquid. 62 | Perferendis totam placeat molestias illo laudantium? Minus id minima doloribus dolorum fugit 63 | deserunt qui vero voluptas, ut quia cum amet temporibus veniam ad ea ab perspiciatis, enim accusamus 64 | asperiores explicabo provident. Voluptates sint, neque fuga cum illum, tempore autem maxime 65 | similique laborum odio, magnam esse. Aperiam? 66 |

67 |
68 |
69 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 50projects50days-exercise 2 | 3 | [https://github.com/bradtraversy/50projects50days](https://github.com/bradtraversy/50projects50days) 4 | 5 | | # | Project | completion time | 6 | | :-: | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | 7 | | 01 | [Expanding Cards](https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards) | 2022-08-24 | 8 | | 02 | [Progress Steps](https://github.com/bradtraversy/50projects50days/tree/master/progress-steps) | 2022-08-24 | 9 | | 03 | [Rotating Navigation Animation](https://github.com/bradtraversy/50projects50days/tree/master/rotating-nav-animation) | 2022-08-25 | 10 | | 04 | [Hidden Search Widget](https://github.com/bradtraversy/50projects50days/tree/master/hidden-search) | [Live Demo](https://50projects50days.com/projects/hidden-search-widget/) | 11 | | 05 | [Blurry Loading](https://github.com/bradtraversy/50projects50days/tree/master/blurry-loading) | [Live Demo](https://50projects50days.com/projects/blurry-loading/) | 12 | | 06 | [Scroll Animation](https://github.com/bradtraversy/50projects50days/tree/master/scroll-animation) | [Live Demo](https://50projects50days.com/projects/scroll-animation/) | 13 | | 07 | [Split Landing Page](https://github.com/bradtraversy/50projects50days/tree/master/split-landing-page) | [Live Demo](https://50projects50days.com/projects/split-landing-page/) | 14 | | 08 | [Form Wave](https://github.com/bradtraversy/50projects50days/tree/master/form-input-wave) | [Live Demo](https://50projects50days.com/projects/form-wave/) | 15 | | 09 | [Sound Board](https://github.com/bradtraversy/50projects50days/tree/master/sound-board) | [Live Demo](https://50projects50days.com/projects/sound-board/) | 16 | | 10 | [Dad Jokes](https://github.com/bradtraversy/50projects50days/tree/master/dad-jokes) | [Live Demo](https://50projects50days.com/projects/dad-jokes/) | 17 | | 11 | [Event Keycodes](https://github.com/bradtraversy/50projects50days/tree/master/event-keycodes) | [Live Demo](https://50projects50days.com/projects/event-keycodes/) | 18 | | 12 | [Faq Collapse](https://github.com/bradtraversy/50projects50days/tree/master/faq-collapse) | [Live Demo](https://50projects50days.com/projects/faq-collapse/) | 19 | | 13 | [Random Choice Picker](https://github.com/bradtraversy/50projects50days/tree/master/random-choice-picker) | [Live Demo](https://50projects50days.com/projects/random-choice-picker/) | 20 | | 14 | [Animated Navigation](https://github.com/bradtraversy/50projects50days/tree/master/animated-navigation) | [Live Demo](https://50projects50days.com/projects/animated-navigation/) | 21 | | 15 | [Incrementing Counter](https://github.com/bradtraversy/50projects50days/tree/master/incrementing-counter) | [Live Demo](https://50projects50days.com/projects/incrementing-counter/) | 22 | | 16 | [Drink Water](https://github.com/bradtraversy/50projects50days/tree/master/drink-water) | [Live Demo](https://50projects50days.com/projects/drink-water/) | 23 | | 17 | [Movie App](https://github.com/bradtraversy/50projects50days/tree/master/movie-app) | [Live Demo](https://50projects50days.com/projects/movie-app/) | 24 | | 18 | [Background Slider](https://github.com/bradtraversy/50projects50days/tree/master/background-slider) | [Live Demo](https://50projects50days.com/projects/background-slider/) | 25 | | 19 | [Theme Clock](https://github.com/bradtraversy/50projects50days/tree/master/theme-clock) | [Live Demo](https://50projects50days.com/projects/theme-clock/) | 26 | | 20 | [Button Ripple Effect](https://github.com/bradtraversy/50projects50days/tree/master/button-ripple-effect) | [Live Demo](https://50projects50days.com/projects/button-ripple-effect/) | 27 | | 21 | [Drag N Drop](https://github.com/bradtraversy/50projects50days/tree/master/drag-n-drop) | [Live Demo](https://50projects50days.com/projects/drag-n-drop/) | 28 | | 22 | [Drawing App](https://github.com/bradtraversy/50projects50days/tree/master/drawing-app) | [Live Demo](https://50projects50days.com/projects/drawing-app/) | 29 | | 23 | [Kinetic Loader](https://github.com/bradtraversy/50projects50days/tree/master/kinetic-loader) | [Live Demo](https://50projects50days.com/projects/kinetic-loader/) | 30 | | 24 | [Content Placeholder](https://github.com/bradtraversy/50projects50days/tree/master/content-placeholder) | [Live Demo](https://50projects50days.com/projects/content-placeholder/) | 31 | | 25 | [Sticky Navbar](https://github.com/bradtraversy/50projects50days/tree/master/sticky-navigation) | [Live Demo](https://50projects50days.com/projects/sticky-navbar/) | 32 | | 26 | [Double Vertical Slider](https://github.com/bradtraversy/50projects50days/tree/master/double-vertical-slider) | [Live Demo](https://50projects50days.com/projects/double-vertical-slider/) | 33 | | 27 | [Toast Notification](https://github.com/bradtraversy/50projects50days/tree/master/toast-notification) | [Live Demo](https://50projects50days.com/projects/toast-notification/) | 34 | | 28 | [Github Profiles](https://github.com/bradtraversy/50projects50days/tree/master/github-profiles) | [Live Demo](https://50projects50days.com/projects/github-profiles/) | 35 | | 29 | [Double Click Heart](https://github.com/bradtraversy/50projects50days/tree/master/double-click-heart) | [Live Demo](https://50projects50days.com/projects/double-click-heart/) | 36 | | 30 | [Auto Text Effect](https://github.com/bradtraversy/50projects50days/tree/master/auto-text-effect) | [Live Demo](https://50projects50days.com/projects/auto-text-effect/) | 37 | | 31 | [Password Generator](https://github.com/bradtraversy/50projects50days/tree/master/password-generator) | [Live Demo](https://50projects50days.com/projects/password-generator/) | 38 | | 32 | [Good Cheap Fast](https://github.com/bradtraversy/50projects50days/tree/master/good-cheap-fast) | [Live Demo](https://50projects50days.com/projects/good-cheap-fast/) | 39 | | 33 | [Notes App](https://github.com/bradtraversy/50projects50days/tree/master/notes-app) | [Live Demo](https://50projects50days.com/projects/notes-app/) | 40 | | 34 | [Animated Countdown](https://github.com/bradtraversy/50projects50days/tree/master/animated-countdown) | [Live Demo](https://50projects50days.com/projects/animated-countdown/) | 41 | | 35 | [Image Carousel](https://github.com/bradtraversy/50projects50days/tree/master/image-carousel) | [Live Demo](https://50projects50days.com/projects/image-carousel/) | 42 | | 36 | [Hoverboard](https://github.com/bradtraversy/50projects50days/tree/master/hoverboard) | [Live Demo](https://50projects50days.com/projects/hoverboard/) | 43 | | 37 | [Pokedex](https://github.com/bradtraversy/50projects50days/tree/master/pokedex) | [Live Demo](https://50projects50days.com/projects/pokedex/) | 44 | | 38 | [Mobile Tab Navigation](https://github.com/bradtraversy/50projects50days/tree/master/mobile-tab-navigation) | [Live Demo](https://50projects50days.com/projects/mobile-tab-navigation/) | 45 | | 39 | [Password Strength Background](https://github.com/bradtraversy/50projects50days/tree/master/password-strength-background) | [Live Demo](https://50projects50days.com/projects/password-strength-background/) | 46 | | 40 | [3d Background Boxes](https://github.com/bradtraversy/50projects50days/tree/master/3d-boxes-background) | [Live Demo](https://50projects50days.com/projects/3d-background-boxes/) | 47 | | 41 | [Verify Account Ui](https://github.com/bradtraversy/50projects50days/tree/master/verify-account-ui) | [Live Demo](https://50projects50days.com/projects/verify-account-ui/) | 48 | | 42 | [Live User Filter](https://github.com/bradtraversy/50projects50days/tree/master/live-user-filter) | [Live Demo](https://50projects50days.com/projects/live-user-filter/) | 49 | | 43 | [Feedback Ui Design](https://github.com/bradtraversy/50projects50days/tree/master/feedback-ui-design) | [Live Demo](https://50projects50days.com/projects/feedback-ui-design/) | 50 | | 44 | [Custom Range Slider](https://github.com/bradtraversy/50projects50days/tree/master/custom-range-slider) | [Live Demo](https://50projects50days.com/projects/custom-range-slider/) | 51 | | 45 | [Netflix Mobile Navigation](https://github.com/bradtraversy/50projects50days/tree/master/netflix-mobile-navigation) | [Live Demo](https://50projects50days.com/projects/netflix-mobile-navigation/) | 52 | | 46 | [Quiz App](https://github.com/bradtraversy/50projects50days/tree/master/quiz-app) | [Live Demo](https://50projects50days.com/projects/quiz-app/) | 53 | | 47 | [Testimonial Box Switcher](https://github.com/bradtraversy/50projects50days/tree/master/testimonial-box-switcher) | [Live Demo](https://50projects50days.com/projects/testimonial-box-switcher/) | 54 | | 48 | [Random Image Feed](https://github.com/bradtraversy/50projects50days/tree/master/random-image-generator) | [Live Demo](https://50projects50days.com/projects/random-image-feed/) | 55 | | 49 | [Todo List](https://github.com/bradtraversy/50projects50days/tree/master/todo-list) | [Live Demo](https://50projects50days.com/projects/todo-list/) | 56 | | 50 | [Insect Catch Game](https://github.com/bradtraversy/50projects50days/tree/master/insect-catch-game) | [Live Demo](https://50projects50days.com/projects/insect-catch-game/) | 57 | 58 | --------------------------------------------------------------------------------