Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions77Comments28

All comments

  • Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Great job on your project! Your effort in implementing this functionality using plain JavaScript is commendable and showcases your programming skills. It's evident that you've put thought and dedication into making it work seamlessly.

    However, I noticed that your API keys are visible in the repository. While I appreciate your transparency and openness in sharing your code, it's crucial to prioritize security. Exposing API keys in a public repository can pose a significant risk. I recommend considering a more secure approach, such as using a .env file to store sensitive information like API keys. This way, you can keep your credentials confidential and avoid any potential security issues.

    Incorporating best practices for handling sensitive information will not only enhance the security of your project but also demonstrate your commitment to producing robust and reliable code. It's a good habit to develop early on in your coding journey.

    Once again, kudos on your achievements so far! Your willingness to learn and improve is evident, and I look forward to seeing more of your impressive work in the future. Keep up the excellent work and happy coding!

    Marked as helpful

    2
  • Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

    First, let's talk about HTML 🏷. Your solution currently generates accessibility error reports, and one of the issues is that "All page content should be contained by landmarks" due to non-semantic markup. To improve the accessibility and organization of your page, I suggest wrapping the entire content (which includes multiple section elements) with the semantic element <main> in your index.html file.

    You may be wondering, what is meant by a landmark? Landmarks are used to define major sections of your page instead of relying on generic elements like <div> or <span> . They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page.

    You can check more info about landmarks in the next link landmarks

    I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

    Happy coding! 🚀

    1
  • Kem De Guzman• 210

    @kememesss

    Submitted

    Hi there! I’m Kem and this is my solution for this challenge.

    Any suggestions on how I can improve and reduce unnecessary code are welcome! Thank you.

    testimonials-grid-section-main

    1

    Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

    First, let's talk about HTML 🏷. Your solution currently generates accessibility error reports, and one of the issues is that "All page content should be contained by landmarks" due to non-semantic markup. To improve the accessibility and organization of your page, I suggest wrapping the entire content (which includes multiple section elements) with the semantic element <main> in your index.html file.

    You may be wondering, what is meant by a landmark? Landmarks are used to define major sections of your page instead of relying on generic elements like <div> or <span> . They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page.

    You can check more info about landmarks in the next link landmarks

    The issue "Images must have alternate text" is related to web accessibility guidelines. Specifically, it's related to the Web Content Accessibility Guidelines (WCAG), which are a set of guidelines designed to make web content more accessible to people with disabilities.

    To fix this issue, you should add an alt attribute to the <img> element and provide a brief, descriptive text alternative that conveys the purpose of the image.

    I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

    Happy coding! 🚀

    Marked as helpful

    1
  • P
    Allan Martinez• 200

    @allmtz

    Submitted

    Hello everyone, here is my solution to the Pomodoro timer.

    I turned it into a full-stack app that uses Firebase for authentication and Firestore for the database. I added a task tracking feature the lets you create tasks and track how many Pomodoros you've spent on each task. I'd appreciate any feedback and suggestions for improvements!

    Fullstack Pomodoro App. Firestore + React + Tailwind + Typescript

    #firebase#tailwind-css#typescript#react

    1

    Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

    First, let's talk about HTML 🏷. Your solution currently generates accessibility error reports, and one of the issues is that "All page content should be contained by landmarks" due to non-semantic markup. To improve the accessibility and organization of your page, I suggest wrapping the entire content (which includes multiple section elements) with the semantic element <main> in your index.html file.

    You may be wondering, what is meant by a landmark? Landmarks are used to define major sections of your page instead of relying on generic elements like <div> or <span> . They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page.

    You can check more info about landmarks in the next link landmarks

    I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

    Happy coding! 🚀

    1
  • daniel-howorth• 110

    @daniel-howorth

    Submitted

    Help! Lots of questions arose when completing this challenge!

    1. Why don't two divs fit inside a parent div when I set their widths to 50%? I thought they would both take up half the space and fit side-by-side but they didn't. Instead, one would wrap.

    2. I have a main card with a left pane and a right pane. I set the position of one

    pane div to absolute, thinking it would overlap the other as it had been taken out of the main flow of the page, but it didn't. Why is this?

    1. How do I use the weights in the style guide?

    2. Am I using too many classes to style individual elements? Any feedback/advice on how to avoid this? How do I fine tune elements without creating too many classes?

    3. Is it better to use position or margin to position elements?

    Any other feedback is welcome and appreciated!

    Results Summary using Flexbox and Barebones CSS

    1

    Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

    Why don't two divs fit inside a parent div when I set their widths to 50%? When you use position: absolute, the child div is taken out of the normal document flow and positioned relative to the nearest positioned ancestor. This means that it is disengaged from the parent div's width, and will no longer take up space within it. As a result, even if you set the width of the second div to 50%, it will take up all the available width because it is the only child div in the parent.

    To visualize this, you can think of the parent div as having only one child div that is positioned absolutely. In this case, the child div would take up all the available space within the parent div, just like the second div does when it is positioned absolutely.

    How do I use the weights in the style guide? You can use CSS_CustomProperties and create classes with similar properties and shared across necessary items.

    Is it better to use position or margin to position elements?

    margin is used to create space around an element, either inside or outside its border, and can be used to position elements relative to their containing block. It is generally recommended to use margins for simple layout adjustments and positioning, such as adding space between elements or centering an element within its parent container. Margins do not affect the layout of other elements, and are often used to create white space or breathing room in the design.

    position is used to position an element relative to its containing block, or relative to the viewport. There are several values for the position property, including static, relative, absolute, fixed, and sticky. Using position: absolute or position: fixed allows an element to be taken out of the normal document flow, and positioned precisely anywhere on the page, even overlapping other elements. This is often useful for creating complex layouts, such as overlays, modals, or fixed navigation bars.

    In general, it's recommended to use margins for simple layout adjustments, and use positioning when more complex layout needs arise.

    I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

    1
  • Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

    Let's talk about HTML 🏷. Your solution currently generates accessibility error reports, and one of the issues is that Buttons must have discernible text Typically appears when a button element in HTML does not have text or has text that is not meaningful or understandable to users.

    Buttons are an important interactive element on web pages, and they should be designed in a way that allows users to understand their purpose and function without relying solely on visual cues. Providing meaningful and descriptive text on buttons is one way to achieve this goal.

    More info Buttons

    I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

    0
  • Kamilek• 170

    @Kamilbd

    Submitted

    I would like to know how I can change the fill in svg because when I was looking for an answer, it popped up that it is not possible either through the css filler. Such beginnings are generally acceptable?

    article-preview-component-master

    #animation#jss#sass/scss

    2

    Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

    Let's talk about HTML 🏷. Your solution currently generates accessibility error reports, and one of the issues is that Buttons must have discernible text Typically appears when a button element in HTML does not have text or has text that is not meaningful or understandable to users.

    Buttons are an important interactive element on web pages, and they should be designed in a way that allows users to understand their purpose and function without relying solely on visual cues. Providing meaningful and descriptive text on buttons is one way to achieve this goal.

    More info Buttons

    I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

    Marked as helpful

    0
  • Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

    Let's talk about HTML 🏷. Your solution currently generates accessibility error reports, and one of the issues is that <html> element must have a lang attribute

    The "lang" attribute in HTML specifies the language of the document. It is important for search engines and screen readers to accurately interpret and display the content.

    It is recommended to include the "lang" attribute in the HTML element of every web page, even if the language is English. This helps ensure that the page is accessible to a wider audience, including those who rely on assistive technology or machine translation.

    More info LangTag

    I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

    Marked as helpful

    0
  • Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

    First, let's talk about HTML 🏷. Your solution currently generates accessibility error reports, and one of the issues is that "All page content should be contained by landmarks" due to non-semantic markup. To improve the accessibility and organization of your page, I suggest wrapping the entire content (which includes multiple section elements) with the semantic element <main> in your index.html file.

    You may be wondering, what is meant by a landmark? Landmarks are used to define major sections of your page instead of relying on generic elements like <div> or <span>. They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page.

    You can check more info about landmarks in the next link landmarks

    I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

    Happy coding! 🚀

    0
  • Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

    First, let's talk about HTML 🏷. Your solution currently generates accessibility error reports, and one of the issues is that "All page content should be contained by landmarks" due to non-semantic markup. To improve the accessibility and organization of your page, I suggest wrapping the entire content (which includes multiple section elements) with the semantic element <main> in your index.html file.

    You may be wondering, what is meant by a landmark? Landmarks are used to define major sections of your page instead of relying on generic elements like <div> or <span> . They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page.

    You can check more info about landmarks in the next link landmarks

    The issue "Images must have alternate text" is related to web accessibility guidelines. Specifically, it's related to the Web Content Accessibility Guidelines (WCAG), which are a set of guidelines designed to make web content more accessible to people with disabilities.

    To fix this issue, you should add an alt attribute to the <img> element and provide a brief, descriptive text alternative that conveys the purpose of the image.

    I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

    Happy coding! 🚀

    0
  • Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

    First, let's talk about HTML 🏷. Your solution currently generates accessibility error reports, and one of the issues is that "All page content should be contained by landmarks" due to non-semantic markup. To improve the accessibility and organization of your page, I suggest wrapping the entire content (which includes multiple section elements) with the semantic element <main> in your index.html file.

    You may be wondering, what is meant by a landmark? Landmarks are used to define major sections of your page instead of relying on generic elements like <div> or <span> . They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page.

    you can check more info about landmarks in the next link landmarks

    I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

    Happy coding! 🚀

    0
  • Jhef• 50

    @imjheef

    Submitted

    • Which areas of your code are you unsure of?

    The layout of the page and the media query

    • What did you find difficult while building the project?

    Working with the <img> and styling and @media query

    Responsive Product card

    1

    Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

    I did notice some overflowing within screens below 375px but pretty much well done awesome work, very clean coding love you use css variables keep it going. maybe adding some padding to the card will fix it. always test your apps under 320px minim screen width since some people may have lower screens.

    I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

    Happy coding! 🚀

    Marked as helpful

    0
  • Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

    First, let's talk about HTML 🏷. Your solution currently generates accessibility error reports, the error message "Page should contain a level-one heading" is related to web accessibility guidelines. Specifically, it's related to the Web Content Accessibility Guidelines (WCAG), which are a set of guidelines designed to make web content more accessible to people with disabilities.

    To fix this error, you should add an <h1> element to your page and use it to provide a clear and descriptive main heading that summarizes the content of your page. This will not only improve the accessibility of your page, but it will also help all users to understand and navigate your content more easily.

    I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

    Happy coding! 🚀

    1
  • Jose Chaparro• 455

    @jchapar

    Submitted

    First time using React. Still a lot to learn to make this component fully functional. Will continue working on this as I continue to learn React. Any feedback would be greatly appreciated!

    Mobile First Card Component using React

    #react

    1

    Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

    First, let's talk about HTML 🏷. Your solution currently generates accessibility error reports, and one of the issues is that "All page content should be contained by landmarks" due to non-semantic markup. To improve the accessibility and organization of your page, I suggest wrapping the entire content (which includes multiple section elements) with the semantic element <main> in your index.html file.

    You may be wondering, what is meant by a landmark? Landmarks are used to define major sections of your page instead of relying on generic elements like <div> or <span> . They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page.

    I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

    Happy coding! 🚀

    Marked as helpful

    0
  • Diyorbek• 330

    @diyorbek-alikuziev

    Submitted

    Hayrli kun dasturchilar! Bu mening navbatdagi loyiham, bu loyihamni tokomillashtirish maqsadida men uchun har qanday maslahat berishingizni so'rab qolar edim, bu mening o'sishim uchun yordam beradi degan umiddaman.

    Hammaga omad.

    expenses-chart-component

    #accessibility#jquery#sass/scss

    2

    Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    I have other recommendations regarding your code that I believe will be of great interest to you. .

    HTML 🏷️:

    This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to non-semantic markup, which lack landmark for a webpage So fix it by wrapping the whole content ( multiple section elements ) with the semantic element <main> element in your index.html file to improve accessibility and organization of your page.

    What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span> They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page

    When used as links, link text and alternative text for images must be recognizable by screen readers, have no duplicate labels, and be focusable. you can check more information here Links Info

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful

    0
  • Francis Macaspac• 170

    @francismcpc

    Submitted

    This is my first project in frontend mentor, it was fun doing this challenge hoping to learn more and keep refining my designs and skills

    QR-Code Challenge

    2

    Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    This comment was deleted

    0
  • Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    I have other recommendations regarding your code that I believe will be of great interest to you. .

    HTML 🏷️:

    This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to non-semantic markup, which lack landmark for a webpage So fix it by wrapping the whole content ( multiple section elements ) with the semantic element <main> element in your index.html file to improve accessibility and organization of your page.

    What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span> They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page

    Img should always have an alternative property, also known as alt text, to provide a textual description of the image for users who cannot see the image you can have more information here W3School

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    0
  • Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Hello John Good job on completing the challenge ! I have some feedback for you if you want to improve your code.

    HTML:

    Use the <main> tag to wrap all the main content of the page instead of the <div class="container"> tag. With this semantic element you can improve the accessibility of your page.

    You can use an </hr> instead of and img on line 32-34 index.html

    Javascript:

    Function randomNum takes to two parameters but you dont pass those instead you defined in the body of the function remove the parameters and change the function like this

    function randomNum() {
    let min = 1;
    let max = 224;
    return Math.floor(Math.random() * (max - min + 1) + min);
}

    Instead of repeat yout code you can just create a function that fetch the data and jus call it with the randomNumber like fetchData(randomNum()) as well use template strings on your url string you can read more about it here Template_literals

    const fetchData = (ranNum) => {
fetch(
    `https://api.adviceslip.com/advice/${ranNum}`

).then(response => {
    return response.json();
}).then(adviceData => {
    const adviceObj = adviceData.slip;
    id.innerText = adviceObj.id;
    id.style.letterSpacing = '3rem;';
    advice.innerText = '"' + adviceObj.advice + '"';
    advice.style.fontWeight = '900';
    advice.style.fontSize = '1.8rem';
}).catch(error => {
    console.log(error);
});
}


I hope you find it useful! 😄

Happy coding!

    Marked as helpful

    1
  • Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Hola Dani Felicidades por tu solucion espero ayudar con mis comentarios , usar scss excelente me encanto ese detalle

    1. Utiliza en tu reset de *{} box-sizing:border-box esto ayudara a que el padding y el contenido se sume para tener medidas mas exactas , puedes ver que tu card es un poco mas grande a la del diseno original. Puedes ver mas al respecto en box-sizing
    2. Puedes borrar <header></header> si no tiene contenido no hay problema.

    Aun asi EXCELENTE TRABAJO sigue asi !

    Marked as helpful

    2
  • Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Hello John, You have done a good work! 😁

    Some little tips to improve your code:

    • Add main tag and wrap the main content of the page for improve the Accessibility
    • add descriptive text in the alt attribute of the images
    • add transition on the element with hover effect Keep learning how to code with your amazing solutions to challenges.

    Hope this help 😉 and Happy coding!

    1
  • Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Hello, excellent work I liked your solution, I would like to give you some feedback

    1. Enclose your main content in a <main></main> tag
    2. Instead of having your application src/assests/componentets , I would suggest using src/sections , since they are sections and not components example of is a testimonial card.
    3. Since you use typescript try to be more descriptive in the name of the properties and add the type when you are making a map.
    4. Instead of just using <divs> try using <section> so it's more accessible
    5. Use .ts instead of tsx when you are not rendering HTML
    6. Will be better to store yout data in src/utils/data.ts not tsx since your not rendering html

    amazing work keep it up!!!

    Marked as helpful

    1
  • Amrit Rijal• 20

    @AmritRijal-cpp

    Submitted

    Q: What did you find difficult while building the project? A: Centralizing the #main id was hard.

    Q: Which areas of your code are you unsure of? A: CSS code of centralizing the QR image. I moved the image with relative positioning and I think there is a better way to do it.

    Q: Do you have any questions about best practices? A: What will be the best practice for a responsive website?

    Responsive page using css

    4

    Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Hello Amrit, You have done a good work! 😁

    Some little tips to improve your code:

    add main tag and wrap the main content of the page for improve the Accessibility add descriptive text in the alt attribute of the images

    instead of using px use relative units of measurement like rem -> read here Keep learning how to code with your amazing solutions to challenges.

    Hope this help 😉 and Happy coding!

    Marked as helpful

    1
  • Ting-Huei Chen• 160

    @hejkeikei

    Submitted

    Any feedback will be much appreciated :)

    How I did it:

    • I loop through all the radio button and pass the iterative object to query selector to dynamically get the option that user select.
    • Get user's input value when the submit button have been click on then show it in DOM.

    Question: I would like to try to go with object oriented way such as event target to select an element in the group so that I don't have to write loops all the time. If anyone know please tell me I'll be super thankful.

    Interactive rating component solution -- Radio Buttons with Plain JS

    2

    Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Hello, You can try using git repository and upload your page to Github pages your code looks great overall but just that little comment, GitHub will allow you to allocate all you projects and applications with a free hosting https://pages.github.com/ its very easy to upload just create a branch with the name gh-pages and GitHub will automatic upload your pages ,

    Marked as helpful

    0
  • Kim• 320

    @Mismisty

    Submitted

    I welcome all feedback so please take a look at my code and tell me what you think. Also, I have trouble with the mobile responsiveness. Can someone tell me what I'm doing wrong?

    Huddle landing page with Flexbox and CSS

    2

    Carlos Damian Perez• 1,810

    @caarlosdamian

    Posted

    Awesome work !!!! looking very sharp congratulations, just some little comments, go to your report and check that you missing you alt attributes on your <img alt='somthing'/> tags this help the browser on getting more information an gain more accessibility to the end-user overall good job keep it pushing

    0