├── LICENSE ├── README.md ├── bg.png ├── challenge8.png └── images ├── floatingSidebar.png └── timelineComponent.png /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Yogini Bende 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Frontend QuickBytes](bg.png) 2 | 3 | # Frontend Quickbytes: Reallife Inspired Challenges (Total: 11) 4 | 5 | This repository contains real life frontend challenges which you can use to practice frontend! You can use any framework/library to solve these challenges. These are created for the fun and practice purpose to go beyond to-dos. 6 | 7 | If you like these challenges, would appreciate getting a star to this repository 🌟 8 | 9 | You can also contribute to these challenge lists or share your solutions. We can create a solutions section too for those links! 10 | 11 | Here is the list of all challenges - 12 | 13 | 1. [**Smart Textarea**: Twitter like textarea with character count](#smart-textarea) 14 | 2. [**Dropdown Component with select/multiselect feature** - Similar to React Select](#dropdown-component) 15 | 3. [**Autosuggest Input**](#autosuggest-input) 16 | 4. [**Manage cookies pop-up**](#manage-cookies-pop-up) 17 | 5. [**Progress Bar**](#progress-bar) 18 | 6. [**Scroll and Fix it!**](#scroll-and-fix-it) 19 | 7. [**Password Module**](#password-module) 20 | 8. [**Multi-step Forms**](#multi-step-forms) 21 | 9. [**Back To Top Button**](#back-to-top-button) 22 | 10. [**Toggle Sidebar**](#toggle-sidebar) 23 | 11. [**Copy to clipboard**](#copy-to-clipboard) 24 | 12. [**Timeline Component**](#timeline-component) 25 | 13. [**Floating Sidebar**](#floating-sidebar) 26 | 27 | ## Smart Textarea 28 | 29 | Twitter like textarea with character count 30 | 31 | If you have ever used twitter, you must know your tweet will have a character count limit of 280 characters and once you cross that character limit twitter starts marking your characters with red background and you will see a character count going in a negative value! That's it, that is the task. You can build the same textarea with a customised character count limit. 32 | 33 | Features to include in it - 34 | 35 | 1. Create a simple textarea and add necessary styling. 36 | 2. There should be a customisable character count limit to your textarea. 37 | 3. Show this limit below the textarea. _Improvement - You can add progress circle showing the count._ 38 | 4. If characters go beyond the limit, highlight them, decrease the count to negative value and disable the submit button. 39 | 5. You can also add warnings when only the 10% character limit is remaining. 40 | 6. If a user is adding symbols such as `@` or `#` made them as a link with relevant href. 41 | 7. After a submit button, display that paragraph. 42 | 43 | ## Dropdown Component 44 | 45 | A component with select/multi select feature, similar to [React Select](https://react-select.com/home) 46 | 47 | Dropdowns are part of most applications and they are smart to implement components. [React Select](https://react-select.com/home) is one of those libraries which I heavily trust on for any type of dropdown I need. But while learning if we can create a simple dropdown component, it will have so many benefits over going for the library. 48 | 49 | Features to include in it - 50 | 51 | 1. Dropdown component, where list will be open on click of dropdown. 52 | 2. This list should get closed on clicking the dropdown again, on pressing `esc` key, on clicking outside and after selecting any element. 53 | 3. Enable multi select option as well. 54 | 4. Search function on type will be a bonus. 55 | 56 | ## Autosuggest Input 57 | 58 | We all have tried Google search input. It's pretty cool how it shows you some suggestions based on your typing. We need to create exactly the same. Consider a search location feature, where you are adding names to your city and country. Implement a search feature with a list of cities and countries and show user options based on what the user is typing. 59 | 60 | _This is one of the most frequently asked questions in the interviews. So that is a bonus point._ 61 | 62 | Features to include in it - 63 | 64 | 1. A search input with auto suggest option. 65 | 2. Enable debouncing feature to save excess api calls. 66 | 3. Use any api or json list to show suggestions 67 | 68 | ## Manage cookies pop-up 69 | 70 | Ever opened a website and saw an annoying pop-up asking to accept cookies or manage your preferences? We need to build that! A custom pop-up component for creating and managing cookies in an application. 71 | 72 | Features to include in it - 73 | 74 | 1. After loading a page, a pop-up asking to accept cookies should show up. 75 | 2. Users should have preferences on accepting all/some or no cookies. 76 | 3. Same preference should work in your app. 77 | 4. After 10-15 seconds the pop-up should become hidden with a default state. 78 | 79 | ## Progress Bar 80 | 81 | Progress bars showing progress of something are commonly seen. Here you can develop 3 types of progress bar 82 | 83 | 1. Progress bar showing page scroll progress, at the top most position of your page. 84 | 2. Progress bar showing progress as per value passed in percentage. 85 | 3. Circular variant of same progress bar. 86 | 87 | ## Scroll and Fix it! 88 | 89 | Ever seen a website where you scroll and one of the sections gets fixed at a certain point and the remaining website keeps scrolling? You can see the example [here](https://store.google.com/in/?hl=en-GB) where the products sidebar gets fixed at the left for some time till we scroll the right side section. That is exactly the challenge. 90 | 91 | 1. Implement a section which will be initially somewhere on a webpage. 92 | 2. After you scroll to that section, the section should get fixed on top and other sections of your site should continue scrolling. 93 | 94 | ## Password Module 95 | 96 | Doesn't it look cool that your password strength and password criteria is getting checked as you type the password? That is the task in this challenge. 97 | 98 | Features to include in it - 99 | 100 | 1. Create a password input component. 101 | 2. Add an eye icon to simply toggle between visible and non-visible states. 102 | 3. Check the password criteria as the user starts entering the password. You can either mark after every matching criteria or display a message showing which criteria yet to pass. 103 | 4. Also, find and show the strength of the password based on parameters from criteria it has matched. 104 | 105 | ## Multi-step Forms 106 | 107 | Many registration processes need multi-step forms. This is a good use case to maintain data between steps and managing steps transition using javascript. To understand the multistep registration form you can refer to this [dribbble shot](https://dribbble.com/shots/15184687-Register-Scriptcase). Image below 108 | challenge8 109 | 110 | Features to include in it - 111 | 112 | 1. Create a form with 3 different pages. 113 | 2. Add a transition element on top, which we can use to navigate between three forms. 114 | 3. Last form should submit the data. 115 | 116 | ## Back To Top Button 117 | 118 | Ever noticed a long webpage with a "Back To Top" button? This makes it easier to go back to the top of the webpage. That's the challange. 119 | 120 | Features to include in it - 121 | 122 | 1. Clicking the button scrolls the page to top. 123 | 2. Make the scroll smooth, instead of suddenly going back to top. 124 | 125 | ## Toggle Sidebar 126 | 127 | In most of the course webpages, there is a sidebar with chapter names, which can be toggled between show and hide state. 128 | 129 | Two examples: 130 | - https://youtube.com/ 131 | - https://codepen.io/swastikyadav/full/zYZPyrN 132 | 133 | Features to include in it - 134 | 135 | 1. Create a toggle button which should show / hide the sidebar accordingly. 136 | 2. Sidebar should be fixed. It should not scroll with rest of the page. 137 | 138 | ## Copy to clipboard 139 | 140 | Copy to clipboard button is very common either on code heavy websites or for copying links. You need to create a copy to clipboard feature where on clicking the button the content should get copied to your clipboard along with a small pop-up with text `copied!`. That's the challange. 141 | 142 | Features to include in it - 143 | 144 | 1. Clicking the button text should get copied. 145 | 2. After copying, a small pop-up should show `copied!` text. 146 | 3. This pop-up should get vanished in 2 seconds with smooth transition. 147 | 148 | ## Timeline Component 149 | 150 | A timeline component has a lot of use cases. It is used to show work experience on resumes, job profiles or portfolios. It can also be used as a vertical stepper component. The challenge is to create a Timeline Component using `HTML` and `CSS`. 151 | 152 | A codepen link has been provided below for your reference. 153 | 154 | Example: 155 | - https://codepen.io/jash_139/full/oNoMoNW 156 | 157 | Features to include in it - 158 | 159 | 1. Create a timeline component using pure `HTML` and `CSS`. 160 | 2. You can take it a step further by making the timeline container an Accordion. The contents of which should be revealed when the dropdown button is clicked. 161 | 162 | Timeline Component 163 | 164 | ## Floating Sidebar 165 | 166 | A floating sidebar has a modern touch to it compared to a traditional sidebar. The challenge is to create a floating sidebar with navigation links. The current page link should be highlighted and have an indicator next to it. 167 | 168 | Example: 169 | - https://codepen.io/jash_139/full/OJOwQEz 170 | 171 | Features to include in it - 172 | 1. The position of the sidebar should be fixed with respect to the viewport. Scrolling the page shouldn't affect its position. 173 | 2. Your implementation should take care of the height of the sidebar with even margins around it. 174 | 3. There should be an indicator for the current page. 175 | 176 | Floating Sidebar -------------------------------------------------------------------------------- /bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ms-yogi/frontendQuickbytes/8a7b5b02dd7f52ca5e815e4f5ab7c9afc83817ea/bg.png -------------------------------------------------------------------------------- /challenge8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ms-yogi/frontendQuickbytes/8a7b5b02dd7f52ca5e815e4f5ab7c9afc83817ea/challenge8.png -------------------------------------------------------------------------------- /images/floatingSidebar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ms-yogi/frontendQuickbytes/8a7b5b02dd7f52ca5e815e4f5ab7c9afc83817ea/images/floatingSidebar.png -------------------------------------------------------------------------------- /images/timelineComponent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ms-yogi/frontendQuickbytes/8a7b5b02dd7f52ca5e815e4f5ab7c9afc83817ea/images/timelineComponent.png --------------------------------------------------------------------------------