JSFiddle - React, Tailwind, and code Playground

by Roman Zharikov

HTML

<input type="text" id="first" placeholder="first">
<input type="text" id="second" placeholder="second">
<button>Узнать</button>
<h1>Результат</h1>

CSS

h1 {
  padding: 3px;
  border: 1px solid #ccc;
  text-align: center;
}

JavaScript

// сравнение строк по заглавным символам
// course  				=>   Введение в программирование
// author         =>   Roman Zharikov (zharikov.site)

//document.addEventListener("DOMContentLoaded", function() {

// define function
const bigLettersCount = (str) => {
  let counter = 0,
    lng = str.length;
  for (let i = 0; i < lng; i++) {
    if (str[i].toUpperCase() === str[i])
      counter++;
  }
  return counter;
}

const compare = (first, second) => {
  const firstCount = bigLettersCount(first);
  const secondCount = bigLettersCount(second);
  return (firstCount === secondCount) ? 0 : (firstCount > secondCount) ? 1 : -1;
}

var button = document.getElementsByTagName('button')[0],
  out = document.getElementsByTagName('h1')[0],
  first = document.getElementById('first'),
  second = document.getElementById('second');

button.addEventListener('click', function() {
  // call function and out result to DOM element
  out.innerHTML = (compare(first.value, second.value) === 0) ? 'Равны' : (compare(first.value, second.value) === 1) ? 'Первая больше' : 'Вторая больше';
});

//});