Two Nations Flag

index.html

<h1>Two nations flags</h1>
<h2>The Flag of <span>Bangladesh</span></h2>
<div class="container">
  <div class="circle"></div>
</div>
<button>Change Flag</button>

script.js

var country = document.querySelector("span");
var container = document.querySelector(".container");
var btn = document.querySelector("button");

btn.addEventListener("click", function() {
  container.classList.toggle("japan");
  
  if(container.classList.value === "container japan"){
    country.textContent = "Japan"
  }
});

style.css

* {
  font-family: 'Raleway', sans-serif;
}

h1, h2 {
  text-align: center;
}

.container {
  margin: 5% auto;
  box-sizing: border-box;
  width: 400px;
  height: 250px;
  background: green;
  position: relative;
  transition: all 1s;
}

.circle {
  margin: auto;
  box-sizing: border-box;
  position: absolute;
  top: 50px;
  right: 120px;
  width: 150px;
  height: 150px;
  background: red;
  border: 1px solid red;
  border-radius: 50%
}

button {
  position: absolute;
  width: 150px;
  height: 50px;
  top: 70%;
  left: 70%;
  font-size: 20px;
  font-weight: bold;
  backgound: none;
  border: none;
  outline: none;
}

.japan {
  background: white;
  border: 1px solid #a3a3a3;
  transition: all 1s;
}

two-nations-flag.markdown

Two Nations Flag

A Pen by Cbarua on CodePen.

License.