1. Drag & Drop or Browse – File upload Feature
There is a drop area container with some text, an icon, and a browse file button in this project. When you drag any image file over the drag area, the border of the container is also changed to solid, and the text “Drag & Drop to upload file” also changed to “Release to upload file”. When you release your image file in the drag area, the preview of that image will immediately appear. You can also upload an image by clicking on the browse file button. When you click on the button, there is open a file window and you have to select one image file, after you selected it then it will appear in the drag area.
In this project, there is a search bar and when you type something, there is shown a autocomplete box that suggests several predictions of how your query could be completed means there are shown several suggestions related to your query.
In the Quiz Box, there is a header with a title on the left side and a timer box on the right side. This timer starts decrement from 15 to 0 sec and there is also shown a timeline indicator that is sliding from the left to right side according to the timer. If the user selects an option between 15 to 0 sec, the timer will be stopped and all available options will be disabled. If the user selected option is correct, the selected option color, background color changed to green and there is also shown the tick icon to inform the user that the selected answer is correct.
In this project, there are two same images with different filters – black & white and colorized, and at first, both of these images are shown 50% of their total width as you can see in the image. At the center, there is a draggable slider to compare two images.
In this project, a content box holds only the input field with some buttons and text. When you entered some characters and click on the plus (+) button, the list will be added to your tasks list and the number of the pending tasks also be updated. You can also delete each list by clicking on the trash icon, and remember this trash icon only appear on hover on the particular list and delete all tasks with a single click.
In this project, there is a webpage with a minimal toast notification and it changes its icon, color, text according to the internet connection status as you can see in the preview image. It has a pretty cool animation that means when your internet status changed, it’ll show from the left top side with a sliding animation.
In this project, there is pagination with the previous and next button and some numbers. I already told you, this is a fully functional pagination so when you click on the next or previous button, the number of the pagination also changed accordingly. There is a total of 20 pages or numbers but you can easily add more according to your web pages.
In this project, there are the player names at the top and it indicates or shows whose turn is now. At the center of the webpage, there is a tic tac toe play area with nine square boxes. Once you click on the particular box then there is visible a sign or icon which you have chosen on the selection box. Once you click on any box then after a couple of seconds the bot will automatically select the box which is not selected by you or the bot before, and the opposite icon is visible there means if your icon is X then the bot will have O.
In this project, there are six images on the webpage and when you click on the particular image then the lightbox appears with the selected image. In the lightbox, there is a total image and current image number on the top left side and a cross icon to the top right side. There are also previous and next icons to change the image. When you click on the cross icon then the lightbox will disappear and after again clicking on the particular image, the lightbox appears.
In this project, there is a content box with a header and some options. At first, there is only an option name with a light grey border and a radio circle on each option but when you select an option then the selected option border color will be changed into the body color, the radio circle color also changed and checked, and the total percent and the progress bar of each option also visible as you can see in the preview image.