Skip to content
OverviewSolutions
11
Comments
11

Craig Wolfe

@craigwolfePainesville, OH190 points

Freelance graphic and web designer.

Latest solutions

View more solutions

Latest comments

  • MarinaPerezR•90
    @MarinaPerezRSubmitted 23 days ago
    What are you most proud of, and what would you do differently next time?

    I think I am finally starting to understand how Grid is working, so I am quite happy with how I came up with the layout.

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

    I struggle with responsiveness, but I think I am starting to get it.

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

    I would appreciate any feedback on how I can improve my code, and also to know if I am doing something wrong :)

    Responsive "Testimonial Section" using Grid

    1
    Craig Wolfe•190
    @craigwolfePosted 23 days ago

    I believe your box-shadow is a bit too dark. I hard to determine some of the styles without the Figma files. Other than that you did a great job. If you want to view a really good video on CSS Grid watch this tutorial by Kevin Powell.

    Marked as helpful
    1
  • Craig Wolfe•190
    @craigwolfePosted 29 days ago

    I like that you used CSS variables. It seems that you used CSS grid to layout your cards. My only suggestions is to padding to the cards and align the heading and text left. It also seems like your second and fourth cards are different sizes. I used CSS Flexbox to layout my cards.

    0
  • Craig Wolfe•190
    @craigwolfeSubmitted 30 days ago
    What are you most proud of, and what would you do differently next time?

    I would have to say I am most proud of figuring out the JavaScript. Understanding how to use forEach loops, swap images and use addEventListeners.

    document.addEventListener('DOMContentLoaded', () => {
  const questions = document.querySelectorAll('.question');

  questions.forEach((question, index) => {
    const answer = document.getElementById(`answer${index + 1}`);
    const icon = question.querySelector('.toggle-icon');
//hide all answers on load
    const toggleAnswer = () => {
      if (answer.style.display === 'none') {
        answer.style.display = 'block';
        icon.src = 'https://github.com/myname/FAQ-Accordion/blob/main/assets/images/icon-minus.svg'; // Change to minus icon
      } else {
        answer.style.display = 'none';
        icon.src = 'https://github.com/myname/FAQ-Accordion/blob/main/assets/images/icon-plus.svg'; // Change to plus icon
      }
    };
//swaps the icon and shows the answer when clicked
    question.addEventListener('click', toggleAnswer);
//enter is pressed on the question the answer will toggle
    question.addEventListener('keydown', (event) => {
      if (event.key === 'Enter') {
        toggleAnswer();
      }
    });
  });
});

### What challenges did you encounter, and how did you overcome them?
One challenge I had was the path for swapping images in JavaScript will not display the images correctly in GitHub Pages. I had to retrieve the absolute path GitHub and use that in the JavaScript to get the images to render correctly.

### What specific areas of your project would you like help with?
I think I figured out everything I needed to on my own with internet resources.

    FAQ Accordion with JavaScript

    2
    Craig Wolfe•190
    @craigwolfePosted 30 days ago

    Actually I continued to have issues with the image. I thought I had a handle on it. But I realized it was still not correct.

    document.addEventListener('DOMContentLoaded', () => {
  const questions = document.querySelectorAll('.question');

  questions.forEach((question, index) => {
    const answer = document.getElementById(`answer${index + 1}`);
    const icon = question.querySelector('.toggle-icon');
//hide all answers on load
    const toggleAnswer = () => {
      if (answer.style.display === 'none') {
        answer.style.display = 'block';
        icon.src = `${window.location.origin}/${FAQ-Accordion}/assets/images/icon-minus.svg`; // Change to minus icon
      } else {
        answer.style.display = 'none';
        icon.src = `${window.location.origin}/${FAQ-Accordion}/assets/images/icon-plus.svg`; // Change to plus icon
      }
    };
//swaps the icon and shows the answer when clicked
    question.addEventListener('click', toggleAnswer);
//enter is pressed on the question the answer will toggle
    question.addEventListener('keydown', (event) => {
      if (event.key === 'Enter') {
        toggleAnswer();
      }
    });
  });
});

    ${window.location.origin}/${FAQ-Accordion}/assets/images/icon-plus.svg

    FAQ-Accordion is the name of my GitHub repo.

    0
  • P
    Mihailo Sparic•300
    @MihailoSparic01Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I’m proud of utilizing the <picture> element effectively and even prouder of completing my first JavaScript project!

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

    When I got stuck in JavaScript, I turned to the MDN documentation for help.

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

    With JavaScript itself, if there's anything I can improve, feel free to leave a comment below!

    Newsletter sign up validation

    2
    Craig Wolfe•190
    @craigwolfePosted about 1 month ago

    You have probably received this feedback already, but your component should be centered vertically and horizontally. Other than that your JavaScript looks great. Good Job!

    0
  • rodolphe2006•40
    @rodolphe2006Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    i'm so proud by the fact that i was able to complet this work ,and also because i've faced many problems and i was able to solve them at least at 70%.

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

    the biggest challenge i've encounter, was to make my web site responsive specialy in the computer part.

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

    i would like to help in design of web sites

    I used html, CSS and JavaScript to archive that work!

    1
    Craig Wolfe•190
    @craigwolfePosted about 1 month ago

    It looks like your Article preview component heigh size is a bit off. Without the Figma files can be tricky to get the right dimensions. HTML and JavaScript code look clean and organized. Good job.

    0
  • Craig Wolfe•190
    @craigwolfePosted about 1 month ago

    Good job on the desktop layout and getting the social media icons to trigger. I was hoping to look at your code but it looks like your GitHub repo may be gone. This is probably an old solution.

    0
View more comments