Levelling up my front-end skills by building projects
-
Naviagte to simple tab - click on the button to generate random background colors (+ display their values) from the fixed set
-
Navigate to hex tab - click on the button to generate random background colors (+ display their values)
Counter will have three buttons
- Increase - click this button to increase the count value
- Decrease - click this button to decrease the count value
- Reset - Click this button to reset the count value to zero
One more thing is - if the count is positive, count value will be displayed in green colour. If count value is negative, it will be displayed in red colour and black otherwise.
Three buttons which help in navigation
- next - displays the next review, once the end is reached, it circles back to first review
- previous - displays the previous review, once the start it reached, it circles back to last review
- surprise button - picks a review from the data and displays it
On big screen basic navbar is displayed, but once the screen sizes goes less than some specific size, nav links will not be displayed, instead a toggle bar will be displayed.
Clicking the toggle bar will toggle the nav links
On bigger screen sidebar won't show up until toggle bar is clicked. It is used to toggle the sidebar, we well as a close button is provided in the sidebar as well to close the sidebar
On small screens, sidebar occupies the whole screen, no toggle bar is displayed , but a close button in the sidebar is provided similar to the sidebar on bigger screens
A button is provided clicking on which opens up the modal.
Close button is provided in the modal to close the opened modal
A set of questions will displayed, answers would be hidden to be displayed only when the user clicks on + button, which gets changed to - while the answer is open. Clicking on - will cause the answer section to get closed
While one answer is open, and tries to open another question, all other answer section gets closed, and only the current answer will open
All the images will be displayed at first, and based on the categories present buttons are displayed dynamically
It also has a filtering option, clicking on a button will filter out the items and display them
A video will be playing in the background, two buttons are provided to play and pause the video
Also, when loading the page takes time, a preloader will show up until the page is fully loaded.
Various links are added in the navbar, clicking on those will take the user to exact beginning of the section.
Also, similar to previous project, on smaller screen a toggle bar is added, which when clicked, toggles the nav links, and the scroll functionality works similar to that on a bigger screen
When user scroll past a certain height, navbar is kept fixed similarly, link to the top will show up as an arrow when user scroll past a specific height
3 different tabs will be shown, user can navigate between tabs, information related to the tab will be shown in the same section for all the tabs
Date is set up dynamically. Whenever we run the project, 10days later date will be considered as future date and the countdown will start
Every second the count will go down, once it crosses the deadline, countdown will stop and a proper message will be shown
User can enter the paragraphs count and submit to get the paragraphs which isn't lorem-ipsum Count should be betweeen 1 and 10, if user submits any other number, just one paragraph will be displayed