All comments

• 

  James Choi• 20

  @jamesjschoi

  Submitted about 2 years ago

  Hello I will be appreciated if you guys can skim through the code and live site for any feedback. I used plain HTML, CSS and vanilla JavaScript for this project.

  Difficulties:

  1. What is the best practice for using svg? I used both <svg> tag and <img> tag for svg files because I had some trouble working with them on JavaScript and CSS.

  2. Would you say what I did in JavaScript to traverse DOM and to set EventListeners a clean and effective code? I feel like I could've refactor what I did in EventListeners into separate functions but did not quite know exactly how.

  3. I also struggled with the two responsive hero image. I assumed I was supposed to use srcset in html to tell the browser which image to go for depending on the size of the viewport. But I still couldn't make it as intended even after reading some documentation of srcset on MDN.

  4. For mobile view, I have 2 article within a section (on main) where I put display: flex on the section and gave flex: 0.5 on each article to give them 50% 50% separation. But it didn't work and I wonder why that is..? You can see that on the front page in mobile view where the hero image takes up about 60~70% of the viewport whereas the other half article takes about 30~40% of the viewport.

  5. If I missed any functionality or if there could be better way of doing things in HTML, CSS, JavaScript, please let me know!! Thank you!

  

  Intro section with dropdown navigation

  1

  31

  

  sudarshan hosalli• 510

  @sudarshan161219

  Posted about 2 years ago

  you did great job with js focus on css

  0
• 

  Elicanto• 30

  @Olivia206

  Submitted over 2 years ago

  Hi ! I'm glad I completed this project (even if I think I did a loooot of mistakes and useless things) but I have absolutely no idea of how to reduce a string in medium and small screens... (so I cheated a little haha).

  And my slider is a little bit broken in the modal, but right now I can't think of a solution...

  Any feedback is welcomed, I'm a real newbie to javascript so I would love to have some advices !

  

  Responsive e-commerce product page using SCSS/HTML/JS

  2

  60

  

  sudarshan hosalli• 510

  @sudarshan161219

  Posted over 2 years ago

  hey cheers for completing the challange 🎉

  layout looks good just little bit of padding and margin adjustment 👌

  for image carousel / image slider here is my solution👇

  HTML

  <aside class="slider"> <div class="slider-container"> <div class="slide"> <img class="product-img product-img-1" src="images/image-product-1.jpg" alt="product-img"> </div> <div class="slide"> <img class="product-img product-img-2" src="images/image-product-2.jpg" alt="product-img"> </div> <div class="slide"> <img class="product-img product-img-3" src="images/image-product-3.jpg" alt="product-img"> </div> <div class="slide"> <img class="product-img product-img-4" src="images/image-product-4.jpg" alt="product-img"> </div> </div> <div class="next-prev-desktop"> <div> <img class="previous-desktop" src="images/icon-previous.svg" alt="previous"> </div> <div> <img class="next-desktop" src="images/icon-next.svg" alt="next"> </div> </div> </aside>

  CSS

  .slider { position: absolute; right: 0; left: 0;

  }

  .slider-container { width: 100%; margin: 0 auto; /* height: 40vh; */ min-height: 280px; max-width: 80rem; position: relative; overflow: hidden; }

  .slide { position: absolute; width: 100%; height: 100%; display: grid; place-items: center; transition: all 0.25s ease-in-out; text-align: center; }

  JavaScript const productThumbnail = document.querySelectorAll('.product-thumbnail');

  const slides = document.querySelectorAll('.slide');

  const nextBtn = document.querySelectorAll('.next');

  const prevBtn = document.querySelectorAll('.previous');

  slides.forEach(function (slide, index) { slide.style.left = ${index * 100}%; });

  let counter = 0;

  nextBtn.forEach(function (next) { next.addEventListener("click", function () { counter++; carousel(); }); });

  prevBtn.forEach(function (previous) { previous.addEventListener("click", function () { counter--; carousel(); }); });

  function carousel() { if (counter === slides.length) { counter = 0; } if (counter < 0) { counter = slides.length - 1; }

  slides.forEach(function (slide) { slide.style.transform = translateX(-${counter * 100}%) }); }

  happy coding

  0
• 

  Chan Myae Aung• 80

  @cma124

  Submitted over 2 years ago

  Some animations are used in this component. Please check out. Any feedback is welcome.

  

  Interactive rating component with Vanilla JavaScript & Animations

  2

  40

  

  sudarshan hosalli• 510

  @sudarshan161219

  Posted over 2 years ago

  hello, good job

  1
• 

  Oussama Zouaine• 250

  @OussamaZouaine

  Submitted over 2 years ago

  Hii Frontendmentor Community, this is my solution to the interactive rating component challenge using TailwindCss.

  So feel free to drop your feedback, I would love to hear your opinion.

  

  Interactive rating component with TailwindCSS

  1

  50

  

  sudarshan hosalli• 510

  @sudarshan161219

  Posted over 2 years ago

  good job bro

  1

  This comment has received 1 replyShow
• 

  sudarshan hosalli• 510

  @sudarshan161219

  Submitted over 2 years ago

  hello 👋 coders

  please review my challage and feedback will be highly appreciated☺

  have a nice day

  

  pure HTML CSS & JAVASCRIPT

  3

  60

  

  sudarshan hosalli• 510

  @sudarshan161219

  Posted over 2 years ago

  @Sdann26

  thanks for helpful feedback

  1
• 

  Joanna• 370

  @JoannaLapa

  Submitted over 2 years ago

  Hi Everyone!

  This is my first project attached here. I will appreciate any feedback ;).

  Thank you!

  

  Interactive rating component

  2

  72

  

  sudarshan hosalli• 510

  @sudarshan161219

  Posted over 2 years ago

  nice job bro

  Marked as helpful

  0

  This comment has received 1 replyShow