Skip to content
OverviewSolutions
10
Comments
9

RickyPWebDev

@RickyPWebDevNottingham, Nottinghamshire, England, GBR200 points

Hi! I’m Ricky, a junior front-end developer and final-year Computing & IT student at The Open University. I’m passionate about building responsive, accessible websites and currently exploring React, Next.js, and WordPress. I've worked on freelance and volunteer projects, collaborated in agile teams,

I’m currently learning...

Currently Learning: Advanced React & Next.js Web accessibility & performance optimization Headless CMS (WordPress & beyond) UI/UX design principles with Figma Preparing for a Master's in Software Development

Latest solutions

View more solutions

Latest comments

  • RickyPWebDev•200
    @RickyPWebDev

    Nice use of React.JS I just used vanilla JS

  • P
    Kyle Mulqueen•400
    @kmulqueen
    What are you most proud of, and what would you do differently next time?

    I'm most proud of the accessibility improvements I made throughout the project. Starting with basic HTML and progressively enhancing it with proper ARIA attributes, focus management, and error handling created a calculator that's usable for everyone. The clean implementation of form validation with visual feedback is another highlight.

    I'm also particularly proud of the error handling system that provides clear feedback without being intrusive, and the robust event handling that maintains consistent state across different user interactions.

    Next time, I would plan my HTML structure with accessibility in mind from the start rather than refactoring later.

    Additionally, I would implement a more modular JavaScript structure, potentially using small utility functions or even a simple state management pattern. Breaking the calculation logic into smaller, more testable functions would improve maintenance.

    What challenges did you encounter, and how did you overcome them?

    The biggest challenges were:

    1. Styling form inputs while maintaining accessibility: Creating custom styles for number inputs while keeping them fully accessible required several iterations.
    2. Focus states for compound elements: Getting the focus outline to wrap around both the icon and input field took experimentation with various CSS properties.
    3. Custom validation: Balancing HTML5 validation with custom JavaScript validation for better user experience was complex.
    4. Browser persistence issues: Handling the unexpected persistence of form state after page reload required understanding browser behavior and implementing explicit reset logic.
    5. Input validation timing: Determining when to validate inputs (on input vs. on change) to provide a smooth user experience without premature error messages.

    I overcame these by breaking problems down into smaller pieces, researching specific solutions, and iteratively improving the implementation based on feedback. The page refresh issue in particular taught me the importance of explicitly controlling state initialization rather than relying on browser defaults.

    What specific areas of your project would you like help with?

    • Testing strategy: Implementing unit tests for calculation functions to verify accuracy with edge cases like zero values and decimal precision

    • State management: Refactoring to a more structured approach using a central state object or module pattern instead of separate variables

    • Input validation: Enhancing error handling with more descriptive user feedback for different error conditions

    • Accessibility verification: Testing with actual screen readers to ensure ARIA implementations and dynamic updates work correctly

    • Browser compatibility: Ensuring consistent form behavior across different browsers, especially regarding form state persistence

    Tip Calculator App HTML/CSS/JS

    1
    RickyPWebDev•200
    @RickyPWebDev

    hey, just having a read through your JS code,

    there's a few areas you could refactor if you wanted to:

    The two functions showErrors and clearErrors can be put into 1 function.

    function toggleError(element, action, show = true) { const method = show ? 'add' : 'remove'; if (action === 'hidden') { element.classListshow ? 'remove' : 'add'; } else if (action === 'error-state') { element.classListmethod; } } Looking at your code I have realised ive not put in any logic for error handling.

    Marked as helpful
  • RickyPWebDev•200
    @RickyPWebDev

    This was a very challenging project with DOM manipulation and layering of content. You have done a great job on matching the design. Just out of curiosity there are some elements which never change, the top image the category i.e work play... so really dont need to be added to the dom through JavaScript as some of these variables will be empty... try refreshing your browser a few times you will see a "0" instead of the category.

    Just curious why you have put the top images in an array?

    const backGroundImages = [ "images/icon-work.svg", "images/icon-play.svg", "images/icon-study.svg", "images/icon-exercise.svg", "images/icon-social.svg", "images/icon-self-care.svg" ]

    you can just render that in the html- these elements never change.

    <div class="card work" data-title="Work"> <img class="top-image" src="images/icon-work.svg"> <div class="card-content"> 
        <div class="dots-heading">
      <h3>Work</h3>
      <img class="dots" src="images/icon-ellipsis.svg">
    </div>

    <h1><span class="current">32</span>hrs</h1>
    <p>Last Week - <span class="previous">36</span>hrs</p>
  </div>
</div>
  • Jogramador•150
    @Jogramador
    What are you most proud of, and what would you do differently next time?

    I was very happy that I used JavaScript. Even using chatGpt, I was able to absorb a lot of material.

    What challenges did you encounter, and how did you overcome them?

    JavaScript is still very challenging, I need to improve a lot.

    What specific areas of your project would you like help with?

    As strange as it may seem, I'm still having trouble with responsiveness. I'm always undecided about whether to start with mobile or desktop.

    Newsletter sign up form with success message

    1
    RickyPWebDev•200
    @RickyPWebDev

    I see that you have used a separate html doc for the success message.

    You could achieve the same results through showing and hiding that using JavaScript.

    this was the html i used:

    <!-- Success message can go here in the future --> 
    <section id="success-message" class="success-message hidden">  // hidden class
  <div class="success-content">
    <img src="assets/images/icon-success.svg" alt="Success icon" class="success-icon">
    <h1>Thanks for subscribing!</h1>
    <p>A confirmation email has been sent to <span id="user-email"></span>. 
    Please open it and click the button inside to confirm your subscription.</p>
    <button id="dismiss-btn">Dismiss message</button>
  </div>
</section>

    // CSS to show and hide .success-message { display: flex; flex-direction: column; justify-content: center; align-items: center; background: white; padding: 40px; border-radius: 20px; max-width: 400px; text-align: center; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); }

    .success-icon { width: 50px; height: 50px; margin-bottom: 20px; }

    .success-message.hidden { display: none; }

    var emailRegex = /^[^\s@]+@[^\s@]+.[^\s@]+$/; to toggle this I used this JS logic:

    if (email === "" || !emailRegex.test(email)) {
    error.classList.remove('hidden');
} else {
    error.classList.add('hidden');

    So this will add the class hidden when the if statement evaluates to false.

    Marked as helpful
  • RickyPWebDev•200
    @RickyPWebDev

    looking good

  • VeyronShark•130
    @VeyronShark
    What are you most proud of, and what would you do differently next time?

    I am proud of being able to reacreate it quite accurately. It gives me confidence to make whatever i can imagine

    What challenges did you encounter, and how did you overcome them?

    For the mobile view, the image needed to ignore the margins of the recipe element. To achieve thatI had to remove the img from the header and position it before the header to style it separately and force it to ignore margins

    What specific areas of your project would you like help with?

    i would like to know any tips to make my css code less redundant

    Solution using CSS and media queries

    1
    RickyPWebDev•200
    @RickyPWebDev

    What’s Good:

    Uses semantic HTML tags appropriately (<article>, <header>, <main>, <section>)

    Clean and readable CSS — grouped logically, no clutter

    Mobile responsiveness handled with media queries — nice touch

    Font usage through @font-face is correctly implemented

    Color use is consistent and aligns with modern design trends

    Thought put into spacing, typography, and readability — well balanced

    You're showing a solid grasp of:

    Semantic HTML

    Responsive design

    Custom fonts

    Modular CSS

View more comments