All solutions

This was an hard challenge, there is still some bugs but it works good and without problems. If you can check my code, especially the JS, i would be really happy to receive some advice! it was my first intermediate level challenge, and i'm surely made many mistakes, i look forward to receive every suggestion! Happy coding!

I guess i did a good job this time, i like it ))

Anyway, as always i have some question, but most of all, if somebody would be so nice to check my code, i would know how to improve the JS part. Everything works exactly as i want, but i'm sure i could have done it better.

I also added to possibility to "unchek" the notification singularly.

I also have a doubt, i'm using the css to style the page and interacting with JS file adding and removing classes that i previously write in the css, but i often see programmers writing js directly inside the html, or in a separate file but using the .style method directly inside the js code, can you suggest me which mode you think is the best practice??

Thank you all guys and Happy Coding :) ;)

I concentrated on the JS, even is the smallest part.

I had 2 problems here, First is the big scroll i have, due to the background img size. I tried to reduce the height but doing it the design was not as in the example picture. Second one is about the z.index. There are parts of the images that shouldn't be visible, i tried to do it with z-index but i needed to put the position relative (mines are absolute), and with realtive the scroll was even bigger.

It was a bit long but i didn't have particular problems on this project, except for two things, and i'll be glad to everybody who will find a solution!!

First, i still have a little scroll on the desktop version, but not on the mobile.. i set as always: width: 100vw; height: 100vh; margin: 0; padding: 0; on the body, but i still have it..

Second, at the end of the page, in the footer, i set a grid for the links, but i wasn't able to align the text on the left as shown in the reference picture of the project; i tried with the main command, text-align, align-item, align-content and justify-content, but nothing works..

By the way, i will be glad for every comment on every mistakes i made in this projec! Thank you guys and Happy Coding!!

Many days passed till my last challenge, hope this will be good )

I started using grid display, is the first project for me using it, i hope i did it in the correct way, but i always look forward to receive advices from anybody who would check my code and help :)

This is also the first time i use the mobile first approach, for this project i admit is much easier than start from the desktop version, but let's see the next! )

Everybody happy coding! ;)

I have a few questions about this project, and i'll be very glad to everybody who would reply me ! )

About the styling, so css (i guess), first of all, how i can get the white arrow in the button after pressing it? i tried many possibilities, but being an img i really don't know how to change the color..;

Second question, also about the button, i add the hover, but i wanted to leave the darkest color of the arrow background after clicking on it, i tried the visited element but it ddidn't work for some reason.. i don't know why..;

Third question, in my way you must click to let appear the "cloud", and click again to let it disappear, i wanted to improve such situation that when you just hover on the button the cloud appear, and disappear when you move out the cursor, without clicking on it, i think is js but i didn't found the correct sintax, or maybe i should add something in the html tag instead of onclick, i don't know )

Last question, but is just a curiosity, i wonder if i could add this action with eventListener, instead of an onclick =function in the html tag )

I hope is not to long to read, anyway i really thanks all who will explain me even one of this point, thank you guys and everybody happy coding!! ))

Thank you guys to check my really first project with js! I have a question if somebody would check my work, about the Javascript file. In the index.js i save the selected vote (1 or 2 or etc) with addEventListener, and a function that store the value in a new variable to bring it in the second html page.. well, i was wondering if it was possible to do it without the eventListener, if there is another way to store a variable from a selected button after a click. This way is really short, but even if i used it i don't really understand it (i copied from a project a did during the js course). I mean, for me the addEventListener should be used to add an event, such as play a sound, show an image, text, or something that happen (the event) after the click, but in this case i used it only to take out a value and put it inside a variable, is there a more "proper" way to do it? Thanks everybody for the suggestions and happy coding!!

It's the first project using media query for responsive and grid layout for desktop size. I basically didn't have particular problems, i just tried many times positioning all the components and write double the css for the 2 different layout! I'm sure there are many things i can do better, especially the last section with comments (the CSS there is a mess). Any comments and tips will be well accepted, particulary on grid and media query. Everybody happy coding!!

First of all, i have to say i didn't make the mobile version, i didn't "study" yet the css queries to change styles for different devices, is a giant argument ) but i'll do it soon! Btw, i tryed to do as much responsive as i can using flex display (using wrap fot the image and the info content). Anyway, if somebody would give me any suggestion on how to start coding with queries and to code real responsive, i'll be very happy! About this project, i have one question about css sintax; i wanted to change the font size of the 3 paragraph inside the div "data" and i tried writing .data > p {} but it didn't work so i did it separately for each p, anybody knows if is possible to do it, and if so what i did wrong? _ Thanks everybody and happy coding!

I started this challenge thinking was easy, but it wasn't :P i learnt many new attributes coding this page ) Btw, i have 2 questions: First, again, about the round borders.. (my nightmare!). As you can clearly see from the button (but i have the same problem on all the round borders) the round borders are not round, at the sides there are a kind of "cut" that doesn't allow to complete the radius, and i really don't know how to fix it.. Second, to easily manage the text style in the button , i add inside the button tag the paragraph tag (<button><p> text </p></button>) but doing this i lost the pressure characteristic typical of the button when you press it. I did this because using only the button tag i wasn't able to change the text style (as color and font), anybody knows how to do it? Thanks everybody in advance! )

Hello guys and thanks for watching and sharing your comments and suggestion with me! There are 2 main things i'm not happy about this project: 1-Again, and again, and again.. i'm not able to get a real, round, borders on my projects.. i always use border-radius, and for the images it always works, but when i use it on the general layout (divs, sections, etc) i never get a completly round borders.. anybody knows what i do wrong? 2- In the Main design, when you hover on the pic, the opacity is "bright", kind white, mine is darker.. i tryed to change the background color of the section.image and div.eye (check the code if you want) with a white colo, but nothing changed.. Btway, thank you for any suggestion you can give me to code better!

Hey guys, thanks for watching my project and for any suggestion! I have one main question, i couldn't use flex display to perfectly center the image vertically (align content: center, even if i added it) because after checking i saw that the body didn't cover the entire page, so the image was basically centered because the body height was exacly like the main height.. i had to add a padding to the body bottom and vertically move the rest down with the top margin.. i tried to add 100% height and width to the body without results.. anybody knows how to fix it? thanks everybody in advance, and happy coding!

First project, still much to learn, i had some problems with button border radius, i used an input tipe button to do it but i did'nt get a completely round border