Latest comments

• 

  Mohammad Hojjat Mahdi zdad•10

  @hojjatmahdaveSubmitted about 2 years ago

  

  Interactive rating component

  1

  10
  

  foxynoxy•470

  @purplehippo911Posted about 2 years ago

  Hi @hojjatmahdave!

  Congratulations on completing your challenge. 🎉✨🎈

  There are some problem in your project though.

  The first and biggest one is that we can’t see your solution on Github Pages. We can only see the default readme.md-file being displayed. I recommend you to trace your steps and check how you deployed this project. You’re supposed to run npm run build to bundle the files and be able to deploy the webpage, because you’re using a framework like React.

  Here’s an article about how to deploy a react app: deployingReactApp

  I highly recommend you to try out netlify for deploying apps that needs the files to be bundled. Netlify is simple for more complex apps.

  Hope this helps. You can ask me here if there is a problem or something you need extra help with.

  happy coding! ⌨️

  0
• 

  Romain•200

  @Romainub87Submitted about 2 years ago

  

  advice generator app by Romain Cordier (French Student)

  #sass/scss#fetch

  1

  40
  

  foxynoxy•470

  @purplehippo911Posted about 2 years ago

  Hi @Romainub87! Congratulations on finishing your challenge.

  There are some things that you could fix on your solution and I’ll try to help you get started on it:

  1# Using landmarks for your HTML content

  Landmarks in HTML, also called accessibility landmarks, are HTML elements used to help users of assistive technology like screen readers quickly and accurately navigate a web page. Landmarks are usually specific to a particular purpose, like navigation, search, or main content. They are used to break up the page into logical sections and make it easier for screen readers to interpret the page structure. Using landmarks in HTML is important for making web pages accessible to people with disabilities, as it allows screen readers to quickly identify and navigate to the different sections of a page, as well as to any form controls or links within each section. Simplifying landmarks in HTML can also help optimize the performance of a website, as fewer landmarks mean less code to parse and render. For example: Instead of using this:

  
  <div class="content">
        <h1 class="id">Advice #<span id="idAdvice"></span></h1>
  
        <div class="comment">
          <p id="advice"></p>
        </div>
        <div class="separation">
          <img src="./images/pattern-divider-desktop.svg" alt="sep" class="separator">
        </div>
        <div class="diceback" id="dice">
          <img src="./images/icon-dice.svg" width="20" alt="dice" />
        </div>
      </div>
  
      <p class="dev">
        Coded by
        <a href="https://romainub87.github.io/Romain" class="lien-dev"
          >Romain Cordier</a
        >
      </p>
      <p class="challenge">
        Challenge by
        <a
          class="lien-frontend-mentor"
          href="https://www.frontendmentor.io?ref=challenge"
          target="_blank"
          >Frontend Mentor</a
        >
      </p>
  

  Use this:

  
  <main class="content">
        <h1 class="id">Advice #<span id="idAdvice"></span></h1>
  
        <div class="comment">
          <p id="advice"></p>
        </div>
        <div class="separation">
          <img src="./images/pattern-divider-desktop.svg" alt="sep" class="separator">
        </div>
        <div class="diceback" id="dice">
          <img src="./images/icon-dice.svg" width="20" alt="dice" />
        </div>
      </main>
  
  <footer>
      <p class="dev">
        Coded by
        <a href="https://romainub87.github.io/Romain" class="lien-dev"
          >Romain Cordier</a
        >
      </p>
      <p class="challenge">
        Challenge by
        <a
          class="lien-frontend-mentor"
          href="https://www.frontendmentor.io?ref=challenge"
          target="_blank"
          >Frontend Mentor</a
        >
      </p>
  
  </footer>
  

  Check out this article for more info: article1, and another one here: article2

  2# Fixing your documentation_

  Documentation is an essential part of any programming project. It allows developers to understand the design and intention of the code, as well as providing clear instructions on how to use and modify the code. Documentation also helps when debugging and troubleshooting problems, as developers can see what the code was intended to do and can quickly identify any potential issues. Finally, it helps to ensure the code is maintainable and can be easily updated and enhanced by other developers.

  So, I would advise you to delete the default README.md, because it’s only meant for you, when making the project. Use README-template.md for documenting your process and rename it to ´README.md`. You would also need to learn a bit about markdown. I recommend this simple crash course for that:mini-markdown-course

  3# Using string interpolation String interpolation allows you to write code more efficiently, as it eliminates the need to concatenate multiple strings together. It also allows you to interpolate variables and expressions into strings, which makes the code more readable. It also makes code easier to maintain, as you can easily update the variables and expressions used in the string interpolation. Placeholders are represented by a dollar sign ($) followed by a set of curly braces ({}). The placeholders are replaced by the values of variables or expressions.

  For example: Instead of this:

   advice.innerText = '" ' + data.slip.advice + ' "';
  

  Use this:

   advice.innerText = ´${data.slip.advice}´;
  

  In real life examples where you have to concatonate 2 or more variables, then string interpolation will help you a lot. Check out this webpage for more info: helpfulResource

  Other than that good job! Continue learning and growing at your own pace. Happy coding!⌨️

  Marked as helpful

  1
• 

  Neo Shao Hong•20

  @git-of-neoSubmitted over 2 years ago

  

  Responsive landing page using HTML/CSS

  2

  20
  

  foxynoxy•470

  @purplehippo911Posted over 2 years ago

  Here’s another tip I forgot to tell you

  Remember to tell the browser, the language your using on the website by adding it to the <html>-element. This makes it easier for your browser to understand what language the website is in.

  For example:

  <html lang=“en”>
  ………..
  …………
  </html>
  

  Remember to check out the errors you got in the reports made under your solution.

  0
• 

  Neo Shao Hong•20

  @git-of-neoSubmitted over 2 years ago

  

  Responsive landing page using HTML/CSS

  2

  20
  

  foxynoxy•470

  @purplehippo911Posted over 2 years ago

  Hi, @git-of-neo! Congratulations on finishing your challenge! 🧨🎉✨🎂🎈

  Now here’s some tips on how you could improve:

  #1 Removing unecessary files

  Removing unecessary files makes it much easier for yourself and other people to navigate through your repository and files. I would recommend you to remove the README-template.md and README-Given.md, because they’re unecessary and the information in those files are meant for you, when you’re trying to code the solution.

  #2 Write semantic HTML

  If you check your report here under your solution, you’d see that it says that you have many accessibility problems, because you use too many div’s. You should write semantic HTML, which means writing code that describes it’s meaning to both the browser and the developers. For example using the <footer> and <header>-elements makes much more sense than using divs for everything. When the accessibility report tells says that «all page content should be contained by landmarks», than it means that you all of the content should be contained in either a <footer>, <header> or <main>-element, to make it easier to know what part of the content does what. Here’s a website that describes semantic HTML, pretty easily: w3schools

  You did pretty good on this project, and that’s why I didn’t find too much to correct on you, but remember these useful tips in your future projects.

  Happy Coding!

  Cheers,

  Purplehippo911

  Marked as helpful

  1
• 

  Emeghiebo Chizoba•250

  @chizobaemeghieboSubmitted over 2 years ago

  

  Interactive ccomponent

  3

  70
  

  foxynoxy•470

  @purplehippo911Posted over 2 years ago

  Hey, Chizoba. Congratulations on finishing this challenge. 🎈✨🎉 Here's some small stuff that could save you time and make things easier for you:

  Active

  The rating-buttons are supposed to have an :active-selector, which is supposed to change the color when the element is hovered. Here's an example:

  main .ratings > div:active {
    background-color: white;
    color:hsl(25, 97%, 53%);
  }
  
  

  Here's an article explaining how pseudo-classes like :active and :focus work: pseudo-classes

  Variables

  Variables in css, makes things like animation and using colors much more easier. In this case you should use variables for colors, so that you can use them multiple places, but easily be able to change it, by only changing the variables value. You store the variable in the ::root-selector and put two - in front of it. Then you can use it in your element by using the var()-function. Here's an example:

  ::root {
  --lightGrey: hsl(25, 97%, 53%);
  }
  
  .example-element {
  background-color:var(--lightGrey);
  }
  
  

  Here's a simple article about it to give you more examples:cssVariables

  Cursor and transition

  I see that you're using transition on your rating-buttons, but you don't have to add it when its hovering and etc. Just add it in your element, and it will work just fine. And I would also recommend you to add a cursor-property, which changes how the style of the mouse looks like when its hovering or clicking on an element. Like this:

  main .ratings > div {
    background-color: rgba(125, 136, 153, 0.2);
    width: 15%;
    border-radius: 50%;
    padding: 0.7rem 0;
    text-align: center;
   /* this changes how the mouse looks like when this element is hovered or clicked*/
  cursor: pointer;
   / * adding the transition in the element is much more simpler */
    transition: background 0.3s ease-in;
  }
  
  

  That's all, for now. If you have any questions, then you can reply to me here.
  Happy Coding!!💻🖥⌨🖱🗿🗿

  Marked as helpful

  0
• 

  Buci•40

  @alphardhafizSubmitted over 2 years ago

  

  interactive-rating-component-main

  2

  60
  

  foxynoxy•470

  @purplehippo911Posted over 2 years ago

  Hi @alphardhafiz! Congratulations on finishing this challenge!🎈🎆✨

  Now for what you can do better:

  #Change the title of the repository

  The title of your repository doesn't really make so much sense to someone checking out your projects and it can make it difficult for you to find it back later if you all your repo names are links. So I would advice you to change your repository name to something that describes your challenge like interactive-rating, rating-card or interactive-rating-component and etc.

  #Write in your README.md

  It may look like a waste of time, but it's a good excercise to reflect and document over your projects. You should have gotten a README-template.md or something when you downloaded this challenge, which is where you were supposed to write, but you can also edit the README.md, if you've already deleted the template one. Include screenshots of how your solution looks at desktops and smaller screen sizes, talk about what you need to improve and what you were struggling with, give some information about where someone can contact you(twitter, facebook, discord etc) or where they can look more into your projects(codepen, codewars) etc.

  #3# Use the CSS var()-function

  This tip can save you some time, when using the same colors many places in your css. The css var function can store anything you want from color, font-sizes or animation-stuff. Instead of copying and pasting the same color over and over again, you can place the color in a css variable and use specify that variable instead of frequently having to remember or copy-paste the colors. Here's an example:

  /*css selector where you want to store your variable. Its common to have colors in the root so that you can access it from any part of this code. */
  
  :root {
  /* this is how it is you specify the variable with two `-` infront of the variable name of your choice and then you need a color. */
   --nameofvariable:color;
  /* this is how it actually looks like */
  --red:hsl(25, 97%, 53%);
  --main-bg:#000000;
  --lightBlue:aqua;
  }
  
  /* This is how you can apply it to your elements in css */
  
  body{
  /* PS: you need to wrap your variable in the `var`-function when you use it like you see here*/
  background-color:var(--main-bg);
  }
  
  

  To learn more about variables I would recommend you this site:css-var

  Simplifying your js

  Instead of having a function for all of the rating points, you can do this:

  
  const ratingPoint = document.getElementsByClassName("rating-point");
  const activePoint = document.getElementsByClassName("active");
  const container = document.querySelectorAll(".container");
  const submit = document.getElementById("submit");
  const illustrationImg = "images/illustration-thank-you.svg";
  const star = document.querySelector(".star");
    const tittle = document.querySelector(".tittle");
    const description = document.querySelector(".description");
    const rating = document.querySelector(".rating");
    const submit = document.querySelector(".submit");
    let value = "";
  
  ratingPoints.forEach((button) => {
          button.addEventListener('click', () => {
              value= button.textContent;
          });
      });
  
  submit.addEventListener('click', () => {
      if (value > 0) {
   const subContainer = document.createElement("div");
    subContainer.setAttribute("id", "subContainer");
    container[0].appendChild(subContainer);
  
          star.style.display = "none";
          tittle.style.display = "none";
          description.style.display = "none";
          rating.style.display = "none";
          submit.style.display = "none";
  
           let imgRating = document.createElement("img");
    imgRating.classList.add("img-rating");
    imgRating.src = illustrationImg;
    subContainer.appendChild(imgRating);
  
    let cP1 = document.createElement("div");
    cP1.classList.add("container-review");
    let pReview = document.createElement("p");
    pReview.classList.add("paragraphReview");
    pReview.innerText = `You selected ${value} out of 5`;
    cP1.appendChild(pReview);
    subContainer.appendChild(cP1);
  
    let thankText = document.createElement("h1");
    //   thankText.classList("thank-text");
    thankText.innerText = `Thank you!`;
    subContainer.appendChild(thankText);
  
    let thankP = document.createElement("p");
    thankP.innerText = `We appreciate you taking the time to give a rating. If you ever need more support, don't hesitate to get in touch!`;
    subContainer.appendChild(thankP);
  }
  });
  
  

  instead of removing and adding a class of active to the ratingPoints you can do this in your css.

  .rating-point:focus {
      background-color: hsl(216, 12%, 54%);
      color: white;
  }
  
  

  I hope that you will find this comment helpful, but if you misunderstood something or there's a problem with the code I showed you, then you can reply to me here.

  Happy coding!🖥💻

  Marked as helpful

  1