All comments

Omar•280
@omarhmitochSubmitted 8 months ago
Dictionnary app using ReactJS, CSS
1
Ortaly•970
@ortalyartsPosted 7 months ago
Hey @omarhmitoch!

Congratulations on completing the challenge!

I have a few suggestions for you:

The line divider (.partOfSpeech::before) is wider as it's container. You can fix it by setting it's width to calc(100% - 80px).

The search icon "jumps" to the bottom when error message appears. It is because you set it's position depending on the parent's height (.inputWrapper) in percentage. When the error message is shown, the parent is higher.

For some search terms (like "face") there is horizontal overflow and the horizontal scrollbar appears. The reason is the .synonyms container, when it has too many synonym words inside it and is too wide. You set it to display:flex; just add flex-wrap: wrap; to fix the case.

Try using semantic html. For example: include text contents in <p> or <h> elements, div / span elements are non-semantic. Read more about HTML Semantic Elements.

Other then this you did a good job on the development!

I hope you find this helpful! Cheers 🍭
Marked as helpful
0
Sergio Cerdá Hervás•60
@sergio-cravasSubmitted 7 months ago
What are you most proud of, and what would you do differently next time?
After researching about the Hexagonal Architecture (also known as Ports and adapters), I'm proud of have been able to implement that pattern into my project and understand the pros and cons of it in a complex framework like NextJS.
What challenges did you encounter, and how did you overcome them?
The most difficult part was to create all the context providers to allow the changes of the typography and theme.
What specific areas of your project would you like help with?
I would love to receive feedback about the folder structure and usage around the context API part. I think is an area of the code I need to refactor and it is sure there is a lot to improve.
Dictionary Web App | NextJS
1
Ortaly•970
@ortalyartsPosted 7 months ago
Hey @sergio-cravas, your deployment is for some reason no longer available...
0
Lê Hoàng Long•290
@JamesWallison1Submitted 7 months ago
What are you most proud of, and what would you do differently next time?
First time doing API challenges and has finished
What challenges did you encounter, and how did you overcome them?
I had a lot of problems with api fetch, but thanks to professional ;)
What specific areas of your project would you like help with?
I think there maybe a lot so if you have any better solution, please feel free to let me konw!
Simple advice generator website using HTML, CSS, JS and API
2
Ortaly•970
@ortalyartsPosted 7 months ago
Hey @JamesWallison1,

Congratulation on comleting the challenge! It looks really good!

I've noticed just a few visual mismatches:

The word "Advice" should be uppercase.

Also it should have bigger letter spacing, like: letter-spacing: 5px.

The quotation is missing it's opening & closing quote signs - " ... "

Other then this - nice solution!

I hope you find this helpful! Cheers 🍭
Marked as helpful
0
Meenakshi K•590
@MemeenaSubmitted 8 months ago
What are you most proud of, and what would you do differently next time?
Have used useReducer hook for the state updates. Have used data attribute for light/dark theme.
What challenges did you encounter, and how did you overcome them?
Had good learning experience in understanding the useReducer hook and updating the state variables.
What specific areas of your project would you like help with?
I need help in navigating the app through keyboard.
Frontend Quiz App using useReducer hook , React JS
1
Ortaly•970
@ortalyartsPosted 7 months ago
Hey @Memeena!

Congratulations on completing the challenge!

To navigate the page with the keyboard use: Tab / Shift+Tab, Space, Arrows and Enter keys. This navigation is only available through interactive elements (a, button, input etc.).

So the easiest way to make the elements accessible via keyboard is to use the native html interactive elements, like <a> or <button>.

You used <button> elements for the question page, so I could navigate the page using the keyboard. But for the start page (when selecting the subject) you used <div><p> which are non-interactive. Why not changing it to be like the question page?

The other (less preferred!) option is to make a non-interactive element interactive. You can read more here.

Also, for better accessibility, I would suggest to group the buttons in <ul> list.

One more little bug: it looks like the paths to the icons (incorrect / correct answer) are wrong, because they don't show up.

Above this, you did a good job!

I hope you find this helpful! Cheers 🍭
0
Koda👹•3,830
@kodan96Submitted 7 months ago
Tip Calculator
1
Ortaly•970
@ortalyartsPosted 7 months ago
Hey @kodan96!

Congratulations on completing the challenge!

I have spotted one little bug: the app starts to calculate before I added/selected all the required fields, which causes it to show result as NaN. You can prevent it by adding an additional validation that will check if all the required fields are filled/selected and only then proceed to the calculation.

Also, the app should not accept "0" as value for Bill or Number of people, it causes unexpected calculations.

Above all, your solution looks really good!

I hope you find this helpful! Cheers 🍭
Marked as helpful
0
Abhradip Roy•60
@AbhraroySubmitted 7 months ago
What challenges did you encounter, and how did you overcome them?
The first challenge was how to get the current date , i found out about the date object in js and used it get over it.
What specific areas of your project would you like help with?
i need help with making the final result animative . as the user fill the day month year the final age calculate and show via animation.
Age-Calculator using Javascript
1
Ortaly•970
@ortalyartsPosted 7 months ago
Hey @Abhraroy!

Congratulations on completing the challenge!

For animating the counter of the age you can use the method explained in this article Animating Number Counters.

As for the validation, the app shouldn't allow to enter 0 or letters in the fields.

Also for better user experience, remove the red color from the labels (as in the design file) if there is no error.

I hope you find this helpful! Cheers 🍭
0
Nitesh•60
@ntshpawarSubmitted 7 months ago
What are you most proud of, and what would you do differently next time?
I made it, next time will try to take less time compared to this one.
What challenges did you encounter, and how did you overcome them?
Took some time to figure out logic which can be used to calculate difference between given dates, with proper validations.
What specific areas of your project would you like help with?
I guess there's something somewhere mistake, will be rectified soon.
Responsive Age Calculator Page using JS and Jquery
1
Ortaly•970
@ortalyartsPosted 7 months ago
Hello @ntshpawar!

Your solution is looking really good!

I found some little bugs:

If I enter a year in the future - I get an error message, but the app makes the age calculation nevertheless :) so I get a negative result. You can just add return to your function before the calculation starts if the validations fails.

If I enter a date that is in the near future (like tomorrow) I don't get any error, though I should. To solve this, as part of validation, you could check if the birthday-date is greater then the current date.

I hope you find this helpful! Cheers :)
Marked as helpful
0
Ikponmwenosa Ediagbonya•140
@rough-diamond213Submitted 7 months ago
What are you most proud of, and what would you do differently next time?
Been able to use the media query for the responsiveness of the webpage
What challenges did you encounter, and how did you overcome them?
it was not so much of a challenge but pushing my work to github and using github pages for my site to go live but thanks to the resources provided, it made the journey easy and i was able to accomplish the task.
What specific areas of your project would you like help with?
I had a little challenge when trying to center the qr-code so that it will be in the middle but if you look carefully the bottom is a little longer than the top, I tried using the margin though I didn't get the exact result I wanted but it was close to something perfect.
QR code component solution, i used html5 and css.
1
Ortaly•970
@ortalyartsPosted 7 months ago
Hallo @rough-diamond213!

Congratulations on completing the challenge!

To place the div.container perfectly in the middle (independent from the width/height of the device) I would use following:

Set the body element to min-height: 100vh; display: flex;

Set the div.container to margin:auto;

I would also recommend you to use padding for the .container instead of margins for the image.

I hope you find this helpful! Cheers :)
Marked as helpful
0
Augustine Stephen Abah•60
@ababaugSubmitted 7 months ago
What are you most proud of, and what would you do differently next time?
Frontend Mentor - QR code component solution

This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents
Note: Delete this note and update the table of contents based on what sections you keep.

Overview
Screenshot

Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it.

Alternatively, you can use a tool like FireShot to take the screenshot. FireShot has a free option, so you don't need to purchase it.

Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above.

Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.
Links
- Solution URL: [(https://github.com/ababaug/QR-code-component)]
- Live Site URL: [https://ababaug.github.io/QR-code-component/]
My process
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Styled Components - For styles
Note: These are just examples. Delete this note and replace the list above with your own choices
What I learned
I have learnt to structure and styled a website using html and css. I have learnt to use flexbox for align the contents on a web page.

To see how you can add code snippets, see below:
```
  Challenge by
  Frontend Mentor. Coded by Augustine Stephen Abah.

QR Code Component

  
    
  
  
    Improve your frontend skills by bulding projects.
    
      Scan the QR code to visit Frontend Mentor and take your coding skills to
      the next level
    
  
```
```
@import url("https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap");

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: "Outfit", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: hsl(212, 45%, 89%);
}

h1 {
  margin: 5px;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 320px;
  height: 497px;
  background-color: white;
  border-radius: 20px;
  box-shadow: 5px 10px #12041407;
}

.qr-image {
  width: 288px;
  height: 288px;
}

.qr-image img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.qr-content {
  width: 288px;
  padding: 16px;
  text-align: center;
}

.qr-content h2 {
  font-size: 22px;
  margin-bottom: 15px;
  color: hsl(218, 44%, 22%);
}

.qr-content p {
  font-size: 15px;
  color: hsl(220, 15%, 55%);
}
```
If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn more.

Note: Delete this note and the content within this section and replace with your own learnings.
Continued development
Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.

Note: Delete this note and the content within this section and replace with your own plans for continued development.
Useful resources
- Example resource 1 - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
- Example resource 2 - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.

Author
- Frontend Mentor - @ababaug
What challenges did you encounter, and how did you overcome them?
I found it very difficult to get the exact padding for the figma designs.
What specific areas of your project would you like help with?
I would like help with the interpreting figma designs to build a project.
QR Code Component
2
Ortaly•970
@ortalyartsPosted 7 months ago
Hey @ababaug!

Congratulations on completing the challenge!

As for Figma: What I use a lot is

Getting the width and heights of the objects - by just selecting the object you can see it's measures in the right panel.

Getting the distances between two objects to set them as margins - select one object, then hold option key (on Mac) and hover over the second object. The program will show you red number - it is the margin. Really useful :)

The same way you can get the paddings: select the object inside some container, hold option key and hover over the container, this will show you all the paddings from this object to the container edges.

You can also get the exact values for the shadows - select the object with the shadow > go to the "effects" panel (on the right side) > click on the sun icon next to the Drop shadow to see all the values. The effects can be applied to the group or to some object inside a group, so sometimes I have to look where it hides :)

I hope you find this helpful! Cheers :)
Marked as helpful
0
MJ Marques•40
@laladrackSubmitted 7 months ago
What specific areas of your project would you like help with?
How can I align the time div to the left?
NFT card using flexbox
1
Ortaly•970
@ortalyartsPosted 7 months ago
Hey @laladrack!

Congratulations on completing the challenge!

To your question: add justify-content: space-between; to the container (div.stuff).

Also please pay attention, that the padding-bottom: 4; has no affect as in css you have to provide the measure units (like px or rem).

I hope you find this helpful! Cheers :)
Marked as helpful
0
Saidi•70
@Selik254Submitted 7 months ago
What are you most proud of, and what would you do differently next time?
The overall design looks good. Make the color more clear.
What challenges did you encounter, and how did you overcome them?
Making the color look exactly like the design given. Making the website responsive.
What specific areas of your project would you like help with?
Responsive design.
Responsive landing page using HTML and Css
1
Ortaly•970
@ortalyartsPosted 7 months ago
Hey @Selik254!

Congratulations on completing the challenge!

I have a few suggestions:

I use this Box sizing rule which allow easy working with width when having paddings. Just paste it at the top of your CSS:

*, *::before, *::after { box-sizing: border-box; }

2.div.container - set it to:

margin:auto instead of fixed value of 50px. This will place your div in the middle of the screen.

max-width: 250px; - this will allow the container to shrink on very narrow screens. As this is the container of the image, the image will match it's width accordingly to it (if you follow the steps below).

The img element:

In html alway include alt attribute (for accessibility).

Also always include width and height in the html (this is good for the loading of the page). If you want your image to be responsive, you put the maximal value in the html (take this value from the design file) and then handle the "responsiveness" in the CSS (as described below).

In CSS set the img to max-width:100%; height: auto; This will make the image match it's container and preserve it's ratio.

float: center; is an invalid property, you don't need it.

Fonts -Try using the provided fonts ("Outfit" in this project).

It is best practice to use local fonts, meaning you upload the fonts together with the other app files to the server and use @font-face in CSS.

You can lear more about it here.

Set the body element to have the background as in the design file: body {background:#d6e1ef; }.

I hope you find this helpful! Cheers :)
0
Cryptoguy5•30
@Cryptoguy5Submitted 7 months ago
What are you most proud of, and what would you do differently next time?
I am most proud that I was able to install all of the functionality that I wanted to add to this project including adding functionality to both the enter button and spacebar.

The thing that I would do differently is that I would make sure to add a keyindex attribute at the beginning of the coding process to make sure that the app is accessible to everyone.
What challenges did you encounter, and how did you overcome them?
I encountered quite a bit of difficulty getting responsiveness from the buttons. The way that I solved it was trying to get a response of any kind from the app, and then worked to get it closer and closer to my desired action.

I also struggled to add keyboard functionality to the app as I had never done that in a project before. That challenge was overcome by doing a lot of research and trial and error.
What specific areas of your project would you like help with?
I was not able to get the min-height and max-height properties of the page to work properly. I wanted the page to expand if the user opened all of paragraphs at once, but I was not able to do this, so I just created a single set size that would work decently no matter what the FAQ height is.

Is there a way that I could get the page size to expand with the div of the FAQ? How would I do this?
FAQ-accordion-solution
2
Ortaly•970
@ortalyartsPosted 7 months ago
Hey @Cryptoguy5,

Congrats on completing the challenge!

I have a few suggestions:

I think you just don't need to specify the height for your accordion container (div.faq). If you remove min-height: 65%; (line 50) it should work just fine and adjust the height automatically according to the content.

Also for your accordion container (div.faq), it might be better to set the max-width to match the design file (i.e. max-width: 37.5rem;). This way it will not be too stretched on wide screens.

Set cursor: pointer for the div.question, so the user knows it is clickable.

Remove position: absolute from the image.plus, because it causes overlapping of text and image in narrow screens. Instead, to better arrange the div.question, try to use justify-content: space-between. This should place the h4 & the img as in the design file.

Alternatively to nr.4 (if you do need position: absolute) try adding padding-right to the div.question, so that the h4 wouldn't reach the img.

I hope you find this helpful :) Cheers!
Marked as helpful
1

Ortaly

All comments

Dictionnary app using ReactJS, CSS

Dictionary Web App | NextJS

Simple advice generator website using HTML, CSS, JS and API

Frontend Quiz App using useReducer hook , React JS

Tip Calculator

Age-Calculator using Javascript

Responsive Age Calculator Page using JS and Jquery

QR code component solution, i used html5 and css.

Frontend Mentor - QR code component solution

Table of contents

Overview

My process

Author

QR Code Component

NFT card using flexbox

Responsive landing page using HTML and Css

FAQ-accordion-solution