@mayramatosSubmitted 10 months ago
Latest comments
- @abubakar-sadiq001Submitted 10 months agoWhat are you most proud of, and what would you do differently next time?
I built the solution without getting the colors, I generated colors with the color palette and I also finished it in under 150 mins
What challenges did you encounter, and how did you overcome them?Looking for matching colors consumes a lot of my time. but with the help of the CSS color palette, I get the matching colors
@EFEELEPosted 10 months agoGreat job!!
Details about the design colors can be found in your style-guide.md file.
You can create custom properties in your style sheet as follows:
/* Define variables in :root */ :root { --Nutmeg: hsl(14, 45%, 36%); --Dark-Raspberry: hsl(332, 51%, 32%); --Rose-White: hsl(330, 100%, 98%); --Eggshell: hsl(30, 54%, 90%); --Light-Grey: hsl(30, 18%, 87%); --Wenge-Brown: hsl(30, 10%, 34%); --Dark-Charcoal: hsl(24, 5%, 18%); } /* and that's what you can call them *. body { background-color: var(--Eggshell); }You can do tests in codepen https://codepen.io/efeeledev/pen/KKLyGyZ
0 - @amirulafanndySubmitted 10 months agoWhat are you most proud of, and what would you do differently next time?
Be able to use flex box styling.
What specific areas of your project would you like help with?I dont know how to adjust the card and item width as the screen size change.
@EFEELEPosted 10 months agoTo do that you have to implement media queries in CSS.
an example:
/* Styles normal */ .my-div{ width: 800px; height: 500px; background-color: red; } /* Styles on devices with a max-width 768px */ @media screen and (max-width: 768px){ .my-div{ width: 400px; height: 250px; background-color: green; } }Test on codepen : https://codepen.io/efeeledev/pen/MWdOPoV
0 - @jaalzuSubmitted 10 months agoWhat are you most proud of, and what would you do differently next time?
im proud of the way i make the functions of js. i make really nice the swap but i can't make the values of inputs appears on screen
What challenges did you encounter, and how did you overcome them?i can't make selected numbers of rating appears is next page
What specific areas of your project would you like help with?with the js area. most exact in the selected numbers when i rating. also i will like help with media queries. how do i make responsive without have to make a lot of media queries
@EFEELEPosted 10 months agoGood job!!! I share with you how I did the Js part
With innerHTML you can replace the content of an HTML element and thus make the final message ** dynamic**
let optionSelected; const container = document.getElementById('container'); const thanks = document.getElementById('thank-state'); const showValue = document.getElementById('our-selection'); function checkValue(){ const options = document.getElementsByName('option'); for (let i=0; i < options.length; i++ ){ if(options[i].checked){ optionSelected = options[i].value } } if(optionSelected){ container.style.display = 'none'; thanks.style.display = 'flex'; showValue.innerHTML = 'You selected ' + optionSelected + ' of 5'; }else{ alert('You have not selected any options') } }I share my repository with you in case you like to test: GitHub Repo
I hope that helps!!
0 - @tortarugaSubmitted 10 months agoWhat are you most proud of, and what would you do differently next time?
I'm happy because this was the first project where I didn't have issues with github. Next time I'd try to be more organized and have a clearer idea of what I have to do before just diving into it because I kept going back to the design image every three seconds and I feel like I wasted so much time
What challenges did you encounter, and how did you overcome them?I had a few problems with the styling, but I solved them playing around with the properties a bit (sheer luck)
What specific areas of your project would you like help with?how do I determine the break point for the mobile version? I just used 500px because it's where the design started looking a bit ugly...
@EFEELEPosted 10 months agoI recommend you base it on these breakpoints, my friend!
- X-Small <576px
- Small ≥576px
- Medium ≥768px
- Large ≥992px
- Extra large ≥1200px
- Extra extra large 1400px
Marked as helpful0 - @Sazid99246Submitted 10 months agoWhat are you most proud of, and what would you do differently next time?
I am proud that I have done this project myself, in between 2-4 hours.
What challenges did you encounter, and how did you overcome them?I found it challenging to make the card center of the page
What specific areas of your project would you like help with?I think my project is perfect, but I need feedback on it to do it better.
@EFEELEPosted 10 months agoYour project is very well done!!
I want to give you an extra piece of advice to make it look even better!!
In your .container, you can add these two attributes. The first one is a** transform: translate** to move your card and compensate for the box-shadow you added, this way it will seem like the card is moving and not the shadow. And the second attribute is changing to cursor: pointer to make it look much better. Remember, this is done using the :hover pseudo-class.
.container:hover { box-shadow: 15px 15px #111; transform: translate(-5px, -5px); cursor: pointer; }¡Congratulations!
Marked as helpful0
