Skip to content
OverviewSolutions
46
Comments
48
Adarsh
@adram3l3ch

All comments

  • Adarsh•1,640
    @adram3l3ch

    Hi Catherine you did a great job :) . You can sort out the border issue by making the border as a component itself and fetch about that country on that component. Also the problem of github pages with SPAs can be solved by using something like

    (function(l) {
        if (l.search[1] === '/' ) {
          var decoded = l.search.slice(1).split('&').map(function(s) { 
            return s.replace(/~and~/g, '&')
          }).join('?');
          window.history.replaceState(null, null,
              l.pathname.slice(0, -1) + decoded + l.hash
          );
        }
      }(window.location))

    You can refer about the same here

    Marked as helpful
  • Adarsh•1,640
    @adram3l3ch

    Hi Angela congrats on finishing the challenge. It seems like the image is missing. When I gone through your code I found the href you are using is /images/image-qr-code.png. The / means the root. When you host your site the root wont be your root folder. So you have to simply omit the / or simply use ./ instead of / which denotes the current folder.

    images/image-qr-code.png

    or

    ./images/image-qr-code.png

  • Adarsh•1,640
    @adram3l3ch

    Hi Bhremada Fevreano congratulations on finishing the challenge. Everything working just fine on all screen sizes. But It seems like from initial load infinite requests are sent to the server to fetch comments. Take a look at the problem. Also check the accessibility issues too.

    This thing not allowing me to submit the feedback since it is short so this is just blabbering dont care about this line

    Marked as helpful
  • Adarsh•1,640
    @adram3l3ch

    HI Catherine congratulations for finishing the challenge, you did a great job. I recommend the details tag for creating these kind of accordions. It is easier with the HTML elements "details" and "summary". In this way you can quickly create a perfomant and accessible accordion. CSS is only needed to create the accordion elements.

    You can refer about the details tag here

  • Adarsh•1,640
    @adram3l3ch

    It is caused by you've set position absolute to its child. Position absolute will take the element out of the flow. Since that div is the only child of main if it is gone main will feel empty :(

    Marked as helpful
  • Adarsh•1,640
    @adram3l3ch

    Your body now have a height equal to the card. So vertical align won't work. Give body height:100vh

    Marked as helpful
  • Adarsh•1,640
    @adram3l3ch

    Congratulations on finishing the challenge. I don't recommend using table in this scenario, instead you could use flex for this kind of layouts

    Marked as helpful
  • Adarsh•1,640
    @adram3l3ch

    Great job. I wonder why you put a span inside the form to read the comments but not the input tag

    Marked as helpful
  • Adarsh•1,640
    @adram3l3ch

    It is not recommended to use the font like this. It will only work for users who have the font installed on their machine. You can solve this by using Google fonts, fontface or using any common fonts like Arial.

    Marked as helpful
  • Adarsh•1,640
    @adram3l3ch

    You can create class with animation in css and toggle the class on click

    Marked as helpful
  • Adarsh•1,640
    @adram3l3ch

    Hey yoy did great 👍. You can solve the local storage problem using useEffect.

    useEffect(()=>
  localStorage.setItem
  ("comments",JSON.stringify(state))
  ,state)
    Marked as helpful
  • Adarsh•1,640
    @adram3l3ch

    Hi Jhon, congrats for finishing this one ✨.

    Lets talk about relative units.

    vh - view height - It is the height of your view port means screen. 100vh is equal to 100% of screen height similarly 50vh is 50% screen height.

    vw - view width - It is same as vh but instead of height here width is referred.

    rem - rem means relative to the root font size. By default 1rem is 16px. But if you increase the font size in root rem also incrases.

    em - similar to rem, but instead of relative to root in em it is relative to the nearest parent with fixed font size. Let's look at an example

    <div class="grand-parent">
  <div class="parent">
       <div class=child />
  </div>
</div>

:root{
   font-size:14px; //16px by default
}

.grand-parent{
  font-size:1rem;   //1 * root font size = 1 * 14px = 14px
  font-size:2rem;  // 2 * 14px = 28px
  font-size:1em;  // first check whether there is a parent with fixed font size. no such parent 
  except root , so 1em = 1 * 14px
}

.parent{
  font-size:2rem; // 28px
}

.child{
  font-size:2em; // parent has a font size of 28px so 2em = 2 * 28px = 56px
  font-size:2rem  //2 * 14px = 28px;

    Hope you understood the concept

    Marked as helpful
  • Adarsh•1,640
    @adram3l3ch

    Hi you've got a pull request. Take a look at it :)

  • Adarsh•1,640
    @adram3l3ch

    Great job ✨. Add perspective on .container, It will make the animation even better

    Marked as helpful
  • Adarsh•1,640
    @adram3l3ch

    Hi Abhic, You did great ✨. I recommend gsap for animations

    Marked as helpful
  • Adarsh•1,640
    @adram3l3ch

    You can store the todos as an object.and save that object in local storage.

    To get from LS localstorage.getItem(name) To set LS localstorage.setItem(name,value)

    Nb: Local storage can only store strings so you have to stringify the object before setting and parse it before getting.

  • Adarsh•1,640
    @adram3l3ch

    Hey congratulations for finishing this challenge, You can store the comments as an object and store the object in local storage. Then load it on initial load. Whenever you update coments update local storage too

    Marked as helpful
  • Adarsh•1,640
    @adram3l3ch

    You can align the span cost-month by wrapping the cost and cost-month in a div apply a display of flex on it.

    <div class="price-flexbox">
   <span class="cost">$29</span>
   <span class="cost-month">per month</span>
</div>

.price-flexbox{
   display:flex;
   align-items:center;
   gap:1rem;
}
    Marked as helpful