Jesse
@jesse10930All comments
- @pranav1597@jesse10930
Great project, Pranav! Another option to fixing the issue you raised is to create a class to toggle on the hamburger image, the same way you do for the '.active' class. Something like:
.hide { display: none; }
So when the hamburger is clicked, its image will not be displayed. When the close is clicked, the hamburger will come back into view. Hope this helps!
Marked as helpful - @kofinartey@jesse10930
Hey Kofi! Nice job so far with this project!
The annoying upward movement on the images when you scroll is caused by the transition on the 'indicator_circle' class: transition: all 0.3s ease-in-out; Because the transition is taking place over 0.3 seconds, the bottom images slide up as the highlight eases out, and then slide back down as the highlight eases in. If you want to keep the transition, you could make the '.slide_indicators' div's height 15px greater, to take the height of the highlighted circle into account, and then add -15px margin-bottom to the same div, so the images below are still lined up correctly. There are definitely other ways to solve this issue, but this should work.
Keep up the good work!
Marked as helpful - @abhisheksinghwork7@jesse10930
Hey Abhishek! Great job on the project, looking good so far!
As to your third question, adding the styling 'align-self: flex-start;' to the 'nav-login' class should fix that problem. Right now, the div is centered because of the styling 'align-items: center;' on the 'nav-menu' class. When the dropdown on the left opens, the parent div becomes larger. Then the 'nav-login' div moves to the center of that larger div. If you add the align-self attribute, the div will be unaffected by the size of its parent div.
Hope this helps!
Marked as helpful - @Urmi-Jana@jesse10930
Hi Urmi Jana, your project is looking good so far! For the hover-state of the buttons, you just have to add 'button:hover' to your stylesheet, and then add any changes that you want to happen. For example, if you want to change the arrow to a pointer, you could add the following:
button:hover { cursor: pointer }
As for responsive design, I'd recommend not using fixed pixels when styling the different elements because as the screen size changes, the element sizes will remain the fixed-pixel size that you defined in your original styling. Using unites like rems, ems, or percentages will respond when the screen size changes because these units are dependent upon their parent divs or the root element. So as the screen size changes, these elements will change size as well.
Other tools you could look into for mobile CSS design are Flexbox, Grid, and mediaqueries.
Hope this is helpful! Keep up the good work!
- @BeshoyS@jesse10930
Hey BeshoyS, your project is looking good!
For your first question, if you are just wanting to change the message text, you can add the 'oninvalid' attribute to the input element. It has a bit of a wonky format, which you can see below. You can then set the text to whatever message you would like to send the user.
<input type="email" name="email" value="" placeholder="email@example.com" pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" required="" oninvalid="this.setCustomValidity('Please enter a valid email address')" >
If you are looking to change the popup box styling, I'm not really sure how to go about that.
Hope this is helpful! Great project!
- @kristinalesnjakovic@jesse10930
Hi Kristina, your project looks great so far!
As to your issue with the event listener, the problem is that the target differs depending on where the mouse clicks inside the button, so the parent to which you are adding 'active' also differs. For example, if you hover on the very edge of the button and click, the 'body' element toggles the class of 'active'. If you hover on the svg image inside the button and click, the 'container-card' element toggles the class of 'active'. And if you hover inside the button but not on the svg and click, the 'article-container' element toggles the class of 'active'. So the reason it seems like it stops working is because if you click on the button to add 'active' but then move the mouse and click on a different spot in the button, the function is adding 'active' again, but to one of the other elements. And then to get rid of the active state, you'd have to click on each of those positions to remove 'active' from each of the elements to which 'active' was added.
I think your best bet would be to use querySelector to target a specific element to which you want to toggle the 'active' class inside your function, just like you did in the 'button' variable. This way the function always changes the same element rather than being dependent on 'e.target'.
button.addEventListener("click", function(e) { document.querySelector(".container-card").classList.toggle("active"); });
Hope this helps! Happy coding :)
- @nikkuv@jesse10930
Hey Saumya, your project is looking good so far! In order to get the full name of the country rather than just the 3-letter country code, you have to find the country name that corresponds to the 3-letter country code from the API.
If I'm following your code correctly, you first store all the data for all the countries in the 'country' state when the home page loads. If you pass that state as a prop down to the CardDetails component, you can loop through this data to find the 'alpha3code' that matches the 3-letter country code for your border countries, and then return the 'name' from that country instead of the 3-letter code.
If you don't want to deal with props and React Router, you could fetch and store the data from 'https://restcountries.eu/rest/v2/all' each time the CardDetails component loads, but this would slow your app down quite a bit.
Hope this helps! Happy Coding!
- @krisp-dev@jesse10930
Hi Kris, great job on this project! It looks great! I can't answer your question about SVGs, as I'm not too familiar with how to use them.
To your second question about the smaller screen sizes, the HTML for the SVG with a class of 'container__col1--img' has a 'height="506"' attribute, which is preventing the height of that div to be responsive. So as the screen width gets smaller, the image is responding but the container's height is staying constant, which gives the appearance of those margins. If you add:
svg.container__col1--img { height: auto; }
to the media query for smaller screens, I think that will fix the issue.
To your last question, if we set a max-width to 1440px, it could have adverse effects for anyone using your app on a large monitor. I think they give us that info just so we know the relative size of the screenshots we are looking at. But again, not something I'm sure of.
Anyway, hope this is helpful! Happy coding!
- @Danielejekwu@jesse10930
Hey Daniel, your project looks great! To change the color of the button text, you just have to add a 'color' attribute to a class attached to the button. It looks like you made a 'button1' class for all 3 buttons, but I don't see it ever referenced. If you change the classes for the second and third buttons to 'button2' and 'button3', then add:
.button1 { color: orange; } .button2 { color: blue; } .button3 { color: green; }
to your CSS file (with the colors you want), your page should reflect the desired changes.
- @namankandol@jesse10930
Hey Naman! Your project looks great! To solve your centering issue, one thing you could try using flexbox on the '.container' class.
display: flex; align-items: center; justify-content: center;
'align-items' should center the grid vertically and 'justify-content' should center the grid horizontally. You would probably have to remove any margin/padding that you have on the '.container' and '.mainbox' classes and perhaps set the 'height' or 'min-height' of the '.container' class to '100vh' to ensure it centers the grid relative to the height of the screen rather than the height of its parent element.
Hope this helps!