Skip to content
OverviewSolutions
13
Comments
21
Ngouend raoul Gerard
@BeinRain06

All comments

  • Ngouend raoul Gerard•560
    @BeinRain06Posted 9 days ago

    Hello @Sabina Glad o see how you did a good design job with this project.

    Something got my attention when leading to see how your basket look when s empty . And i notice that it is not make appearing the <div></div> tag where you wrote empty cart and also that you adding element to cart the price calculation appears with $ symbol on it.

    Probably i may guess you are new in with javascript, and updating your skill on it.

    I looked up all over your functions

    Your function checkout() is good!

    Your function openCart() has a little problem, use toggle() method instead of add() and remove() method here

      function openCart() {
  cartIcon.addEventListener("click", () => {
    cart.classList.toggle("cart-open");
  });
}

    The function addToCart() is quite confusing .

    Because simple seeing if you click to + or - you didn't yet add to cart but you do , increase or decrease the count items

    then instead of creating a function updateCount(), i suggest you rather create two functions named increaseItem(), decreaseItem()

    and write them quite like example below:

      plus.addEventListener("click", increaseItem);
  minus.addEventListener("click", decreaseItem);

 function increaseItem() {
     count = count + 1;
  };

 function decreaseItem() {
     if(count <= 0) {
        count = 0;
     } else {
         count = count -1;
     }
  };

    To correct your function addToCart let's try to display empty cart message first when your page is reloaded and no items has already be added to the cart.

    To do so i indulge myself to propose to rewrite in your index.html file the main-cart class first like this :

       <div class="main-cart">
       <div class="empty-cart">
            <p>Your cart is empty.</p>
          </div>
   </div>

    Then we will use the javascript method createElement() to add them item and price dynamyically when clicking the button add to cart

      function addToCart() {
     main_cart.innerHTML: = ""

     productPrice = (125.0)*count

     const cart= document.createElement("div");
    cart.classlist.add("cart")
    
    // **``** below is called **backstick** . it is different of **''** or this **""**.

   // find shortcut key to put backstick in the text editor
   
    cart.innerHTML = `
      <div class="cart">
              <div class="img-avatar">
                <img
                  class="image-from-cart"
                  src="images/image-product-1-thumbnail.jpg"
                  alt="img-avatar"
                />
              </div>

              <div class="product-info">
                <div class="product-description">
                  <p>Fall Limited Edition Sneakers</p>
                  <p>
                    $125.00 x <span id="number">${count}</span>
                    <span id="result">${productPrice}</span>
                  </p>
                </div>
              </div>
              <div class="delete-icon">
                <img
                  id="delete-icon"
                  src="images/icon-delete.svg"
                  alt="delete-icon"
                />
              </div>
            </div>
           <div class="checkout-btn">
              <button>Checkout</button>
            </div>
    `
  }

    I Hope this might lead to help. The way you are going you will need to learn about Class Object in javascript to deal with rendering .

    Hope all that makes sense.

    And please not be afraid , under my development above, if something need more understanding, feel free to reach me.

    I Wish you the best and happy coding @Sabina have an amazing day/night whatever you may be.

    Marked as helpful
    0
  • Tksmith•240
    @Tksmith-guruSubmitted 21 days ago
    What are you most proud of, and what would you do differently next time?

    Just get better everyday

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

    None

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

    Nothing much

    Testimonial-Grid-Section-App

    1
    Ngouend raoul Gerard•560
    @BeinRain06Posted 20 days ago

    Hey @Tksmith-guru i hope you are fine my Guy , I have seen how you handle layout with this project .

    The problem seems to got fired in the production website with image especially your home banner image.

    It does not showing up. I got this issue well while publishing website front-end project using Vercel too .

    Maybe you should mind trying to use <div></div> tag along with the css property background-image to try to fix images that do not display where you may want it in the project instead of using <img/> tag

    It will be a nice shot , maybe, but whatever is the case . Feel free to let me know.

    By then , i hope you will continue to have a NIce day/night whethever you might be @Tksmith with also my wishes for happy coding ! Do the best.

    Marked as helpful
    1
  • Ngouend raoul Gerard•560
    @BeinRain06Posted about 1 month ago

    Hey @mush1997. How are You Guy !

    I Hope fine and having fun watching your progress get to grow more and more effective, in really time . .

    I have seen your done so far project CrowdFunding Page submitted in the platform . One of the best to start implementing JS especially with radio button control and css overlapping layout.

    I went to see your preview site for the presentation of a potentially amazing rendering but, unfortunely i couldn't , the page was roaming over and over.

    It is being a commonly issue i broadcast see for many others github site publish in the platform. I may wonder why ? Because It mess a lot to see the work of other fellow developer

    One way i tried to find was to first see if your github page name match the related pattern name* of github site name. And then it is ! But we still got the problem .

    Now. I may wonder in case to** adjust the issue** if we can try this couple of method underneath together :

    • Firstly : add a README.md file in your repository , commit and push the change .

    refresh the github page and then try access your github site to see if there is a website appearing

    If There is not . Try :

    • Secondly : to run the couple command below

      git commit --allow-empty -m "Trigger rebuild"

      git push

    refresh the github page again and then see if that one is a match.

    Of course feel free to let me know if there is a change, and one of these technics seems to be to us helpful.

    Thanks For your attention and having me in.

    While wishing you a happy coding . Have A Wonderful Day / Great Night @mush1997 .

    0
  • Ajaya-Rajbhandari•130
    @Ajaya-RajbhandariSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    It took me more than a week to finish this project. I tried mobile first Approach, and after that i found it difficult to design bigger screen. I used React and Use Component to render each card. it was difficult for me to make this layout using grid. Even though i Finished this project.

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

    Designing for desktop with that layout was challenging for me. It took me more than a week to find solution for the problem that i faced in grid layout.

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

    In my desktop version, My card is not occupying the space it was meant to occupy.

    Testimonials Grid Section Solution

    2
    Ngouend raoul Gerard•560
    @BeinRain06Posted about 1 month ago

    Hye Ajaya how amazing job that you have done so far while resisting to quit the project.

    This is one of my favourites , of course you have seen it the layout are two dimensions based as you see in the desktop version, that make this project a good candidate for grid.

    I assume you are new to grid , but don't worry i will give you some clues.

    • Grid are good for two dimensional layout
    • Grid is build on top of flexbox that means you can also achieve **one dimensional layout using grid
    • as a person lock in jail grid box container restrict each children element to act just in the boundary size she has set for each children .

    Now looking a the project we have five children in a container that we may want to showcase as grid.

    like mobile version is unidimensional we can implement grid using template-areas like this :

       /** grid container **/
  .grid_class_container {
       width: 100vw;
       min-height: 100vh; 
       //is essential to specify height and width in grid either it won;t work well
       display: grid;
       grid-template-rows: max-content;      
       grid-template-areas: 
          ' daniel '
          'jeannette'
          'jonathan'
          'patrick'
         'kira'
       ;
      }
   
   /** here box children **/
     #daniel_box {
          grid-area: daniel;
          width:100%;
         height:100%;
     }
     #jeannette_box {
          grid-area: jeannette;
          width:100%;
         height:100%;
     }
     #jonathan_box {
          grid-area: jonathan;
          width:100%;
         height:100%;
     }
    #patrick_box {
          grid-area: patrick;
          width:100%;
         height:100%;
     }
    #kira_box {
          grid-area: kira;
          width:100%;
         height:100%;
     }

    here is some kind of desktop version bi-dimensional using also template-areas in grid :

    before going to css we remarks in desktop :

    • some cell box are 2 times larger than other in horizontal axis(daniel_box, patrick box)

    • other are 2 times larger than other in vertical axis (kira_box)

    let count the numbers of virtual columns of our grid could be evaluated on the vertical case to (columns= 2(daniel) + 1(jonathan) + 1(kira) ) = 4

    let count the numbers of virtual columns of our grid could be evaluated on the horizontal to (rows= 1(daniel) + 1(jeannette) ) = 2

    here we go in grid system :

       /** grid container **/
  .grid_class_container {
       width: 100vw;
       min-height: 100vh; 
       display: grid;
       grid-template-rows: max-content;      
       grid-template-areas: 
          ' daniel daniel jonathan kira  '
          'jeannette patrick patrick kira'
       ;
      }
   
   /** here box children **/
     #daniel_box {
          grid-area: daniel;
          width:100%;
         height:100%;
     }
     #jeannette_box {
          grid-area: jeannette;
          width:100%;
         height:100%;
     }
    #jonathan_box {
          grid-area: jonathan;
          width:100%;
         height:100%;
     }
    #patrick_box {
          grid-area: patrick;
          width:100%;
         height:100%;
     }
    #kira_box {
          grid-area: kira;
          width:100%;
         height:100%;
     }

    and that it is pretty it !

    Thanks you for your time and consideration @Ajaya-Rajbhandari . This is an amazing project and i'm proud you did it and don't quit till the end .

    feel free to join me if there is anything else you might want to know about grid system or if got wrong somewhere

    I wish you Great Day/ amazing Night followed by a good sleep @Ajaya-Rajbhandari as well as happy coding.

    Marked as helpful
    0
  • Ngouend raoul Gerard•560
    @BeinRain06Posted about 1 month ago

    Helle Mambo I hope you are Good and still doing well. I Got to try open coding bootcamp testimonials one of my favorites but i didn't , it is roaming and don't displaying . Please look at the Netlify page source , maybe it's me or there is something about it !?

    Hope I could see how amazing You did the Job. Thanks you for having me In.

    I wish you a Good Day/Night wherever you are and sweet and cool coding @charlesmambo.

    0
  • Ngouend raoul Gerard•560
    @BeinRain06Posted 3 months ago

    Hye @kingcoder ! your app looks amazing on desktop, great job !

    You can try to implement as well accessibility for mobile :

    1/ Navbar (apply a class on it )

    • Instead of applying flex on header , apply flex rather on the <nav class="nav_container"></nav> tag

    Example below :

    @media(min-width:180px) {
  .nav_container {
     width:100vw;
     height:50px;
     display: flex;
     justify-content: space-between;
     padding: 0.5rem 1rem ;
     font-size: clamp(0.7rem, 0.85rem, 1rem)
   }
 }

@media(min-width:600px) {
   .nav_container {
       font-size: clamp(1rem, 1.1rem, 1.25rem)
    }
 }

@media(min-width:960px) {
   .nav_container {
        font-size: clamp(1.25rem, 1.5rem, 2rem)
   }
 }

    2/ add class:".main_sneakers" to the <main class="main_sneakers"></main> tag and apply flex method

    @media(min-width:180px) {
   .main_sneakers {
      width:100vw;
      padding: 0.5rem 1rem ;
      display: flex;
      flex-direction:column;
      justify-content: center;
      align-items:center;
      gap: 1.5rem; 
   }
}

@media(min-width:960px) {
   .main_sneakers {
      flex-direction:row;
      justify-content: center;
      align-items:center;
      gap: 1rem; 
   }
 }

    3/ what @media(min-width:<size>) { //some code}

    • @media(min-width:180px) { // some code} means apply the style in bracket for screen or media devices display of at least 180px(<= 180px)

    • @media(min-width:600px) { // some code} means rewrite the new style in bracket for screen or media devices display of at least 600px(<= 600px) and so on...)

    The way to implement accessibility is to dive into media queries implementation formula

    Using @media(min-width: 180px) { //some code} is one of these formula

    For other formula you could use the term max-width or min-width and max-width instead of using min-width approach.

    Hope This Could give a clue for performing responsiveness.

    Feel free to reach me if you might have to remind me of something i forgot.

    Have an Amazing Day/Night @kingcoder ! Keep going with your project you have become good designing some Desktop Page, Go on , and don't stop your progress.

    Stay safe and healthy.

    0
  • Alex 🤸🏻‍♂️•960
    @sksksk2024Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I understand some of the react logic!

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

    The only problem is that I can't make the React work with my current tools(look in my code). To be more specific, npm is installed properly, but for some reason, it doesn't work for React(same with Yarn) -- and with Tailwind CSS was difficult to set up, but I make all the work manually(taking the code i needed, and it worked -- and it was easier because is not my first project in Tailwind). 🤔 Maybe is too early to learn React, but I'd appreciate any advice, and maybe I'll retry this challange with React after I finish all the current learning path. Thank you in advance!!😊❤️

    Room-homepage in React(kinda) and Tailwind CSS

    2
    Ngouend raoul Gerard•560
    @BeinRain06Posted 3 months ago

    Hye @sksksk it seems something fishy is affecting the npm package you installed manually .

    You might like to use designed webpack or vite tool to kind of configure environment of you app automatically and much easier , just using some script syntax in your computer's terminal command.

    1/ try open the terminal command :

     - navigate under the repertory where you want to create your **project in**
 - Do not enter this specific folder, rather do a right click, and choose appearing options **open in Terminal**
 - Wait until the terminal fully open, with cursor beating right after the path link of your directory

    2/ Install React using Vite Tool :

    - for example , if you choose **vite** you can install the ecosystem of vite , and also at same time react using the command :

npm create vite@latest my-project -- --template react
    • after the end installation type :
    cd my-project

    3/ Install Tailwindcss using the both command below (one after the other ) :

    npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

    3/ configure basically tailwind.config.js file :

    export default {
   content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},
   },
   plugins: [],
}

    If something went wrong feel free to reach me.

    Hope it could be of one help

    Have an amazing day or night @sksksk , teasing project encompassing man technologies like that will undoubtedly improve your skill on fastening your productivity while coding.

    Stay Safe and Healthy.

    Marked as helpful
    1
  • Ngouend raoul Gerard•560
    @BeinRain06Posted 12 months ago

    Yeah @Ibukun450 amazing your application operates well.

    You need just only to improve the responsiveness

    Don't try to make it hard one thing I noticed is that you began styling your page within index.html* and end it into style

    I feel like a most efficient way to tackle responsiveness is to group all style in one place.

    Then you can also make the container respond accurately to change you apply.

    Try moving this section of code in your style.css:

    body {
    background-color: #c4e5e8;
    **width:100vw;**
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Space Mono', monospace;
}

.main-container {
    width: 50%; 
    padding: 20px;
    height: auto;;
    background-color: #fff;
    border-radius: 15px;
    padding: 30px;
}

    Adding width :100vw ; to the body

    you can also design at least 2 stage of responsiveness for your application using

    @media and screen (min-width:180px) {

    ...

    }

    And

    @media and screen (min-width:760px) {

    ...

    }

    For mobile and tablet or desktop

    And change your main-container to have a width of 100% when styling mobile form play with some padding, margin, flex-direction and that it's pretty it.

    You will wondering your new design, at least it could be a shift better.

    You have the right to do this. And feel more happy about your project.

    Well with that says I hope you a nice night /day @Ibukun450. glad to meet you in the front of line, and will to continue to see you on a next time.

    0
  • Ngouend raoul Gerard•560
    @BeinRain06Posted 12 months ago

    @soufianeoualla yeah that's a pretty good work!

    Your website is fully responsive in mobile

    But it looks like something went wrong with image when submitting

    You may want to find what's going on and make your project more beautiful!

    I stepped inside your projects. Maybe try when building useState of notifications array to rather links your src image

    like this model :

    "src": "./assets/avatar-mark-webber.webp",

    instead of that one

    "src": "src/assets/avatar-mark-webber.webp",

    hope it could be a help when trying out to display your images correctly @soufianeoualla

    Have a nice night /day and keep doing amazing stuff like that. You have the will to make it beautiful

    1
  • Ngouend raoul Gerard•560
    @BeinRain06Posted 12 months ago

    Hey Ndorokuda Amazing! You have got to make your first project responsive while using grid. Congratulations

    Using grid or flexbox is a matter of how you want to align box in your project.

    For example if you want box to lay out one on top of other or right of each other into one line (x-axis or y-axis) you better want to use Flexbox* flexbox is a kind of junior brother for grid

    But grid is like it sound is to make grid landscape. Think about gate of prisoner in jail. The grid is this gate when you want to organize elements box in two ✌ dimensions ( x and y) you think about grid implementation.

    In your project your boxes have 2 dimensions. You can notice this by regarding their width or height Some boxes are twice in width than others while others are 2 times height of others.

    This is manipulation of 2 axis

    You choosed a good one(project) to stand with, I assume you're learning grid grid is more powerful to organise multiple box of different size together in one container

    Hope that makes sense and give you a light 💡 of understanding.

    Keep going on, you got a lot with this project and I wish you will do the same for the others. Great work

    Have a nice Night/day and stay put on your work. You look to become a great coder...

    Marked as helpful
    1
  • Ngouend raoul Gerard•560
    @BeinRain06Posted 12 months ago

    Hey Mahmoud abd well done with your project.

    You might want to select media queries for mobile (min-width:375px) and tablet (min-width:736px)

    @media (min-width: 736px) { ... }

    @media (min-width: 315px) { ... }

    You may want to set

    grid-templates-column to repeat (auto-fill, cal(94vw))

    **grid-templates-row to auto

    For mobile

    Have a nice day /night keep going into your amazing journey and fill glad whatever time or difficulties you encounter.

    The best comes from the unknown. And I'm grateful to see that you can be part of it Mahmoud abd

    Marked as helpful
    2
  • star-369•280
    @star-369Submitted about 1 year ago

    What I have learned from this challenge:

    1. How to use tailwindcss
    2. How to use tailwindcss arbitrary value
    3. Configuring custom variable, font, box shadow in tailwind config
    4. Importing Google Fonts to CSS

    My question to the community: How do you make the pattern background mobile to have width of 100% ? (it seems that the pattern have a fixed witdth)

    Update Moving this project to react and doing revision(Update 4 Feb 2024)

    Order Summary Card Using TailwindCSS

    1
    Ngouend raoul Gerard•560
    @BeinRain06Posted about 1 year ago

    Amazing work @star-369 you have done quite great with the mobile design of your order summary component.

    One way to make it more looking good is to fix the image flow that push the entire general container make it overflowing right and left in your mobile version.

    One way I suggest is to put your image inside a div and style this div with width = 100 vw and height = your previous height ;

    And after style img width and height using percentage units.

    Like e.g underneath : Index.html :

    <div class="img-wrapper">

      <img src="./image.png" class="my-img" alt="picture missing" />
</div>

    And style.css :

       .img-wrapper {

         position:relative;
     top:0
     width:100vw;
     height: 80px ;// example 
     overflow-x: hidden ;
   }

  .my-img {

    width: 100%;
    height: 100%;
    object-fit:cover ;
   }

    object-fit:cover will make your img fit the div container and overflow-x: hidden will prevent your img to push the container and as well will maintain the img inside the x axis of that div container avoiding a float .

    Hope that can be a help @star-369 b and keep going like that you will definitely unlock many skills, nice day/night and happy coding!

    Marked as helpful
    0