@JouteeSubmitted over 1 year ago
I struggled a little bit with dropdowns because its the first time making them. I'm almost sure that I didn't do it in the best or common way, so any advice welcomed.
DrZero1234
@DrZero1234All comments
- @DrZero1234Posted over 1 year ago
Hey!
I think the dropdown works and looks as its intended but I cant really tell if you could´ve implemented it better because the code is not up in GitHub. There is an obivous issues however the fact that the user cant open these dropdowns because the hamburger menu / sidebar has not been implemented yet (at least i cant see it).
0 - @Tobiloba-AdebayoSubmitted over 1 year ago
Well, i found a lot of things really difficult. I could not get the icons that is being used in the design so I submitted the main design.
And also, it's actually my first time using bootstrap and i'm still trying to learn more about it.
Concerning the designs for this code, I'm not sure if i did it perfectly. Please It will be a great encouragement for me and other developers out there, if you can provide the icons that are being used in the main design for us. You can list it down in the description menu.
@DrZero1234Posted over 1 year agoHey!
Im kinda confused what do you mean you couldn´t get the icons? They are in the .zip file in .svg format, for example one of the icon´s name is client-maker.svg. I see they are not in your repo i just find it weird that why. So take a second look at the zip file the icons should be there, you can display svgs the same way you do with other file formats (with the img tag). If you haven´t heard about SVG file formats heres a brief intro from the firefox docs:
https://developer.mozilla.org/en-US/docs/Web/SVG
0 - @ZSHenChanSubmitted over 1 year ago
any feedback is welcome and appreciated. THanks!!
@DrZero1234Posted over 1 year agoIt looks good however it appears your site isn´t responsive meaning it does not changes to the column layout on small screen size, also the button doesn´t have a hover effect either. I recommend you taking a look at these issues.
0 - @Princecodes205Submitted over 1 year ago
The functions used for the calculations was quite difficult for me but I was able to do it I don't know if what I did was right but I got the results. Also I don't know if my process used are of best practice. I added a reset function not part of the instructions though but I had to for more fun
@DrZero1234Posted over 1 year agoHey!
First off congratulations your site looks pretty good you also did the bonus animation (i didnt have the patience). I fiddled around for a couple of minutes and noticed some issues
- Although the user gets error when entering invalid D M or Year the site calculates the result.The validation shouldnt just warn the user of invalid input it also should prevent them from calculating with them.
- After i generate a result and edit the input the user doesnt get the updated result the form resets instead without any result
- The text above the inputs should be <label> elements its much more accessible
Hopefully my feedback had some value.
Happy coding
1 - @lexzeeSubmitted over 1 year ago
Hello Seniors
So I used React Js in solving this challenge and although it works perfectly, I can't seem to get how to change the background color of the current rating value when it is clicked on.
Click here to check out the code.
The code for the rating section looks like below
const Rating = ({ handleClick, rate}) => { return ( <div className="rating-state"> <div className="icon"> <img src={starIcon} alt="#" className='starIcon'/> </div> <h1 className="header"> How did we do? </h1> <p className="description"> Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering! </p> <div className="rating"> <button className="rate" id='1' onClick={handleClick} onMouseOver={handleHover} >1</button> <button className="rate" id='2' onClick={handleClick} onMouseOver={handleHover} >2</button>@DrZero1234Posted over 1 year agoHey!
I Created a pull request in your GitHub repo which fixed your issue above. I am not a React guru by any means and I only code as a hobby so take my explanation below with a grain of salt.
Explanation:
First things first since you decided to go with React i decided to separate the Rating button as its own component. Its always recommended to separate a React site to as many components as possible ESPECIALLY those which components are on the site multiple times and also change based on state
Since the content of the Button is static (numbers between 1-5) I decide to map over an array of 1-5 and creating the buttons that way. Not only it is less lines of code but you feel more cool if you do it that way.
The background of the button will change if the id of your rate state is the same as the value of the button otherwise the background goes back to its original color.
As of right now unfortunately you have to specify each css attribute change on click in the RatingCircle component, I couldnt find a better way to implement it with the rate´s style key-value pair but in this case i believe its sufficient because we only want to change the backgorund color.
As for the hover i couldnt style it the same way as the click since both of them change the background which lead to conflict. So i decided to create a CSS class name hovered and toggle it onMouseOver, and onMouseLeave.
Side note: You maybe noticed that i deleted the ...state spread operator in the onClick event. Thats because it didnt really do anything your case beacause you changed all of your state´s field inside your onClick function.
Hopefully my added code fixed your issues and learnt something from them.If you have any questions i´ll try my best to answer.
Marked as helpful1 - @IamAbhiDevSubmitted over 1 year ago
It was my first time creating a layout. I recently got out of tutorial hell, So I faced difficulty writing code myself but I was able to understand it all and customize it in the end. Please let me know if there is anything I can add to my code. Thanks!
@DrZero1234Posted over 1 year agoHey!
I quickly glanced over your site and noticed 2 problems (the second is a bit advanced)
-
Your icon images are simply not loaded. Maybe when you tested locally it worked but after shipping it to GithubPages it doesnt. I tested it in browser and maybe all you have to do is put a dot (.) before each icon path
-
There is blank space above your "Result" Window in Firefox and Edge. In Chrome it looks properly.
Marked as helpful1 -
