all Over done

index.html

@@ -48,7 +48,7 @@
  </div>
  <div>
  <button id="submit" type="submit" class="submit-btn">Submit</button>
- <p id="errorCount" class="action-left">3 try left</p>
+ <p id="errorCounter" class="action-left">3 try left</p>
  </div>
  </div>
  </div>

script.js

@@ -1,41 +1,35 @@
 // generate Button Event Handler
-const generateBtn = document.getElementById('generate-pin')
-generateBtn.addEventListener('click', function () {
+const generateBtn = document.getElementById('generate-pin').addEventListener('click', function () {
  const generateRandomNumber = Math.floor(1000 + Math.random() * 9000);
 
  document.getElementById('show-pin').value = generateRandomNumber;
 })
-
 // Submit Button Event Handler
 document.getElementById('submit').addEventListener('click', function () {
  const showPin = document.getElementById('show-pin').value;
  const numberView = document.getElementById('numView').value;
- const warning = document.getElementById('errorCount').value;
-
  if (showPin == numberView && showPin != 0) {
  const submitOutput = document.getElementById('matched');
  submitOutput.style.display = 'block';
  document.getElementById('numView').value = "";
  document.getElementById('show-pin').value = "";
- // for remove the 3 try left 
- const errorCount = document.getElementById('errorCount');
- errorCount.style.display = 'none';
+ // for remove the 3 try left
+ const errorCounter = document.getElementById('errorCounter');
+ errorCounter.style.display = 'none';
  }
-
  if (showPin != numberView || showPin == 0) {
  const submitError = document.getElementById("error");
  submitError.style.display = 'block';
  document.getElementById('numView').value = "";
  document.getElementById('show-pin').value = "";
  }
 })
-
 document.getElementById('generate-pin').addEventListener('click', function () {
  const removeSuccess = document.getElementById('matched');
  const removeError = document.getElementById('error');
- const showTry = document.getElementById('errorCount');
+ const showTry = document.getElementById('errorCounter');
 
  removeSuccess.style.display = 'none';
  removeError.style.display = 'none';
  showTry.style.display = 'block';
-})
+})

style.css

@@ -55,18 +55,15 @@ input[type='text']:focus {
 .numbers {
  margin: 30px 0;
 }
-
 .calc-typed {
 margin-top: 20px;
 font-size: 45px;
 text-align: right;
 color: #fff;
 }
-
 .calc-button-row {
 width: 100%;
 }
-
 .button {
 width: 20%;
 background: #425062;
@@ -96,6 +93,13 @@ color: #E0B612;
  border-radius: 5px;
  background: #495BC3;
  color: #fff;
+ transition: ease 0.5s;
+}
+.submit-btn:hover{
+ background-color: cyan;
+ color: black;
+ transform: scale(1.05);
+ font-weight: 700;
 }
 .notify {
  color: #fff;