All comments

• 

  Lisa Allen• 520

  @CrypticMango

  Submitted almost 2 years ago

  I have a few questions about how to achieve the correct look on this project;

  1. How do I change the color of an SVG when it's in an image tag?
  2. How do I get the "speech bubble" look on the share panel in desktop view? Is creating a new div, styling a triangle, and using position to place it correctly the only way?
  3. In desktop view, how do I make it so the share panel is always going to be above the share button when clicked no matter how big or small the user's screen size is?

  

  Article Preview Component Vanilla HTML CSS and Javascript

  1

  20

  

  Daniel Perez Romo• 70

  @Daniel77apr

  Posted almost 2 years ago

  Hey, Shawtii!

  1. You need to use an svg tag, not an img tag. You can then set the fill property in CSS to change its color.
  2. What I did is make a div element with the desired weight and height, set rotate to 45deg and adjust its position. There are ways to make triangles by changing a div's border like shown on this video, but this works just fine since you can cover half of the square when positioning it to make it look like a triangle.
  3. You can use position: absolute and translate which lets you set its x and y position relative to itself so it is always at the right place. I did the same with the triangle div that we talked about in the second question.

  I hope this helps!

  0

  This comment has received 1 replyShow
• 

  Miguel Aponte• 30

  @MiguelAponte18

  Submitted almost 2 years ago

  I have made that when you press the "add to cart" button, a notification comes out and that when you press the button in the corner with the cart, it tells you the product that you added. How can I make the corner button only have to be pressed once and not twice?. Any advice to improve is welcome :)

  

  Product cart notification using flexbox and javascript

  2

  90

  

  Daniel Perez Romo• 70

  @Daniel77apr

  Posted almost 2 years ago

  Hey, Miguel!

  I,ve had this problem before. Try using b.style.visibility!='visible' instead of b.style.visibility=='hidden' as the condition in your last function like this:

  cart.addEventListener('click', function hola(){
      b.style.visibility!='visible'? b.style.visibility='visible': b.style.visibility='hidden';
  });
  

  I'm not sure why (beginner here), but I have noticed that JavaScript does not recognize property values previously added in CSS, only the ones added in JavaScript. So basically, after loading the page with the previous code, b.style.visibility=='hidden' returns false, and when you click for the first time, b.style.visibility='hidden' is run. Now that JavaScript added the hidden value, b.style.visibility=='hidden' returns true when clicking a second time and b.style.visibility='visible' is run. The new code solves this since b.style.visibility!='visible' returns true after loading the page.

  Hope this helps!

  0