first project with js any tips
Eileen dangelo
@EileenpkAll comments
- @matthew-marcoSubmitted over 1 year ago@EileenpkPosted over 1 year ago
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");
tolet selectedRating = document.querySelector(".numrate");
Other than that your code is awesome, keep up the good work!!
Hope you found this helpful!
- Let's connect on LinkedIn! - @Eileenpk
Marked as helpful1 - @Emmanuel-XsSubmitted over 1 year ago
After selecting a rating, I want to be able to remove it after selecting it again
@EileenpkPosted over 1 year agoHi 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 theratingsContainer.addEventListener()
to avoid creating a new event listener every time a rating is clicked.Hope you found this helpful!
- Let's connect on LinkedIn! - @Eileenpk
1 - @jonahunuafeSubmitted over 1 year ago
What is the best practice as regards proper identation in html?
@EileenpkPosted over 1 year agoHi 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!
- Let's connect on LinkedIn! - @Eileenpk
Marked as helpful0 - @Decimo-10Submitted over 1 year ago
- How can I change the color of an svg image?
- If an element, in this case the svg image(3 point) has a hover state, and it's container also has one, can you make it so when you hover directly on the svg image only the image's hover state is active and it's container's isn't?
- When you hover over an activity(work, play, etc.) and it gets "lighter", I implemented that with a
::before
pseudo-element. Should have I simply changed the background color? - For the first time in the JS script I created the HTML elements and gave them their text content - based on the JSON file - in one function, but later I seperated them into two:
createActivities()
andupdateText()
. In the first version I would have had to delete the HTML elements then create new ones when you wanted to view another period's stats. In the new version I have to usefetch()
in both functions. So my question is which one is better in terms of speed/performance: deleting and creating HTML elements or the 2fetch()
or if there is better method for it?
Thank you for the feedback, and if you have any insight or suggestion even if it's not related to my questions I greatly appreciate that too.
@EileenpkPosted over 1 year agoHi 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 helpful1 - @iceberg61Submitted over 1 year ago
👾 Hello, Frontend Mentor coding community.
This is my solution for the Base-Apparel-coming-soon-page challenge.
Problem: Well yes I know you seen the JS file😂. It looks horrible right. if you could give me any resources to help me understand form validation that will be great.
Ill be happy to hear any feedback and advice!
@EileenpkPosted over 1 year agoHi 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!
- Let's connect on LinkedIn! - @Eileenpk
Marked as helpful1 - @bundasseSubmitted over 1 year ago
I have trouble changing SVG file colors with CSS. I'm going to look for more articles from now on, but Is there any free lecture or articles about control SVG files with CSS?
@EileenpkPosted over 1 year agoHi 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!
- Let's connect on LinkedIn! - @Eileenpk
Marked as helpful0 - Put the SVG code directly into the HTML, if you put the src of the
- @GHNetCodeSubmitted over 1 year ago
At first this looked straight forward however there were issues with ordering the elements (testimonial cards) using flexbox. So resorted to dividing the Cards up into separate groups into their respective classes to get them into the right position. Due the nature of how flexbox works where it just uses "Row""Column".. No JS on this one unfortunately. :(
@EileenpkPosted over 1 year agoHi GHNetCode! your project looks great, and this might be a helpful tip.
I'm not sure if I understand the problem that you were having with ordering the elements (testimonial cards) using flexbox. But what I think you mean is that you wanted to reorder the flex items. To do this with flexbox you can use the order property
<div class="box"> <div><a href="#">1</a></div> <div><a href="#">2</a></div> <div class="active"><a href="#">3</a></div> <div><a href="#">4</a></div> <div><a href="#">5</a></div> </div>
.box { display: flex; flex-wrap: wrap; flex-direction: row; } .active { order: -1; flex: 1 0 100%; }
Here is a link that goes into more about Flexbox - flexbox
Hope you found this helpful!
- Let's connect on LinkedIn! - @Eileenpk
0 - @borkk85Submitted over 1 year ago
This was a tough one, for the life of me, I couldn't get to make the counter svg's active... Any suggestion with that?
@EileenpkPosted over 1 year agoHi Borko, your project looks great!
In regards to you getting the counters SVGs active (I'm guessing on hover?) I have sent you a pull request on GitHub so that you can see the changes I've made better.
In short, the only way that I know of to change the fill of an SVG is to:
- Put the SVG directly in your code.
- Add a class name to the SVG
- In CSS selector should target the class of the SVG on hover and then the path
- Add property name fill to the declaration block
- The value should be the color you want the SVG to be.
<svg alt="plus-icon" class='plus' width="11" height="11" xmlns="http://www.w3.org/2000/svg"><path d="M6.33 10.896c.137 0 .255-.05.354-.149.1-.1.149-.217.149-.354V7.004h3.315c.136 0 .254-.05.354-.149.099-.1.148-.217.148-.354V5.272a.483.483 0 0 0-.148-.354.483.483 0 0 0-.354-.149H6.833V1.4a.483.483 0 0 0-.149-.354.483.483 0 0 0-.354-.149H4.915a.483.483 0 0 0-.354.149c-.1.1-.149.217-.149.354v3.37H1.08a.483.483 0 0 0-.354.15c-.1.099-.149.217-.149.353v1.23c0 .136.05.254.149.353.1.1.217.149.354.149h3.333v3.39c0 .136.05.254.15.353.098.1.216.149.353.149H6.33Z" fill="#C5C6EF"/></svg> <span class="counter">${comment.score}</span> <svg alt="minus-icon" class='minus' width="11" height="3" xmlns="http://www.w3.org/2000/svg"><path d="M9.256 2.66c.204 0 .38-.056.53-.167.148-.11.222-.243.222-.396V.722c0-.152-.074-.284-.223-.395a.859.859 0 0 0-.53-.167H.76a.859.859 0 0 0-.53.167C.083.437.009.57.009.722v1.375c0 .153.074.285.223.396a.859.859 0 0 0 .53.167h8.495Z" fill="#C5C6EF"/></svg>
.plus:hover path, .minus:hover path { fill: var(--Moderate-blue); }
Hope you found this helpful!
- Let's connect on LinkedIn! - @Eileenpk
Marked as helpful0 - @HeryoadehSubmitted over 1 year ago
I had a lot of fun and learned a lot while working on this project. I had some difficulty implementing the toggle functionality to the mobile Nav because I am new to the javascript world. I'd appreciate any resources for learning javascript.
@EileenpkPosted over 1 year agoHi Heryoadeh! your project looks great.
A great and free resource to learn JavaScript is Scrimba, they have interactive tutorials where you watch the teacher code live and can pause and write your own code right inside the workspace. I used it to learn JavaScript, React, and a bunch of other skills I now use all the time- I can't recommend it enough!
Here is a link to their website Scrimba
Hope you found this helpful!
- Let's connect on LinkedIn! - @Eileenpk
1 - @Reno08-codeSubmitted over 1 year ago
Hi lovely people one question about my code: "Why aren't my social media icons displaying?" thanks
@EileenpkPosted over 1 year agoHi Reno08-code! your project looks great, and the social icons might not be displaying because the Font Awesome icon library has not been properly linked to the HTML file. To use Font Awesome icons, you need to link the Font Awesome stylesheet to your HTML file in the head section. Here's how you can do it:
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" /> </head>
This code will link the Font Awesome stylesheet from the CDN (Content Delivery Network) to your HTML file.
Hope you found this helpful!
- Let's connect on LinkedIn! - @Eileenpk
Marked as helpful0 - @felipetn1989Submitted over 1 year ago
This project has a lot of things happening when choosing the rewards, so it was a good practice of JavaScript. I added lines of code to change the total backed value, number of backers, size of the progress bar, pledges left. The user can choose a default pledge value or input a value of his / her choice. Whenever the number of pledges left reaches zero, the corresponding divs become unavailable for the user to choose. One problem I had earlier on my code was when I was trying to remove the click event listener when a pledge became unavailable. At first, I was trying to invoke an anonymous function that in turn would call the function to display the correct page. Later, I couldn't remove the event listener because a new anonymous function was being created everytime I clicked on the button and because of that I could't target it for removal. I solved this issue by associating the event listener function with the .available_button and .unavailable_button classes instead of the button index. I created a function that would check which buttons were available and asign click events to them only. This function is called everytime one of the continue buttons is pressed to make sure the unavailable buttons are not clickable anymore.
@EileenpkPosted over 1 year agoHi Felipe,
Your project looks really good, awesome work!
In regards to removing the event listener when the number of pledges left is zero, did you try
EventTarget.removeEventListener()
? I think it might be a good way to simplify your code.Here is a link that talks about it more - removeEventListener
Hope you found this helpful!
- Let's connect on LinkedIn! - @Eileenpk
Marked as helpful0 - @PierreFrsSubmitted over 1 year ago
Hi, I submit my solution but I am not able, for some reason, to make the "submit" button work. Any advice on this ? I've read my code over and over but I am not able to find the problem... Thanks
@EileenpkPosted over 1 year agoHi Pierre,
I sent a pull request to your project on GitHub with the changes made, I see that other people have already answered your question and helped you debug, but I wanted to let you know to look on GitHub if you wanted to practice pull requests and merging.
Hope this was helpful!
Marked as helpful0