Looking to hire developers?
@LukaKobaidze
@Patvoostveen
Submitted
I don't know how to do the lines around the " effectively, I'd like to know how?
The dice didn't center properly, I used some weird % to somehow center it, how can I get the same results better?
The fetch() Javascript bit, it works, yes. But is there a way to simplify this piece of code?
@LukaKobaidze
Posted
To center dice properly, you can use left and transform properties together:
.dice {
left: 50%;
transform: translateX(-50%);
}
@Dev-Tron
Submitted
If you have any questions or concerns please ask away.
@LukaKobaidze
Posted
Hello!
When i open the website, images are not loading, and when navigating through pages i get 404 error. This happens because src and href paths are not correct. To fix this, for example to get logo icon, instead of /images/logo.svg, write ./images/logo.svg (add . in the beginning) or you can just remove ./ and write images/logo.svg, because ./ will be added if we don't add it ourselves. If you don't know what is ./, it's the path in the same folder, Also check out this source
Marked as helpful
@sheronimo
Submitted
Hi everyone! Any feedback is appreciated, please let me know there's anything I overlooked.
I also have a question about my overlay:
The height of my hover overlay is longer than the NFT image. In dev tools, I determined it to be 5px longer. I assumed this might be because there's no fixed height specified on the containing div, but I'm not sure what's causing it to be longer. Please give me some advice on if there's a way to ensure that they're the exact same size.
@LukaKobaidze
Posted
Hello!
To remove extra space to the container, you can add display: block to the image with the class of nft-img
If you want to know why this happens and why we add display: block to the image, check out this
Marked as helpful
@DrunkenNeoguri
Submitted
(I wrote this using Google Translate. Please forgive the grammar.)
Hello!
This is the 11th challenge.
From this challenge, you will finally be able to use JavaScript! I started learning the basics of JavaScript a few days ago, so there are many things I don't know completely.
So this challenge was too difficult for me as I am new to JS.
Here are the things that were difficult while working this time:
Is there any way to make the error message appear only once? And if I input a normal message, is there a way to clear the error message?
Is there any way to solve this?
It's my first challenge, but I'm glad I learned a little bit about how to read JS code through this work! There were many shortcomings, but I will continue to study hard!
Thank you for watching! > ▽<)/ If you have any other advice, please feel free to tell me!
@LukaKobaidze
Posted
Hello!
In your outputmessage(self) function
var message;
message = document.createTextNode(self);
errormsg.appendChild(message);
you can remove these lines and instead of that, add errormsg.textContent = self. This will change the text of that element.
The reason why border color is not applying is because in this line var address = document.querySelector('[name="email"]').value you are getting value of the element instead of the actual element (remove .value), and then add address.style.borderColor = 'any color'
Marked as helpful
@spencerrunde
Submitted
Took a bit, but I learned a lot from this one! Built the bonus version of this challenge because it doesn't require much additional logic/markup/styling. Definitely going to make use of certain components again (like the modal) in future projects. Also went much more in depth with SCSS and its file structure here.
@LukaKobaidze
Posted
Good job, looks great!
I would suggest adding modal close when backdrop is clicked other than close button
Marked as helpful
@zytuu
Submitted
I'd like to know how I could make the toggle switch for my annual / monthly content smooth when i switch it back to annually from monthly. It seems to transition correctly when going from annually to monthly, but doesn't work in the reverse.
@LukaKobaidze
Posted
Hi!
The reason why transition doesn't work is because in .toggle::before class you have transition: 0.2 ease instead of transition: 0.2s ease (s is missing)
@Badhrikr
Submitted
Hello guys, I'm currently learning javascript.
Any kind of feedbacks are Welcome😀.
Can someone tell me, how can i change my "img src value" at different media queries?😕
@LukaKobaidze
Posted
Hello!
To change image on different media queries, you can use picture tag.
<picture>
<source srcset="image-mobile.png" media="(max-width: 375px)">
<img src="image-desktop.png" alt="Image" >
</picture>
As you can see in the code, i wrote source and img tags inside picture. media attribute is just like how you write CSS media queries. If viewport width is less than or equal 375px, then image-mobile.png is going to apply, and if not, then image-desktop.png applies. You can also write more than one source with different media queries.
Check out this source, It's about responsive images.
Hope this is helpful xD
Marked as helpful
@Janselin
Submitted
Hello everyone and thanks for checking on this solution. I had fun making this one, where I put on practise my flexbox skills.
🟣I would like some feedback about it and how i can improve flexbox. I know there are many other properties , I feel im using only the basic ones.
🟣I need help with the background image, I can't make it on the top and bottom properly. I always stuggle with bg sizes. Any tips?
thanks!
@LukaKobaidze
Posted
Hello!
For background images, you can use position: absolute and top: 0, right: 0, bottom: 0, left: 0 and z-index properties.
For background image on the top left corner, add following properties:
position: absolute;
top: 0;
left: 0;
z-index: -1;
And for background image on the bottom right corner:
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
If you aren't familiar with positions and top, right, bottom, left properties, check out this source. There are also lot of other sources about positions on the internet that you can search for.
I used z-index: -1, because without it, images would be on top of the content, and z-index: -1 puts images behind it.
Hope this helps xD
Marked as helpful
@daKeshra7
Submitted
I couldn't get the arrow to rotate. Please I'll need help on that. Further insights on javascript also needed.
Thank you.
@LukaKobaidze
Posted
Hello!
To rotate arrow, you need to use following CSS property: transform: rotate().
I see that you toggle active class once the element is clicked. Here's the code on how to implement arrow rotate:
.faq-cont.active > .faq-ques > img {
transform: rotate(180deg);
}
If you aren't familiar with > selector, basically it selects direct child of the element (source). As you can see, class faq-ques is direct child of faq-cont, and img is direct child of faq-ques. If you want to be more specific, you can add class to img and select it with the class.
Marked as helpful
@Rtf747
Submitted
Hi! I think I did some spaghetti code in the Styled component Container. If anyone can give me any suggestions it would be a great help. Thanks!
(I know that the responsive is not the best, I will try to improve it in the next challenge)
@LukaKobaidze
Posted
Hello! on the <a>Learn More</a> element, instead of using some specific value margin-top: 12rem, you can use margin-top: auto, this will push the element to the bottom of the container, from there use margin-bottom: some value.
This will prevent element from overflowing.
Marked as helpful
@BramMortier
Submitted
A very interesting project to say the least. I struggled a lot with getting the multiple themes to work. Although I still think my solution i horrible at best I did learn a lot tho so... progress has been made again. Hopefully somebody can tell me a better way to handle the themes.
EDIT: I looked for a better solution to the theme problem and updated my solution. Dit also do a litle extra things that are not correct according to the design XD
@LukaKobaidze
Posted
Great solution, Good job on the layout!
There are different ways of changing the theme, But in my opinion the best and the easiest way of changing theme is using CSS Custom properties (CSS Variables) and this is what i would recommend using.
Check out the one that says 'Using Custom Properties' here
Marked as helpful
