Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
38
Comments
16

BT738844

@BT453567880 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Job listings with filtering - HTML / CSS / JS


    BT738844•880
    Submitted 25 days ago

    0 comments
  • URL shortening API landing page -HTML / CSS / JS


    BT738844•880
    Submitted about 1 month ago

    0 comments
  • Browser extension manager UI - HTML / CSS / JS


    BT738844•880
    Submitted 3 months ago

    0 comments
  • Conference ticket generator - HTML / CSS / JS


    BT738844•880
    Submitted 4 months ago

    0 comments
  • Manage landing page - HTML / CSS / JS


    BT738844•880
    Submitted 4 months ago

    0 comments
  • E-commerce product page - HTML / CSS / JS


    BT738844•880
    Submitted 6 months ago

    With regards to the Javascript, there appears to be some repetition in some of the functions. Any feedback with regards to improving the Javascript structure, or any any other part, would be welcome


    0 comments
View more solutions

Latest comments

  • Toluwaa•1,040
    @Toluwaa-o
    Submitted over 2 years ago

    Space tourism Multi-page website

    1
    BT738844•880
    @BT453567
    Posted 11 months ago

    Hello there

    The "preview site" link does not appear to be working if you are not aware?

    Regards

  • Yejin Han (한예진)•270
    @Yejin-Han
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    It took too much time because there was something unexpectedly blocked in the small areas. I'm proud to have implemented it similarly.

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

    I've been struggling with the background behind the illustration, so I'm barely close to it, but from now on, I'll have to look at how to mark up and start from the beginning.

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

    Anything you have found. How long will it take to finish normally?

    Bookmark landing page

    1
    BT738844•880
    @BT453567
    Posted 11 months ago

    Hello

    Excellent solution. There are many parts I like about this solution.

    I have identified a small issue where the logo is not visible in the mobile menu.

    If you uncheck the text indent the logo is visible in the menu.

    Rather than re-creating the facebook and twitter logo for the mobile menu, you could manipulate the DOM from Javascript, by using the following commands (This is taken from my solution):

    footerSocialsContainer.remove(); mobileMenuFooterContainer.appendChild(footerSocialsContainer);

    I like how you calculated the distance of the graphic to edge of the screen and also how you implemented the tab buttons.

    I also found it took longer than expected to code.

    Hope that helps

    Marked as helpful
  • svo15•230
    @svo15
    Submitted about 1 year ago

    room-homepage-master

    1
    BT738844•880
    @BT453567
    Posted 12 months ago

    Hello

    Good effort.

    In desktop view, have a look at implementing the solution with grid as currently there are some overlap issues when re-sizing the window:

    https://css-tricks.com/snippets/css/complete-guide-grid/

    On the image container try adding overflow: hidden because at the moment when you press the next image button, you can see the image swipe across other parts of the page.

    With regards to the arrow buttons, try adding cursor: pointer to them and also a hover function to change the background colour.

    In mobile view, Try using position: absolute on the arrow buttons, with the container as position: relative so that you can position the buttons in the bottom right of the image.

    Regards

  • Filip Juszczak•710
    @filipjuszczak
    Submitted about 2 years ago

    Loopstudios landing page

    1
    BT738844•880
    @BT453567
    Posted 12 months ago

    Hello there

    With regards to the VR section ("The leader in interactive VR"), this could be implemented with grid.

    At the moment when you reduce the window size, the VR text box goes out of alignment with the image.

    To implement with grid, if you setup 4 columns, where the image spans columns 1-3 and the text box spans columns 3-4.

    Ensure the text box has a higher z-index, is positioned at the bottom of the column and the background colour is transparent so you can see the image around the text box.

    Grid is the best way to implement "Our Creations" in my opinion. Try adding support for mobile screen with the following in CSS:

    @media only screen and (max-width: 767px) { .. }

    You can also change to the mobile image when the screen reduces by the following in HTML:

    <picture> <source srcset="./assets/images/mobile/image-pocket-borealis.jpg" media="(max-width: 767px)"> <img class="creations-section__grid-image" src="./assets/images/desktop/image-pocket-borealis.jpg" alt=""> </picture>

    Hope that helps

  • Manoj Ramashish Gupta•170
    @Manojgupta103
    Submitted about 1 year ago

    NFT Preview

    1
    BT738844•880
    @BT453567
    Posted about 1 year ago

    Hello there

    Good effort

    Another way to center the solution in the middle of the page would be the following:

    body { display: grid; place-items: center; min-height: 100vh; }

    Also your image appears to have lost its aspect ratio. Try changing the height to auto:

    .pic img { width: 100%; height: auto; border-radius: 10px; }

    Hope that if of some use

    Regards

    Marked as helpful
  • P
    Achara Chisom Solomon•490
    @AcharaChisomSolomon
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am super proud of the whole app, particularly the javaScript section where I had to do some validation to ensure only numbers are accepted and making them not to be more than 2 decimal places as most currencies are

    Heres my js validator

    const inputChecker = el =&gt; {
        el.addEventListener('input', function() {
            const twoDecimalPlaces = /^\d*\.?\d{0,2}$/;
    
            if (!twoDecimalPlaces.test(this.value)) {
                this.value = this.value.length &gt; 1 ? this.value.slice(0, this.value.length - 1) : '';
            }
        });
    }
    
    What challenges did you encounter, and how did you overcome them?

    Working with regex was unfamiliar but google and gpt helped, also making the code DRY was a little bit of a challenge.

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

    None, but any feedback is welcome!!!

    Tip calculator app

    1
    BT738844•880
    @BT453567
    Posted about 1 year ago

    Hello

    I like your solution, it looks fantastic and I like the subtle details such as the no entry cursor when you hover over the de-active reset button.

    Your validator is also very good. I like when you press an invalid key it does not appear in the input.

    However, I have noticed a small issue with this. If a user decides to edit at the front of an input and puts a letter there, then a digit at the back will be removed. For example, if a user inputs 1234 and then changes the 1 for g, then the 4 will be removed and the g will remain.

    I have expanded on your solution to the following where if an input does not pass the test, the input field (this.value) will be updated with the previous input value:

    billAmount.addEventListener('input', function() {

    const twoDecimalPlaces = /^\d*\.?\d{0,2}$/;
    
    if (twoDecimalPlaces.test(this.value)) {
    
        billAmountValue = this.value;
        canTipBeCalculated();
    
    } else {
    
        this.value = billAmountValue;
    }
    

    });

    Regards

    Marked as helpful
View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub