All comments

Josh Contreras•260
@SnarboSubmitted about 1 year ago
Room Homepage
1
Chanda•800
@Chanda-AbdulPosted 5 months ago
looks good!
0
Annalisa•200
@Annalisa11Submitted 5 months ago
What are you most proud of, and what would you do differently next time?
I finally got a good grasp of scss functions
What challenges did you encounter, and how did you overcome them?
I realized that there were active states to be implemented that required some more javascript logic when I was half way through. Since I thought it was only some styling I didn't bother setting up a whole react app and instead used simple html and some vanilla js. When I saw that I had to make the responsive Menu open, I just left it because I was too lazy to implement in js... Maybe some other time
js sass loopstudios landing page
1
Chanda•800
@Chanda-AbdulPosted 5 months ago
Overall great job on the LoopStudios challenge! Great use of Sass and BEM conventions.

You mentioned adding a responsive Navigation in the future. Here is a great resource for that Responsive Top Navigation

Consider using less <div>'s in order to make your code more semantic and accessible. Here is an article to get you started intro to semantic HTML

Also, don't forget to remove console.log()'s before you publish your code.

I hope that helps!
Marked as helpful
0
svo15•230
@svo15Submitted 5 months ago
nft-preview
1
Chanda•800
@Chanda-AbdulPosted 5 months ago
Good job on your NFT card component solution!

A few sugesstions

consider using less <div>'s for html semantic purposes. <div>'s should only be used for styling purposes and not as containers.

This article expains this concept well An intro to semantic HTML

ex. instead of <div class="container"> just use <main>

instead of <div class="price"><h2> use <h2 class="price">

the active states are not working, you could add something like this

a:hover { color: white; cursor: pointer; }

define font-family in the body selector

body { font-family: 'Outfit', sans-serif; }
1
Matthew Davis•30
@TeddyGaviSubmitted over 1 year ago
How would you do a drop-down menu using only HTML and CSS?
Sunny Side Landing Page
1
Chanda•800
@Chanda-AbdulPosted over 1 year ago
👋 Your Sunnyside landing page looks great!

Here are two approaches you could use to create a dropdown menu using just HTML and CSS:

Using the :target pseudo-class: This method involves defining targets within your HTML and using CSS to show/hide content based on the target's ID. By leveraging the :target selector, you can create a dropdown effect when certain elements are clicked or targeted. https://css-tricks.com/off-canvas-menu-with-css-target/

Using a form input checkbox styled as a menu: This method utilizes a checkbox <input> element within a form and applies CSS styles to make it appear like a menu. By toggling the checkbox's checked state, you can control the visibility of the dropdown menu through CSS selectors and transitions. https://css-tricks.com/the-checkbox-hack/

I hope these suggestions help!. If you have any further questions, feel free to ask!

Happy coding!
0
Sidney François•110
@sidneyfrancoisSubmitted over 1 year ago
How can I ignore overflow: hidden from the parent div?

It worked when I set "position: fixed" in the box class but I don't think this would be an ideal solution... I was trying to make the position of the box relative to the image of woman.
Accordion with css only, no javascript.
3
Chanda•800
@Chanda-AbdulPosted over 1 year ago
Hey there! Congratulations on completing your project.

One way you could remove the overflow: hidden from the parent <div> is by creating a separate direct parent <div> specifically to contain the element that needs its overflow hidden.

in the HTML:

<div class="parent"> <div class="child"> <img src="img.jpg" alt="child-image"> </div> </div>

in the CSS:

.parent{ position: relative; /* position may not be necessary */ overflow: hidden; } .child{ position: absolute;/* position may not be necessary */ }

By creating this nested structure, you can apply the overflow: hidden specifically to the desired container, allowing more flexibility for other elements within the parent <div>.

You could also consider the tradeoffs of using overflow: hidden; to hide overflow on X and Y axis vs overflow-x: hidden; and overflow-y: hidden;

Keep up the great work, and if you have any questions or need further clarification, feel free to reach out. Happy coding!
1
Bálint Balázsi•260
@oroszlanoloSubmitted over 1 year ago
My solution is not pixel-perfect by any means, But I am still proud of the result. The code is not so clean. I don't think, that I have used Angular's full capabilities, and I think, that some positionings could be done better. Still, the layout (in my opinion) looks great, it is fully responsive (on any resolution from 200px width to full desktop), has advanced animations (buttons moving), and works just fine. One part where I could've improved my code is to use top and left positions on the buttons, instead of transitioning. Then there would be no curved-moving button animation. But I figured it out late and didn't want to rewrite the whole thing.

Let me know if you find any bugs, or have any suggestions how to improve. :)
Fully Responsive Rock Paper Scissors Lizard Spock Game with Animations
1
Chanda•800
@Chanda-AbdulPosted over 1 year ago
👋 Hey there! Congratulations on completing your project. Overall, everything looks amazing and functions well. I appreciate that you were able to incorporate tests.

Here are some suggestions to help improve your code and align with Angular best practices:

Consider using TypeScript to provide abstractions in your code. Instead of hard coding paper, rock, and scissors directly into the template, you could create an opponent.model.ts file to abstract this data. By abstracting the data, it would greatly enhance scalability and readability. Similar to this

const opponent: [string, boolean] = [ { name: 'rock', bonus: false }, { name: 'paper', bonus: false }, { name: 'scissors', bonus: false }, { name: 'lizard', bonus: true }, { name: 'spock', bonus: true }, ];

When accessing the data in your template, consider using Angular pipes to format and transform the values. Pipes are a powerful feature in Angular that can help with data manipulation and presentation. Utilizing pipes will make your code more modular and easier to maintain.

<ul class="opp"> <li *ngFor"let opp in opponents"> {{opp.name | capitalize}} <span *ngIf="opp.bonus === true">bonus</span> </li> </ul>

To encapsulate all the game play functionality, consider creating a service. This service can hold the logic for game rules, scoring, and other related functionality. Additionally, you can leverage RxJS observables to keep track of the game results and opponents. Observables provide a reactive way of handling asynchronous events, which can be beneficial for real-time updates and data synchronization.

By incorporating these suggestions, you'll be following Angular conventions and best practices, making your code more maintainable and scalable.

Keep up the great work, and if you have any questions or need further clarification, feel free to reach out. Happy coding!
Marked as helpful
0
Madhav•50
@Madhav3198Submitted over 1 year ago
I would greatly appreciate receiving feedback on any errors or areas for improvement in the solution, as well as suggestions for enhancing its efficiency.
Responsive Age Calculator App
2
Chanda•800
@Chanda-AbdulPosted over 1 year ago
Great job! Overall everything looks pretty good.

BUT I noticed a few things...

If I enter a date and one of the inputs it invalid, the output for the other two dates is still calculated. Maybe you could update this so that nothing gets calculated if any of the inputs are invalid.

When the user updates an invalid input, the error styles persist although there are no errors

You could also add a bit more error handling.

For leap years- Feb 29, 2000 should be valid and Feb 29, 2001 should be invalid

For various month lengths - April 31,2023 should be invalid because April only has 30 days

Dates that are later in this month or later in this year - tomorrows date should be invalid, May 18, 2023; and any date later this year should be invalid, June 18,2023.

For the HTML you used <div>'s for most elements. Consider using other HTML elements for semantic purposes. This is a great article that explains why this is important https://www.freecodecamp.org/news/semantic-html-alternatives-to-using-divs/

The JavaScript code could be more concise. There is some repetitive code that could be condensed and combined into reusable functions. This is a great resource to learn about DRY code https://www.educative.io/answers/how-to-build-a-counter-application-with-javascript

Your CSS looks really good, I like that you made it responsive by using media queries.

I hope that helps!
Marked as helpful
1
arogersrenee•330
@arogersreneeSubmitted over 1 year ago
This was a hard challenge for me. Any feedback would be extremely helpful.
1. How do you do curved divs? I don't think the solution I found is the best. It creates a horizontal scroll that I don't know how to fix.
2. I also know that I need to read into positioning and how to move elements. I found a solution that I was able to play with but any advice in that area is welcome.
Was positioning the best choice to use for the phone and the bottom section with the founder image and the text-box?
work-it responsive landing page (flex & grid)
5
Chanda•800
@Chanda-AbdulPosted over 1 year ago
oh, and for a full curved bottom/top border on a <div> or <section> you could use clip-path or radial-gradient
0
GIGACHAD•230
@Khalid-debuggSubmitted over 1 year ago
The only logic I couldn't implement is if a user input a day that was not on the month (ex. user input day = 31) and the month has only 30 days it will still calculate it and I couldn't find solutions for it.
Okay JUNIOR Tiiiiiime !!!!!!
1
Chanda•800
@Chanda-AbdulPosted over 1 year ago
👋🏾

To validate the day, you could use and array to store the days for each month. ex. const daysPerMonth = [31,28,31,30,31,30,31,31,30,31,30,31];

and access each month by it's index. So if you wanted to see how many days were in the second month of the year(February), you could use daysPerMonth[1] which should be 28

I hope that helps!
Marked as helpful
1
arogersrenee•330
@arogersreneeSubmitted over 1 year ago
This was a hard challenge for me. Any feedback would be extremely helpful.
1. How do you do curved divs? I don't think the solution I found is the best. It creates a horizontal scroll that I don't know how to fix.
2. I also know that I need to read into positioning and how to move elements. I found a solution that I was able to play with but any advice in that area is welcome.
Was positioning the best choice to use for the phone and the bottom section with the founder image and the text-box?
work-it responsive landing page (flex & grid)
5
Chanda•800
@Chanda-AbdulPosted over 1 year ago
Hello 👋🏽,

for a curved <div> add border-radius: 32px to the css selector

to fix the horizontal scroll add overflow-x: hidden to the parent’s css selector. You may also want to set the width or max-width of the parent, or the entire page, to 100vw so that child elements cannot overflow the parents container.

for positioning look into absolute and relative positioning. Use position: relative on the parent element’s css selector and position: absolute; top:0; left: 0; on the child element’s css selector. Adjust the top , bottom , left , right values on the child element to position it relative to the parent element.

To position layers use z-index

For the numbered list, use an ordered list with list items. https://www.w3schools.com/html/html_lists_ordered.asp

I hope that helps!
Marked as helpful
0

@crsimpson5Submitted about 2 years ago

This project was a lot of fun. I made a custom range slider for the first time that works in Chrome and Firefox (not sure about Safari). One interesting challenge was determining the strength of the password to be generated. The strength will update based on all the options, although the scale is completely arbitrary 😅. Making the 4-bar strength component was made simple thanks to some cool CSS selectors. All I had to do is change the data-value attribute in JavaScript and the CSS takes care of the rest.

.scale {
  &[data-value="1"] :nth-child(1) {
    --color: var(--red);
  }
  &[data-value="2"] :nth-child(-n + 2) {
    --color: var(--orange);
  }
  &[data-value="3"] :nth-child(-n + 3) {
    --color: var(--yellow);
  }
  &[data-value="4"] :nth-child(-n + 4) {
    --color: var(--green);
  }
  ...
}

Let me know if there's any bugs or improvements I could make. Thanks!

Password Generator made using Vanilla JS + Sass

Chanda•800

@Chanda-AbdulPosted about 2 years ago

Well done! The 4-bar strength component is pretty tricky, the solution you came up with is very clever and elegant!

Md5 dalton•1,430
@md5daltonSubmitted about 2 years ago
Hello Front-end Mentor Community 👋

I've wanted to do this challenge for so long that now I've got the chance to do so, I am quite excited that I got to practice some React and Sass features I've learnt so far. 😪

Next plans for this project:
- Add error reporting functionality in case a user set password length to 0 or deselect all the check boxes and they click "Generate".
- Implement default reset styles for some HTML elements.
One of the most difficult or I should say tedious part was the CSS🥱, although SASS made it somehow manageable. On my next project I'll be using a CSS framework. Any suggestions on which one to use will be highly appreciated, I never really used one a project before but I've seen some tutorials on bootstrap and tailwind. The reason for not using them was that I did not like how they cluttered my HTML markup. However, I've realized that since I started doing this challenges, I spend most time on CSS than the HTML markup and JavaScript logic, maybe a CSS framework will save me some time.

Any suggestions will be highly appreciated. 👌
Password generator app Using React and Sass
1
Chanda•800
@Chanda-AbdulPosted about 2 years ago
Great work! Styling is pixel perfect 👌.

My favorite "CSS framework" to use with React is React styled components. For everything else I just use Sass.

This video is a great resource to get started with React styled components https://youtu.be/02zO0hZmwnw
1

Chanda

All comments

Room Homepage

js sass loopstudios landing page

nft-preview

Sunny Side Landing Page

Accordion with css only, no javascript.

Fully Responsive Rock Paper Scissors Lizard Spock Game with Animations

Responsive Age Calculator App

work-it responsive landing page (flex & grid)

Okay JUNIOR Tiiiiiime !!!!!!

work-it responsive landing page (flex & grid)

Password Generator made using Vanilla JS + Sass

Password generator app Using React and Sass