The user completes the survey and submits the form. JavaScript calculates a score by comparing the user's answers to the correct answers. The result is animated on the screen and the percentile is presented to the user.
Second Project 💻
How does it work?
The tick function is called every second to retrieve the current hour, minute, and second. Clock information is included in the .clock content in HTML format. Thanks to the setInterval function, the tick function runs once every second and the time is constantly updated.
clock.mov
Third Project 💻
How does it work?
• Automatic Switching: Images change automatically every 4 seconds.
• Manual Switching: You can manually switch between images with the “Previous” and “Next” buttons.
• Infinite Loop: Switches between images cyclically, that is, after the last image, it returns to the first image.
slider.mov
Fourth Project 💻
How does it work?
This animation works by using JavaScript to increment a number from 0 to 100, updating the displayed percentage and the width of the loading bar in each step.
loading.bar.mov
Fifth Project 💻
How does it work?
When the user types in the textarea, the keyup event triggers the updateCounter function. The number of characters in the textarea is displayed in the totalCounter element. The remaining character count (based on the maximum limit set by maxlength) is shown in the remainingCounter element.
character-counter.mov
Sixth Project 💻
How does it work?
When the menu icon is clicked, the JavaScript code toggles the showSidebar class on the sidebar, making it slide into view. Clicking the close (X) button inside the sidebar removes the showSidebar class, hiding the sidebar again. This provides a simple and effective way to show or hide the sidebar with smooth animations.
sidebar.mov
Seventh Project 💻
How does it work?
updateRate function fetches the latest exchange rate for the selected currency. When the user selects a different currency or changes the amount, the updateRate function recalculates the equivalent value in the target currency. The exchange rate and calculated amount are updated instantly in the display areas, giving the user up-to-date conversion information.
currency.converter.mov
Eighth Project 💻
How does it work?
When the user clicks on a .boxButton, it toggles the active class on relevant elements inside the box. The plus and minus icons toggle between showing and hiding. The .box-text element’s active class toggles, making the content visible or hidden.
accordion.mov
Ninth Project 💻
How does it work?
The user enters a value in any temperature unit (Celsius, Fahrenheit or Kelvin). The calculateTemp function detects which input field the value is entered in and calculates the other two units using the appropriate mathematical formulas. The calculated temperature values are automatically printed in the corresponding input fields. This process is repeated every time the user enters a new value.
air.temperature.converter.mov
Tenth Project 💻
How does it work?
When the menu-bars button is clicked, the navigation menu toggles between open and closed states. The overlay slides in or out using CSS animations controlled by JavaScript. Navigation items also animate individually to enhance the user experience, and clicking on any item closes the menu.
