Looking to hire developers?
@adram3l3ch
@catherineisonline
Submitted
Hello, Frontend Mentor community! This is my solution to the REST Countries API with a color theme switcher.
I appreciate all the feedback you left that helped me to improve this project. I fixed the issues I had previously and added new features per your recommendation.
I have done this project a while ago however if you are here and have any feedback, tips, or ideas to share, I will be more than glad to hear them out!
Thanks
@adram3l3ch
Posted
Hi Catherine you did a great job :) . You can sort out the border issue by making the border as a component itself and fetch about that country on that component. Also the problem of github pages with SPAs can be solved by using something like
(function(l) {
if (l.search[1] === '/' ) {
var decoded = l.search.slice(1).split('&').map(function(s) {
return s.replace(/~and~/g, '&')
}).join('?');
window.history.replaceState(null, null,
l.pathname.slice(0, -1) + decoded + l.hash
);
}
}(window.location))
You can refer about the same here
Marked as helpful
@thomps0189
Submitted
How did you get the text to span the width of the div? When I added spacing or increased font it looked odd.
@adram3l3ch
Posted
Hi Angela congrats on finishing the challenge. It seems like the image is missing. When I gone through your code I found the href you are using is /images/image-qr-code.png. The / means the root. When you host your site the root wont be your root folder. So you have to simply omit the / or simply use ./ instead of / which denotes the current folder.
images/image-qr-code.png
or
./images/image-qr-code.png
@boedegoat
Submitted
I will be happy to hear any feedback or suggestions 😀
@adram3l3ch
Posted
Hi Bhremada Fevreano congratulations on finishing the challenge. Everything working just fine on all screen sizes. But It seems like from initial load infinite requests are sent to the server to fetch comments. Take a look at the problem. Also check the accessibility issues too.
This thing not allowing me to submit the feedback since it is short so this is just blabbering dont care about this line
Marked as helpful
@catherineisonline
Submitted
Hello, Frontend Mentor community! This is my solution to the FAQ Accordion Card.
I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.
Thank you
@adram3l3ch
Posted
HI Catherine congratulations for finishing the challenge, you did a great job. I recommend the details tag for creating these kind of accordions. It is easier with the HTML elements "details" and "summary". In this way you can quickly create a perfomant and accessible accordion. CSS is only needed to create the accordion elements.
@sanketcharanpahadi
Submitted
Hello everyone, Specifically I have a doubt about how the height of <main> element is 0 even I have not used float. I have to manually set the height of main element as 98%. Can anyone explain what is happening ? Any feedback you wish to give are welcomed.
@adram3l3ch
Posted
It is caused by you've set position absolute to its child. Position absolute will take the element out of the flow. Since that div is the only child of main if it is gone main will feel empty :(
Marked as helpful
@kelseychristensen
Submitted
By far the most challenging part of this challenge was aligning the ethereum icon, price, clock icon, and days and ultimately I relied on a clunky solution to do it because I just couldn't fuss with it anymore. I'm also not sure if the on-hover effects should be reversed with the default appearance. I would think you would get to preview the NFT image on hover but otherwise it would be hidden by the overlay -- however, it really appears from the images supplied in this project that the overlay and eye icon appears on a hover (or possibly a click). Regardless, this was a fun challenge and I am pretty happy with the results.
@adram3l3ch
Posted
Congratulations on finishing the challenge. I don't recommend using table in this scenario, instead you could use flex for this kind of layouts
Marked as helpful
@Spooks404
Submitted
Feedback appreciated. Also, on my end, the font-family changes correctly to fit the given design but it seems that when other people view it the font stays default. What is the best way to fix this?
@adram3l3ch
Posted
It is not recommended to use the font like this. It will only work for users who have the font installed on their machine. You can solve this by using Google fonts, fontface or using any common fonts like Arial.
Marked as helpful
@Imperiator
Submitted
How i should animate the click with js ?
@adram3l3ch
Posted
You can create class with animation in css and toggle the class on click
Marked as helpful
@kreyson999
Submitted
What should i do to make this code "cleaner"? Is React Context good solution for this app? What should i do to save this data to localStorage immediately, because i'm saving this data after setState and we know that setState is asynchronous so saved data isn't always current?
@adram3l3ch
Posted
Hey yoy did great 👍. You can solve the local storage problem using useEffect.
useEffect(()=>
localStorage.setItem
("comments",JSON.stringify(state))
,state)
Marked as helpful
@jhonmicc
Submitted
I use css unit(ex vh, rem) in my code, but I dont understand it perfectly. I want to ask you about it and the implementation, thank you 😀
@adram3l3ch
Posted
Hi Jhon, congrats for finishing this one ✨.
Lets talk about relative units.
vh - view height - It is the height of your view port means screen. 100vh is equal to 100% of screen height similarly 50vh is 50% screen height.
vw - view width - It is same as vh but instead of height here width is referred.
rem - rem means relative to the root font size. By default 1rem is 16px. But if you increase the font size in root rem also incrases.
em - similar to rem, but instead of relative to root in em it is relative to the nearest parent with fixed font size. Let's look at an example
<div class="grand-parent">
<div class="parent">
<div class=child />
</div>
</div>
:root{
font-size:14px; //16px by default
}
.grand-parent{
font-size:1rem; //1 * root font size = 1 * 14px = 14px
font-size:2rem; // 2 * 14px = 28px
font-size:1em; // first check whether there is a parent with fixed font size. no such parent
except root , so 1em = 1 * 14px
}
.parent{
font-size:2rem; // 28px
}
.child{
font-size:2em; // parent has a font size of 28px so 2em = 2 * 28px = 56px
font-size:2rem //2 * 14px = 28px;
Hope you understood the concept
Marked as helpful
@vinaximus
Submitted
Please let me know how can I show the icon on Hover . Rest I managed. Thanks in advanced
@adram3l3ch
Posted
Hi you've got a pull request. Take a look at it :)
@abhik-b
Submitted
👋 Hello Frontend Mentors , Today is Maa Saraswati Puja , a festival to worship our goddess of knowledge & education . So this is my small tribute to the knowledge she blessed me with.
I have tried staggering animation using setTimeout but please let me know if there is more efficient way to do so. Any feedback will be highly appreciated 🤞
@adram3l3ch
Posted
Hi Abhic, You did great ✨. I recommend gsap for animations
Marked as helpful
@ng5jr
Submitted
The site is fully functional and responsive in both desktop and mobile. Some classes names and functions could be changed and explanations of why and how should be added. I am aware I have repetead some properties and function and the syntax could be shortened by grouping them.
The to-do-list works as requested by the challenge; however, everytime the page refreshes or the browser is closed, all the information gets deleted. For that I would like to ask how could I set the information from the user to be stored in either local or session storage, so it could be used later on by the user.
I haven´t find a way to perform that, and would definetely use some help.
Thank you!
@adram3l3ch
Posted
You can store the todos as an object.and save that object in local storage.
To get from LS localstorage.getItem(name)
To set LS localstorage.setItem(name,value)
Nb: Local storage can only store strings so you have to stringify the object before setting and parse it before getting.
@Ofcl-Javed
Submitted
Want to know how to apply localStorage functionality to the code
@adram3l3ch
Posted
Hey congratulations for finishing this challenge, You can store the comments as an object and store the object in local storage. Then load it on initial load. Whenever you update coments update local storage too
Marked as helpful
@Naveen39O
Submitted
Hi, I have completed the challenge and made the solution as close as possible to the design. But, I am not able to find an easy way to align the text "per month" vertically center w.r.t to 29 dollars. Any suggestions?
@adram3l3ch
Posted
You can align the span cost-month by wrapping the cost and cost-month in a div apply a display of flex on it.
<div class="price-flexbox">
<span class="cost">$29</span>
<span class="cost-month">per month</span>
</div>
.price-flexbox{
display:flex;
align-items:center;
gap:1rem;
}
Marked as helpful
@leahthompson01
Submitted
I have a slight gap between the names and where it says verified graduate. I tried a couple of different things, like flex-box, putting them in a div, etc. to fix it but this was as close as I could get. Please let me know if you think of anything that might help!
@adram3l3ch
Posted
The gap is caused by the margin of h2 tag. you have to set that to 0 to get rid of the gap
Marked as helpful
@Kemystra
Submitted
Most of the time I eyeballed the measurements, often by switching tabs on the browser. Its pretty hard to get an accurate result this way. I have also seen solutions that have very specific value on properties like padding, margins, etc. They often got super accurate result.
Is it okay if I got the sizing a bit off?
If not, how does people achieve almost pixel perfect spacing, sizes, adjustments, etc?
@adram3l3ch
Posted
Hi, Congratulations for finishing the challenge. It is completely okay if the sizing is bit off. If you want a pixel perfect solution either you have to purchase pro, on which you will get the design files which has the accurate layout size, or you have to guess the numbers until it fit perfectly.
Marked as helpful
@PhoenixDev22
Submitted
Hi everyone, had a challenging time with this one from start to finish.
My struggles, and bugs:
I don’t know for sure if the images fit the screen . Please let me know if you find any overflow or other quirks with the images.
I'm still learning about accessibility .
In javascript , I used more basics ways.
Please share your thoughts! Had a great time working on the CSS, the image grid was a new challenge for me. There’s still some more to do like the readme, cleaning up repeating code, and html warnings.
I'd appreciate any comments for improvements or anything I've missed. Thank you!
@adram3l3ch
Posted
HI, this one looks great.
toggle menu issue
element.style is used to set or get inline style. you cant get external css styles with element.style.
svg
You cant directly set fill on svg , you have to select the path inside svg and set fill on that
svg path { fill : #a5d5ef}
Marked as helpful
@adram3l3ch
Submitted
It seemed like a very easy one until I trying to set the background. Even though I set position:absolute to those images it caused overflow. I dont know what the hell was goin on. I had never experienced this situation in my life. I set overflow:hidden to the global element and it fixed my problem half. I mean it fixed the problem but if I open the developer tool it still overflowing. Can anybody knows what the heck is going on :(
@adram3l3ch
Posted
The issue in responsiveness wasn't due to meta but because of the overflow caused by the bg images. Now I fixed it by as you suggested using background-image. I took a look at your solution but it seemed overflowing in smaller devices same as mine :(
@Yunie08
Submitted
Hi everyone ! Javascript is still very new to me so I'm sure my code is not optimized.
Do you know any "easy" way to add two event listeners to the same elements and with the same handler without repeating the code twice (example in my script.js : lines 99 to 147) ?
Any comment or advice is welcome :) Thanks and happy coding!
@adram3l3ch
Posted
function updateDOM (){
let billValue = billInput.value;
let tipValue = document.querySelector('input[name="tip"]:checked').value;
let numberOfPeople = peopleInput.value;
let resultTip = calculateTip(billValue, tipValue, numberOfPeople);
let resultTotal = calculateTotal(billValue, tipValue, numberOfPeople);
resultTipElt.innerText = `${resultTip}`;
resultTotalElt.innerText = `${resultTotal}`;
}
function inputHandler (e){
e.stopPropagation;
if (resetButton.getAttribute('disabled') != null) {
resetButton.removeAttribute('disabled');
}
let inputIsEmpty = inputsEmpty();
if ((inputIsEmpty == true)) {
console.log('input empty');
resetButton.setAttribute('disabled',"");
}
let inputIsValid = checkInputs();
if (inputIsValid == true) {
updateDOM()
}
}
function clickHandler (e){
e.stopPropagation;
let inputIsValid = checkInputs();
if (inputIsValid == true) {
updateDOM()
}
}
document
.querySelectorAll("input")
.forEach(element => {
element.addEventListener('input',inputHandler )
element.addEventListener('click',clickHandler )
});
You can convert the repeating code to functions
Marked as helpful