Надписи на "баллонах" - пример html js css

• HTML код


• CSS код
• JS код
• Результат кода

<div class="container">   

   

    <h2 id="count">0</h2>

    <div class="saveBox">      

      <small>Use</small>

      <p class="saveNumber"></p>

    </div>    

       



    <div class="buttons">

      <button class="increment">Add a balloon</button>

      <button class="decrement">Start the travel</button>

      <button class="save">Store the balloons</button>

    </div>



    <div class="control">     

      <small class="plus">Add saved balloons</small>

      <small class="minus">Send all to a black hole</small>

    </div>

    <div class="images">

    </div> 

    

    <h1> The Hot Air Balloon Station </h1>    

  </div>

:root {

  --color-add: #b18d19a9;

  --color-deduct: #b94c318e;

  --color-deduct2: #b94c31c0;

  --color-save: #2ca1cf86;  

  --color-text: #fafafa;

}



* {

  box-sizing: border-box;

  padding: 0;

  margin: 0;

}





body {

  font-family: 'Montserrat', sans-serif;

  color: var(--color-text);

  font-size: 1.5rem;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  text-shadow: 1px 1px 5px #0000008f;



}



.container {

  width: 90%;

  min-width: 300px;

  max-width: 800px;

  min-height: 800px;

  height: 100vh;  

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-evenly;

  background-image: url(https://assets.codepen.io/3727449/nature.jpg);

  background-size: cover;

  position: relative;

}





/* Number showing up the top right */

#count {

  font-size: 3rem;

  position: absolute;

  top: 0px;

  right: 10px;

}



/* Box appearing with a stored number on the top left */

.saveBox {

  width: 130px;

  height: 50px;

  background-color: #00000073;

  transition: all 0.8s ease;

  border-radius: 0px 0 10px 0px;  

  color: var(--color-text);

  display: flex;

  font-size: 0.7rem;

  padding: 10px;

  align-items: center;

  justify-content: center;

  text-align: center;

  opacity: 0;

  transform: scale(0);  

  z-index: 10;

  position: absolute;

  left: 0;

  top: 0;

}



.saveBox small {

  width: 100%;

  background-color: var(--color-save);

  border-radius: 5px;

  padding: 5.5px;

  font-size: 0.7rem;

  margin: 20px;

}



.saveBox:hover {

  background-color: #fafafa5e;

  cursor: pointer;

}



.saveBox:active {

  background-color: #2ca1cf86;

}



/* two buttons for adding saved balloons to current balloons & resetting */

.control {

  display: flex;

  flex-direction: column;

  width: 100%;

  margin-top: 220px;

  height: 70px;

  justify-content: space-evenly;

  position: absolute;

  top: 0;

  right: 0;

}





.control span {

  display: block;

  margin: -2px;

  font-size: 0.9rem;

}



/* add saved balloons to current or remove all */

.plus, .minus {

  width: 100px;

  height: 50px;

  font-size: 0.7rem;

  background-color: #ffffff1a;

  padding: 7px;

  margin: 10px;

  margin-bottom: 3px;

  text-align: center;

  border-radius: 5px;

  cursor: pointer;

  z-index: 20;

}



.plus {

  background-color: var(--color-add);

}

.minus {

  background-color: var(--color-deduct);

}



/* Buttons to add, remove and store the balloons */

.buttons {

  display: flex;

  justify-content: center;

  flex-direction: column;

  margin-top: 400px;

}



button {

  width: 50vw;

  min-width: 235px;

  max-width: 550px;

  height: 50px;

  color: #fafafa;

  font-size: 1.2rem;

  font-weight: bold;

  border-radius: 10px;  

  border: none;

  z-index: 100;

  box-shadow: 2px 2px 5px #0000005b;

  margin-bottom: 20px;

}





button:hover {

  background-color: #fafafa86;

  transition: all 0.2s ease;

  cursor: pointer;

}



button:active {

  transform: scale(0.9);

}



.increment {

  background-color: var(--color-add);

}



.decrement {

  background-color: var(--color-deduct);

}



.save {

  background-color: var(--color-save);

}





/* Balloons launched or removed */

.images {

  display: flex;

  justify-content: flex-start;

  z-index: 10;

  width: 70%;

  height: 700px;

  max-width: 550px;

  max-height: 100%;

  flex-wrap: wrap;

  position: absolute;

  right: 0;

  top: 0;

  overflow: hidden;

  align-items: center;

}



.images img {

  margin-right: 70px;

  display: block;

  width: 30px;

  transform-origin: bottom;

  opacity: 0;

  animation: up 1s forwards;

  transition: animation 2s ease;  

}



.dissolve {

  opacity: 0;

  transition: opacity 2s ease;

}



/* Balloons animation */

@keyframes up {



  0% {

    transform: translateY(0);

  }



  100% {

    transform: translateY(-50px);

    opacity: 0.8;

  }

}



/* title */

h1 {

  position: absolute;

  margin-top: 20px;

  bottom: 20px;

  font-size: 1.3rem;  

  min-width: 329px;

  text-align: center;

}

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

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

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

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

const countScreen = document.getElementById('count');

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

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

const currentPlusSaved = document.querySelector('.plus');

const blackhole = document.querySelector('.minus');



let count = 0;

let reset = 0;



const balloonUp = () => {

  if (images.classList.contains("dissolve")) {

    images.classList.remove('dissolve');

  }

  let balloon = document.createElement('img');

  balloon.src = `https://assets.codepen.io/3727449/Asset+${Math.floor(Math.random() * 9) + 1}.svg`;

  images.appendChild(balloon);

};



const balloonRemove = () => {

  let lastBalloon = images.lastElementChild;

  lastBalloon.style.translate = "600px 0";

  lastBalloon.style.opacity = 0;

  lastBalloon.style.transition = "all 0.3s ease";

  setTimeout(() => {

    lastBalloon.remove();

  }, 500);

};



const dissolved = () => {

  images.classList.add('dissolve');

  setTimeout(() => {

    images.innerHTML = '';

  }, 1000);

  countScreen.innerText = 0;

  saveNumber.innerText = 0;

  count = 0;

};



const savedBalloons = () => {

  let moreBalloons = parseInt(countScreen.innerText) - images.children.length;

  for (let i = 0; i < moreBalloons; i++) {if (window.CP.shouldStopExecution(0)) break;

    balloonUp();

  }window.CP.exitedLoop(0);

};



const saveBoxGone = () => {

  saveBox.style.opacity = 0;

  saveBox.style.transform = "scale(0)";

  saveBox.style.translate = "350px 350px";

};



// "Add" button click event 

increment.addEventListener('click', () => {

  count = parseInt(countScreen.innerText) + 1;

  countScreen.innerText = count;

  balloonUp();

  if (parseInt(countScreen.innerText) <= 0) {

    images.innerHTML = '';

  }



});



// "subtract" button click event 

decrement.addEventListener('click', () => {

  if (count === 0) {

    countScreen.innerText = 0;

  } else {

    count = parseInt(countScreen.innerText) - 1;

    countScreen.innerText = count;

    balloonRemove();

  }

});



// "save" button click event 

save.addEventListener('click', () => {

  saveNumber.innerText = countScreen.innerText + " saved";

  saveBox.style.opacity = "1";

  saveBox.style.transform = "scale(1)";

  saveBox.style.translate = "0px 0px";

  countScreen.innerText = reset;

  count = reset;

  images.innerHTML = '';

});



// "corner box with saved number on click event"

saveBox.addEventListener('click', () => {

  count = parseInt(saveNumber.innerText);

  countScreen.innerText = count;

  savedBalloons();

  saveBoxGone();

});



// current + saved number click event

currentPlusSaved.addEventListener('click', () => {

  if (saveNumber.innerText) {

    let numberSaved = parseInt(saveNumber.innerText);

    countScreen.innerText = numberSaved + count;

    savedBalloons();

  }

});



// make the balloons disappear and reset the scene



blackhole.addEventListener('click', () => {

  saveBoxGone();

  dissolved();

});

//# sourceURL=pen.js