└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # HTML, CSS, & Javascript-100-days-of-code-challenge : 2 | - ### Day 1 : Making a simple Image Slider.(not hosted) 3 | - ### Day 2 : Making a simple to do list. 4 | - Demo : https://codepen.io/MehdiAoussiad/full/jOqxydp 5 | - ### Day 3 : Simple music player. (not hosted) 6 | - ### Day 4 : Email Generator.(using ajax xmlhttprequest to get data from an api). 7 | - Demo : https://codepen.io/MehdiAoussiad/full/QWNxjNp 8 | - ### Day 5 : Tabs Project with Popups images. 9 | - Demo : https://codepen.io/MehdiAoussiad/full/VwadEPQ 10 | - ### Day 6 : Making a Simple Notes App. 11 | - Demo : https://codepen.io/MehdiAoussiad/full/rNerypg 12 | - ### Day 7 : Loading animation. 13 | - Demo : https://codepen.io/MehdiAoussiad/full/JjXaPgO 14 | - ### Day 8 : Making a Simple Movie app using an external Api. 15 | - Demo: https://codepen.io/MehdiAoussiad/full/rNeZKGa 16 | - ### Day 9 : Making a simple typing Game. 17 | - Demo : https://codepen.io/MehdiAoussiad/full/NWNObyO 18 | - ### Day 10 : Making a countdown Timer. 19 | - Demo : https://codepen.io/MehdiAoussiad/full/gOrooxJ 20 | - ### Day 11 : Making a simple Calculator with javascript. 21 | - Demo : https://codepen.io/MehdiAoussiad/full/mdPQdvv 22 | - ### Day 12 : Making a Github Profiles project that search for github users by using the github api. 23 | - Demo : https://codepen.io/MehdiAoussiad/full/mdPQxbq 24 | - ### Day 13 : Making a Password Generator Project. 25 | - Demo : https://codepen.io/MehdiAoussiad/full/WNwLpLo 26 | - ### Day 14 : Simple Background Changer : 27 | - Demo : https://codepen.io/MehdiAoussiad/full/vYGvqRe 28 | - ### Day 15 : Questions Project (FAQ) : 29 | - Demo : https://codepen.io/MehdiAoussiad/full/MWyLXBG 30 | - ### Day 16 : Simple Form Validation. 31 | - Demo : https://codepen.io/MehdiAoussiad/full/OJNqbgV 32 | - ### Day 17 : Loading Animation 33 | - Demo : https://codepen.io/MehdiAoussiad/full/poyYOpo 34 | - ### Day 18 : Auto Text 35 | - Demo : https://codepen.io/MehdiAoussiad/pen/BaKENZa 36 | - ### Day 19 : Theme toggler 37 | - Demo : https://codepen.io/MehdiAoussiad/full/WNwWKBJ 38 | - ### Day 20 : Building a Rock Paper Scissors Game. 39 | - Demo : https://codepen.io/MehdiAoussiad/full/vYGwyya 40 | - ### Day 21 : Random Jokes with fetch using Async await syntax. 41 | - Demo : https://codepen.io/MehdiAoussiad/full/oNxRVrN 42 | - ### Day 22 : KeyCodes app with vanilla Javascript. 43 | - Demo : https://codepen.io/MehdiAoussiad/pen/OJNezdQ 44 | - ### Day 23 : Infinite Scroll. 45 | - Demo : https://codepen.io/MehdiAoussiad/full/mdPNybJ 46 | - ### Day 24 : Simple Gsap Animation. 47 | - Demo : https://codepen.io/MehdiAoussiad/full/xxVvLmx 48 | - ### Day 25 : Side Navigation. 49 | - Demo : https://codepen.io/MehdiAoussiad/full/JjXgwvg 50 | - ### Day 26 : Locale Storage Example. 51 | - Demo : https://codepen.io/MehdiAoussiad/full/gOMYWxX 52 | - ### Day 27 : Meal Generator with vanilla JS using Fetch. 53 | - Demo : https://codepen.io/MehdiAoussiad/full/bGebPPd 54 | - ### Day 28 : Skills bar. 55 | - Demo : https://codepen.io/MehdiAoussiad/full/oNLNdwJ 56 | - ### Day 29 : Loading Buttons. 57 | - Demo : https://codepen.io/MehdiAoussiad/full/KKMwggz 58 | - ### Day 30 : User Filter. 59 | - Demo : https://codepen.io/MehdiAoussiad/full/VwjYqWG 60 | - ### Day 31 : Hidden User. 61 | - Demo : https://codepen.io/MehdiAoussiad/full/bGedEJE 62 | - ### Day 32 : Simple Typing Speed game with vanilla Javascript. 63 | - Demo : https://codepen.io/MehdiAoussiad/full/XWKmJMj 64 | - ### Day 33 : Hotel Reservation Design. 65 | - Demo : https://codepen.io/MehdiAoussiad/full/yLJYROg 66 | - ### Day 34 : Text Highlight. 67 | - Demo : https://codepen.io/MehdiAoussiad/full/WNxroGv 68 | - ### Day 35 : Color Picker with Html,Css, and Vanilla JS. 69 | - Demo : https://codepen.io/MehdiAoussiad/full/OJXMGaB 70 | - ### Day 36 : 404 Page Design. 71 | - Demo : https://codepen.io/MehdiAoussiad/full/OJXNQEe 72 | - ### Day 37 : Procrastination again. 73 | - ### Day 38 : HTML email design. 74 | - Demo : https://codepen.io/MehdiAoussiad/full/yLJJJwK 75 | - ### Day 39 : Image Slider. 76 | - Demo : https://codepen.io/MehdiAoussiad/full/OJXXeMK 77 | - ### Day 40 : Incrementing Counter. 78 | - Demo : https://codepen.io/MehdiAoussiad/full/LYZRdeJ 79 | - ### Day 41 : Simple tooltip. 80 | - Demo : https://codepen.io/MehdiAoussiad/full/ZEOBNxd 81 | - ### Day 42 : Simple Clock using moment.js. 82 | - Code Demo : https://github.com/Aoussiad-Mehdi/Clock-using-moment.js 83 | - ### Day 43 : Rotation Slideshow with HTML and CSS. 84 | - Demo : https://codepen.io/MehdiAoussiad/full/WNxpxrY 85 | - ### Day 44 : Procrastination. 86 | - ### Day 45 : Simple Newsletter Design. 87 | - Demo : https://codepen.io/MehdiAoussiad/full/NWrgeYV 88 | - ### Day 46 : Simple Image Upload. 89 | - Demo : https://codepen.io/MehdiAoussiad/full/abZqJWP 90 | - ### Day 47 : User Card Design. 91 | - Demo : https://codepen.io/MehdiAoussiad/full/bGevxMw 92 | - ### Day 48 : Blur Animation HTML CSS & JS 93 | - Demo : https://codepen.io/MehdiAoussiad/full/wvWjBmM 94 | - ### Day 49 : Line through effect. 95 | - Demo : https://codepen.io/MehdiAoussiad/full/PozaYBp 96 | - ### Day 50 : Lazy loading images with the intersection observer API. 97 | - Demo : https://codepen.io/MehdiAoussiad/full/KKMeoyJ 98 | - ### Day 51 : User Card Design HTML & CSS. 99 | - Demo : https://codepen.io/MehdiAoussiad/full/PozBgNa 100 | - ### Day 52 : Reviews Design HTML & CSS. 101 | - Demo : https://codepen.io/MehdiAoussiad/full/gOMBrzN 102 | - ### Day 53 : Send Love Button HTML CSS & JavaScript. 103 | - Demo : https://codepen.io/MehdiAoussiad/full/yLJQzxO 104 | - ### Day 54 : Feedback UI Design HTML CSS & JS. 105 | - Demo : https://codepen.io/MehdiAoussiad/full/KKMbGBO 106 | - ### Day 55 : UI Design HTML & CSS. 107 | - Demo : https://codepen.io/MehdiAoussiad/full/RwRdPWG 108 | - ### Day 56 : Find It. 109 | - Demo : https://codepen.io/MehdiAoussiad/full/KKMEBxp 110 | - ### Day 57 : Adding the dark mode to my static website. 111 | - Demo : https://aoussiad-mehdi.github.io/Morocco-traveling-website/# 112 | 113 | - ### Day 58 : First React App (Books). 114 | - Demo : https://react-ebay-books.netlify.app/ 115 | 116 | - ### Day 59 : Vanilla JavaScript Drum Kit. 117 | - Demo : https://codepen.io/MehdiAoussiad/full/PoGwYwe 118 | 119 | - ### Day 60 : Vanilla JS Hover board. 120 | - Demo : https://codepen.io/MehdiAoussiad/full/BaLyvBz 121 | - ### Day 61 : Blog Posts Design HTML & CSS. 122 | - Demo : https://codepen.io/MehdiAoussiad/full/vYXOqez 123 | 124 | - ### Day 62 : Traffic Lights. 125 | - Demo : https://codepen.io/MehdiAoussiad/full/MWjeoLM 126 | 127 | - ### Day 63 : Live counting views by using the countAPI. 128 | - Demo : https://codepen.io/MehdiAoussiad/full/BaLQpyK 129 | 130 | - ### Day 64 : Simple React counter. 131 | - Demo: https://github.com/Aoussiad-Mehdi/Simple-React-counter 132 | - ### Day 65 : Simple React To-do list. 133 | 134 | - ### Day 66 : BattleCSS face challenge. 135 | - Demo: https://codepen.io/MehdiAoussiad/full/yLaPzJX 136 | 137 | - ### Day 67 : Rain Drops HTML CSS & JS. 138 | - Demo: https://codepen.io/MehdiAoussiad/full/VwKyYQQ 139 | 140 | - ### Day 68 : Currency Converter. 141 | - Demo: https://codepen.io/MehdiAoussiad/full/xxEpprR 142 | 143 | - ### Day 69 : Simple Image Slider with HTML CSS & JavaScript. 144 | - Demo: https://codepen.io/MehdiAoussiad/full/gOweYZN 145 | 146 | - ### Day 70 : Digital Clock using HTML, CSS, and Vanilla JavaScript. 147 | - Demo: https://codepen.io/MehdiAoussiad/full/BaLVpab 148 | 149 | - ### Day 71 : Simple Like Button Design. 150 | - Demo: https://codepen.io/MehdiAoussiad/full/gOwjXZy 151 | 152 | - ### Day 72 : Contact form using HTML & CSS. 153 | - Demo: https://codepen.io/MehdiAoussiad/full/qBaMwmK 154 | 155 | - ### Day 73 : Drag and Drop HTML CSS & JavaScript. 156 | - Demo: https://codepen.io/MehdiAoussiad/full/bGwOwyb 157 | 158 | - ### Day 74 : Simple user birthdays using React(with useState). 159 | - Demo: https://csb-wpt9y.netlify.app/ 160 | 161 | - ### Day 75 : Simple reviews slider using React. 162 | - Demo: https://csb-tgwxf.netlify.app/ 163 | 164 | - ### Day 76 : Simple ReactJs Tours Project. 165 | - Demo: https://suspicious-mayer-6adcd2.netlify.app/ 166 | 167 | - ### Day 77 : Simple accordion using ReactJS. 168 | - Demo: https://codesandbox.io/s/sharp-wind-p0m0v?file=/src/App.js 169 | 170 | - ### Day 78 : Popup Modal using ReactJS. 171 | - Demo: https://csb-dimm8.netlify.app/ 172 | 173 | 174 | 175 | 176 | 177 | --------------------------------------------------------------------------------