All comments

Henry•120
@Ace-droidSubmitted over 1 year ago
could not figure out how to blur the background and stop the scrolling when the menu is opened. any feedbackis welcome
Responsive news home page
4
Shahjahan Sarfraz•270
@Jahan-ShahPosted over 1 year ago
Hey Henry 👋, Congratulation on solving this challenge

To add blur in the background when the nav is open you can add a div (backdrop) behind the nav with 100% width and height and then add blur to that div.

To stop scroll when nav is open you can modify you js function like this:

const menuButton = document.querySelector(".hamburger"); const navLinks = document.querySelector(".nav-links"); const body = document.querySelector("body"); let isNavOpen = false; menuButton.addEventListener("click", () => { isNavOpen = !isNavOpen; if (isNavOpen) { body.style.overflowY = "hidden"; } else { body.style.overflowY = "auto"; } menuButton.classList.toggle("is-active"); navLinks.classList.toggle("is-active"); body.classList.toggle("blur"); body.classList.toggle("fixed"); });

I hope this will help

Happy Coding 👨‍💻
1

@RobertPietraruSubmitted over 1 year ago

How do you validate dates and find how much time has passed?

For date validation I'm checking if the day, month and year I put in is the same in the date object.

For finding how much time has passed I get the milliseconds and divide by 365, 30, etc. That's not accurate though, so I'm looking for a better approach

Age Calculator with responsive UI made using grid

Shahjahan Sarfraz•270

@Jahan-ShahPosted over 1 year ago

Hey Robert 👋, congratulations on solving this challenge

Your date validation is good, but if you want to calculate age in more concise and readable code you can look at my following code:

function calculateAge(day, month, year) {
  const today = new Date();
  const birthDate = new Date(year, month - 1, day);

  //Date Validation
  const isDayValid = birthDate.getDate() === day;
  const isMonthValid = birthDate.getMonth() === month - 1;
  const isYearValid = birthDate.getFullYear() === year;

  if (!isDayValid || !isMonthValid || !isYearValid) {
    isInputValid.value = false;
    return;
  }

  //calculating difference of current date and birthdate

  let ageYears = today.getFullYear() - birthDate.getFullYear();
  let ageMonths = today.getMonth() - birthDate.getMonth();
  let ageDays = today.getDate() - birthDate.getDate();

  if (ageMonths <= 0) {
    ageMonths += 12;
    ageYears--;
  }

  if (ageDays < 0) {
    const lastMonthDate = new Date(
      today.getFullYear(),
      today.getMonth(),
      0
    ).getDate();
    ageDays += lastMonthDate;
    ageMonths--;
  }


  //Age:
  console.log(ageYears, ageMonths, ageDays);
}

I hope this will help

Regards,

Shahjahan

Moritz Rose•90
@moritzroseSubmitted over 1 year ago
1.) If you could tell me, how to make the Font-Family Outfit bold, please tell me. I had to use Open Sans, cause Outfit doesn't work with font-weight: bold/900; 2.) Is there a unit, to make the size of containers etc. suitable for smaller/bigger devices - to make it responsible? I feel like I got lucky, that my container perfectly fits the mobile-version width and height, but I want to be in control of that.
QR code component
3
Shahjahan Sarfraz•270
@Jahan-ShahPosted over 1 year ago
Hi Moritz 👋, weldone on solving your challenge. I'm here to answer you questions.

You need to import all the font weight you want to use in your style. So how you select the font weights is that you go to the font on google fonts and scroll down to styles of font, you'll see all the weights of that font, now click select on right side of all the weights you need and then copy the import link. i.e if you want to use bold outfit font the import should look like this:

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@900&display=swap');

Units will not make your design responsive, but try to use relative units like rem, em etc instead of absolute units like px

To make your design responsive you flexbox or grid and media queries.

Lastly here is an absolute amazing tutorial on responsive by Ramzi - Slaying The Dragon make sure to check this out and learn responsive design easily.

I hope this will help.

Shahjahan
0
faramarzsakhi•150
@faramarzsakhiSubmitted over 1 year ago
this was quite easy project but i took me two hours to make this i used pure css withut bootstrap to improve my css skills. angular frame work and forms module and ngClass and string interpolation made it easier. any advice?
angular scss and typescript , media queries and string interpolation
1
Shahjahan Sarfraz•270
@Jahan-ShahPosted over 1 year ago
Hi 👋. Well done on completing this challenge. To improve your code I've got some feedback

But first, Make sure you push code that is not built on GitHub so other people can review your code. As I cannot review your code. I have some suggestions that you can consider.

You can include checks for the validity of the Day, Month, and Year.

For the day add a check to make sure the user's entered value is not more than the number of days of the respective month. i.e. February cannot have a day more than 28 except for lunar years.

For the month add a check to make sure the user's entered value is not more than 12.

For the year add a check to make sure the user's entered value is not a future year.

Last you can also add form submission on enter.

I hope you'll find this helpful 😄
Marked as helpful
1
troyjosedev•300
@troyjosedevSubmitted over 1 year ago
Hi there! I would appreciate your feedback on this project. I'm open to constructive criticism and would like to know what areas I should focus on for improvement. Thank you!
Time tracking dashboard with JSON
1
Shahjahan Sarfraz•270
@Jahan-ShahPosted over 1 year ago
Hi Troy 👋. Well done on completing this challenge. To improve your code I've got some feedback

HTML:

You must include one heading 1 (h1). Even though there is no use of the h1 you should create an <h1> element in your HTML file that is inclusively hidden but readable to screen readers. You can copy this style to do that. e.g.: <h1 class="sr-only">Time Tracking App</h1>. or you can skip all of that and put the user's name in the <h1> tag.

You can use radio input for selecting duration and hide the input with CSS like this:

HTML

<input type="radio" id="weekly" value="Week" checked /> <label for="weekly">Weekly</label>

CSS

input[type="radio"] { display: none; /* Hide the actual radio button */ } label { color: white; display: inline-block; cursor: pointer; }

Moreover, you make one of the radio inputs selected by default so users don't have to select the duration every time they visit the page

CSS:

You can use cursor: pointer; on li's for better accessibility.

Add active states like those shown in the design.

I hope you'll find these helpful 😊

Happy Coding
1
Atthawut Smith•100
@zachtixSubmitted over 1 year ago
product-preview-card-component
2
Shahjahan Sarfraz•270
@Jahan-ShahPosted over 1 year ago
Hi 👋🏻, I'm glad you tried to solve the challenge but your css is not optimal.

You need to study about media queries and responsive design in order to make your design device friendly. I'll suggest you to go through, Flexbox, Grid and Media Queries.

However, I can tell you everything here it will become too long. So you can follow this tutorial here by kevin powell. In this tutorial you'll see a complete breakdown of this challenge and an optimal approach to this challenge, in my opinion.

I hope you'll find this helpfull 😄
0
Ruan Mesquita•70
@RuHdSubmitted over 1 year ago
Surprisingly, the css was the hardest to me than the functionality itself. I spent a decent amount of time to figure out the best way to organize all the containers and to establish each position on the page. But despite the struggle, it was really fun to solve. There's some traits that it's missing but in overall, I'm happy with! Hope you like it! :)

I have a question: Dedicating a external js file just to store the constants is it efficient on code execution manner or it's for a better readibility? Thanks!
Js Vanilla, FlexBox, Semantic Tag
1
Shahjahan Sarfraz•270
@Jahan-ShahPosted over 1 year ago
Hi 👋. Well done on completing this challenge. To improve your code I've got some feedback

HTML:

Use Semantic elements like <section>, article> instead of using <div>. Use the <main> tag to wrap all the main content in your HTML file to improve the accessibility of your page.

You must include one heading 1 (h1). Even though there is no use of the h1 you should create an <h1> element in your HTML file that is inclusively hidden but readable to screen readers. You can copy this style to do that. e.g: <h1 class="sr-only">Age Calculator App</h1>.

Use <label> tag above <input> instead if using <div> and <span> for more accessablity. e.g:

<label for="day">Day</label> <input placeholder="DD" type="number" id="day" />

Feedback on functionality

The user is able to enter future dates, which can be solved with a check, by getting the current year from the Date function.

The user is able to enter an invalid date like 30th Feb which is invalid. You can look into that too.

Answer to your question We use external js file just like an external CSS file, so that we can easily manage our code. If only a little bit of javascript is used that you can do that in an HTML file. But it is preferable to use external js file as the code gets bigger and bigger, it get difficult to manage the code.

I hope this helps you 😄
Marked as helpful
0
Lo-Deck•2,790
@Lo-DeckSubmitted over 1 year ago
Hi, everybody This is my solution for Product-preview-card-component. Just take a look at my code if you can give any feedback. I've checked the code with 3wc validators.

I have a question about browsers behaviors, there are different for the resizing of the image:

line 16
```
<img  srcset="./images/image-product-mobile.jpg 686w,
./images/image-product-desktop.jpg 600w"
sizes="(max-width: 800px) 686px,
600px"
src="./images/image-product-mobile.jpg"
alt="photo perfume">  
```
When I use firefox, I shrink and after grow the page, with firefox the image switch correctly between the both size.

and with Chrome and edge, the image is the good one before resizing, when I shrink and after I grow the page, the image don't switch and stay for the mobile size.

Do you have any idea? Thank you all.
Product-preview-card-component
4
Shahjahan Sarfraz•270
@Jahan-ShahPosted over 1 year ago
Hi 👋. Weldone for solving the solution. I'm here to answer your question. I hope you'll find this helpful

I can see that you are trying to change the image inside HTML only. You can do that by using the following steps, I will also attach a code snippet for you:

First write a <picture> tag.

Inside that picture tag write two tags <source/> and then the <img/> tag (both of which are self-closing tags).

In the <source/> tag you'll use two HTML attributes srcset which will be the destination path to the image, and media which will be basically used for media query, where you will define when you want this source image to be used. Like in my code, it's after 600px.

Now in the <img/> tag you'll set the src to another image and alt tag for better accessibility.

<picture class="product__img"> <source srcset="./images/image-product-desktop.jpg" media="(min-width: 600px)" /> <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" /> </picture>

I hope this might help you achieve your results. 😄
0
Matin Zafari•70
@MachineCode0101Submitted over 1 year ago
Centering the div vertically was unironically the most difficult part, and I still haven't managed it! so I did some hacks using "padding-top:30%" to have some space to the top of the screen/page. I did try grid and flex, with content, align and item properties to center my content but I just couldn't get it centered vertically!

How can I improve the centering of the content?
Mobile-first-CSS-Grid
3
Shahjahan Sarfraz•270
@Jahan-ShahPosted over 1 year ago
Hi Matin 👋. Weldone on solving the challenge, however, I'm here to answer your question on centering a div.

Let's say we have the following HTML:

<div class="parent"> <div class="child">Some Content</div> </div>

Let's talk about centering the div in CSS: There are three commonly used ways we can use to center a div in CSS, you can use whichever method that's suitable.

-1st:

.parent { position: absolute; top: 50%; //centers the child div vertically left: 50%; // centers the child div horizontally transform: translate(-50%, -50%); //first value for x-axis translation and second for y-axis }

-2nd:

.parent { display: flex; justify-content: center; //centers child div horizontally align-items: center; //centers child div vertically margin-inline: auto; //you can use this too instead of justify-content }

you can read more about Flexbox here.

-3rd:

.parent { display: grid; place-items: center; // centers div both vertically and horizontally in grid; }

you can read more about Grid here.

Note: there are a lot of ways to center a div, but you can use these three to get your work done easily. But if you are curious to find other ways too you can search for them on the Internet.

I hope you find this helpful 😄
Marked as helpful
1
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
Shahjahan Sarfraz•270
@Jahan-ShahPosted over 1 year ago
Hi Madhav 👋. Well done on completing this challenge. To improve your code I've got some feedback

HTML:

Use Semantic elements like <section>, article> instead of using <div>. Use the <main> tag to wrap all the main content in your HTML file to improve the accessibility of your page.

You must include one heading 1 (h1). Even though there is no use of the h1 you should create an <h1> element in your HTML file that is inclusively hidden but readable to screen readers. You can copy this style to do that. e.g: <h1 class="sr-only">Age Calculator App</h1>.

Use <label> tag above <input> instead if using <div> for more accessablity. e.g: <label for="day">Day</label> <input placeholder="DD" type="number" id="day" />.

CSS:

Use relative units like rem or em instead of using pixels in the font size. The absolute units like pixel do not scale according to the user's browser settings, which can cause inaccessibility for users who uses large font size on their browser. You can read more about that here.

I hope you find this feedback useful 😄.
Marked as helpful
2
od•80
@ogueridSubmitted almost 2 years ago
hi is it possible to get any feedback if i done this correctly as this is my first project it would nice to know if there other way to do this.
QR solution
1
Shahjahan Sarfraz•270
@Jahan-ShahPosted almost 2 years ago
Hi, there well done on completing the challenge. I have left some feedback below if you want to improve more.

In HTML:

-You must use only one h1 in your page. You can make it visually hidden by adding a class="sr-only" to h1 and adding this css to hide it visually from the page.

-Use Semantic Elements (i.e. <main>, <section>) instead of divs to improve accessibility.

-Use <footer> element instead of <div class="attribution">. And move it out of the card and place it after the <main> element in the body.

-Always use alt attribute for images to make it more accessible for screen readers.

In CSS:

-Use rem or em for font-size instead of px. As pixel is an absolute value it doesn't scale with the browser.
0

Shahjahan Sarfraz

All comments

Responsive news home page

Age Calculator with responsive UI made using grid

QR code component

angular scss and typescript , media queries and string interpolation

Time tracking dashboard with JSON

product-preview-card-component

Js Vanilla, FlexBox, Semantic Tag

Product-preview-card-component

Mobile-first-CSS-Grid

Responsive Age Calculator App

QR solution