Make div not visible only the first time page loads

user_18105911 0
Viewed 55

I want my .card div on the right side of the page (or at the bottom half when screen is less than 1000px) to appear only after pressing Enter button. And then again to appear the same way after each subsequent 'Enter'. Animation works correctly, only thing I can't make it work is to have .card hidden first time I load the page. I have tried with opacity: 0, but in that case .card will disappear right after the animation end. I have also tried to tweak with height property, but in that case my responsive page didn't look as expected. How can I fix this?

html:

  <div class="container">
      <div class="intro">
        <code>WEATHER</code> <br />
        <h1>DATA AND FORECAST</h1>
        <br />
        <input
          type="text"
          name="cityInput"
          class="cityInput"
          id="cityInput"
          placeholder="Enter city name and press Enter..."
        />
      </div>
      <div class="output">
        <div class="card"></div>
      </div>
    </div>

css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.container {
  min-height: 100vh; 
  background-image: url("https://images.unsplash.com/photo-1488866022504-f2584929ca5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1162&q=80"); /* The image used */
  background-color: #cccccc; 
  background-repeat: no-repeat;
  background-position: center; 
  background-size: cover;
  isolation: isolate;
  display: flex;
}

.intro {
  position: relative;
  width: 40%;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #2567a7;
  mix-blend-mode: multiply;
}

code {
  display: block;
  width: max-content;
  background: #fff;
  color: #2567a7;
  padding: 10px;
  margin: 2%;
  font-size: 40px;
  font-weight: bold;
  border-radius: 5px;
}

.intro h1 {
  font-size: 60px;
  font-weight: bold;
  color: #fff;
  margin: 2%;
}

.cityInput {
  outline: none;
  border: none;
  background: white;
  padding: 10px;
  margin: 2%;
  border-radius: 5px;
  font-size: 20px;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #2567a7;
  text-align: left;
  width: 50%;
}

.cityInput::placeholder {
  color: #2567a7;
  text-align: left;
}

.output {
  width: 67%;
  display: grid;
  place-items: center;
}

.card {
  width: 60%;
  height: 60%;
  background: #030815;
  color: #fff;
  transition: all 2s;
}

.card:hover {
  background: rgba(3, 8, 21, 0.8);
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media screen and (max-width: 1000px) {
  .container {
    flex-direction: column;
  }

  .intro {
    width: 100%;
    height: 40%;
    align-items: center;
    padding: 2%;
  }
  code {
    font-size: 20px;
    margin: 1%;
  }
  .intro h1 {
    margin: 1%;
    font-size: 30px;
    font-weight: bold;
  }
  .cityInput {
    margin: 1%;
  }
  .output {
    margin: 0 auto;
    margin-top: 5%;
    width: 80%;
  }
  .card {
    width: 100%;
    height: 55vh;
  }
  .cityInput {
    font-size: 16px;
  }
}

js:

const cityInput = document.querySelector("#cityInput");
const card = document.querySelector(".card");

const pressEnter = (e) => {
  let city = cityInput.value;

  if (e.key === "Enter") {
    console.log(city);
    card.innerHTML = `<div><h1>${city}</h1> <h2>${city}</h2></div>`;
    cityInput.value = "";

    card.style.animation = "appear 2s linear";
    card.addEventListener("animationend", function () {
      card.style.animation = "";
    });
  }
};

cityInput.addEventListener("keydown", pressEnter);
css javascript
2 Answers

Just adding opacity: 0 to your .card class and setting its opacity to 1 in your function works totally fine for me.

.card {
  width: 60%;
  height: 60%;
  background: #030815;
  color: #fff;
  transition: all 2s;
  opacity: 0;
}

const cityInput = document.querySelector("#cityInput");
const card = document.querySelector(".card");

const pressEnter = (e) => {
  card.style.opacity = "1";
  let city = cityInput.value;

  if (e.key === "Enter") {
    console.log(city);
    card.innerHTML = `<div><h1>${city}</h1> <h2>${city}</h2></div>`;
    cityInput.value = "";

    card.style.animation = "appear 2s linear forward";
    card.addEventListener("animationend", function () {
      card.style.animation = "";
    });
  }
};

cityInput.addEventListener("keydown", pressEnter);
user_169329800

If what you want is to show the card after the person has typed something on the input field and press enter, then here is an approach:

.fade-in {
    opacity: 1;                         /* We will end showing this */
    animation-name: fadeInOpacity;      /* Lets use this keyframe animation */
    animation-iteration-count: 1;       /* This animation will be run once */
    animation-timing-function: ease-in; /* Lets make it fluid */
    animation-duration: 2s;             /* the property name is self explanatory */
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0; /* We start hiding it */
    }
    100% {
        opacity: 1; /* We end showing it */
    }
}


(function() {
   let el = document.getElementById("cityInput");
   el.addEventListener("keydown", function(event) {
     if (event.key === "Enter") {
       document.getElementById("cityCard").classList.add('fade-in');
     }
   });
})();
.card {
  opacity: 0;
}

.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.container {
  min-height: 100vh; 
  background-image: url("https://images.unsplash.com/photo-1488866022504-f2584929ca5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1162&q=80"); /* The image used */
  background-color: #cccccc; 
  background-repeat: no-repeat;
  background-position: center; 
  background-size: cover;
  isolation: isolate;
  display: flex;
}

.intro {
  position: relative;
  width: 40%;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #2567a7;
  mix-blend-mode: multiply;
}

code {
  display: block;
  width: max-content;
  background: #fff;
  color: #2567a7;
  padding: 10px;
  margin: 2%;
  font-size: 40px;
  font-weight: bold;
  border-radius: 5px;
}

.intro h1 {
  font-size: 60px;
  font-weight: bold;
  color: #fff;
  margin: 2%;
}

.cityInput {
  outline: none;
  border: none;
  background: white;
  padding: 10px;
  margin: 2%;
  border-radius: 5px;
  font-size: 20px;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #2567a7;
  text-align: left;
  width: 50%;
}

.cityInput::placeholder {
  color: #2567a7;
  text-align: left;
}

.output {
  width: 67%;
  display: grid;
  place-items: center;
}

.card {
  width: 60%;
  height: 60%;
  background: #030815;
  color: #fff;
  transition: all 2s;
}

.card:hover {
  background: rgba(3, 8, 21, 0.8);
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media screen and (max-width: 1000px) {
  .container {
    flex-direction: column;
  }

  .intro {
    width: 100%;
    height: 40%;
    align-items: center;
    padding: 2%;
  }
  code {
    font-size: 20px;
    margin: 1%;
  }
  .intro h1 {
    margin: 1%;
    font-size: 30px;
    font-weight: bold;
  }
  .cityInput {
    margin: 1%;
  }
  .output {
    margin: 0 auto;
    margin-top: 5%;
    width: 80%;
  }
  .card {
    width: 100%;
    height: 55vh;
  }
  .cityInput {
    font-size: 16px;
  }
}
<div class="container">
  <div class="intro">
    <code>WEATHER</code> <br />
    <h1>DATA AND FORECAST</h1>
    <br />
    <input
      type="text"
      name="cityInput"
      class="cityInput"
      id="cityInput"
      placeholder="Enter city name and press Enter..."
    />
  </div>
  <div class="output">
    <div id="cityCard" class="card">Fade this card in after writing something and pressing enter...</div>
  </div>
</div>

user_72314490
Related