All comments

RamadaniRei•110
@RamadaniReiSubmitted 4 months ago
Article Preview
1
Krushna Sinnarkar•1,100
@krushnasinnarkarPosted 4 months ago
Hi @RamadaniRei,

Congratulations on successfully completing the challenge!

Your solution looks nice, though there are a couple of things you can improve, which I hope will be helpful:

GitHub Pages Hosting: There is an issue with hosting your website on GitHub Pages because your HTML file is named artical.html. It should be named index.html so that GitHub Pages can recognize it properly.

Image Paths: I downloaded your code and ran it on my PC. I noticed that you are using incorrect image paths. They should be relative to the location of your HTML file. For example, use ./images/your-img.jpg or images/your-img.jpg instead of /images/your-img.jpg.

Component Stretching: Your component gets stretched as the screen size increases. To address this, you should set a maximum width for .previewContainer to prevent it from stretching too much.

I hope you find these suggestions helpful.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!
0
Mageshwari Balaguru•170
@Mageshwari-BalaguruSubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
previously i've missed semantic HTML elements like section and instead of using table element used article and styled it like table. Improvised my code a bit.
Recipe page
1
Krushna Sinnarkar•1,100
@krushnasinnarkarPosted 4 months ago
Hi @Mageshwari-Balaguru,

Congratulations on successfully completing the challenge!

Your solution looks nice, though there are a couple of things you can improve, which I hope will be helpful:

Bullet Points and List Numbers: As shown in the design, you should add color to bullet points and list numbers. You can achieve this using the ::marker pseudo-element. Here’s a demo code snippet on how to use it:

ul::marker { color: #ff5733; /* Example color for bullet points */ } ol::marker { color: #ff5733; /* Example color for list numbers */ }

UI Improvements: Your page is responsive and well-done. For future projects, consider using Flexbox. It can simplify layout tasks, reducing the need for multiple layers and making it easier to manage padding and margins.

I hope you find these suggestions helpful.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!
Marked as helpful
0
laibak24•160
@laibak24Submitted 4 months ago
Newspaper Sign Up using Vanilla JS
1
Krushna Sinnarkar•1,100
@krushnasinnarkarPosted 4 months ago
Hi @laibak24,

Congratulations on successfully completing the challenge!

Your solution looks nice, though there are a couple of things you can improve, which I hope will be helpful:

Email Validation: Your email validator isn't working properly as it doesn't check for a dot followed by letters. For example, when I entered "test@gmail", it was accepted as a valid email. You should use the following regex pattern to ensure proper validation:

/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$/

This pattern will ensure that there's a dot followed by at least two letters.

UI Improvements: Work on your UI to make it more closely match the design. Aim for perfection in layout, spacing, and styling.

Simplifying Layers: There was no need to add multiple layers for the background. You can directly give the background color #242742 to the body and center your .content inside the body.

I hope you find these suggestions helpful.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!
0
Giorgi Khaburzania•350
@GioKhabuSubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
Created with Tailwind CSS and a little bit of javascript.
Shortly URL shortening API
1
Krushna Sinnarkar•1,100
@krushnasinnarkarPosted 4 months ago
Hi @GioKhabu,

Congratulations on successfully completing the challenge!

Your solution looks nice, though there are a couple of things you can improve, which I hope will be helpful:

Input Validation: According to the design, when the "Shorten It!" button is clicked with an empty input, the input border should turn red and the placeholder text color should also be red.

API Integration: You should integrate a URL shortener API. This API will take the input URL, shorten it, and return the shortened link. The shortened link should then be displayed below, similar to the divs you created for Link 1, Link 2, and Link 3.

I hope you find these suggestions helpful.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!
Marked as helpful
0
Carlito•210
@IntroxietySubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
A good refresher exercise I feel I can do better next time I do a exercise.
What challenges did you encounter, and how did you overcome them?
Everything is a challenge right because I just comeback from doing this again.
What specific areas of your project would you like help with?
I want a clean code where its easy to understand.
Selectors Recipe Page
1
Krushna Sinnarkar•1,100
@krushnasinnarkarPosted 4 months ago
Hi @Introxiety,

Congratulations on successfully completing the challenge!

Your solution looks nice, though there are a couple of things you can improve, which I hope will be helpful:

Width of Recipe Page: Your recipe page is currently occupying the entire width of the viewport. To make it look more like the design, wrap your <header>, <main>, and <footer> elements inside a container and give the container a max-width of 736px (or whatever width suits the design). Additionally, add some top and bottom margins to the container.

Centering the Page: After making the above changes, the recipe page will align to the left. To center it, add the following CSS to the <body> element:

display: flex; justify-content: center;

Background Color: Ensure the background color of the <body> matches the design specifications.

I hope you find these suggestions helpful.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!
Marked as helpful
0
CAF2801•30
@CAF2801Submitted 4 months ago
What challenges did you encounter, and how did you overcome them?
to center the elements of the page
What specific areas of your project would you like help with?
my margins and my paddings
QR Code project (HTML and CSS)
2
Krushna Sinnarkar•1,100
@krushnasinnarkarPosted 4 months ago
Hi @CAF2801,

Congratulations on successfully completing the challenge!

Your solution looks great, but I have a few suggestions that might help improve it:

QR Image Visibility: It seems the QR image isn't visible because the image file wasn’t uploaded to your repository. Please upload the image file and update the src attribute of the img tag accordingly.

Dimensions: Avoid using fixed units like px for width and height. Instead, use relative units such as 100% for width and 100vh for height to make your design more responsive.

Centering the Component: The current method of using margin to center .main-content isn’t ideal. For perfect centering, use Flexbox. You can achieve this by adding the following styles to #container:

display: flex; align-items: center; justify-content: center; height: 100vh;

This will center .main-content both vertically and horizontally.

If you're not familiar with Flexbox, you can learn more here:

MDN Web Docs - Flexbox

W3Schools - Flexbox

I hope you find these suggestions helpful.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!
Marked as helpful
0
Rui-Martins23•190
@Rui-Martins23Submitted 4 months ago
What are you most proud of, and what would you do differently next time?
Pleased that I managed to make it very similar to the goal, since the HTML structure wasn't the simplest for me. Also the styling of some elements proved challenge at first, in order to rendered them as in the challenge solution. However, I think the outcome is positive.
What challenges did you encounter, and how did you overcome them?
Styling the Preparation Time box and the sections below weren't easy, as I had to make some research in order to style the bullet points of the and elements. But in the end, it actually wasn't that difficult with the use of the pseudo class ::marker
What specific areas of your project would you like help with?
How would you do the Nutrition Section of this challenge? When making it, I felt this could be made in many different forms... which makes me think mine isn't the best.
Recipe Page using HTML and CCS only
1
Krushna Sinnarkar•1,100
@krushnasinnarkarPosted 4 months ago
Hi @Rui-Martins23,

Congratulations on successfully completing the challenge!

Your solution looks nice, though there are a couple of things you can improve, which I hope will be helpful:

The nutrition section can be improved by using a table instead of ul and hr. Creating a table with 4 rows and 2 columns, using only bottom borders, and aligning the text to the left would be more appropriate for displaying structured data. If you’re unfamiliar with tables, you can check out W3Schools or MDN Web Docs for a comprehensive understanding.

I hope you find this helpful.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!
Marked as helpful
0

@AReactDeveloperSubmitted 4 months ago

What are you most proud of, and what would you do differently next time?

my code or this app validate and check if all form fields are filled out correctly before submitting. It ensures the first name, last name, message, and email are valid, that a radio button is selected, and that the consent checkbox is checked. If there are errors, it highlights them and shows messages. When everything is correct, it displays a success message and reloads the page after 2.5 seconds. In a real-world scenario, instead of reloading the page, you'd typically handle the form submission with a backend system to process and store the data.

in case you need that code for reference or to use to it to validate your own form feel free to use it

What challenges did you encounter, and how did you overcome them?

Validation Logic but with some research i think i did alright Accessibility trying my best to make my app accessible to everyone

What specific areas of your project would you like help with?

if you can read my code or just the script file correct my mistakes ill highly appreciate it the most help needed is how I can improve my logic and my code thank you

[MOBILE FIRST / SASS] Accessible Responsive Contact Form

Krushna Sinnarkar•1,100

@krushnasinnarkarPosted 4 months ago

Hi @AReactDeveloper,

Congratulations on successfully completing the challenge!

Your current JavaScript code for form validation is functional, but there are some improvements you could make for better readability, maintainability, and efficiency. Here are a few suggestions:

Key Improvements:

Separate Concerns: Create separate functions for different types of validations.
Reduce Repetition: Use a generic function for showing error messages.
Consistent Naming: Maintain consistency in variable naming for clarity.
Use forEach for Iteration: If validating multiple elements, consider using forEach.
Improve isValid Handling: Ensure isValid is initialized to true and only set to false inside each validation function if any validation fails.

Here's a revised version of your code:

// Variables
const form = document.getElementById('myForm');
const firstName = document.getElementById('firstName');
const lastName = document.getElementById('lastName');
const email = document.getElementById('email');
const general = document.getElementById('general');
const support = document.getElementById('support');
const message = document.getElementById('message');
const consent = document.getElementById('consent');
const submitMsg = document.querySelector('.succesMsg');

const errorColor = 'hsl(0, 66%, 54%)';
let isValid = true;

const resetValidation = () => {
    isValid = true;
    document.querySelectorAll('.error').forEach(error => error.style.display = 'none');
    document.querySelectorAll('input, textarea').forEach(input => {
        input.style.borderColor = '';
        input.style.outlineColor = '';
    });
};

const showError = (input, message) => {
    input.style.borderColor = errorColor;
    input.style.outlineColor = errorColor;
    const errorElement = input.nextElementSibling;
    errorElement.textContent = message;
    errorElement.style.display = 'block';
    errorElement.style.color = errorColor;
    isValid = false;
};

const validateInput = (input) => {
    if (input.value.trim() === '') {
        showError(input, '*Input field required');
    }
};

const validateEmail = (input) => {
    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!emailPattern.test(input.value.trim())) {
        showError(input, '*Invalid email address');
    }
};

const validateRadio = () => {
    if (!general.checked && !support.checked) {
        const queryError = document.getElementById('queryError');
        queryError.style.display = 'block';
        queryError.style.color = errorColor;
        isValid = false;
    }
};

const validateConsent = (input) => {
    if (!input.checked) {
        const consentError = input.parentElement.nextElementSibling;
        consentError.style.display = 'block';
        consentError.style.color = errorColor;
        isValid = false;
    }
};

form.addEventListener('submit', (e) => {
    e.preventDefault();
    resetValidation();

    validateInput(firstName);
    validateInput(lastName);
    validateInput(message);
    validateEmail(email);
    validateRadio();
    validateConsent(consent);

    if (isValid) {
        submitMsg.style.display = 'block';
        setTimeout(() => {
            location.reload();
        }, 2500);
    }
});

Key Changes:

Modular Functions: Validation logic is separated into individual functions.
Centralized Error Handling: Error handling is managed by the showError function.
Validation Reset: Added a resetValidation function to clear previous errors.
Consistent Error Display: isValid is used consistently to track validation status.

These adjustments should help make your code cleaner and more manageable.

I hope you find this helpful.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!

nj93777•240
@nj93777Submitted 4 months ago
What are you most proud of, and what would you do differently next time?
I learned a lot about JavaScript. This felt more advanced than a level 3 challange, probably because there were so many small details to consider. Once again, I did things without proper planning, which is likely why it felt more difficult than it actually was. So, next time, I'll make sure to plan before starting.
What challenges did you encounter, and how did you overcome them?
I need to improve at positioning elements, and dealing with responsiveness was challenging. I focused a lot on functionalities, and towards the end, the layout became difficult to manage. These issues can also be addressed with better planning.
Responsive e-commerce-page with vanilla CSS&JS
1
Krushna Sinnarkar•1,100
@krushnasinnarkarPosted 4 months ago
Hi @nj93777,

Congratulations on successfully completing the challenge!

Your solution looks nice, though there are a couple of things you can improve, which I hope will be helpful:

Large Gap Between Sections:

There is a large gap between the image section and the aside. You can solve this issue by removing the flex: 1 property from the main section element.

Also, change the justify-content: space-between; property to justify-content: center;. This will prevent the image section from growing and keep both sections centered.

Stretched Layout on Large Screens:

Add max-width: 1440px; to the body element to avoid stretching on large screens.

Use margin: 0 auto; to keep the content centered.

Carousel Button Alignment:

The carousel buttons are not properly aligned for screen sizes between 900px to 650px. Adjust their left and right properties to ensure they are perfectly aligned within this range.

I hope you find this helpful.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!
Marked as helpful
0
Niels•140
@nielsfechtelSubmitted 4 months ago
What challenges did you encounter, and how did you overcome them?
Had some trouble with Grid, maybe should have used Flexbox. Check the readme for details.
Testimonials Grid
2
Krushna Sinnarkar•1,100
@krushnasinnarkarPosted 4 months ago
Hi @nielsfechtel,

Congratulations on successfully completing the challenge!

I noticed you're facing issues with your grid layout. To help you out, I recommend checking out some documentation on CSS Grid. Here are two great resources to get you started:

W3Schools CSS Grid

MDN Web Docs on CSS Grid

These resources will help you understand how the grid works and how to implement it effectively.

Additionally, you can check out my solution to see how I used the grid layout: My Testimonials grid section Solution

I hope you find this helpful.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!
Marked as helpful
2
Iyalekhue osagie•190
@Thirty-2Submitted 4 months ago
What are you most proud of, and what would you do differently next time?
Your browser will warn you about safety XD, gotta find a way to avoid that later on
What challenges did you encounter, and how did you overcome them?
Browser safety and positioning, did not overcome browser safety, positioning, mehh
What specific areas of your project would you like help with?
browser safety shit
interactive card details
1
Krushna Sinnarkar•1,100
@krushnasinnarkarPosted 4 months ago
Hi @Thirty-2,

Congratulations on successfully completing the challenge!

Your solution looks nice, though there are a couple of things you can improve, which I hope will be helpful:

Responsiveness: Your webpage is not responsive. You can make it responsive by using Tailwind's breakpoints like sm, md, lg, xl, and 2xl to redefine properties for specific screen sizes. This will ensure that your design adapts well across different devices.

Tailwind Documentation: You can learn more about responsive designs using Tailwind at Tailwind CSS Documentation - Responsive Design. This will provide you with detailed guidance on how to implement responsive design effectively.

I hope you find this helpful.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!
Marked as helpful
0
Iyalekhue osagie•190
@Thirty-2Submitted 4 months ago
What are you most proud of, and what would you do differently next time?
tailwind css
What challenges did you encounter, and how did you overcome them?
tailwind css
What specific areas of your project would you like help with?
tailwind css
3-column preview card component
1
Krushna Sinnarkar•1,100
@krushnasinnarkarPosted 4 months ago
Hi @Thirty-2,

Congratulations on successfully completing the challenge!

Your solution looks nice, though there are a couple of things you can improve, which I hope will be helpful:

Responsiveness: Your component is not responsive between screen sizes of 860px to 650px. To fix this, change your media query from @media screen and (max-width: 650px) to @media screen and (max-width: 860px).

Width Class: Instead of using .w-[286px], prefer using max-w-64. This will make the card more responsive and help it adapt better to different screen sizes.

I hope you find this helpful.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!
0

Krushna Sinnarkar

All comments

Article Preview

Recipe page

Newspaper Sign Up using Vanilla JS

Shortly URL shortening API

Selectors Recipe Page

QR Code project (HTML and CSS)

Recipe Page using HTML and CCS only

[MOBILE FIRST / SASS] Accessible Responsive Contact Form

Responsive e-commerce-page with vanilla CSS&JS

Testimonials Grid

interactive card details

3-column preview card component