Submitted almost 2 years ago

Newsletter sign-up form with success message using BEM

bem

Parviz Azeroglu•150

@ParvizAzeroglu

A solution to the Newsletter sign-up form with success message challenge

Preview Code

Solution retrospective

Background Image Issue:

-- Problem: I'm attempting to set a background-image in CSS, but I'm not successful. The background image is not being displayed.

-- Code Example :

.my-element {
  background-image: url('path/to/image.jpg');
}

Img Tag SRC Setting Issue

-- Problem: I'm trying to set the src of an <img> tag using JavaScript, but I'm still not succeeding.

-- Code Example:

var imgElement = document.getElementById('my-img');
imgElement.setAttribute(" src ", "path/to/image.jpg");

-- Question: How can I correctly set the src attribute of an <img> tag using JavaScript?

Hover Effect Not Working on Success Button:

-- Problem: The CSS I provided for the success button doesn't seem to work when I hover over it.

-- Code Example : in my style.css file

-- Question: Why aren't the CSS styles I defined for the hover state of the success button working?

(I'm using Markdown for the first time, so please excuse any mistakes or issues that may occur. <3)

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

solitary_coder•1,000
@kabir-afk
Posted almost 2 years ago
Hey!!,

as far as hover effect is concerned
```
.success__button:hover {
  background: rgb(255, 91, 73);(No need to add this since things are prioritized as you go down below)
  background: linear-gradient(
    90deg,
    rgba(255, 91, 73, 1) 19%,
    rgba(255, 98, 77, 1) 44%,
    rgba(255, 82, 123, 1) 64%,
    rgba(255, 91, 128, 1) 82%,
    rgba(255, 82, 123, 1) 98%
  );
  -webkit-box-shadow: 17px 81px 62px -25px rgba(171, 11, 0, 1);
  -moz-box-shadow: 17px 81px 62px -25px rgba(171, 11, 0, 1);
  box-shadow: 17px 81px 62px -25px rgba(171, 11, 0, 1);(You are spreading the box-shadow in the -ve dir , maybe that's why you are unable to see it)
}
```
No need to define each and every shade of color in linear-gradient , unless they are shades of diff color, you could have used to or simply the start and end color , it literally would have been the same

As far as the box-shadow is concerned , maybe you wanted to add its effect inside your div rather than outside , for that you should have used inset and reset the dimensions of other properties . . . but if not then try removing -25px and you will start seeing your shadow on hover

Regarding JS

Are you sure setAttribute is at fault ???? Maybe your if-condition is wrong . . . idk , but if its not wrong you then can try changing the src of image by
```
var responsiveImg = document.getElementById("img");
responsiveImg.src = "./assets/images/illustration-sign-up-mobile.svg"
```
It'll work the same way . . .

Corrections to be made
1. Look , if you are unsuccessful in importing your font-family by using @font-face, then try copying the link tag provided on google font api
2. When the form is submitted , the user is supposed to see their own email-id on the success message , not a diff email id . . . hope you make these corrections . . . keep the grind!!! 💪💪
Marked as helpful
ajeet achal•510
@ajeetachal
Posted almost 2 years ago
to display background image you have define length and with and add this

.my-element { background-image: url('path/to/image.jpg'); background-position: center; background-size: cover; }

** Img Tag SRC Setting Issue **

It looks like you're on the right track, but there seems to be a small issue with the code. It appears that there are extra spaces in the attribute name and value. Try removing those spaces, and your code should work as expected. Here's the corrected code:

var imgElement = document.getElementById('my-img'); imgElement.setAttribute("src", "path/to/image.jpg");/
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord