Merge pull request #1 from CBID2/feat-event-when-user-entered-into-th…

…e-party

Feature: Changing the background image when the activity was picked + fix little errors with images

.gitignore

@@ -0,0 +1 @@
+.idea

README.md

@@ -49,3 +49,11 @@ You can see the final result [here](https://glam-up-my-markup-submission.vercel.
 
 - [Christine Belzie](https://dev.to/CBID2) as [@CBID2](https://github.com/CBID2)
 - [Thomas Bonnet](https://dev.to/thomasbnt) as [@thomasbnt](https://github.com/thomasbnt)
+
+## Credits
+
+- [Hiking image](https://pixilart.com/art/hiking-3f6fcbd0ee49c22) by [@rubyraven](https://pixilart.com/rubyraven)
+- [Canoeing image](https://www.pinterest.fr/pin/515169644858759631/)
+- [Fishing image](https://www.pixilart.com/art/a-fisherman-just-fishing-in-the-night-sr2a1fd3c1f0aaws3) by [@moelly](https://www.pixilart.com/moelly)
+- [Crafts image](https://www.artstation.com/artwork/Rnd9Qm) by [@eiskalterengel183](https://www.artstation.com/eiskalterengel183)
+- [Archery image](https://www.pixilart.com/art/target-98185e319ba5?) by [@banzkuz](https://www.pixilart.com/banzkuz)

public/script.js

@@ -18,6 +18,7 @@ submit.addEventListener("click", (event) => {
     newActivity.textContent = `A new player who loves ${activity.value} entered into the party!`;
     submit.insertAdjacentElement("afterend", newActivity);
     submit.disabled = true;
+    document.body.style.backgroundImage = `url(./images/${activity.value}.png)`;
     setTimeout(() => {
       newActivity.classList.remove("newPlayerEnteredIn");
         setTimeout(() => {

public/styles.css

@@ -1,16 +1,17 @@
 body {
 	margin: 0;
 	padding: 0;
-	background-image: url(/images/campfire.jpg);
+	background-image: url("images/campfire.jpg");
 	background-repeat: no-repeat;
 	background-size: cover;
 	background-position: center;
 	min-height: 100vh;
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	cursor: url(/images/cursor_pointer.png), pointer;
+	cursor: url("images/cursor_pointer.png"), pointer;
 	backdrop-filter: blur(4px);
+	transition: 3s ease-in-out;
 }
 
 section {
@@ -43,6 +44,7 @@ textarea {
 }
 h1 {
 	color: #d83f16;
+	text-shadow: 2px 2px 0 #000;
 }
 select,
 textarea {
@@ -57,7 +59,7 @@ label {
 }
 
 select {
-	cursor: url(/images/cursor_pointer.png), auto;
+	cursor: url("images/cursor_pointer.png"), auto;
 }
 
 form {
@@ -70,7 +72,7 @@ form {
 	width: 80%;
 	max-width: 600px;
 	padding: 20px;
-	background-image: url("/images/grey-pixel.jpg");
+	background-image: url("images/grey-pixel.jpg");
 	background-repeat: repeat;
 	background-size: 8px 8px;
 	border-radius: 8px;
@@ -120,7 +122,7 @@ option {
 	background-color: #fff;
 }
 
-submit {
+button[type="submit"] {
 	display: flex;
 	justify-content: center;
 }
@@ -135,15 +137,15 @@ button {
 	color: #000;
 	font-weight: bolder;
 	background-color: #fff;
-	cursor: url(/images/cursor_pointer.png), auto;
+	cursor: url("images/cursor_pointer.png"), auto;
 }
 
 button:active {
-	cursor: url(/images/cursor_pointer.png), auto;
+	cursor: url("images/cursor_pointer.png"), auto;
 }
 
 button:hover {
-	cursor: url(/images/cursor_pointer.png), auto;
+	cursor: url("images/cursor_pointer.png"), auto;
 	background-color: #000;
 	color: #fff;
 }