Alexander Melo• 125
@AlexanderMelox
Submitted
The first draft of the site, taking any feedback or tips on my code. I do want to add sound and browser notifications when the timer is done.
Yadhavan Prabhakar
@yadprab
All comments
- Yadhavan Prabhakar• 460
@yadprab
Posted
@Alexander Great work, all the small intractions are cool. my only suggestion is seperate start button from the timer and make it look like a button its difficult to identify as a button.
0 - Shahmir Faisal• 480
@shahmirfaisal
Submitted
I tried my best to meet the requirements. But still, there's a bug. Any feedback will be appreciated!
Yadhavan Prabhakar• 460@yadprab
Posted
@Shahmir Faisal UI is perfect 10/10 then drag and drop is smooth great job
but Ux is not good users always enters the input value by pressing enter key in the keyboard the input tick is animation only remove that functionality just add submit event.
keep coding have a nice day :)
0 - nysezgin• 215
@nysezgin
Submitted
Edit--Solved!: I would like to make my website in a way that when my user exits then re-enters, he still has all the created todo items from previous session on screen.
Yadhavan Prabhakar• 460@yadprab
Posted
@nysezgin great work use localstorage for store input
1 - Ayya• 40
@iraagyanti
Submitted
I'm using html, css and vanilla javascript for this challenge. My current code (of javascript) only allow me to open the faq one at a time, I also want to make the arrow rotate 180deg but It didn't work as I wanted to. I'd be happy if you could give your feedback on my code
Yadhavan Prabhakar• 460@yadprab
Posted
Hi iraagyanti, I have tried this but it has issues https://github.com/yadprab/pro-6/blob/main/js/main.js
Try this method if you find a solution notify me
Keep learning
0 - Florian Andrieux• 225
@Gilliams
Submitted
Any advice or constructive criticism is welcome. Thanks to you
Yadhavan Prabhakar• 460@yadprab
Posted
this is CSS only great job. needs few changes remove 100vh in the body instead add 100% to the HTML element it prevents the jumpy container then in mobile version icon and the question needs some margin and use button for icons so it makes easy to accessible then add width:100% and max-width to the container it also prevents the jumpy container
have a nice day
1 - Mathieu FONTAINE• 265
@mathieufontaine
Submitted
It was a nice challenge to test my JS knowledge! The drag and drop part is still confusing for me though... Any feedback or ideas to improve the app or simplify my code is more than welcome :)
Yadhavan Prabhakar• 460@yadprab
Posted
hey Mathieu. great job. the footer looks cool my suggestion is to prevent users from entering an empty value that would avoid adding empty strings.
keep coding
0 - Ayya• 40
@iraagyanti
Submitted
I'm using html, css and vanilla javascript for this challenge. My current code (of javascript) only allow me to open the faq one at a time, I also want to make the arrow rotate 180deg but It didn't work as I wanted to. I'd be happy if you could give your feedback on my code
Yadhavan Prabhakar• 460@yadprab
Posted
hey it is because of hidePaneltext function
if you want toggle to functioning removes this function. for each time it adds and removes it still pressed and show class added to target element if you want this to be functioning with toggle maintain a state and toggle state add classes according to state. or make if statement based on an index and add classes
and for button use inline SVG and make SVG or img element unclickable by pointer-events none to avoid bubbling. make sure button is the target
great job keep coding
0 - Marcin• 570
@Frontmaniaac
Submitted
How can i remove the whitespace, on the bottom, on the two last divs( monthly subscription and why us) which appears on smaller devices?
Yadhavan Prabhakar• 460@yadprab
Posted
Hey, the problem is because of grid-template-rows: 1fr 1fr 1fr; fr unit always takes up the free space use fr for large contents. Always use auto so it adjusts itself according the content Replace grid-template-rows: 1f auto auto;
Use firefox grid inspector it will help you to find the problem
Great job Keep learning 😊
2 - Dawid• 180
@mitow7821
Submitted
Please test api and rwd on your devices and feel free to review my work.
Yadhavan Prabhakar• 460@yadprab
Posted
The site looks cool. the loader and navigation animation is awesome 😊 great job
0 - em• 70
@emityiska
Submitted
Hi, this is my second project. I am still a newbie so please advise if there is anything I can do better to improve the efficiency and the readability of my coding.
While working on the responsibleness for this project, it felt more like creating 2 different websites for mobile screen size and desktop screen size than because of the length of @media property.
For the bg-container In@media property, I had to set the height to 2000px because when I set the height to 100%, it didn't fill up the whole screen which made the bg-bottom to show up in the middle of the mobile screen.
I don't know why this happened because the bg-container div fills up the whole screen on the desktop screen with 100%height.
Thank you!
Yadhavan Prabhakar• 460@yadprab
Posted
hey, you did a great job design looks perfect.don't set the height until its necessary remove the 2000px try 100vh or set html{ height:100% } and don't use position absolute only use it for overlay stuff div, section tags are block elements it will take up the height according to the content always start with mobile first approach look at the both design analayze structure html according to design
for cards, the grid is the best way to create responsive cards set card width using grid-template-columns(auto-fit, 300px) for card height use grid-auto-rows if the content is enough you don't grid auto rows
and for padding don't use percentages use em or rem
keep learning
2 - Goksel• 210
@gokseloz
Submitted
Hi there! This was my first challenge. I am open to any constructive feedback, especially for how to create local storage Thanks in advance.
Yadhavan Prabhakar• 460@yadprab
Posted
Hey UI looks perfect great job. First thing don't use var let and const are supported by all major browsers
And for input key down is a bit overkill use form and listen to the submit event it's easy to handle
For localstorage create an object then create an empty array check if localstorage.getItem('todo')===null Now push the user input object to array Set it localstorage.setItem(' todo','JSON.stringify(obj)) Else Get the data from Ls JSON.parse( localstorage.getItem('todo')) Update this array by pushing the next input
0 - Marcin• 570
@Frontmaniaac
Submitted
I fixed my solution and now it's all good with the responsivness.
Yadhavan Prabhakar• 460@yadprab
Posted
Hey I figured it out First, remove the Wrap FAQ Section faq is your container so you don't need wrap faq put text and image wrap under faq section
Then in CSS HTML{ height:100% } body tag Width:100% display: flex Justifiy-content:center Align-items: center background: gardient;
.faq margin:2em Width:100%, Max-width:480px display: flex Justifiy-content:center Align-items: center Flex-direction:column Background-color:#fff; Adjust images according to current state
My suggestion don't use absolute for positioning only use for overlay stuff Then for icon don't use image clickable thing needs to be button and inside button put inline SVG
Nature of accordion is to grow while showing answer I checked many real accordions they act same way so don't worry Forget about absolute and relative Learn CSS grid and flexbox
If any doubts feel free to ask me
1 - seyide hundeyin• 440
@SeyideHundeyin
Submitted
I always found CSS grid difficult and never wanted to use it on any of the challenges but I decided to give it a try and I spent the whole night googling and checking other people's solutions.
I definitely haven't gotten the hand of CSS grid but I am proud I was able to do this challenge and will use CSS grid in more challenges so I can understand it better.
let me know if you have any feedback for me.
Thanks
Yadhavan Prabhakar• 460@yadprab
Posted
check out wesbos grid tutorial trust me you're going to love css grids soon it really solves many problems
1 - Lilibell• 60
@Lilibell
Submitted
Hey everyone,
this is my first Intermediate Level challenge and it took me forever to complete. However it was a lot of fun for me and I've learned tons of new things. I celebrated everything that finally worked as I wanted it to! Although by now everything seems to work, my code feels a little messy to me. I would be very glad if someone takes the time to review the structure of my code and probably gives me some tips on how to improve its readability and if possible make it less redundant. Of course I am happy for any other feedback as well!
Edit: according to the preview, there also seems to be an issue with my sort buttons, but I don't see it when I open the page... any help would be welcome! Thank you for your time.
Yadhavan Prabhakar• 460@yadprab
Posted
Hey, you did a great job. I looked at your code just a few things to change. Change the overflow-scroll to auto and don't set a fixed height for the #todo instead put them in a container set a max-width. My suggestion is you don't need to show the todo area generate that area via js according to user inputs. I'm happy that you Took the intermediate challenge. And for more interesting stuff learn about insert-adjacent Html and local storage it will more fun trust me.
Keep learning All the best
1 @romualdo-ah
Submitted
I had issues positioning the profile image and text. Have any sugestion on how if could be better? Feel free to share
Yadhavan Prabhakar• 460@yadprab
Posted
use css grid its easy to position things
0- Marcin• 570
@Frontmaniaac
Submitted
I fixed my solution and now it's all good with the responsivness.
Yadhavan Prabhakar• 460@yadprab
Posted
This happens because of the body's 100vh height I also faced this problem tbh vh sucks remove the 100vh. Block elements always take up the content width so for mobile don't set the container height use padding and margin to align image section and FAQ section. For width set max-width to 380px like that
0 - Astrid• 100
@astridv
Submitted
🎉 First completed challenge 🎉
Any feedback is very welcome (or just a simple "Good job" 😂), but particularly interested in the following:
- Are there any places I've could have simplified my CSS styling? Like, could I have skipped the media query and gotten the same result with just CSS Grid somehow?
- Any tips or tricks that would've let me better match the provided design?
Check out the repository for some notes on browser compability and accessibility regarding this challenge 😄
Yadhavan Prabhakar• 460@yadprab
Posted
nice work use section instead of div
1
