JSFiddle - React, Tailwind, and code Playground

by sirbalin26

HTML

<!DOCTYPE html>
<html> 
  <head> 
    <title>QR Code App</title>
    <meta name='author' content='sirb alin cristian'/>
    <meta name='description' content='qr code app'/>
    <meta name='keywords' content='qr, app'/>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
    <meta charset='utf-8'/>
    <link rel='stylesheet' type='text/css' href='index.css'/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>
  </head> 
  <body>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>  
    <script type='text/javascript' src='index.js'></script>
    <div class="body-app"> 
	    <div class="app"> 
                <img src="https://chart.googleapis.com/chart?cht=qr&chl=Hello+World&chs=160x160&chld=L|0" 
                     class="qr-code-app-generate"
                /> 
	    </div>
	    <div> 
	        <div> 
                    <span class="title" for="content"><i class="fas fa fa-globe"></i> Adresa web:</span>
		        <div> 
                             <input type="text" 
                                    size="70" 
                                    maxlength="60" 
                                    class="input" 
                                    id="content" 
                                    placeholder="Introduce adresa URL"/>
                             <i class="fas fa fa-search"></i>
		        </div>  
	        </div>
	        <div> 
		        <div> 
                             <button type="button" 
                                     class="button" 
                                     id="generate"><i class="fas fa fa-qrcode"></i> Genereaza QR Code</button>
                             <button type='submit' 
                                     class='buttonn' 
                                     onclick='like()'><i class="far fa...

CSS

@media only screen and(max-width:auto) {
    html, body, .body-app {
      max-height: auto;
      display: flex;
    }
  }

  html, body {
    background-color: deepskyblue;
  }
  
  .body-app {
    margin-top: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  
  .app {
    margin: 25px;
    display: flex;
    justify-content: space-around;
  }
  
  .title {
    font-family: sans-serif;
    font-weight: bold;
    margin: 10px;
  }
  
  .input {
    border: 2px solid #000;
    background-color: lightgray;
    font-family: sans-serif;
    margin: 10px;
  }
  
  .button {
    border: 2px solid #000;
    background-color: lightgray;
    font-family: sans-serif;
    margin: 10px;
  }
  
  .buttonn {
    border: 2px solid #000;
    background-color: lightgray;
    font-family: sans-serif;
    margin: 10px;
  }
  
  .button:hover {
    cursor:pointer;
    background-color: orange;
    color: #000;
  }
  
  .buttonn:hover {
    cursor:pointer;
    background-color: orange;
    color: #000;
  }
  
  .result {
    font-family: sans-serif;
    font-size: 12px;
  }

JavaScript

alert('Bun venit in aplicatia QR Code App!');

$(document).ready(function () {

});

function htmlEncode(value) {
    return $('<div/>').text(value).html(); 
} 

$(function () {  
  $('#generate').click(function () {  
   let finalURL ='https://chart.googleapis.com/chart?cht=qr&chl=' + 
   htmlEncode($('#content').val()) + '&chs=160x160&chld=L|0' 
   $('.qr-code-app-generate').attr('src', finalURL); 
	}); 
}); 

function like() {
	let likeapp;
  if(confirm('Apreciaza aceasta aplicatie ?')) {
  	likeapp = 'Multumesc!';
  } else {
  	likeapp = 'Multumesc!';
  }
  document.getElementById('result').innerHTML = likeapp;
}

function dislike() {
	let dislikeapp;
  if(confirm('Nu aprecia aceasta aplicatie')) {
  	dislikeapp = 'Multumesc!';
  } else {
  	dislikeapp = 'Multumesc!';
  }
  document.getElementById('result').innerHTML = dislikeapp;
}

function report() {
  let reportapp;
  if(confirm('Ai descoperit un bug? OK = TRIMITE ; ANULEAZA = RENUNTARE')) {
    reportapp = 'Trimis!';
  } else {
    reportapp = 'Anulat!';
  }
  document.getElementById('result').innerHTML = reportapp;
}