CODEWITHSUNDEEP
javascriptcss
azaria.dee
azaria.dee

Reputation: 83

How to add CSS to elements after form submission using JS

I am currently creating a meme generator app where the user can submit an image, as well as top and bottom text. I want to make it so that after form submission, the text is added onto the image and styled using CSS. I have already tried adding a class to the elements and adding css to it but that does not work. Here is my code:

JS

let form = document.querySelector('#meme-form');
let img = document.querySelector('#img');
let topTxt = document.querySelector('#top-txt');
let bottomTxt = document.querySelector('#bottom-txt');

form.addEventListener('submit', function(e) {
    e.preventDefault();
    let memePic = document.createElement('img');
    //create the divs for the memes
    let newDiv = document.createElement('div');
    form.appendChild(newDiv);
    topTxt.classList.add('top')
    bottomTxt.classList.add('bottom')
    memePic.src = img.value;
    newDiv.append(memePic, topTxt.value, bottomTxt.value);

    //set the textbox inputs equal to nothing
    img.value = '';
    topTxt.value = '';
    bottomTxt.value= '';   

})

CSS

div {  
    width: 30%;
    height: 300px;
    margin: 10px;
    display: inline-block;
}
img {
    width: 100%;
    height: 100%;
    margin: 10px;
    display: inline-block;
}
.top{
    color: blue;
}
#bottom-txt {
    color: red;
}

HTML

<body>
    <form action="" id="meme-form">
        <label for="image">img url here</label>
        <input id="img" type="url"><br>
        <label for="top-text">top text here</label>
        <input id="top-txt" type="text"><br>
        <label for="bottom-text">bottom text here</label>
        <input id="bottom-txt" type="text"><br>
        <input type="submit"><br>
    </form>
    <script src="meme.js"></script>
</body>
</html>

Upvotes: 0

Views: 63

Answers (1)

Always Helping
Always Helping

Reputation: 14570

You just need to fix up some of logic how the elements are being appended after form is submitted.

For that you need to div after your form which will hold you results and then order your element to be displayed. I have also added a line hr to have separator between each results displayed.

You can style your element the way you would like them to be - i have added some basic CSS to show some styling and an actual img url for demo purpose only.

Live Working Demo:

let form = document.querySelector('#meme-form');
let img = document.querySelector('#img');
let topTxt = document.querySelector('#top-txt');
let bottomTxt = document.querySelector('#bottom-txt');
let results = document.querySelector('.meme-results');


form.addEventListener('submit', function(e) {
  e.preventDefault();
  let memePic = document.createElement('img');
  var hrLine = document.createElement('hr');

  //create the divs for the memes
  let newDiv = document.createElement('div');

  let topText = document.createElement('span');
  let bttomText = document.createElement('span');

  //Top text
  topText.classList.add('top')
  topText.textContent = topTxt.value

  //Img
  memePic.src = img.value;
  results.appendChild(topText);
  results.append(memePic);

  //bottom text
  bttomText.classList.add('bottom')
  bttomText.textContent = bottomTxt.value
  results.append(bttomText);
  results.append(hrLine);


  //set the textbox inputs equal to nothing
  //img.value = '';
  topTxt.value = '';
  bottomTxt.value = '';

})
.meme-results {
  width: 30%;
  height: 300px;
  margin: 10px;
  display: block;
}

img {
  width: 100%;
  height: 100%;
  display: block;
}

.top, #top-txt {
  color: blue;
}

.bottom, #bottom-txt  {
  color: red;
}
<html>

<body>
  <form action="" id="meme-form">
    <label for="image">img url here</label>
    <input id="img" type="url" value="https://via.placeholder.com/150"><br>
    <label for="top-text">top text here</label>
    <input id="top-txt" type="text"><br>
    <label for="bottom-text">bottom text here</label>
    <input id="bottom-txt" type="text"><br>
    <input type="submit"><br>
  </form>
  <div class="meme-results"></div>
  <script src="meme.js"></script>
</body>

</html>

Upvotes: 2

Related Questions