All solutions

Pretty happy with this. Feedback always welcome.

How do you keep the little box image in the same place on the desktop version? It is in the right place for the 1440px width, but if you change the screen size it goes all over the place. I tried position fixed and sticky but that did not work for some reason (I had the parent element on position relative but that gave issues too..)

This was a fun one to practice grid layout.

This is my first Javascript project. I watched some courses for Javascript, learning the basics. I haven't learned all of it yet, but I felt lost so I wanted to just do a challenge without having gone through all the material and see where it brought me... I figured out how to get the rating buttons to work and show the value in the text. There might be a better/simpler way, but this was done completely on my own so I left it this way.

The showing and hiding of the 2 different elements (Survey and Thank you) after submitting was difficult. I searched the internet and found this on stack overflow, I did change the id names to apply to my code:

/*

if (document.getElementById('survey')) {

if (document.getElementById('survey').style.display == 'none') { document.getElementById('survey').style.display = 'block'; document.getElementById('afterSubmit').style.display = 'none'; } else { document.getElementById('survey').style.display = 'none'; document.getElementById('afterSubmit').style.display = 'block'; } } */

It worked but I didn't fully understand it. After reading it over and over I think it means:

if (document.getElementById('survey')) <-- this equals to true, so it runs the next if/else statement within its block. Does this if statement only run once when page is loaded? not after that?

if (document.getElementById('survey').style.display == 'none') <-- this if statement equals to false, skipping the code in the if statement and going to else instead. The else conditions then only activate when clicking on the button.

This code is supposed to be a toggle, if I would have had another button on the afterSubmit element I could click on that button and after clicking the button. The if statement: if (document.getElementById('survey').style.display == 'none') now equals to true and runs the code within, hiding the afterSubmit element and showing the survey again.

Because I didn't need to toggle between the 2 elements I simplified my code, and it works!

Please let me now if what I'm saying is wrong, and also what are potential other ways to approach this?

Helpful tips are always welcome. I was wondering if I am maybe declaring things in CSS that are unnecessary or if I am doing things double in different rule sets. I went over it myself and for example I found out that I did a justify content: center, but when I removed it, it didn't change anything at all, thus making it unnecessary. Or I declared a width somewhere and found out I also did it somewhere else, making the first one also unnecessary.

The JPG design included are a lot smaller, in the style guide it says to use 18px font-size and that was way bigger than the design image showed, So my design is a bit bigger than the photo, but still ok, I think. Feedback always welcome.

I got really far on my own with this challenge, but I got stuck at changing the images when going from mobile to desktop and my white container stayed really big or my image didn't fit into the container anymore. Eventually I watched the tutorial on youtube from Kevin Powell and learned a lot more. (https://youtu.be/B2WL6KkqhLQ)

I put comments in my code to indicate which elements I got from the tutorial. Where there is no comment I did the code by myself.

What do I still need to learn: I am going to deep dive in Flexbox and grid, because that is still very hard. I am still a real newbie, there are lots of things I don't know yet, but I wanted to start practicing as much as possible with the things I already do know, the clip, clip-path didn't ring any bells yet, so I am going to study up on that as well.

I used HTML and CSS. I centered the whole thing with Flexbox, I don't know if that was the right way to go though? The readme file of the challenge gave the width for mobile and desktop. But I didn't use that in my code, how should I use this? When checking in inspector mode in chrome on the exact width of the mobile version it already looked exactly as it should be without having to do anything in CSS to scale it, is this because of flexbox?

Feedback is welcome. I was wandering if I was using things that are unnecessary. Also, for some reason the live deployment of github doesn't show the image...?