@matthew-marco
Submitted
first project with js any tips
Looking to hire developers?
@Eileenpk
@matthew-marco
Submitted
first project with js any tips
@Eileenpk
Posted
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
@Emmanuel-Xs
Submitted
After selecting a rating, I want to be able to remove it after selecting it again
@Eileenpk
Posted
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!
@jonahunuafe
Submitted
What is the best practice as regards proper identation in html?
@Eileenpk
Posted
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
@Decimo-10
Submitted
::before
pseudo-element. Should have I simply changed the background color?createActivities()
and updateText()
. 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 use fetch()
in both functions. So my question is which one is better in terms of speed/performance: deleting and creating HTML elements or the 2 fetch()
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.
@Eileenpk
Posted
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
<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.
<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
@iceberg61
Submitted
👾 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!
@Eileenpk
Posted
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:
<input type="email" name="email" id="email" placeholder="Email Address" aria-label="Email Address">
In your JS:
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
@bundasse
Submitted
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?
@Eileenpk
Posted
Hi Bundasse!
Your project looks great, and this might be a helpful tip.
To change the color of an SVG, you have to:
<img>
as the SVG file that is in another folder it won't be able to target itHTML
<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
@GHNetCode
Submitted
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. :(
@Eileenpk
Posted
Hi 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!
@borkk85
Submitted
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?
@Eileenpk
Posted
Hi 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:
<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!
Marked as helpful
@Heryoadeh
Submitted
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.
@Eileenpk
Posted
Hi 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!
@Reno08-code
Submitted
Hi lovely people one question about my code: "Why aren't my social media icons displaying?" thanks
@Eileenpk
Posted
Hi 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!
Marked as helpful
@felipetn1989
Submitted
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.
@Eileenpk
Posted
Hi 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!
Marked as helpful
@PierreFrs
Submitted
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
@Eileenpk
Posted
Hi 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 helpful
@ohuttar
Submitted
I'd love to hear your feedback on semantic HTML, accessibility, and general CSS advice. Thanks for your time!
@Eileenpk
Posted
@Ohuttar,
Every page should have some content that tells the viewer what it's about or at least some kind of context for the rest of the information on the page. After all, the purpose of a website is to relay information about something. I would pick the piece of content that best describes the page or gives the most context.
Marked as helpful
@ohuttar
Submitted
I'd love to hear your feedback on semantic HTML, accessibility, and general CSS advice. Thanks for your time!
@Eileenpk
Posted
Hi Ohuttar, your project looks great, and this might be a helpful tip.
You have
<h1 class="visually-hidden">AI-Powered Project Manager</h1>
.visually-hidden:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
Search engines use complex algorithms to evaluate web pages and determine their relevance and quality based on a variety of factors, including the content on the page, the page structure, and the links to and from the page. Using hidden text could be seen as a black-hat SEO technique and is likely to result in penalties or even a ban from search engines, which can have a significant negative impact on your website's visibility and traffic.
I recommend removing this hidden text and replacing the first <p>
tag with an <h1>
, you can then add these tags inside the <head>
tag
<title>
Four Card Feature
</title>
<meta
name="description"
content="AI-Powered Project Manager"
/>
// This is for social media
<meta
property="og:title"
content="what you want the title of the page to be on social media when
someone posts/shares"
/>
<meta
property="og:description"
content="what you want the description to be on social media when
someone posts/shares"
/>
Hope you found this helpful!
Marked as helpful
@Cyber-Borries
Submitted
Another great frontendmentor challenge done by Adriaan Bornman
For this challenge I chose to use React as a JavaScript framework
Something extra I added to the project is a loading section for the advice, I achieved this by conditionally rendering either "loading advice" or by rendering the response from the API
This whole challenge took me about an hour, the functionalibility (React) took about 10 - 15 mins to code up. I styled the app within about 15 mins, but making it responsive took me quite long
Thank you for looking at my solution, any feedback is welcome :)
@Eileenpk
Posted
Hi Adriaan! your project looks great, and I thought this might be a helpful tip.
Add error handling to your fetchAdvice function.
const fetchAdvice = async () => {
try {
const response = await fetch("https://api.adviceslip.com/advice");
const data = await response.json();
setAdvice(data.slip);
} catch (error) {
console.error(error);
}
};
Here is a link that talks more about control flow and error handling.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling
Hope you found this helpful!
Marked as helpful
@Tamana123-2
Submitted
In this project, I had problem with the image's border radius although I made it the same as expected, but the border-bottom-left and border-bottom-right were getting extra range. Any recommendation regarding to the project would be appreciated, plus I have started Java script but I do not know how to go on except from (w3schools) can you recommend me any other fun and useful source? Thanks!
@Eileenpk
Posted
Hi Tamana! your project looks great, and this might be a helpful tip.
One change to think about is formatting your code with proper code indentation and line breaks. For this project, it doesn't matter as much but it definitely will once you start on bigger projects. It really makes it much easier to read/review/debug/reference the code. I would add the Prettier extension to Vs code if that is the IDE that you are using.
Here is what the formatted HTML should look like.
<!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"
/>
<title>Frontend Mentor | QR code component</title>
<link rel="stylesheet" href="style.QR.css" />
</head>
<body>
<main>
<article class="container">
<img src="./images/image-qr-code.png" alt="" class="img-1" />
<div class="content">
<p class="first">
Improve your front-end skills by building projects
</p>
<p class="second">
Scan the QR code to visit Frontend Mentor and take your coding
skills to the next level
</p>
</div>
</article>
</main>
</body>
</html>
Also, look into Scrimba if you want to learn JavaScript, it's free and a great way to actually get practice and you have help if you need it.
Here is a link to their free courses
Hope you found this helpful!
@Victoria-Sardelli
Submitted
I would really appreciate any feedback, especially on my semantic HTML and CSS usage and how it compares to best practices.
I tried following the BEM naming conventions this time for my class names, and I also tried to use semantic HTML as appropriate.
Thank you so much for checking out my solution!
@Eileenpk
Posted
Hi Victoria! your project looks great, and this might be a helpful tip.
I would switch the <section>
and <article>
tags.
The <section> tag is used to group related content together, such as a group of paragraphs or other content that is related to a particular topic. It's essentially a way to divide content into sections for better organization and readability. The <section> tag does not imply anything about the content's meaning or importance, and it can be used for any type of content. In this case, each card would be a <section>
or a group of related content pertaining to that course.
The <article> tag is used to represent a self-contained piece of content that can be distributed or reused independently of the rest of the page. This could be a news article, blog post, product review, or any other type of standalone content. The <article> tag implies that the content is meaningful or significant in some way, and it typically includes a headline or title. With the info provided each card would not make sense if you saw it by itself. however, the group of cards together does, and so should be an <article>
Hope you found this helpful!
Marked as helpful
@waffleflopper
Submitted
Anything you find that I can improve on, please let me know! Can't get better without critique and I don't want to cement any bad habits!
Cheers!
@Eileenpk
Posted
Hi Robert! your project looks good, and this might be a helpful tip.
In your HTML, you have nested <main>
tags. It is best practice to only have one per page as screen readers and SEO uses the landmark tag to let users and bots know that this is the "main" content of the page.
Also in your JS you have
const dynamic = document.getElementById("chart");
if (dynamic) {
...
}
I think you can take out the if statement because you have hard-coded the id=dynamic in your HTML and so it will always be a true value.
Here is a link to learn more about semantic elements. https://www.w3schools.com/html/html5_semantic_elements.asp
Hope you found this helpful!
Marked as helpful
@Julio-Souto
Submitted
I used fixed heights as a way to make the image height scale with the container height instead of shrinking as the resolution of the page lowers. Would there be a way for the image to fill the containers height when height set to auto?
@Eileenpk
Posted
Hi Julio-souto, your project looks good.
To answer your question regarding how you used fixed heights, I see that you used
body{ height: 100vh; }
and percentages to set the height and width of the children's elements.
In CSS, percentages used for height and width are not considered fixed values, but rather relative to the size of the parent element.
When you use a percentage value for the height or width of an element, the size of the element is calculated based on the size of its parent element. For example, if you set the height of an element to 50%, the element will be half the height of its parent element.
This means that the size of the element can change depending on the size of its parent element. If the size of the parent element changes, the size of the child element will change proportionally.
In contrast, fixed values for height and width, such as pixels or inches, are not relative to the parent element and will not change based on the size of the parent.
Hope you found this helpful!
Marked as helpful
@Mitko90
Submitted
That's my take on this challenge.
I used mainly CSS grid and more-specifically grid-template-areas
My two questions are about the HTML:
Did I use the <header>
correctly?
I used
<main>
<section class="cards">
<div class="card"> </div>
should I have used
<main class="cards">
<section class="card"> </section>
As always a big thank you to anyone who takes time to look and correct my code.
@Eileenpk
Posted
Hi Mitko, your code looks good, you used the <header>
tag correctly as well as the <section>
tag. The <section>
tag is used to group related content together, and in this case, the group of cards is related to a specific section of the webpage, which makes sense for it to be grouped together.
One thing that to think about adding is meaningful alternative text for images: The alt attribute for the images should be filled with a meaningful description of the image, which can help with accessibility and SEO.
Hope you found this helpful!
Marked as helpful
@ravisingh8v
Submitted
GitHub Live Svg's not loading
@Eileenpk
Posted
Hi Ravisingh8v, your project looks good. The reason the SVGs aren't loading might be that you are using a relative path, and you may need to use a . in front of the / to indicate that the path is relative to the root directory of the project. For example, if you have an image file stored in the assets directory at the root of your project, you could use the following path to reference the image: ./assets/images/image.jpg.
This is because Github Pages serves the website files from the docs directory by default, and the ./ in front of the / ensures that the path is relative to the root directory of the project, rather than the docs directory.
<div class="doc"><img class="doc1" src="./images/icon-document.svg" alt=""></div>
<div class="doc"><img class="doc2" src="./images/icon-folder.svg" alt=""></div>
<div class="doc"><img class="doc3" src="./images/icon-upload.svg" alt=""></div>
Hope you found this helpful!
@Hsienz
Submitted
I spend some time on how to use tailwind styled component. It make my code so clean.
I want to ask
className={`text-${props.textColor}`}
Thank for any feekback!!
@Eileenpk
Posted
Hi Hsienz, great job on this project!
If I was going to set a dynamic className in React I would employ the useState hook. When the state should change (like onClick) set the state to the desired class.
import { useState } from 'react';
function MyComponent() {
const [className, setClassName] = useState('initial');
const handleClick = () => {
setClassName(prevClassName => prevClassName === 'initial' ? 'changed' : 'initial');
}
return (
<div>
<div className={className}>This is the div whose className will change</div>
<button onClick={handleClick}>Change className</button>
</div>
);
}
Hope you found this helpful!
@Pedro-Celeste
Submitted
Hey there! 😎👍🏻
I'm very proud of the result of this one, I made sure it is responsive to mobile phones, tablets and desktop.
But here's the thing, I feel that my font sizes are all over the place. Do you know a better way to organize the different font size values in a webpage?
Thanks!
@Eileenpk
Posted
Hi Pedro, your project looks awesome, great job!
I also had the same problem with feeling like the font sizes were all over the place in my projects (and that my CSS was just a mess in general, especially in larger projects). My solution to this problem which seems to be helping was to do a few things.
1- plan out the CSS, HTML, and JavaScript and include that plan in my README.md before I started coding anything. This helps to see what components you'll be working with and how they will interact with each other.
2- Organize the CSS like so:
The organization of the styles.css will be (in descending order):
Variables
Resets
All typography (and only typography if an element needs for example padding I will reselect it in the appropriate part of the stylesheet.)
Media query for typography
General styles
Media query for General styles
First section
Media query for the first section
Second section
Media query for the second section
Hope you found this helpful!
Marked as helpful
@Flovet-stack
Submitted
Hi there, I’m Flovet and this is my solution for this challenge. 👋
I will accept any feedback that can improve and reduce unnecessary code!
Thank you. :)
@Eileenpk
Posted
Hi Flovet, your project looks great, and this might be a helpful tip.
Using more semantic tags in your HTML will improve readability and accessibility.
For example, you can use a <main class="order-summary-card">
where you used <div class="order-summary-card">
this tells screen readers and other developers reading your code that this is the "main" content of the page.
Here is a link to a page that goes deeper into semantic HTML
https://web.dev/learn/html/semantic-html/
Hope you found this helpful!
Marked as helpful