@KMArtwork
Submitted
- How would you improve this?
- Is there anything that I did poorly / inefficiently?
- Any general feedback / comments / questions?
@erlynascarate
@KMArtwork
Submitted
@erlynascarate
Posted
Hello, It overflows a bit horizontally between 500px and 885px (I don't know how to fix it, sorry)
Also, it overflows vertically (when the screen is less than 740px). You could do this:
min-height
instead of height
#gamescreen{
----min-height: calc(100vh - 4rem);
----padding: 2rem;
----text-align: center;
----background: $BGGradient;
----display: flex;
----flex-direction: column;
----justify-content: space-between;
----align-items: center;
}
@media(min-width: $breakpoint-mobile){
----#gamescreen{
--------min-height: calc(100vh - 6rem);
--------padding: 3rem;
----}
----/* ....*/
}
@alibeniaminali
Submitted
Feedback welcome!
What did you find difficult while building the project?
Which areas of your code are you unsure of?
@erlynascarate
Posted
Hello, nice work on the project!
You could also do this:
let view = ''
data.forEach((item) => {
----scoreArr.push(item.score)
----const div = `
--------<div class="${item.category.toLocaleLowerCase()} summary__item ">
------------<div class="${item.category.toLocaleLowerCase()}__description summary__description">
----------------<img src="${item.icon}" alt="${item.category} icon" />
----------------<h3>${item.category}</h3>
------------</div>
------------<div class="summary__scores">
----------------<span>${item.score}</span>/
----------------<span>100</span>
------------</div>
--------</div>
----`
----view += div
})
summaryContent.innerHTML = view
Instead of this:
data.forEach((item) => {
----// ... (HTML generation)
----summaryContent.innerHTML += div
})
And here's why
In the first snippet:
let view = ''
data.forEach((item) => {
----// ... (HTML generation)
----view += div
})
summaryContent.innerHTML = view
The code creates an empty view
string and iterates over the data
array, generating the HTML content for each item
and appending it to the view
string using string concatenation. Finally, after the loop, the entire view
string is set as the innerHTML
of the summaryContent
element. This means that the entire HTML content is built in memory before being added to the DOM.
In the second snippet:
data.forEach((item) => {
----// ... (HTML generation)
----summaryContent.innerHTML += div
})
The code directly appends the generated HTML content to the summaryContent
element using innerHTML
. In this case, the HTML content is added to the DOM at each iteration of the loop. This approach can be less efficient because the DOM is modified multiple times, and each modification can trigger reflows and repaints.
In general, the first approach with the view
string can be more efficient because it reduces the number of DOM modifications. Building the entire HTML content in memory and then setting it once as the innerHTML
of the target element is generally faster than appending individual elements one by one.
However, if the data
array is relatively small, the performance difference between the two approaches might not be significant. In such cases, you can choose the approach that you find more readable and maintainable. The first approach with the view
string might be considered more organized, as it separates the HTML generation from DOM manipulation.
Marked as helpful
@gbabohernest
Submitted
Hello there,
Check out this age-calculator-app solution. Your feedback is highly appreciated.
@erlynascarate
Posted
Hello @gbabohernest, I saw that the background has --light-grey: hsl(0, 0%, 86%) color but, this could be a better color for the background: --off-white: hsl(0, 0%, 94%)
body {
----padding: 0;
----margin: 0;
----background: var(--off-white);
----font-family: var(--font);
}
@erlynascarate
Submitted
@erlynascarate
Posted
Default theme object can be customized:
const theme = createTheme({
----typography: {
--------fontFamily: 'Poppins, sans-serif',
----},
----palette: {
--------common: {
------------white: 'hsl(0, 0%, 100%)',
--------},
--------primary: {
------------main: 'hsl(259, 100%, 65%)',
------------hover: 'hsl(0, 0%, 8%)',
--------},
--------error: {
------------main: 'hsl(0, 100%, 67%)',
--------},
--------background: {
------------default: 'hsl(0, 0%, 94%)',
--------},
----},
})
The onInvalid
and onInput
events have event.target.validationMessage
which can be used like help text.
const validate = (event) => {
----console.log(event.target.validationMessage)
}
return (
----<TextField
--------onInput={validate}
--------//...
----/>
)