Feng• 280
@Feng-09
Submitted
Any tips on how to shorten or more efficiently write my code would be appreciated
Gielth
@Gielth
All comments
- Gielth• 140
@Gielth
Posted
Hi man, nice code, just a few notes to help you out making it better...
In your js file on line 75, where you used "if (Boolean(day) === false) { document.getElementById("req1").innerHTML = "This field is required"; regday.classList.add("required"); dayInput.classList.add("required"); }"
you can continue this line of code, with what you used on line 93
"if (day > maxDay) { document.getElementById("req1").innerHTML = "Must be a valid day"; dayInput.classList.add("required"); regday.classList.add("required"); day = false; }"
by joining then with if { } else if { } like this:
"if (Boolean(day) === false) { document.getElementById("req1").innerHTML = "This field is required"; regday.classList.add("required"); dayInput.classList.add("required"); } else if (day > maxDay) { document.getElementById("req1").innerHTML = "Must be a valid day"; dayInput.classList.add("required"); regday.classList.add("required"); day = false; }"
This way, your code does have and incredible amount of if's that need to be checked, cause the subsequentials "if" only run in the case of the previous argument check being false...
To further improve it you could make this check in a function that uses the variable you're looking, such as day or month, and maxDay and maxMonth...
I recomend that you study a bit on functions, functions uses and functions properties such as the use of "return value" this way you can eliminate some codes like the btn.removeEventListener... that i don't believe it's needed in this...
Here you can read a bit for the functions and their uses:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions
hope this help you out in your coding...
Marked as helpful
1 - Ornelle• 70
@Blackysynch
Submitted
Hi guys I used CSS grid. this time and It came out pretty well.
When I reduce my tab size the elements of the card get out of the card borders. Does anyone how I can avoid this result?
Gielth• 140@Gielth
Posted
Congrats on finishing this design.
I see that you used grid-template-columns: 1fr 1fr 1fr;
To adjust this for smaller screen i would suggest that you use
@media (max-width: 500px) { .card { grid-template-columns: 1fr 1fr; } }
This way, when your screen is smaller than 500px the grid will display 2 columns instead of 3.
The @media are querry that adjust styles in css for different media types and sizes you can read more on here: https://www.w3schools.com/cssref/css3_pr_mediaquery.php
Marked as helpful
0
