CODEWITHSUNDEEP
javascripthtmlcsslayout
VisualXZ
VisualXZ

Reputation: 213

JS Script position in HTML

I'm trying to create a simple app with HTMl, CSS and vanilla JS.

I've got an array, and ant to display its items in a box, with a button below it that gets the average of the array, which should also appear below the button.

So far, the layout has been very difficult, as I'm familiar with core JS and basic HTML, but never worked with scripts before. I can't make the button to be displayed below the array items and in the centre, no matter what I do. For it to appear after the array, I've applied flex box to the body, because I don't know how to create a wrapping html element, although I've seen some threads, don't know how to implement it.

Is there an easy way (avoiding JQuery) of doing this? Can't I just create a wrapping the script?

This is my code so far: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Test</title>
</head>

<body onload="mapping()">
  <script>
    const array = [2, 3, 4, 5];
    function mapping() {
      array.map(arrayItem => {

        let elements = document.createElement('p');
        elements.innerHTML = arrayItem;
        document.body.appendChild(elements);
        elements.classList.add("numbers");

      });
    }
  </script>


  <div class='container'>
    <div class='button'>
      <p>
        <button onClick="average()">Average</button>
      </p>
    </div>
    <div id='val'></div>
  </div>



  <script>
    function average() {
      const array = [2, 3, 4, 5]
      let count = 0
      let val = array.reduce((x, y) => {
        if (+y) {
          count++
          x += +y
        }
        return x
      }, 0)
      val = val / count;
      document.getElementById('val').innerHTML += val + '<br/>';
    }
  </script>

</body>


</html>



body {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  align-items: center;
  /* flex-wrap: wrap; */
}

.numbers {
  font-size: 5em;
  /* color: blue; */
  /* text-orientation: unset; */
  margin-top: 2em;
}

.button {
  padding: 1em;
  border: .2em solid red;
  margin-top: 20em;
  position: inherit;
}

Sorry I'm very junior and can't figure out how to do it.

Upvotes: 1

Views: 416

Answers (3)

Anshul Bansal
Anshul Bansal

Reputation: 1893

const array = [2, 3, 4, 5];
let arrayContainer = document.getElementById('arrayContainer');
(function mapping() {
  array.map(arrayItem => {
    let element = document.createElement('p');
    element.innerHTML = arrayItem;
    element.classList.add("numbers");
    arrayContainer.appendChild(element);
  });
})();

function average() {
  let count = 0
  let val = array.reduce((x, y) => {
    if (+y) {
      count++
      x += +y
    }
    return x
  }, 0)
  val = val / count;
  document.getElementById('val').innerHTML += val + '<br/>';
}
.container {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

#arrayContainer {
  display: flex;
  justify-content: space-evenly;
  border: 1px solid;
}

.numbers {
  min-width: 20px;
}

.button {
  margin: 20px 0px;
}
<div class='container'>
  <div id="arrayContainer"></div>
  <div class='button'>
    <button onClick="average()">Average</button>
  </div>
  <div id='val'></div>
</div>

Something like this maybe , you are trying to achieve?

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <!-- // <link rel="stylesheet" href="style.css"> -->
      <title>Test</title>
      <style>
         .container{
         width: 50%;
         margin: 0 auto;
         text-align: center;
         transform: translate(-50%,-50%);
         position: absolute;
         top: 50%;
         left: 50%;
         }
         #arrayContainer{
         display: flex;
         justify-content: space-evenly;
         border: 1px solid;
         }
         .numbers {
         min-width: 20px;
         }
         .button {
         margin: 20px 0px;
         }
      </style>
   </head>
   <body>
      <div class='container'>
         <div id="arrayContainer"></div>
         <div class='button'>
            <button onClick="average()">Average</button>
         </div>
         <div id='val'></div>
      </div>
      <script>
         const array = [2, 3, 4, 5];
         let arrayContainer = document.getElementById('arrayContainer');
         (function mapping() {
           array.map(arrayItem => {
             let element = document.createElement('p');
             element.innerHTML = arrayItem;
             element.classList.add("numbers");
             arrayContainer.appendChild(element);
           });
         })();
         function average() {
           let count = 0
           let val = array.reduce((x, y) => {
             if (+y) {
               count++
               x += +y
             }
             return x
           }, 0)
           val = val / count;
           document.getElementById('val').innerHTML += val + '<br/>';
         }
      </script>
   </body>
</html>

Upvotes: 1

user10108359
user10108359

Reputation:

You should place the array contents inside span tags instead of p tags.

body {
  display: flex;

  align-items: center;
  /* flex-wrap: wrap; */
}

.numbers {
  font-size: 5em;
}

.button {
  padding: 1em;
  border: .2em solid red;
  margin-top: 20em;
}
.container{

}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Test</title>
</head>

<body onload="mapping()">
  <script>
    const array = [2, 3, 4, 5];
    function mapping() {
      array.map(arrayItem => {

        let elements = document.createElement('span');
        elements.innerHTML = arrayItem;
        document.getElementById("numbers").appendChild(elements);
        elements.classList.add("numbers");

      });
    }
  </script>
 <span id="numbers" style="margin: 20px;">
 
 </span>

  <div class='container'>
    <div class='button'>
      <p>
        <button onClick="average()">Average</button>
      </p>
    </div>
    <div id='val'></div>
  </div>



  <script>
    function average() {
      const array = [2, 3, 4, 5]
      let count = 0
      let val = array.reduce((x, y) => {
        if (+y) {
          count++
          x += +y
        }
        return x
      }, 0)
      val = val / count;
      document.getElementById('val').innerHTML += val + '<br/>';
    }
  </script>

</body>


</html>

JSFiddle: http://jsfiddle.net/kru10xgd/11/

Upvotes: 1

Lennart
Lennart

Reputation: 1560

I'm struggling to fully understand where the issue is, I've gone and made a jsfiddle that I think does what you're interested in.

I have a feeling the problem is the fact that you use display: flex; on the body of the document. I've surrounded the numbers in a separate div element that now has the flex-display options assigned to it.

HTML

const array = [2, 3, 4, 5];

function mapping() {
  array.map(arrayItem => {
    let elements = document.createElement('p');
    elements.innerHTML = arrayItem;
    /*
      Adding the numbers to the elNumberArray div element in the HTML
    */
    document.getElementById("elNumberArray").appendChild(elements);
    elements.classList.add("numbers");

  });
  document.getElementById("elAverageButton").addEventListener("click", average);
}

function average() {
  const array = [2, 3, 4, 5]
  let count = 0
  let val = array.reduce((x, y) => {
    if (+y) {
      count++
      x += +y
    }
    return x
  }, 0)
  val = val / count;
  document.getElementById('val').innerHTML += val + '<br/>';
}

document.onload = mapping();
body {}


/* display-flex settings are now no longer on the whole body
but set for elNumberArray div element */

#elNumberArray {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  align-items: center;
  /* flex-wrap: wrap; */
}

.numbers {
  font-size: 5em;
  /* color: blue; */
  /* text-orientation: unset; */
  margin-top: 2em;
}

.button {
  padding: 1em;
  border: .2em solid red;
  margin-top: 20em;
  position: inherit;
}
<div id="elNumberArray">
  <!--Numbers are now inserted here-->
</div>
<div class='container'>
  <div class='button'>
    <p>
      <button id="elAverageButton">Average</button>
    </p>
  </div>
  <div id='val'></div>
</div>

The button and average are now displayed below the numbers.

Is this what you were looking for?

Upvotes: 1

Related Questions