@ewlondon
@meillee
Submitted
Is there an alternative approach, other than utilising position: fixed;, to maintain the footer at the bottom of the page while simultaneously ensuring that the QR component remains vertically centered within the viewport?
@ewlondon
Posted
In this instance, your main and div elements could be contained within a wrapper/container to solve this issue, allowing you to use grid to force their positions.
article{
display: grid;
grid-template-rows: 1fr auto;
place-items: center;
min-height: 100vh;
}
<article>
<main>
</main>
<div class="attribution">
</div>
</article>
This would eliminate the need for a position fixed on your footer attribution.
Marked as helpful
@ChrisSchufer
Submitted
I am pretty sure the theme switch i wrote in the first 30 lines of script.js can be written in less lines. If someone knows how I would love to hear about it.
@ewlondon
Posted
You could do something like this for the theme switching
script.js
const themes = ['default', 'dark', 'purple'];
const themeButtons = document.querySelectorAll('.theme-button');
themeButtons.forEach((button, index) => {
button.addEventListener('click', (e) => {
switchTheme(themes[index], button);
});
});
function switchTheme(theme, button) {
theme1.classList.remove('active');
theme2.classList.remove('active');
theme3.classList.remove('active');
button.classList.add('active');
document.body.className = '';
document.body.classList.add(`theme-${theme}`);
}
and adjust your style.css by moving the light theme into :root and adjusting the naming convention of your other themes like this.
:root {
--background: hsl(0, 0%, 90%);
--keypad-background: hsl(0, 5%, 81%);
--screen-background: hsl(0, 0%, 93%);
--key-background: hsl(30, 25%, 89%);
--key-shadow: hsl(28, 16%, 65%);
--key-selected: hsl(30, 25%, 79%);
--key-toggle: hsl(19, 63%, 50%);
--key-toggle-shadow: hsl(19, 70%, 34%);
--key-reset: hsl(185, 30%, 49%);
--key-reset-shadow: hsl(172, 28%, 35%);
--text: hsl(60, 10%, 19%);
--text-white: hsl(0, 0%, 100%);
}
.theme-dark {
/* variables here */
}
.theme-purple {
/* variables here */
}
this will also allow you to remove the class definition on your body in your index.html all together as root will be applied by default.
@ray-mak
Submitted
I added a "Calculate Tip" button since the original design did not offer a clear way to submit the inputs.
Also, does anyone know why the hover state for the 5% input gets activated when I hover over the other inputs? It seems to go into the hover state when my mouse is over the "Select Tip %" label.
Thanks in advance!
@ewlondon
Posted
Hello friend, you can fix your hover issue by using proper semantics for a list of buttons like so
<fieldset class="tip-input">
<legend>Select Tip %</legend>
<div class="button-container">
<input id="tip5" type="button" value="5%" />
<input id="tip10" type="button" value="10%" />
<input id="tip15" type="button" value="15%" />
<input id="tip25" type="button" value="25%" />
<input id="tip50" type="button" value="50%" />
<input id="custom-input" type="tel" placeholder="Custom" maxlength="5" />
</div>
</fieldset>
to remove the border from fieldset you can adjust your css file
label,fieldset {
display: flex;
flex-direction: column;
color: var(--dark-grayish-cyan);
}
Marked as helpful
@PrimeXV
Submitted
I hope to get a review on how i arrange all my code in each file, if I followed the best practice. I'm not sure if the error display message when the month day is more than the normal day in each month will work very well @Js-Line 87 (else if).
Not really difficult, AI helped out often when I'm stuck but mostly I had issues with JavaScript.
@ewlondon
Posted
I enjoy the animation on the birthday change 👍🏽 however there is a logic error in your birthdate calculation. I recommend to find a solution that doesn't involve conversion from milliseconds.
Marked as helpful
