Skip to content
OverviewSolutions
25
Comments
79

Eileen dangelo

@EileenpkN.J.1,600 points

I am a versatile front-end developer with a specialty in React JS. I also have a solid grip on the fundamentals of web development using HTML, CSS, and JavaScript. And most importantly… I LOVE learning new technologies!

I’m currently learning...

GraphQL, Next.js, and Bootstrap.

Latest solutions

View more solutions

Latest comments

  • Eileen dangelo•1,600
    @Eileenpk

    Hi Matthew!

    Your project looks great, it seems like you put a lot of hard work into it.

    I thought this might be a helpful tip.

    Consider your naming conventions. If you had never seen this code before would you know right away without looking at the HTML what p (in the JavaScript) was? It takes time to think of very descriptive names for things, but it's worth trying to write code with the knowledge that out in the wild ( and in a professional setting) more time will be spent reading, and editing it than the initial writing of the code. Anything we can do to make it easier for the next dev on the project should be done.

    For example, I would change let p = document.querySelector(".numrate"); to

    let selectedRating = document.querySelector(".numrate");

    Other than that your code is awesome, keep up the good work!!

    Hope you found this helpful!

    Marked as helpful
  • Eileen dangelo•1,600
    @Eileenpk

    Hi Emmanuel! your project looks really good, I love how you used gsap for the animation, it was a really nice touch.

    To be able to remove the active class if a rating is already selected add this code

    ratingsContainer.addEventListener("click", (e) => {
	if (!e.target.matches(".rating")) return

	// Check if the clicked rating button already has the "active" class
	let alreadyActive = e.target.classList.contains("active")

	ratings.forEach((rating) => rating.classList.remove("active"))

	// If the clicked rating button was already active, remove the "active" class and return
	if (alreadyActive) return

	let selectedRating = e.target
	selectedRating.classList.add("active")
	let selectedRatingValue = selectedRating.textContent

	// Rest of the code...
})

    Also, consider moving the button.addEventListener() outside the ratingsContainer.addEventListener() to avoid creating a new event listener every time a rating is clicked.

    Hope you found this helpful!

  • Eileen dangelo•1,600
    @Eileenpk

    Hi Jonah, your project looks great.

    Proper indentation in HTML is important for the readability and maintainability of code. The most widely accepted convention for indentation in HTML is to use two or four spaces for each level of indentation. If you are using VS Code then I would recommend installing the Prettier extension, it works like a charm!

    Here is what your code should look like properly indented.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <title>Frontend Mentor | CHAT-APP-CSS-ILLUSTRATION</title>
  </head>
  <body>
    <main>
      <div class="top-curve"></div>
      <div class="phone-container">
        <div class="ear-piece"></div>
        <div class="samuel-arc">
          <i class="fa fa-angle-left" style="font-size: 20px"></i>
          <img class="avatar" src="images/avatar.jpg" alt="an avatar" />
          <span class="green">Samuel Green</span>
          <span class="walk">Available to Walk</span>
          <i class="fa fa-ellipsis-v"></i>
        </div>
        <div class="phone-enclosure">
          <div class="left-chart-1">
            <p>That sounds great. I'd been happy to discuss more.</p>
          </div>
          <div class="left-chart-2">
            <p>Could you send some pictures of your dog, please?</p>
          </div>
          <div class="animals">
            <img
              class="dog-1"
              src="images/dog-image-1.jpg"
              alt="a dog with mouth open wide"
            />
            <img
              class="dog-2"
              src="images/dog-image-2.jpg"
              alt="a dog lying down"
            />
            <img
              class="dog-3"
              src="images/dog-image-3.jpg"
              alt="a dog with stick in its mouth"
            />
          </div>
          <div class="right-chart-1">
            <p>Here are a few pictures. She's a happy girl!</p>
          </div>
          <div class="right-chart-2">
            <p>Can you make it?</p>
          </div>
          <div class="left-chart-3">
            <p>
              She looks so happy! The time we discuss works. How long shall I
              take her out for?
            </p>
          </div>
          <div class="thirty-min">
            <i class="fa fa-circle-thin" style="font-size: 25px"></i>
            <span>30 minute walk</span><span id="twenty-nine">$29</span>
          </div>
          <div class="one-hour">
            <i
              id="second-circle"
              class="fa fa-circle-thin"
              style="font-size: 25px"
            ></i>
            <span id="an-hour-walk">1 hour walk</span
            ><span id="forty-nine">$49</span>
          </div>
          <div class="button">
            <span>Type a message...</span>
            <div class="black-dot">
              <i
                id="dot-angle-right"
                class="fa fa-angle-right"
                style="font-size: 25px"
              ></i>
            </div>
          </div>
        </div>
      </div>
      <div class="booking">
        <h1>Simple booking</h1>
        <p>
          Stay in touch with our dog walkers through the chat interface. This
          makes it easy to discuss arrangements and make bookings. Once the walk
          has been completed you can rate your walker and book again all through
          the chat.
        </p>
      </div>
      <div class="bottom-curve"></div>
    </main>
  </body>
</html>

    Hope you found this helpful!

    Marked as helpful
  • Eileen dangelo•1,600
    @Eileenpk

    Hi Decimo,

    Your project looks good, your JS is very readable.

    If you want to change the color of an SVG in a file just to reuse it and have it be for example red instead of white change the fill property in the SVG file.

    To change the color of an SVG on hover you have to:

    Put the SVG code directly into the HTML, if you put the src of the <img> as the SVG file that is in another folder it won't be able to target it

    • Add a class in the beginning tag of the SVG
    • In the CSS the selector should be the class name and then the path
    • The property name should be fill for the background of the SVG and stroke for the outline HTML
    <svg
            aria-labelledby="Facebook"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            class=socialIcon >
             <title id="Facebook" lang="en">Facebook icon</title>
            <path
              fill="#FFF"
              d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"
            />
          </svg>

    CSS

     .socialIcon:hover path {
      cursor: pointer;
      fill: var(--second-color);
    }

    To make it so when you hover directly on the svg image only the image's hover state is active and its container's isn't use the CSS pointer events property.

    • Set the pointer-events property of the container to none
    • Set it to auto for the SVG image element.
    <div class="container">
  <svg class="image" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="red" />
  </svg>
</div>

    .container {
  background-color: gray;
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  pointer-events: none; /* set pointer-events to none */
}

.image {
  height: 100px;
  width: 100px;
  pointer-events: auto; /* set pointer-events to auto for the SVG image */
}

.image:hover {
  fill: blue;
}

    When you hover over an activity(work, play, etc.) I think using the ::before pseudo-element is fine, :hover might be a little simpler but you could go either way.

    I think you did the right thing with the separation of the fetch functions with the way you approached the JS. You have a for loop in both, (loops are slow) if you had put them both into one, when one of the btns were clicked the createActivities text would be running for no reason.

    Hope you found this helpful!

    Let's connect on LinkedIn! - @Eileenpk

    Marked as helpful
  • Eileen dangelo•1,600
    @Eileenpk

    Hi Godstime! your project looks good.

    Forms were hard for me too when I started, and validation can get messy. Here are a few things I see that might help.

    In your HTML:

    • Add an aria-label to the email input for accessibility
    <input type="email" name="email" id="email" placeholder="Email Address" aria-label="Email Address">

    In your JS:

    • Change the event listener to use input event instead of click, this will fire every time the input field changes
    • Add or remove classes instead of manipulating them
    • Check for an empty input before checking for a pattern match, currently if I try to submit the form with an empty email input, no error is shown
    email.addEventListener('input', validateEmail);

function validateEmail() {
  if (email.value.trim() === '') {
    paragraph.innerHTML = 'Please provide an email';
    email.classList.remove('bg-form');
    error.src = '';
  } else if (!email.value.match(patterns)) {
    paragraph.innerHTML = 'Please provide a valid email';
    email.classList.add('bg-form');
    error.src = '../images/icon-error.svg';
  } else {
    paragraph.innerHTML = 'Please submit the email';
    email.classList.remove('bg-form');
    error.src = '';
  }
}

    Hope you found this helpful!

    Marked as helpful
  • Eileen dangelo•1,600
    @Eileenpk

    Hi Bundasse!

    Your project looks great, and this might be a helpful tip.

    To change the color of an SVG, you have to:

    • Put the SVG code directly into the HTML, if you put the src of the <img> as the SVG file that is in another folder it won't be able to target it
    • Add a class the the beginning tag of the SVG
    • In the CSS the selector should be the class name and then the path
    • The property name should be fill for the background of the SVG and stroke for the outline

    HTML

    <svg
            aria-labelledby="Facebook"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            class=socialIcon >
             <title id="Facebook" lang="en">Facebook icon</title>
            <path
              fill="#FFF"
              d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"
            />
          </svg>

    CSS

     .socialIcon:hover path {
      cursor: pointer;
      fill: var(--second-color);
    }

    Hope you found this helpful!

    Marked as helpful
View more comments