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?
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.
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.
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.
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!
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);
}
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.
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.
