Java - Frontend - Assignment -3

 

Java - Frontend - Assignment -3

 

Category: HTML

1. Create an HTML form that includes text inputs for first name, last name, email address, and a password. Validate that the password contains at least one uppercase letter, one lowercase letter, one digit, and one special character.

Algorithm steps:

• Get the value of the password input field.
• Use regular expressions to check if the password meets the required criteria.
• Display an error message if the password is not valid.

2. Implement an HTML5 canvas element and draw a circle with a gradient fill effect.

Algorithm steps:

• Get the canvas element using JavaScript.
• Get the canvas context for drawing.
• Set up the gradient with the desired colors and positions.
• Use the context methods to draw a circle and apply the gradient fill effect.

Category: CSS

3. Style a navigation menu to have a horizontal scrolling effect when the number of items exceeds the available width.

Algorithm steps:

• Set the container of the navigation menu to have a fixed width and overflow-x set to scroll.
• Ensure that the menu items are displayed inline and do not wrap.
• Add CSS media queries to handle responsive behavior when the viewport width changes.

4. Create a CSS animation that simulates a bouncing ball moving diagonally across the screen.

Algorithm steps:

• Set up a keyframe animation that defines the ball's initial and final positions.
• Apply the animation to an element representing the ball.
• Configure the animation properties to control the duration, timing, and easing of the animation.

Category: Bootstrap

5. Use Bootstrap to create a responsive multi-level dropdown menu that supports nested submenu levels.

Algorithm steps:

• Structure the HTML markup using the appropriate Bootstrap classes for dropdowns and nested dropdowns.
• Utilize Bootstrap's JavaScript components to enable dropdown functionality.
• Apply custom CSS styling to achieve the desired appearance.

6. Build a responsive Bootstrap carousel that fetches and displays images from an external API.

Algorithm steps:

• Fetch the image data from the API using JavaScript's fetch function or an AJAX library.
• Parse the response to extract the image URLs.
• Dynamically generate the carousel slides and indicators using JavaScript.
• Configure the Bootstrap carousel component to display the fetched images.

Category: JavaScript

7. Write a JavaScript function that checks if a given string is a palindrome, considering alphanumeric characters only.

Algorithm steps:

• Remove any non-alphanumeric characters from the input string.
• Convert the string to lowercase for case-insensitive comparison.
• Reverse the string.
• Compare the reversed string with the original string and return true if they are equal.

8. Implement a function that performs a deep comparison of two objects, checking if their properties and nested properties are equal.

Algorithm steps:

• Recursively iterate over each property of the objects.
• Check if the property values are equal using appropriate comparison logic.
• For nested properties, repeat the comparison process recursively.
• Return true if all properties are equal; otherwise, return false.

Category: HTML

9. Create an HTML page that includes a table with sortable columns. Implement the sorting functionality using JavaScript.

Algorithm steps:

• Add event listeners to the table headers.
• When a header is clicked, extract the column data from the table rows.
• Sort the rows based on the selected column data.
• Update the table with the sorted rows.

10. Implement a responsive HTML layout that displays a grid of images. When clicked, the images should open in a lightbox with navigation controls.

Algorithm steps:

• Create a grid layout using CSS or a framework like Bootstrap.
• Add event listeners to the images to detect clicks.
• When an image is clicked, create and display a lightbox element with the clicked image.
• Implement navigation controls to switch between images in the lightbox.

Category: CSS

11. Style a complex form with multiple input fields and validation requirements. Display real-time validation feedback using CSS and JavaScript.

Algorithm steps:

• Use CSS to style the form elements and apply validation classes based on the input's validity.
• Add event listeners to the input fields to detect changes and validate the input using JavaScript.
• Update the CSS classes or styles based on the validation status to provide real-time feedback.

12. Create a CSS-only animated loading spinner that spins continuously.

Algorithm steps:

• Define the keyframes for the animation using CSS.
• Apply the animation to an element, such as a div or a pseudo-element.
• Configure the animation properties, such as duration and timing, to control the spinning effect.

Category: Bootstrap

13. Build a responsive timeline using Bootstrap that displays a sequence of events with corresponding dates.

Algorithm steps:

• Structure the HTML markup using Bootstrap's grid system and appropriate classes.
• Apply custom CSS styles to achieve the desired appearance.
• Utilize Bootstrap's responsive classes to handle different screen sizes.

14. Implement a Bootstrap modal dialog that includes a form for user input and validation.

Algorithm steps:

• Create a modal element using Bootstrap's modal component.
• Design and structure the form within the modal body.
• Add JavaScript validation to validate the form inputs upon submission.

Category: JavaScript

15. Write a JavaScript function that finds the intersection of two arrays, returning a new array with the common elements.

Algorithm steps:

• Iterate over one array and check if each element exists in the other array.
• If an element is found, add it to a new array.
• Return the new array containing the common elements.

16. Implement a function that finds the longest substring without repeating characters in a given string.

Algorithm steps:

• Initialize two pointers, one at the start and one at the end of the string.
• Use a hash map to track the characters and their indices in the current substring.
• Move the end pointer forward until a repeating character is encountered.
• Update the start pointer to the next non-repeating character and continue.
• Track the maximum length of the non-repeating substring encountered.

Category: HTML

17. Create an HTML page that includes a responsive image gallery with filtering options based on categories. Implement the filtering functionality using JavaScript.

Algorithm steps:

• Assign category classes to the gallery items.
• Add event listeners to the filter buttons.
• When a filter button is clicked, hide the gallery items that do not match the selected category.
• Show the gallery items that match the selected category.

18. Implement a form validation using HTML5's built-in form validation attributes and JavaScript. Validate fields such as email address, phone number, and password strength.

Algorithm steps:

• Use HTML5 form validation attributes like required, pattern, and minlength to specify the validation rules.
• Add JavaScript validation to handle more complex validation logic, such as checking password strength or performing custom validation.
• Display appropriate error messages or visual indicators for invalid fields.

Category: CSS

19. Style a complex layout that includes a sidebar, main content area, and a fixed-positioned element that sticks to the bottom right corner of the screen.

Algorithm steps:

• Use CSS to create a layout with appropriate positioning and sizing for the sidebar, main content, and fixed-positioned element.
• Apply appropriate styles to achieve the desired appearance.
• Use CSS media queries to handle responsive behavior for different screen sizes.

20. Create a CSS-only dropdown menu that supports multi-level submenus.

Algorithm steps:

• Utilize nested HTML lists to structure the dropdown menu and submenus.
• Apply CSS styles to hide the submenus by default and display them when hovering or clicking on the parent menu items.
• Use CSS transitions or animations to add smooth transitions when showing or hiding the submenus.

Category: Bootstrap

21. Build a responsive pricing table using Bootstrap that displays different pricing plans with features and options.

Algorithm steps:

• Structure the HTML markup using Bootstrap's grid system and appropriate classes.
• Apply custom CSS styles to achieve the desired appearance.
• Utilize Bootstrap's responsive classes to handle different screen sizes.

22. Implement a Bootstrap modal dialog that includes tabs for displaying different content sections.

Algorithm steps:

• Create a modal element using Bootstrap's modal component.
• Structure the modal content using Bootstrap's tab component.
• Add content to each tab panel and configure the necessary JavaScript to enable the tab functionality.

Category: JavaScript

23. Write a JavaScript function that finds the first non-repeating character in a given string.

Algorithm steps:

• Iterate over the string and store the count of each character in a hash map.
• Iterate over the string again and return the first character with a count of 1.

24. Implement a function that checks if a given string is a valid JSON object.

Algorithm steps:

• Use JavaScript's built-in try...catch block to parse the string as JSON.
• If the parsing is successful, it is a valid JSON object. Otherwise, it is not.

Category: HTML

25. Create an HTML page that includes a drag-and-drop functionality. Allow users to drag elements from one container and drop them into another container, updating the layout dynamically.

Algorithm steps:

• Implement event listeners for the dragstart and dragover events.
• When a draggable element is dragged, store the necessary data in a custom data attribute.
• When a drop target is entered, prevent the default behavior and update the layout based on the dropped element.

26. Implement a responsive HTML layout that displays a calendar. Allow users to navigate between months and highlight the current date.

Algorithm steps:

• Design the HTML structure for the calendar, including header, days of the week, and date cells.
• Use JavaScript to generate and populate the calendar based on the current month and year.
• Add event listeners to the navigation buttons to update the displayed month and year.

Category: CSS

27. Style a complex navigation menu with animated dropdowns. When a dropdown menu is opened, animate its appearance using CSS transitions or animations.

Algorithm steps:

• Structure the HTML markup for the navigation menu and nested dropdowns.
• Apply CSS styles to hide the dropdowns by default and display them when hovering or clicking on the parent menu items.
• Use CSS transitions or animations to create smooth transitions when showing or hiding the dropdowns.

28. Create a CSS-only progress bar that animates based on a specified duration and updates dynamically.

Algorithm steps:

• Design the HTML structure for the progress bar.
• Use CSS keyframes to define the animation for the progress bar's width.
• Utilize JavaScript to update the progress bar's width based on the specified duration.

Category: Bootstrap

29. Implement a responsive Bootstrap grid layout that displays a card deck with dynamically loaded content from an external data source.

Algorithm steps:

• Fetch the data from an external API using JavaScript's fetch function or an AJAX library.
• Parse the response to extract the necessary content.
• Use JavaScript to dynamically generate the card deck based on the retrieved data.
• Apply Bootstrap classes to create a responsive grid layout for the card deck.

30. Build a responsive Bootstrap modal dialog that displays a dynamic list of items with checkboxes. Allow users to select multiple items and perform actions on the selected items.

Algorithm steps:

• Create a modal element using Bootstrap's modal component.
• Use JavaScript to populate the modal with a list of items and checkboxes.
• Implement event listeners to track the selected items and perform actions on them.

Category: JavaScript

31. Write a JavaScript function that generates a unique identifier with a specified length, using a combination of letters and numbers.

Algorithm steps:

• Define a pool of characters consisting of letters and numbers.
• Generate a random index within the range of the pool's length.
• Concatenate the characters from the pool at the generated index to form the unique identifier.
• Repeat the process until the desired length is achieved.

32. Implement a function that checks if a given string is an anagram of another string.

Algorithm steps:

• Remove any whitespace or special characters from both strings.
• Convert both strings to lowercase for case-insensitive comparison.
• Sort the characters of both strings.
• Compare the sorted strings and return true if they are equal.

Category: HTML

33. Create an HTML page that includes a responsive image slider. Implement the slider functionality using JavaScript and CSS transitions.

Algorithm steps:

• Structure the HTML markup with an image container and navigation buttons.
• Use JavaScript to handle the slider logic, including image transitions and navigation button functionality.
• Apply CSS transitions to achieve smooth image transitions when moving between slides.

34. Implement a real-time search functionality on an HTML page. As the user types in a search input field, filter and display the matching results dynamically.

Algorithm steps:

• Add an event listener to the search input field to detect changes.
• Use JavaScript to filter the available data based on the search input.
• Update the HTML markup to display the filtered results in real-time.

Category: CSS

35. Style a complex form layout with different fieldsets and validation requirements. Apply custom CSS styles and animations to provide visual feedback for invalid fields.

Algorithm steps:

• Use CSS to create a visually appealing form layout with appropriate spacing and alignment.
• Apply custom styles to highlight and indicate invalid fields based on their validation status.
• Utilize CSS animations to add dynamic effects when displaying error messages or visual feedback.

36. Create a CSS-only tooltip that appears when hovering over an element. Style the tooltip to include custom content and adjust its position based on the element's location.

Algorithm steps:

• Use CSS to position and style the tooltip element.
• Apply CSS pseudo-classes to display the tooltip when hovering over the target element.
• Adjust the tooltip's position dynamically based on the target element's location on the screen.

Category: Bootstrap

37. Build a responsive Bootstrap accordion that displays collapsible content sections. Allow users to expand or collapse individual sections.

Algorithm steps:

• Structure the HTML markup using Bootstrap's accordion component.
• Add event listeners to the accordion headers to detect clicks and toggle the corresponding content section's visibility.
• Apply appropriate CSS styles to achieve the desired appearance.

38. Implement a Bootstrap carousel with custom navigation controls. Allow users to navigate between slides using arrow buttons and display additional content related to each slide.

Algorithm steps:

• Create the HTML markup for the carousel using Bootstrap's carousel component.
• Add custom navigation buttons to the carousel for slide control.
• Use JavaScript to handle the navigation logic and update the carousel's active slide.

Category: JavaScript

39. Write a JavaScript function that calculates the factorial of a given number recursively.

Algorithm steps:

• Create a recursive function that takes the number as input.
• Base case: If the number is 0 or 1, return 1.
• Recursive case: Multiply the number by the factorial of the number minus 1.
• Return the result.

40. Implement a function that finds the maximum sum of a subarray within a given array.

Algorithm steps:

• Initialize variables for the maximum sum and the current sum, both initially set to the first element of the array.
• Iterate over the array from the second element.
• For each element, update the current sum by adding the element to it, or start a new subarray if the element is greater than the current sum.
• Update the maximum sum if the current sum is greater.
• After iterating through the entire array, return the maximum sum.

Category: HTML

41. Create an HTML page that includes a form with autocomplete functionality. Implement the autocomplete feature using JavaScript and a predefined list of suggestions.

Algorithm steps:

• Attach an event listener to the input field to detect user input.
• Use JavaScript to compare the user's input with the predefined list of suggestions.
• Display matching suggestions in a dropdown menu beneath the input field.
• Update the input field's value when a suggestion is selected.

42. Implement a responsive HTML layout that displays a timeline of events. Allow users to scroll horizontally through the timeline to view past and future events.

Algorithm steps:

• Structure the HTML markup to represent the timeline and its events.
• Use CSS to create a horizontally scrollable container for the timeline.
• Implement JavaScript logic to handle scrolling when the user interacts with the timeline.

Category: CSS

43. Style a complex card layout with overlapping elements. Create a visually appealing design by applying custom CSS styles and positioning techniques.

Algorithm steps:

• Use CSS to create a card layout with overlapping elements, such as images and text.
• Apply appropriate positioning and z-index values to achieve the desired overlapping effect.
• Utilize CSS transitions or animations to add dynamic effects when hovering or interacting with the cards.

44. Create a CSS-only navigation menu that transforms into a mobile-friendly menu when viewed on smaller screens. Implement the menu toggle using CSS media queries and the checkbox hack.

Algorithm steps:

• Design the navigation menu using CSS styles, including the mobile-friendly version.
• Utilize CSS media queries to detect smaller screens and hide the desktop version while displaying the mobile menu.
• Use the checkbox hack to toggle the mobile menu's visibility when the checkbox is clicked.

Category: Bootstrap

45. Build a responsive Bootstrap carousel that automatically advances to the next slide after a specified duration. Allow users to pause and resume the carousel.

Algorithm steps:

• Create the HTML markup for the carousel using Bootstrap's carousel component.
• Implement JavaScript logic to handle the carousel's automatic slide transition.
• Add event listeners to the carousel to detect user interactions, such as pausing or resuming the carousel.

46. Implement a Bootstrap dropdown menu with dynamic content loaded from an external source using AJAX.

Algorithm steps:

• Attach an event listener to the dropdown menu to detect clicks.
• Use AJAX to fetch the dynamic content from an external source.
• Update the dropdown menu's content with the retrieved data.

Category: JavaScript

47. Write a JavaScript function that converts a Roman numeral to an integer.

Algorithm steps:

• Create a lookup table that maps Roman numerals to their corresponding integer values.
• Iterate through the Roman numeral from left to right.
• Compare the current symbol with the next symbol.
• If the current symbol is smaller than the next symbol, subtract its value from the result.
• Otherwise, add its value to the result.
• Return the final result.

48. Implement a function that checks if a given string is a palindrome.

Algorithm steps:

• Remove any whitespace or special characters from the string.
• Convert the string to lowercase for case-insensitive comparison.
• Reverse the string.
• Compare the reversed string with the original string.
• Return true if they are equal, indicating a palindrome.

Category: General

49. Write a function that generates a random password of a specified length. The password should include a combination of uppercase letters, lowercase letters, numbers, and special characters.

Algorithm steps:

• Create a pool of characters consisting of uppercase letters, lowercase letters, numbers, and special characters.
• Generate a random index within the range of the pool's length.
• Repeat the process for the desired length, concatenating the characters from the pool at the generated indices to form the random password.
• Return the password.

50. Implement a JavaScript function that sorts an array of objects based on a specified property value in ascending order.

Algorithm steps:

• Define a sorting function that takes the array and the property name as parameters.
• Use the sort() method to sort the array based on the specified property.
• Compare the property values of each object and return the sorted array.

function sortObjectsByProperty(array, property) { return array.sort((a, b) => a[property] - b[property]); }