Chanda
@Chanda-AbdulAll comments
- @Snarbo@Chanda-Abdul
looks good!
- @Annalisa11What 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
@Chanda-AbdulOverall 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 HTMLAlso, don't forget to remove
console.log()
's before you publish your code.I hope that helps!
Marked as helpful - @svo15@Chanda-Abdul
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 thebody
selector
body { font-family: 'Outfit', sans-serif; }
-
- @TeddyGavi@Chanda-Abdul
👋 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!
-
- @sidneyfrancois@Chanda-Abdul
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 vsoverflow-x: hidden;
andoverflow-y: hidden;
Keep up the great work, and if you have any questions or need further clarification, feel free to reach out. Happy coding!
- @oroszlanolo@Chanda-Abdul
👋 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 - 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
- @Madhav3198@Chanda-Abdul
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 -
- @arogersrenee@Chanda-Abdul
oh, and for a full curved bottom/top border on a
<div>
or<section>
you could useclip-path
orradial-gradient
- @Khalid-debugg@Chanda-Abdul
👋🏾
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 be28
I hope that helps!
Marked as helpful - 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
- @arogersrenee@Chanda-Abdul
Hello 👋🏽,
- for a curved
<div>
addborder-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 andposition: absolute; top:0; left: 0;
on the child element’s css selector. Adjust thetop
,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 - for a curved
- @crsimpson5@Chanda-Abdul
Well done! The 4-bar strength component is pretty tricky, the solution you came up with is very clever and elegant!
- @md5dalton@Chanda-Abdul
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
- @aaron-romanick@Chanda-Abdul
Great work! I like that you disabled the checkbox deselect when only one box is selected, and your styling is A+.
Have you considered putting a limit on the password length? Do you think that a user would need a password that is 50 characters long? If you look at other password generators the generally limit password length to 15-30 characters. A 30 character password with lowercase, uppercase, numbers and symbols is pretty secure, and additional length may not be necessary.
- @Assumptaginika@Chanda-Abdul
Great solution!
You could try hosting/deploying your project with netlify.com. That's what I use, and it's great because you can host your projects directly from GitHub.
- @NATiiCODES@Chanda-Abdul
Great Solution overall! The deployed version of you project looks great, and it's very close to the design. Your code is clean and easy to read.
In your HTML file, I noticed a few things.
- I don't think you need to wrap the
<img>
in a<div>
, you can just add stylings directly to the<img>
element. You don't need to use the words picture or image in alt tags for semantic purposes, it's implied that the element is a picture/image. I would probably go with something like<img class="product" src="images/image-product-desktop.jpg" alt="product-main">
- For semantic purposes you probably don't want to name a class after a possible element. With
<article class="paragraph">
the paragraph class could get confused for a<p>
/paragraph element. I would change this to something like<article class="content">
or<article class="product-information">
- also for semantic reasons,
<h1>
's should come before<h2>
's and<h2>
's should come before<h3>
's, etc. I would change this to
<h1> Perfume </h1> <h2> Gabrielle Essence Eau De Parfum </h2>
Your css file, looks great!
I hope that helps! Keep up the good work!
Marked as helpful - I don't think you need to wrap the
- @Eyewavu@Chanda-Abdul
Great Solution!
One way to make this responsive is by using css media queries. This is actually a good project to practice using media queries because you don't have to make a lot of changes when you switch from mobile to desktop.
Here are a few resources to get you started
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
and
https://www.youtube.com/watch?v=yU7jJ3NbPdA
I hope that helps!
Marked as helpful - @Nauman123Nasir@Chanda-Abdul
Great Solution!
For the header section I conditionally rendered the content based on the screen size. I used an event listener/react hook to keep track of the current screen size. If the screen size is less than 600px I would display the Mobile Header, if the screen size is bigger than 600px I would display the Desktop Header. I did something similar with the images, switched from the mobile image to the desktop image at a specific breakpoint. But I will say that the main image does look a bit funky and the content looks a bit wonky near that breakpoint.
For the arrows, I initially set them to ⬆️. OnClick they would switch to ⬇️ and the dropdown menu's would open.
I hope that helps!
- @Eileenpk@Chanda-Abdul
Great Solution!!
You could try using the JavasScript Date Object to dynamically set the current day of the week.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
I hope that helps!
Marked as helpful