Skip to content
OverviewSolutions
9
Comments
47
Eugenia
@JaneMoroz

All comments

  • Zet•800
    @zetmosoma10Submitted over 1 year ago

    I found it difficult to build the circle number icon and place it where it should be, any feedback will be appriciated, i learned how to shift grid items around depending on screen sizes

    Meet landing page

    1
    Eugenia•950
    @JaneMorozPosted over 1 year ago

    Hey Zet! Wow, your solution is awesome ❤️

    Some things I've noticed:

    • I think I would just add a bit of top padding to the header or nav
    • And often this kinda of logos are supposed to be links (which lead to Home page).

    About the circle number icon:

    • I think the way I would do it:
    <div class="section-number">01</div>

    // The circle with the number inside
.section-number {
  position: relative;
  height: 40px;
  width: 40px;
  display: flex;
  align-items:center;
  justify-content: center;
  border: 1px solid grey;
  border-radius: 50%;
}

// The line
.section-number::before {
  position: absolute;
  display: block;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  content: " ";
  height: 70px;
  width: 1px;
  background-color: grey;
}

    This is not styled exactly, just trying to give some general idea.

    Keep it up! And good luck 🍀

    Marked as helpful
    1
  • EmrePW•150
    @EmrePWSubmitted over 1 year ago

    Alright. Getting data from that JSON file sure was a thrilling experience. I am 100% sure that there is a better way to do it. Lastly if anyone knows react, angular, vue... how long would it take it to code its Javascript with them? And as always all feedback is appreciated. Have a great day!

    Time Tracking Dashboard vanilla JS and vanilla CSS

    1
    Eugenia•950
    @JaneMorozPosted over 1 year ago

    Hey! Your solution is great 😊

    Frameworks can make your life easier, especially when the project is big. I used to code big projects with Vanilla JS and in the end I kinda had to create some sort of framework myself, without it it's hard to follow DRY principle.

    Some people don't like frameworks for various of reasons. One reason is that they're changing often and you need go though docs again or some dependencies stops working together etc.

    Marked as helpful
    0
  • copyninja07•40
    @copyninja07Submitted over 1 year ago

    Can you assist me in centring a view icon? I seem to be having some difficulty. How can I remove accessibility warnings?

    NFT preview card component

    1
    Eugenia•950
    @JaneMorozPosted over 1 year ago

    Hey! Very nice solution 🎉

    • I guess you got some 'landmark something warnings'. I get them when I forget to wrap the main content of the page into the main tag. So I suggest you to use main tag instead of div with class="main"
    • Instead of h3 I suggest to use h1 and then style it.
    • Maybe it's better to wrap Jules Wyvern into the a instead of p since it seems to be a link and then style it because link tag usually has default underlying etc.

    Keep it up! And good luck 🍀

    1
  • BBualdo•540
    @BBualdoSubmitted over 1 year ago

    FIXED I just added window.location.reload() to Dismiss Message Button. But feel free to tell me how to do it better way :)

    Hi, The design for mobile and desktop is finished (I know its messy but I made it quickly to submit the solution asap to get your help).

    I've tried different methods and 3 of them has one of these issues:

    1. The code works until I click "Dismiss Message". Then it behaves like script doesn't exist. (Now)
    2. Dismiss button doesn't work at all with .addEventListener.
    3. Code doesn't work at all.

    I'm not sure about .innerHTML replacement. It looks like the code doesn't find 'js-dismiss-button class for querySelector. I don't know. Please help.

    Thank you :)

    I don't understand JS behaviour, but FIXED

    1
    Eugenia•950
    @JaneMorozPosted over 1 year ago

    Hello! Cool solution to the challenge 👍

    I've noticed that the submit button works the first time but not the second. So it seems like the problem is that after we click 'Dismiss message' and go back to the initial form, event listeners are not attached. I think this is because the form we're going back to is not the initial one but just newly created (with function pageSwapPrevious()).

    • So maybe one solution is to make sure that newsletter is not removed when success shows up. To do so you need to give success element position: absolute and switch between display:none and display: something else instead of changing document.body.innerHTML .
    • Another solution is to move subscribeButton.addEventListener logic into onSubmit() function for example, you will also need to add inputElement and invalidMessage:
    function onSubmit() {
  const inputElement = document.querySelector('.js-input');
  const invalidMessage = document.querySelector('.invalid-email');

  const regx = /^([a-zA-Z0-9\._]+)@([a-zA-Z0-9])+.([a-z]+)(.[a-z]+)?$/
  
  if (inputElement.value.match(regx)) {
    pageSwapNext();
    return;
  } else {
    invalidMessage.innerHTML = 'Valid email required'
  } 
}

    And then just add it to the button's onclick: <button onclick="onSubmit()" class="subscribe js-subscribe-button">Subscribe to monthly newsletter</button>

    Keep it up! And good luck 🍀

    1
  • Eugenia•950
    @JaneMorozPosted over 1 year ago

    Hey! Your solution is great 🤩

    The only things I've noticed are some accessibility issues:

    • You can wrap the main content (which is QR Code in this case) into the main tag or replace existing div tag with main.
    • Also usually the page should have h1 tag. You have h2, I guess you decided to use it because it has desirable font-size but you can style h1.

    Overall everything is great and I like that it is responsive ☺️

    Keep it up! And good luck 🍀

    Marked as helpful
    1
  • Eugenia•950
    @JaneMorozPosted over 1 year ago

    Hello Richard! I love your solution to this challenge ❤️

    I think I found a solution to the replies width bug. If you remove the default replies and create new reply you'll see that they are not filling the whole horizontal space.

    The reason replies are kinda taking all horizontal space in the second comment (with default replies) is because default replies kinda stretch Replies_repliesContainer so the new replies (children) just fill the container's width.

    So in order to solve this problem you need to make Replies_repliesContainer take the whole width of it's parent. For example you can add width: 100% to Replies_repliesContainer and CommentAndReply_container. Or you can add flex:1 to Replies_repliesContainer, this way Replies_repliesContainer will just take the rest of flex-container space.

    Keep it up! And good luck 🍀

    P.S. You can also use gap property to add the space between the vertical line and the reply.

    0
  • Comradeintense•110
    @comradeintenseSubmitted over 1 year ago

    Feedback welcomed ! Please look at my code and tell me what is wrong/what could be done better.

    This absolutely killed me, spent a lot of time fiddling with position absolute to position the images. It works kinda, but I'm not 100% happy with the solution, but this is the best i could come up with.

    I forgot adding the shadows for the cards.

    Made using TailwindCSS

    1
    Eugenia•950
    @JaneMorozPosted over 1 year ago

    Hey! You solution is great 👍

    I see that the image is overflowing. I looked at your code and I think that adding overflow-x:hidden to the body might fix it.

    Keep it up! And good luck 🍀

    0
  • Eugenia•950
    @JaneMorozPosted over 1 year ago

    Hey! Very nice solution to the challenge 🎉

    The only thing I've noticed is that the image aspect ration is changing when the screen width increases. You can fix it with object-fit: cover;, I use it quite often.

    Keep it up! And good luck 🍀

    0
  • Travis Hackbarth•360
    @TravisH-botSubmitted over 1 year ago

    Had a bit of trouble with keeping the top graphic static in mobile view when expanding each question/answer section. Unfortunately after a good amount of tweaking, I was unable to make it static.

    Any suggestions on a fix are welcome!

    FAQ accordian card component

    1
    Eugenia•950
    @JaneMorozPosted over 1 year ago

    Hey Travis! Your solution is great 👍

    I think that

    .faq-card {
  justify-content: center;
}

    is responsible for all this movement. The .questions height is changing when you expand a question/answer section and since it should be in the centre of flex-container it moves up and down.

    I suggest you to:

    • remove absolute positioning from the .card-title, you can use padding or margin to position it.
    • remove justify-content: center; from .faq-card and use gap to add some distance between .card-title and .questions

    Keep it up! And good luck 🍀

    Marked as helpful
    1
  • Tommy Miguel•300
    @CodingTimmyethSubmitted over 1 year ago

    What I found difficult about this app was figuring out how I am going to implement the different toggle themes. My solution was to create an object with a different key, based on the dotPosition, and changed the color accordingly.

    Areas in my code are how can I refactor it to be clean and easily understandable.

    Where in my code can I implement best practices (mainly in the App.jsx and CalcNumbers.jsx)?

    Fully Functional Calculator App with Toggle Themes

    1
    Eugenia•950
    @JaneMorozPosted over 1 year ago

    Hey! Congrats 🎉 This is a great solution to the challenge!

    The only things I've noticed:

    • A little style issue: if the screen's height is less than 730px, background-colour doesn't fill the whole screen
    • Also I can put operators one after another (for example 10+/2) and it gives me an error

    Keep it up! And good luck 🍀

    1
  • Swing95•180
    @Swing95Submitted almost 2 years ago

    Hello,

    could you please help with profile picture positioning and responsivity? I just could not keep it on place when resizing windows.

    Also I could not set the background

    Thank you in advance!

    Profile Card

    1
    Eugenia•950
    @JaneMorozPosted almost 2 years ago

    Hey! Your solution to this challenge is great! 💪

    I looked at you code. So I'd advice to remove position:absolute; from profile-picture and margin-bottom: 4rem; from top-background and then just add transform: translateY(-50%); to profile-picture.

    Keep it up! And good luck 🍀

    Marked as helpful
    1
  • Eugenia•950
    @JaneMorozPosted almost 2 years ago

    Hey! Congrats 🎉 Your solution to this challenge is great! ❤️

    The only things I've noticed:

    • You need to wrap the main content of the page into the <main> tag. It will solve all these landmark issues and improve accessibility.
    • Also when I make it smaller, the card image body is kinda cut in half. You have height: 100vh;so I suggest to it change min-height: 100vh; and maybe add some top and bottom margins to card. This way you card will still be centred for larger screens and not cut from above for smaller screens.

    Keep it up! And good luck 🍀

    Marked as helpful
    0