Skip to content
OverviewSolutions
5
Comments
13
Khaya
@khaya05

All comments

  • Khaya•300
    @khaya05Posted over 1 year ago

    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
    @vaibhavbsheteSubmitted over 1 year ago

    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

    1
    Khaya•300
    @khaya05Posted over 1 year ago

    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
    @garibaldiiSubmitted over 1 year ago

    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

    1
    Khaya•300
    @khaya05Posted over 1 year ago

    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
    @khaya05Posted almost 2 years ago

    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
    @TashatoonSubmitted about 2 years ago

    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
    @khaya05Posted about 2 years ago

    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
    @guidoaguiarSubmitted about 2 years ago

    How can I improve this for responsiveness?

    And How can I improve the overall code?

    rating challenge

    2
    Khaya•300
    @khaya05Posted about 2 years ago

    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
  • Khaya•300
    @khaya05Posted about 2 years ago

    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
    @khaya05Posted about 2 years ago

    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
    @khaya05Posted about 2 years ago

    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
    @WebdevsonuSubmitted about 2 years ago

    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
    @khaya05Posted about 2 years ago

    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,210
    @sahand-masolehSubmitted about 2 years ago

    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

    1
    Khaya•300
    @khaya05Posted about 2 years ago

    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
    @khaya05Posted about 2 years ago

    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