Skip to content
OverviewSolutions
34
Comments
19
P

Ralph Virtucio

@ralphvirtucioCavite, Philippines710 points

I'm a developer passionate on building responsive and accessible websites and web applications. I want to provide a easy to navigate and use websites and web application.

I’m currently learning...

JavaScript, Web Accessibility !

Latest solutions

  • Loopstudios landing page

    #sass/scss#cube-css
    P
    Ralph Virtucio•710
    Submitted 14 days ago

    I would like to know your opinion with the grid that I did for the cards within the Our Creations. I have two approaches in mind.

    1. Change the grid-template-columns per breakpoint, This will remove the spaces on the left and right side.

    2. Use auto-fill, But in this approach I need to set a max-width so the card will only have 4 columns and then set an margin-inline: auto. To have it center.

    For me I chose approach number 2 because it's more responsive and can solve all different breakpoints. Let me know your opinion for this

    1 comment

  • Faq Accordion

    P
    Ralph Virtucio•710
    Submitted 6 months ago

    Any feedback is welcome! I'm especially open to suggestions on improving code structure, enhancing responsiveness, and making the project more accessible.

    1 comment

  • Frontend Quiz Application (vanilla javascript)

    P
    Ralph Virtucio•710
    Submitted 6 months ago

    Areas of the Project for Feedback:

    • Implementation of the Theme Switcher: To ensure it's optimized and user-friendly.
    • Core Functionality Implementation: To verify robustness and efficiency.
    • Accessibility Features: To confirm that the application is inclusive and meets accessibility standards.
    1 comment

  • Password Generator App (Vanilla JavaScript)

    P
    Ralph Virtucio•710
    Submitted 8 months ago

    I need help on checking and measuring the generated password strength, I'm having a second thoughts if my validatePasswordStrength(computedEntropy) is measuring the password strength correctly

    1 comment

  • Tip Calculator (Vanilla JavaScript)

    P
    Ralph Virtucio•710
    Submitted 9 months ago

    It would be great to get feedback on additional test cases for the inputs and the accessibility setup for the labels. Any insights on the event listeners I used would also be appreciated.

    I'm also looking for suggestions on how to achieve the 4.27 tip amount shown in the provided desktop design. Currently, I'm using toFixed(2) for both the amount and total, which gives me a tip amount of 4.28.

    Any feedback will be much appreciated, and you'll be rewarded with a virtual ☕🍩!

    1 comment

  • Time Tracking Dashboard

    P
    Ralph Virtucio•710
    Submitted 9 months ago

    I need assistance with the key down event functionality, as I want to implement this for keyboard users.

    Any feedback is much appreciated !

    CODE UP ☕🧑‍💻😊 !

    1 comment
View more solutions

Latest comments

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

    This is where I learned how to use SCSS for styling. I must say that I enjoyed the learning process. It made my work more organised compared to the way it used to be. Making the website responsive was easy due to the feature that Sass has to write functions and declare variables that can be used everywhere in the code. I am not yet totally good with this, but I know I will with time.

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

    Making the website responsive was not easy, but I did it.

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

    Learning more and getting comfortable with SCSS

    Loopstudios landing page

    #sass/scss
    2
    P
    Ralph Virtucio•710
    @ralphvirtucio

    Yeah 🥲🙂 making this responsive is challenging but great job !

    I checked your code and website, I observe things that can be improve, If you like you can follow this key points below.

    • Mobile Nav, I check the mobile nav and it's occupying the whole page, I think one of the reason is the position is set to fix, Here is an amazing article that I also use to for developing the mobile nav.

    • Cards within the Our Creation, If you like more challenge you can try implementing the Active State of the cards you can visit on how I implement it here is the my repository for this challenge. I also tailor the cards from this article to ensure accessible card components.

    Keep coding and great job on this challenge !

    Marked as helpful
  • P
    Ralph Virtucio•710
    @ralphvirtucio

    Hi Ayah2022,

    Great job on completing this challenge, One thing I recommend is to provide a README.md file to every challenge you completed. This will help you and develop habit of writing README file on every challenge you completed. README.md is very beneficial for other developers that want to take a look at the overview of your application or repository.

    CODE UP 🧑‍💻☕🙌😊

  • P
    ikitamalarose•420
    @ikitamalarose
    What are you most proud of, and what would you do differently next time?

    First I'm proud to be able to realise this challenge then, to have learned to do the screen reader tests and keyboard accessibility finally, soon in my projects I will write my code respecting the semantic HTML.

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

    I didn't have any challenges. F I N A L L Y 😅

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

    All remarks are welcome

    FAQ accordion

    1
    P
    Ralph Virtucio•710
    @ralphvirtucio

    Hi @ikitamalarose,

    Great job on completing this challenge! Your solution looks solid. I have one suggestion: consider replacing the width on your #container selector with min-width to prevent elements from becoming too narrow on smaller screens, or use max-width to keep elements from expanding too much on larger screens.

    Keep up the great work!

    CODE UP ☕🧑‍💻🙌!

    Marked as helpful
  • P
    Tuna Erten•430
    @tunaerten
    What are you most proud of, and what would you do differently next time?

    This turned out to be a relatively easy project. I had previously worked on the Quiz-App, which was quite challenging. To be honest, I didn’t encounter any difficulties with this project. It was a fun and time-efficient project. In addition to the original, I added an error statement.

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

    I am open to any suggestions!

    Interactive-Rating-Component with error-statement

    1
    P
    Ralph Virtucio•710
    @ralphvirtucio

    Hi @Tuna Erten,

    Great job on doing this challenge !

  • P
    ikitamalarose•420
    @ikitamalarose
    What are you most proud of, and what would you do differently next time?

    First of all i'm proud that, I was able to finish this project. Then to have been able to manage the generation of new question with each click on the Next Question button. Finally, from now I will proceed by section and spend more of my time studying the model and how to proceed to code the elements.

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

    It was hard to injecting each question into the content and recovering the score, but I took a step back to carefully study the figma model then it was easier once I made a good cutting. The deployement on Vercel was an ordeal I had to spend more time there to finally migrate to Netlify. Because by documenting me on the net there was several comments like 'Vercel does not take into account the JavaScript module model etc..'

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

    I'm learning so any help or comment is welcome :)

    Frontend Quiz App

    2
    P
    Ralph Virtucio•710
    @ralphvirtucio

    Hi @ikitamalarose,

    Great job on completing this challenge! The only suggestion I have is that the tablet view doesn’t quite match the design; approaching it with a mobile-first mindset might make it easier to achieve the desired layout.

    Overall, you did an excellent job on this challenge!

    Keep it up!

    CODE UP ☕🧑‍💻😊!

  • P
    Hexerse•460
    @Hexerse
    What are you most proud of, and what would you do differently next time?

    Being able to create the generator. next time I want to jot down how the algorithm works more accurately before creating it.

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

    I did not understand the steps to create a generator. So I found one online and studied it. I understand how it works through active recall .

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

    If my code is not efficient/If I forgot to do some parts up. Put it down ! I wish to learn.

    password-generator-app

    1
    P
    Ralph Virtucio•710
    @ralphvirtucio

    Hi Hexerse

    Great job on doing this challenge !

    These are my suggestion that you can reviewed and apply to the codebase:

    - Semantic HTML Suggestions -

    • If you want more semantic approach, you can change the <div class="generator__options"> to a <fieldset> element as this will provide a semantic HTML because the checkboxes are group as a inclusion of the password generator, you can hide the <legend> element by using a sr-only styles.

    • A semantic approach for your <h3 id="passwordLength"> is to update it to an <output> element

    - Solution to Design comparison -

    • I notice that your solution screenshot is more smaller than the design, To improve it you can replace the min-width property in your form element with a max-width and set a width base on your desire value, I also think it would make your app more responsive if you implement max-width instead of min-width.

    • If you want to style your input range, Someone at the discord community give me this article on how to create a custom input range. Feel free to check it out ☕

    -----------------------------------

    • I also notice that the ids of lowercase and uppercase checkboxes are different to the for attributes of the label which if you click the label of the lowercase and uppercase the checkboxes are not getting click.

    • I also found that you experience the overlapping of the classes in the strength indicator as I also experience it, What I did a save the previous class to a variable and then every time my ```generateFunction`` is called it iterate through all bars and remove the previous class from strength bar. I also create an dataset attribute for it to track the strength of my password.

    If you want more challenges 😅🧑‍💻 try implementing an entropy function and try Fisher Yates Method to shuffle the password to generate a more unpredictable password.

    I would also suggest to check your README, As this file is important so other developers that will check your repository will get the primary information of your project or codebase. It is a great practice to check and write a README.md file. If you want to know the benefits of it check out this article

    Overall you did great in completing this challenge

    Here have some virtual donuts🍩 and coffee ☕ while going through my feedback :)

    CODE UP 🧑‍💻🧑‍💻😊

    Marked as helpful
View more comments