Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions5Comments13

All comments

  • Timothy Ezenwagu• 180

    @tdmoree

    Submitted

    please your feedback is needed here....pls so that i can correct my mistake

    Multi-step-Form

    #angular#animation#chart-js

    1

    Khaya• 300

    @khaya05

    Posted

    Hey Timothy

    Here are a few things that you can do to improve your code.

    Firstly, use variables when selecting your DOM elements, preferably at the top of your file.

    Instead of this:

    function goStepThree() {
console.log(typeof document.getElementById("totalPrice").innerHTML);

if (document.getElementById("totalPrice").innerHTML == "") {
console.log(document.getElementById("totalPrice").innerHTML);
document.getElementById("totalPrice").innerHTML = "0";
console.log(document.getElementById("totalPrice").innerHTML);
}
checkPlan();
}

    Use variables:

    const totalPrice = document.getElementById("totalPrice")

function goStepThree() {
if (totalPrice.innerHTML == "") {
console.log(totalPrice.innerHTML);
totalPrice.innerHTML = "0";
}
checkPlan();
}

    Also, use const or let when declaring variables

    0
  • Vaibhav Shete• 150

    @vaibhavbshete

    Submitted

    I haven't tried to match the design pixel-by-pixel, but instead have tried to understand the look and feel and replicate it.

    Pixel-perfect-wise it might be wrong, but what do you think about the feel?

    Another question I have is about form validation. How to you go about it in React? Do you too keep all info in a state variable and check it? Is there some frequently used library that could make common validations easy?

    Multi-Step Form using React

    #react#webpack

    1

    Khaya• 300

    @khaya05

    Posted

    Hey Vaibhav

    Great job on this project. One common way of validating forms in react is to use a library called "react-hook-form" and "yup" if you use javascript, or "ZOD" if you use typescript.

    Here is an example of using Yup and react-hook-form:

    Step 1: Install Yup and React Hook Form

    npm install yup react-hook-form

    Step 2: Import the required dependencies

    import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

    Step 3: Define your form schema using Yup For example, if you have a form with a name field and an email field, you can define the schema like this:

    const schema = yup.object().shape({
name: yup.string().required('Name is required').min(2, 'Name should be at least 2 characters'),
email: yup.string().required('Email is required').email('Invalid email address'),
});

    Step 4: Use React Hook Form with Yup resolver Inside your React component, initialize the React Hook Form and specify the Yup resolver:

    const MyForm = () => {
const { register, handleSubmit, formState: { errors } } = useForm({
resolver: yupResolver(schema),
});

const onSubmit = (data) => {
// Handle form submission
console.log(data);
};

return (
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label>Name</label>
<input type="text" {...register('name')} />
{errors.name && <p>{errors.name.message}</p>}
</div>
<div>
<label>Email</label>
<input type="text" {...register('email')} />
{errors.email && <p>{errors.email.message}</p>}
</div>
<button type="submit">Submit</button>
</form>
);
};

    In the code above, the register function from React Hook Form is used to register the form fields. The handleSubmit function is used to handle form submission. The errors object contains the validation errors from Yup, and it's used to display error messages for the corresponding fields.

    Step 5: Render the form Finally, render the <MyForm /> component wherever you want the form to appear in your application.

    Also, check out the documentation to learn more:

    Yup:

    React Hook Form:

    Hope this helps!👍

    0
  • Matheus Garibaldi• 100

    @garibaldii

    Submitted

    I tried the max to build this challenge as the design. I think that the dropdown menu's code(features and company) could be more sustainable. with 'for' repetition changing by the id's. Not needing the 2x same estilization. I will try to fix that part in the next updates.

    Used pure JS

    #accessibility

    1

    Khaya• 300

    @khaya05

    Posted

    Hey Matheus!

    Great Job on this challenge. However, I noticed that for your dropdown to show, a user should start by clicking on the nav-link i.e. features to show the dropdown.

    This works, but to improve the user's experience, you should show the drop-down menu when the user hovers over the nav-links with drop-down links like features.

    To archive this functionality you should use mouse events like onmouseenter. The onmouseover mouse event is used to trigger a JavaScript function when the mouse pointer moves over an element. Here's an example of how you can use the onmouseover event:

    1. HTML: Start by creating an HTML element that you want to interact with using the onmouseover event.
    <button id="myButton">Hover over me!</button>
    1. JavaScript: Next, write a JavaScript function that will be called when the onmouseover event is triggered.
    1. Event binding: Finally, use the onmouseover to trigger any functionality that you wan't when the mouse hovers over the element

    Also, instead of this:

    function menu_open_a() {
menu_actived = true;
menu_dropdown.style.display = 'flex';
menu_dropdown.style.flexDirection = 'column';
menu_dropdown.style.listStyle = 'none';
menu_dropdown.style.padding = '0';
menu_dropdown.style.alignItems = 'flex-end';
menu_dropdown.style.borderRadius = '10px';
menu_dropdown.style.backgroundColor = 'white';
menu_dropdown.style.boxShadow = '2px 2px 35px 2px rgba(0, 0, 0, 0.2)';
arrow.src = 'images/icon-arrow-up.svg';
}

    You can just create a sepatere CSS class that will have all those styles, and add it programaticaly on mouseover event like this:

    .menu-dropdown-active {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
align-items: flex-end;
border-radius: 10px;
background-color: white;
box-shadow: 2px 2px 35px 2px rgba(0, 0, 0, 0.2);
}

    JavaScript

    // call this function on mouseover
function menu_open_a() {
menu_actived = true;
menu_dropdown.classList.add('menu-dropdown-active');
arrow.src = 'images/icon-arrow-up.svg';
}

    Hope this helps👍.

    Marked as helpful

    0
  • Khaya• 300

    @khaya05

    Posted

    Hi Abiala

    To change images based on screen width/viewport you could use the HTML<picture> tag. The <picture> tag contains two elements, one or more <source> tags and one <img>

    i.e

    <picture>
    <source media="(min-width:48em)" srcset="tablet_img.jpg">
    <source media="(min-width:75em)" srcset="desktop_img.jpg">
    <img src="mobile_img.jpg" alt="">
</picture>

    Checkout the mdn docs about the <picture> tag here

    Marked as helpful

    0
  • Natasha• 60

    @Tashatoon

    Submitted

    This is my first project and I found it to be slightly difficult. I was unsure of the strikethrough for the old price. What is the best way to lineup text, does it matter if "Perfurme" is in <main> or <heading> tag as long as is lines up.

    Product Preview

    2

    Khaya• 300

    @khaya05

    Posted

    Hey Natasha👋🏽

    For flexbox to work, you must have a parent/container element, which in your case is <div> with a class name card.

    Then inside your parent element, you can add all the elements that you want to display flex. For this project, you want to have a two-column layout. Therefore you must have only two child elements inside .card ie

    <div class="card">
  <div class="card__left"></div>
  <div class="card__right"></div>
</div>

    Then inside your .card__left you can the product image and on the .card__right add all the product info i.e

    <div class="card">
  <div class="card__left">
    <img src="" alt="" />
  </div>

  <div class="card__right">
        <h2></h2>
        <h1></h1>
        <p></p>
        <p class="current-price"></p>
        <p class="original-price"></p>
        <button type="button"></button>
  </div>
</div>

    Then in your .css

    .card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

    Also, check out this video by Kevin Powell. It will show you how to use flexbox and how to analyze a design.

    Hope this helps✨

    Marked as helpful

    0
  • Guido Aguiar• 20

    @guidoaguiar

    Submitted

    How can I improve this for responsiveness?

    And How can I improve the overall code?

    rating challenge

    2

    Khaya• 300

    @khaya05

    Posted

    Hey Guido. I have a suggestion that will improve accessibility to your project.

    It is important to build websites that people with disabilities can interact with in a meaningful way. One way of doing this is using semantic HTML tags.

    • For this project, you should use a <form>. Because users have to select one option, you could use <input type='radio' /> and have <label> for each input.

    Check out this course by google about web accessibility 👉🏽 here

    Hope this helps👍👍

    Marked as helpful

    1
  • Hamid Mahmood• 540

    @Hamid210545

    Submitted

    This is another awsome project from Frontend Mentors...Thanks!

    Interactive-rating-system

    #accessibility#animation#backbone#bootstrap#django

    2

    Khaya• 300

    @khaya05

    Posted

    Hey Hammid. You did a great job on this project.

    Here is another suggestion. You can add a disabled attribute on your submit button. This attribute, when specified will prevent your users from submitting your form without submitting any rating.

    Then whenever a user selects a rating, you can use .js to remove the disabled attribute by adding submit.disabled = false.

    You can also have different styles for disabled buttons i.e

    button:disabled{
    cursor:not-allowed;
    background-color: inherit;
    outline: 1px solid white;
}

    Marked as helpful

    0
  • Khaya• 300

    @khaya05

    Posted

    Yes, that's correct, images/icons with 'bg' must be used as background images.

    Also, don't forget to add the path to your background images as a string. background-image: url("/images/bg-desktop.png")

    0
  • Khaya• 300

    @khaya05

    Posted

    Hi David, To disable your button you can use the disabled attribute. This is a boolean attribute. when present it specifies that the button should be disabled, thus, will make your button un-Clickable.

    Also, you should have different styles for disabled buttons i.e

    button:disabled{
    cursor:not-allowed;
    background-color: inherit;
    outline: 1px solid white;
}

    Then you can use javascript to remove or add the disabled attribute i.e

    rates.forEach(element => {
    element.addEventListener("click", () => {
        rating.innerHTML = element.innerHTML;
        submit.disabled = false;
    }
    )

});

    Don't forget to disable the submit button when users click the rate again button

    rateAgain.addEventListener("click", function () {
    thankDiv.classList.add("hidden");
    rateDiv.style.display = "block";
    submit.disabled = true
}
)

    Hope this answers your question👊👊👊

    1
  • Webdevsonu• 270

    @Webdevsonu

    Submitted

    As I am beginner in web development I find it difficult to working with javascript , like which type of functions to create or use event listener, But i managed to create a calculator in which i can enter all number input in the textfield by clicking buttons. It can be further improved by applying little more javascript. You can improve it if you like , if you do please let me know the methods you've had applied.

    I used sublime text and basic javascipt to make a functionable buttons

    1

    Khaya• 300

    @khaya05

    Posted

    Hi 👋🏽👋🏽, nice job on trying to create this project.

    I can see that you added eventListeners on all buttons, which works but I think it's better to add the event listener on the parent, which in this case is div class='keyscontainer, like this

          <div class="keys">
        <button data-key="7">7</button>
        <button data-key="8">8</button>
        <button data-key="9">9</button>
        <button data-key="DEL">DEL</button>
        <button data-key="4">4</button>
        <button data-key="5">5</button>
        <button data-key="6">6</button>
        <button data-key="+">+</button>
        <button data-key="1">1</button>
        <button data-key="2">2</button>
        <button data-key="3">3</button>
        <button data-key="-">-</button>
        <button data-key=".">.</button>
        <button data-key="0">0</button>
        <button data-key="/">/</button>
        <button data-key="x">x</button>
        <button id="resetbtn" data-key="reset">Reset</button>
        <button id="enterbtn" data-key="equals">=</button>
      </div>

    This is called dom traversing. Check this video by WebDevSimplified: video_1

    Then this is what you might do on your .js

    const keysContainer = document.querySelector('.keys');

keysContainer.addEventListener('click', (e) => {
  const key = e.target.dataset.key
});

    Also, check out this scrimba video video_2

    hope this helps you 👍👍👍

    Marked as helpful

    0
  • Sahand Masoleh• 1,230

    @sahand-masoleh

    Submitted

    Hello everyone!

    I tried to take my time with this challenge and make it as aesthetically pleasing and as feature-full as I could.

    In addition to the usual goals such as responsiveness, semantic HTML, here is a list of features and that I implemented in this solution:

    • Modals with click-away listeners for the cart, the lightbox gallery, and the mobile menu.
    • A carousel with swipe support.
    • Stacking dismissble toast messages.

    The most important thing I learned from doing this challenge: spacer divs!

    The technologies and libraries I used:

    • Typescript
    • React
    • Framer Motion
    • SCSS

    I hope it turned out well. I welcome any constructive or destructive criticism.

    Ecommerce Product Page

    #framer-motion#react#typescript#sass/scss

    1

    Khaya• 300

    @khaya05

    Posted

    Great job man, I love your solution to this project. I also love how you added the transitions on the aside menu, images gallery, and that bottom feedback.

    Very inspiring!!👍

    1
  • Khaya• 300

    @khaya05

    Posted

    Hi Vee 👋🏽, hope you are doing well. Great job on completing this project, However, there are some improvements that need to be made here.

    ⚡ Firstly I would recommend that you start by fixing all the accessibility and HTML validator errors in the reports section above.

    ⚡ I also noticed that you are using thumbnails for mainImage in your images section, not the product images

    ⚡ Check out this w3schools tutorial on how to create a slideshow gallery.

    I hope this will help you.

    0
  • Lucas 👾• 104,540

    @correlucas

    Submitted

    👾 Hello, Frontend Mentor coding community. This is my solution for the Art Gallery Website

    When I started my journey in Frontend Mentor this was my dream challenge that I always wanted to complete. Now, after 7 months (I know it took to long, but I am a noob 💁‍♂️) its done! Challenge accepted and completed.

    The challenge was really challenging, the main struggle I had building this html structure/css was with the header and the image gallery. I had some fun trying to figure out how to make the grid-template-area and after some tutorials I get how to use this tool (was my first time with grid-area).

    🎨 I added some custom features:

    • 👽 Hover Effects
    • 🧚‍♀️ CSS Animations

    🧐 Special thanks to:

    • @AdrianoEscarabote - AdrianoEscarabote Profile that helped me with the Leaflet Map (I have zero knowledge with JS so I had no idea how to include the map).
    • @VanzaSetia VanzaSetia Profile to explaining me how to make the h1 heading effect in the header with mix-blend-mode: difference.
    • @elaineleung ElaineLeung Profile To have explained me how to add CSS Animations. Now I am really happy adding motion everywhere hahaha. She is of the FEM greatest mentors.

    Tutorials used to learn grid-template-area:

    🍚Follow me in my journey to finish all HTML/CSS only challenges (Only 1 missing)! Gotta Catch ’Em All

    Ill be happy to hear any feedback and advice!

    👨‍🎨 Art Gallery Website VANILLA CSS (CSS Animations & Hover Effects)

    8

    Khaya• 300

    @khaya05

    Posted

    Great job man. Your solution is impressive and very inspiring!!!

    1