CODEWITHSUNDEEP
javascripthtmlcss
Sara Ree
Sara Ree

Reputation: 3543

position dynamically created dots from left upper corner to right lower corner

I want to add some red and green dots using javascript functions to the dots container like this:

const dots = document.querySelector('.dots');

function addGreenDot() {
    dots.innerHTML += `<span class="greenDot">.</span>`;
}

function addRedDot() {
    dots.innerHTML += `<span class="redDot">.</span>`;
}

for(let i = 0; i < 10; i++) {
    addGreenDot();
}

for(let i = 0; i < 10; i++) {
    addRedDot();
}
html, body {
    height: 100%;
}

body {
   background: #fafafc;
    margin: 0;
}

.flex-container {
  height: 100%;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dots {
  height: 30%;
  width: 80%;
  font-weight: bold;
  display: flex;
  position: absolute;
  font-size: 100px;
  top: 60%;
  outline: 0.1vw dashed orange;
  text-align: center;
}

.redDot {
  color: red;
}

.greenDot {
  color: green;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body> 

    <div class="flex-container">
        <div class="dots"></div>
    </div>

</body>

</html>

I want to position dots from upper left corner of the container to the right and lower corner like this:

enter image description here But I can't find a solution for this.. please help..

Upvotes: 0

Views: 95

Answers (2)

Kokodoko
Kokodoko

Reputation: 28128

You could use display:inline-block instead of flex to display the dots next to each other. As soon as a dot doesn't fit, it will jump to the next line. You don't need the outer container either.

HTML

<div class="dots"></div>

CSS

.dots {
  display:block;
  height: 30%;
  width: 50vw;
  font-weight: bold;
  font-size: 100px;
  outline: 0.1vw dashed orange;
  text-align: left;
}

.redDot {
  color: red;
  display: inline-block;
}

.greenDot {
  color: green;
  display: inline-block;
}

Upvotes: 0

Valerii Makhniuk
Valerii Makhniuk

Reputation: 308

const dots = document.querySelector('.dots');

function addGreenDot() {
    dots.innerHTML += `<span class="greenDot"></span>`;
}

function addRedDot() {
    dots.innerHTML += `<span class="redDot"></span>`;
}

for(let i = 0; i < 20; i++) {
    addGreenDot();
}

for(let i = 0; i < 10; i++) {
    addRedDot();
}
* {
  box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
   background: #fafafc;
    margin: 0;
}

.flex-container {
  height: 100%;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dots {
  width: 80%;
  padding: 20px;
  margin-right: -10px;
  margin-bottom: -10px;
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  outline: 0.1vw dashed orange;
}

.redDot {
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  margin-right: 10px;
  margin-bottom: 10px;
}

.greenDot {
  width: 10px;
  height: 10px;
  background-color: green;
  border-radius: 50%;
  margin-right: 10px;
    margin-bottom: 10px;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body> 

    <div class="flex-container">
        <div class="dots"></div>
    </div>

</body>

</html>

Upvotes: 1

Related Questions