I'd like to add better E-mail verification at a later time. It currently only checks if the input is empty.
IryDev
@IryDevAll comments
- @Afox9207Submitted about 1 year ago@IryDevPosted about 1 year ago
Hey @Afox9207, first of all, congrats on completing this challenge 😄
I have some advice in order to improve your solution :
- If you want better email verification you can use regex (regular expression) :
JS example email verification using regex (you can adapt it with your own code) :
function ValidateEmail(mail) { if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value)) { return (true) } alert("You have entered an invalid email address!") return (false) }
I hope you'll find this helpful, above all your solution is great😁
Marked as helpful0 - @subha-2001Submitted about 1 year ago@IryDevPosted about 1 year ago
Hey @subha-2001 Great to see you tackling this challenge. 😊
I have some advice in order to improve your solution :
- remove the default margin and padding of the body with padding: 0; and margin: 0;
- your hero image seem to not take the place of your grid
- you can correct that by adding the properties height 100% width 100% and object-fit cover to make the hero img correctly centered
CSS :
body{ margin: 0; padding: 0; } img.hero{ height: 100%; width: 100%; object-fit: cover; }
I hope you'll find this helpful, Best of luck, and happy coding! 💪🚀
0 - @gabrielvelizSubmitted about 1 year ago
This is my second page on React, I look forward to your suggestions and comments :)
@IryDevPosted about 1 year agoHi @gabrielveliz, you did a great job on this challenge 😁
I think you can use the map method with react in order to don't repeat yourself in the navigation components or when you use nav-link :
JSX :
{links.map((link, index) => ( <li key={index}> <NavLink onClick={updateMenu} to={link.to}> <span>0{index}</span> {link.name} </NavLink> </li> ))}
I hope you'll find this helpful, and your solution is really good 😄
Marked as helpful1 - @ThatDevDiazSubmitted over 1 year ago
I did it!
I posted this solution a few days ago frustrated and ready to give up. After some encouragement from a commenter @IryDev I decided to keep trying.
A few hours of work later and it works! It calculated properly and its 3 themed. Used some custom colors but the project is resizable without breaking and functions as expected.
@IryDevPosted about 1 year agoYou did a great job keep it up💫
The themes are beautiful!!
0 - @HumbleBumble01Submitted about 1 year ago
The h1 and p element doesnt look exactly like the preview. I used tailwind and i dont know how to fix it :(.
@IryDevPosted about 1 year agoHey @HumbleBumble01, well done for completing this challenge😄
I have some advice in order to improve your solution :
- You can increase the size of your h1 by adding the class text-lg (it could be also xl or something else) here's a link to know more about that : font-size
- You can custom your own colors with tailwind by editing the tailwind.config.js file
tailwind.config.js :
/** @type {import('tailwindcss').Config} */ module.exports = { theme: { colors: { // you can add your own colors like this transparent: 'transparent', }, }, }
I hope you'll find this helpful😄
0 - @jite91Submitted about 1 year ago
how can I put my QR to the middle of the pages?
@IryDevPosted about 1 year agoHey @jite91, well done for completing this challenge😄
I have some advice in order to improve your solution :
- Wrap the whole main content of your page in the main tag
- Your page should have at least one h1 tag
- I suggest replace the h3 tag by the h1
- If you want to correctly center the score in the circle use the property display: flex ; align-items: center; justify-content: center and add the container a height of 100vh
HTML :
<body> <main> </main> </body>
CSS :
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
I hope you'll find this helpful😄
0 - @Rich-NsueSubmitted over 1 year ago@IryDevPosted over 1 year ago
Hey @Rich-Nsue, well done for completing this challenge😄
I have some advice in order to improve your solution :
- wrap the whole main content of your page in the main tag
- Your page should have at least one h1 tag
- I suggest tp replace the h3 tag by the h1
- if you want to correctly center the score in the circle use the property display: flex ; align-items: center; justify-content: center
- the eye on the image shouldn't be visible, it should be visible on the hover (on the image) with a blue overlay on the image
HTML :
<body> <main> </main> </body>
CSS :
body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; }
I hope you'll find this helpful😄
Marked as helpful1 - @Rich-NsueSubmitted over 1 year ago@IryDevPosted over 1 year ago
Hey @Elvislex, well done for completing this challenge
I have some advice in order to improve your solution :
- wrap the whole main content of your page in the semantic <main> tag
- replace the div attribution with the semantic footer tag <footer>
- Your page should have at least one h1 tag
- I suggest the h1 to be "Your result"
- if you want to correctly center the score card use the property display: flex ; align-items: center; justify-content: center
HTML :
<body> <main> <section id="summaryresult"> </section> </main> <footer> </footer> </body>
CSS :
main{ display: flex; align-items: center; justify-content: center; min-height: 100vh; }
I hope you'll find this helpful😄
Marked as helpful0 - @RalphMaicaSubmitted over 1 year ago
I found it difficult to center the component
some ccs areas
no, i haven´t
@IryDevPosted over 1 year agoHey @gireisalim, well done for completing this challenge😄
I have some advice in order to improve your solution :
- Another good way if you want to correctly center the score in the circle use the property display: flex ; align-items: center; justify-content: center(don't forget to add a min-height of 100vh to the body)
CSS :
body{ display: flex; align-items: center; justify-content: center; }
I hope you'll find this helpful😄
Marked as helpful0 - @gireisalimSubmitted over 1 year ago@IryDevPosted over 1 year ago
Hey @gireisalim, well done for completing this challenge😄
I have some advice in order to improve your solution :
- You didn't use semantic HTML that can improve accessibility on your website
- wrap the whole main content of your page in the main tag
- Your page should have at least one h1 tag
- I suggest the h1 to be "Order Summary"
- If you want to correctly center your card use the property display: flex ; align-items: center; justify-content: center
HTML :
<body> <main> <div class="container"> </div> </main> </body>
CSS :
.container{ display: flex; align-items: center; justify-content: center; }
I hope you'll find this helpful😄
Marked as helpful0 - @Meetkamal256Submitted over 1 year ago@IryDevPosted over 1 year ago
Hey @@Meetkamal256 well done for completing this challenge 😄😄
I have come advice in order to improve your solution :
- Your page should have at least one h1 tag
- I suggest replacing the <h2> tag with the h1
- You didn't use semantic HTML that can improve accessibility on your website
- Wrap the whole main content of your website in the semantic <main> tag
HTML :
<body> <main> ... <h1>Improve your front-end skills by building projects</h1> ... </body>
I hope you'll find this helpful😄
Marked as helpful0 - @AmazingDudeSubmitted over 1 year ago
Hi guys AmazingDude here 👋. This is my solution to the challenge. When I was building the solution I found it a bit difficult to use JavaScript for webpage but It was a cool experience and other than that I added some animations in it. Feedback will be appreciated.
- How should I structure my files?
- What other tools should I learn? (Currently I'm trying to learn React)
- How can I improve my code and avoid writing unusual code?
@IryDevPosted over 1 year agoHey @AmazingDude, well done for completing this challenge😄
If you're using Sass (Syntactically Awesome Stylesheets) for styling, the 7-1 pattern is a popular approach that can greatly help with organizing your files and managing your styles. Here's how it could work:
7-1 File Structure for Sass:
styles/ |-- abstracts/ | |-- _variables.scss | |-- _functions.scss | |-- _mixins.scss |-- base/ | |-- _reset.scss | |-- _typography.scss | |-- _forms.scss |-- components/ | |-- _buttons.scss | |-- _modals.scss | |-- ... |-- layout/ | |-- _header.scss | |-- _footer.scss | |-- ... |-- pages/ | |-- _home.scss | |-- _about.scss | |-- ... |-- themes/ | |-- _theme-default.scss | |-- _theme-dark.scss |-- vendors/ | |-- _normalize.scss | |-- ... |-- main.scss
In this structure, you divide your styles into different folders based on their roles. For example, foundational styles like resets, typography, and forms would go into the
base
folder, component-specific styles would go into thecomponents
folder, and so on. Themain.scss
file acts as the entry point to compile all the style files into a single CSS file.This approach makes it easier to locate specific styles, encourages reusability, and maintains a clear organization of your styles.
Regarding other tools to learn, even if you're not using React, skills in HTML, CSS, and JavaScript are essential. Besides Sass, you might also consider diving into CSS frameworks like Bootstrap or Tailwind CSS, or learning to use other CSS preprocessors like Less.
I hope you'll find this helpful😄
Marked as helpful1