@joshdail
@astr0n0mer
Submitted
position: absolute for placing the 185 GB left pop-up. Please let me know if there would be a different approach.<h1> to enclose the logo and name of the card (Fylo) even though it's an image, and we don't have a heading in the component.@joshdail
Posted
Really nice job on this project. I also used absolute for getting the pop-up to work. It looks like your solution scales properly when the screen size changes, so I don't see any problem with it being absolutely positioned since it works and displays correctly.
As far as whether to use h1 or img tag, I think that using an img tag, like you did, is better since an h1 tag is meant to be used for actual text. And you have the alt text for the image, so that takes care of the accessibility for the image. On a full website or app you would probably have an h1 somewhere else on the screen, but since this project is just a component I wouldn't worry about the h1 warning.
Also really nice job making the buttons focusable and keyboard accessible!
Marked as helpful
@kxnzx
Submitted
Hello Frontend Mentor Gang!
It took me some time to finish this challenge. The calculator works, however the form does not function the way I want it to. Here are some of the issues:
My Questions:
Feel free to leave a comment if you've noticed some other issues. Much Appreciated!
@joshdail
Posted
I would suggest having the code for the error message in a separate function outside of your calculateAndDisplayValues function. That way calculateAndDisplayValues is focused just on the math, and you have another function focused just on the error message.
So you could pull your error handling code outside of calculateAndDisplayValues and put it inside an event listener, something like this:
document.getElementById("people").addEventListener("click",() => {
let people = document.getElementById("people").value;
// Convert the number of people to a number:
/* If you want to treat the value as a number,
you can use the parseInt() or parseFloat() functions to convert it to a number. */
people = parseInt(people, 10);
// Check if the number of people is a valid number:
if (isNaN(people) || people <= 0) {
// Display an error message if the value is not valid:
document.getElementById("error").innerHTML = "Can't be zero";
document.getElementById("people").classList.add("invalid");
return;
} else {
document.getElementById("error").innerHTML = "";
document.getElementById("people").classList.remove("invalid");
}
})
Then in calculateAndDisplayValues, you would still need to make sure that there is a valid input for number of people so you don't get NaN or divide by zero errors. You could have a line of code that checks to make sure there is a valid value before the function does the math, like this:
if (people <= 0 || isNaN(people) {
return;
}
let tipAmountPerPerson = (billAmount * tipPercentage) / 100 / people;
Since the error message is taken care of by a separate function, you don't have to worry about it here in calculateAndDisplayValues. Here you're just concerned with making sure the math part of it works.
I hope this is helpful.
Marked as helpful
@kxnzx
Submitted
Hello Frontend Mentor Gang!
It took me some time to finish this challenge. The calculator works, however the form does not function the way I want it to. Here are some of the issues:
My Questions:
Feel free to leave a comment if you've noticed some other issues. Much Appreciated!
@joshdail
Posted
Nice job!
Looking at your solution, your form is not far off from working the way you want, just needs a few small tweaks to the code.
For the error message: What you could do is have the HTML start off as an empty tag, with no text, like this:
<small id="error" class="error"></small>
and then have the event listener in your JS script add the error message to the element's innerText only if the error condition is met. Same with the red outline, you can have a CSS class, for example like this:
.input.invalid {
border: none;
outline: 2px solid hsl(9, 31%, 58%);
}
And in your event listener, when you add in the error text, you can use <element>.classList.add (or remove) to add/remove the red background, like this:
peopleInput.addEventListener("input", e => {
const inputValue = peopleInput.value
const peopleCount = Number(inputValue)
if (peopleCount === 0 && peopleInput.value !== "") {
peopleInput.classList.add(classInvalid)
peopleErrorAlert.innerText = "Can't be zero"
return
}
/* If no error make sure error message is not displayed */
peopleInput.classList.remove(classInvalid)
peopleErrorAlert.innerText = ""
})
For getting rid of "0", just set the value of the inputs to "" instead of "0" when the reset button is clicked. If you want it to show 0 as a placeholder, you could set the placeholder to 0 instead of the value, then the 0 will disappear as soon as a value is entered.
Marked as helpful
@SlavenaDuhneva
Submitted
Hello everyone ,this was my 3th project here !Thank you so much ,FrontEnd Mentors !It's worth every second to practise the things ,which you have learned and turn them into something real .
I am not very familiar how the project could be responsive for mobile and desktop devices . If I need to improve something in my code to turn the project into a fully responsive mode , I would be very grateful to receive an advice .
Thank you !
@joshdail
Posted
Nice job!
From what I can tell, your project is fine as far as appearing correctly on desktop and mobile. One good thing is that you are using rem for font sizes and not pixels. That can be important also for accessibility. Also, I see you are using CSS custom properties which are very helpful for responsive design.
As far as responsive design for desktop/tablet/mobile, I generally will use media queries for different screen sizes. So I might have @media (width < some_width) for mobile, then another for tablet size, and so on. I will use Chrome or Firefox Devtools to see where the app starts to break or look incorrect at a certain width, and use that as a basis for where to switch from desktop to tablet or mobile.
Using Flexbox and Grid for your page layouts is also great for responsiveness, since for Flexbox you can change rows to columns as the screen shrinks, and with Grid you can change the rows and columns as needed to fit different sizes.
Kevin Powell has a great Youtube channel and also a free course on responsive design on his website https://www.kevinpowell.co, you may find that helpful
Marked as helpful
@s9trange
Submitted
Hi everyone...so glad I was able to complete this challenge, even though I still have some challenges and id be grateful to get answers to my questions.
So I was able to code the desktop design, my main issue is with the mobile design. I tried using media queries for responsiveness but it didn't work. Please how do I go about this??
Thanks so much in advance already. All feedback will be highly appreciated.
@joshdail
Posted
Here are a few things I've found helpful:
Try to avoid setting definite widths when you can. I will usually set a width of 100% and then a max-width, like this:
.section-menu {
width: 100%;
max-width: 22em;
}
That way, the element won't go wider than what you want, but it can also shrink with the page.
Also, if you're using Flexbox for your main page sections, then when the width goes down, you can switch the flex-direction from row to column and make any other changes in the flex layout. So for example here, when the width drops, the sections shift from being in a row to stacking on top of one another, being centered, and being the same width:
@media (width < 900px) and (orientation: portrait) {
.container {
flex-direction: column;
align-items: center;
padding-inline: 2em;
}
.section-menu,
.section-meter {
max-width: 22em;
}
}
I had to write a lot of media queries for this project. What I found helpful was using the Chrome and Firefox dev tools, and trying out different screen sizes to see where the components started to break. Then I would write a media query to fix the problem. So I have one @media (width < 900px) with some rules, then another @media (width < 420px) with more rules, and so on. Just a lot of trial and error and experimenting until it looks the way you want it to.
@amerrika
Submitted
Hello, with this project my goal was to practice JS. As I was building this project I just wanted to make it look good enough on desktop so that I can focus on writing JS and now I can't make it really responsive. I did try though, but couldn't really make it work. It would be easier to start from scratch and keep in mind responsiveness.
I would like to know if it's possible to allow for input fields to accept only numbers (0-9) by users, I did google something like "input field restricted to numbers" or "input validation" but could not find a good solution.
@joshdail
Posted
Nice job!
It is possible to restrict the input fields. I also had a really hard time finding info online on how to do that. I used a combination of regular expressions and JS string methods and it seems to work.
Here are the regex I used :
const regexNumeralsDecimalsOnly = /[^0-9.]/g
const regexNumeralsOnly = /[^0-9]/g
I couldn't figure out how to control the number of decimal places with regex, so after filtering with the regex I used string methods to filter down to only one decimal point and two decimal places. Then it immediately rewrites the value in the input field with the filtered value.
// First, filter the input value with regex, and escape out any invalid characters
const filteredInput = billInput.value.replace(regexNumeralsDecimalsOnly, "")
/* Force the input value to one decimal point and two decimal places at most
The ternary expression looks for a decimal. If it finds one, it slices the string
The first substring is the part before and including the decimal. The second part
is after the decimal. Any additional decimals in the second substring are escaped
out, and the length is limited to 2 characters */
const inputValue =
filteredInput.indexOf(".") >= 0
? filteredInput.substr(0, filteredInput.indexOf(".") + 1) +
filteredInput.substr(filteredInput.indexOf(".") + 1, 2).replace(".", "")
: filteredInput
// Immediately the value in the input field with the filtered value,
// preventing any invalid values from being entered
billInput.value = inputValue
Regexr.com is a good place to test out and learn about regex. Regex seems to be one of the best ways to filter input to what you want it to be.
@Abula28
Submitted
I wanted to add dark mode but I failed. If someone know any solution I would like to listen you.
@joshdail
Posted
Hi Abula,
Here's what I've found helpful as far as adding a dark mode into a project.
On the <body> tag in the html, I add a data attribute for light mode or dark mode. I use the data attribute to define the color schemes and switch between them. You could also use a class instead of a data attribute if you want.
<body data-display="light">
CSS custom properties are very helpful for adding a dark mode or other settings. What I do is define my basic color scheme with properties on the :root element at the beginning of my file. It takes some time to set up, but it will really help later on. Here's an example from a different project I did:
:root {
--clr-text-placeholder: hsl(184, 14%, 56%);
--clr-background-body: hsl(185, 41%, 84%);
--clr-background-input: hsl(189, 41%, 97%);
--clr-text-alert: hsl(9, 31%, 58%);
--clr-text-dark: hsl(183, 100%, 15%);
--clr-text-faded: hsl(186, 14%, 43%);
}
Then, I add CSS rules that will replace the original colors if the mode is changed to dark. This is just a small example, but you can understand the idea:
body[data-display="dark"] {
--clr-background-body: hsl(185, 41%, 4%);
--clr-background-calculator: hsl(184, 27%, 22%);
--clr-background-input: hsl(189, 41%, 7%);
--clr-text-alert: hsl(45, 87%, 59%);
--clr-text-dark: hsl(183, 60%, 10%);
--clr-text-faded: hsl(0, 0%, 100%);
}
Then, in my CSS rules, I use the custom properties. So when I set background color, instead of using the actual value I use my custom property.
.alert {
color: var(--clr-text-alert);
}
.input {
background-color: var(--clr-background-input);
color: var(--clr-text-dark);
}
To switch themes, I'll usually have a button on the page. You can set up an event listener on the button that will switch the data-attribute (or class) on the body tag when the button is pressed. Here's a snippet from a script I wrote for a project.
displayBtn.addEventListener("click", e => {
body.getAttribute("data-display") === "dark"
? setDisplayMode("light")
: setDisplayMode("dark")
displayBtn.blur()
})
function setDisplayMode(displayMode) {
sessionStorage.setItem("SPLITTER_DISPLAY_MODE", displayMode)
body.setAttribute("data-display", displayMode)
}
The session storage code will make sure it stays in light or dark mode if the page is refreshed, but it won't save the light/dark mode setting if the browser window closes. You'd have to use something like local storage for that.
This is just one solution, there are other ways you can add dark mode as well.
This article on CSS Tricks has some good info on adding dark mode: CSS Tricks: A Complete Guide to Dark Mode on the Web
You can also look on Youtube for Kevin Powell, he has some videos on making a light and dark mode or different color schemes. I've found his videos very helpful in my own learning.
Kind regards,
Josh Dail