JSFiddle - React, Tailwind, and code Playground

by ninachroscicka

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang = "pl">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="C:/Users/ninachroscicka/Desktop/kurs_html/css/style.css">
    
    
    <link href="https://fonts.googleapis.com/css?family=Jacques+Francois+Shadow" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Londrina+Sketch" rel="stylesheet">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="C:/Users/ninachroscicka/Desktop/kurs_html/js/nauka_jquery.js" async></script>
    
    
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>
<body>
    
    <div class="title" id ="nina"> 
        <!-- <a>How much water<br> does it take ?</a> -->
    </div>

    <div class ="main_container">
        
        <i class="fas fa-tint"><span id ="points">&nbsp&nbsp&nbsp&nbspPOINTS</span></i>
<!--        <i class="fas fa-play" id ="start_button"></i>-->

        <div class ="content">
            <div class = "picture_container">
                <img class = "picture" src="C:/Users/ninachroscicka/Desktop/kurs_html/assets/pic1.jpg">
                </img>
            <span id ="picture_text"></span>
                
            </div>
            
            <form id ="myform">
                
                <input type="text" name="Liters" type="number" min="0" value="0"> <span id = "next_btn">SUBMIT</span>  
            </form>
        </div>
        
        
    </div>
    <div class ="support">
      <i class="fas fa-globe-americas" style="font-size:68px;color:#00c39c"><span id="support_txt">&nbsp&nbsp WHAT YOU CAN DO</span></i>

    </div>
    
    
   
   ...

CSS

body {
    background-image: url("C:/Users/ninachroscicka/Desktop/kurs_html/assets/background3.png");
    background-size: 1650px;
}

.title {
    text-align:center;
    padding-top:1%;
/*    font-family: 'Jacques Francois Shadow', cursive;*/
    font-family: 'Fredericka the Great', cursive;
/*    font-family: 'Londrina Sketch', cursive;*/
    font-size:68px;
    font-weight: 400;
    margin-right:7%;
}

#next_btn{
    font-family: 'Fredericka the Great', cursive;
    font-weight:400;
    padding-top:10px;
    float:left;
    clear:left;
    margin-left:20%;
}

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}




.main_container {
    border: 20px solid rgba(76,167,173, 0.45);
    border-radius: 15px;
    margin: 3% 25% 5% 25%;
    background-color: #fff;
    display:inline-block;
    min-width:600px;
    min-height:450px;
    
    -moz-background-clip: border;     /* Firefox 3.6 */
    -webkit-background-clip: border;  /* Safari 4? Chrome 6? */
    background-clip: border-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
				
    -moz-background-clip: padding;     /* Firefox 3.6 */
    -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
    background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
				
    -moz-background-clip: content;     /* Firefox 3.6 */
    -webkit-background-clip: content;  /* Safari 4? Chrome 6? */
    background-clip: content-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
    
}


.fa-play:hover {
    color:#ffcb05 !important;
    text-shadow: 0 0 10px gray;
}






#start_button {
    font-size:60px;
    color: 	#731d54;
    display:block;
    text-align:center;
    visibility: visible;
}

.fa-tint{
    color:#4877ab;
    margin-left:5%;
    padding-top:10%;
    padding-bottom:1%;
}

#points {
    font-family: 'Fredericka the Great', cursive;
    font-weight:400;
}


#picture_text {
    position: absolute;
    left: 0;
    top: 40%;
    width: 100%;
    text-align: center;
   ...

JavaScript

// zrob cos dopiero jak zaladuje sie cala strona (window.onload)

// window.onload = function () {

// 	alert("lala");
// }

// alert(testt);


// $("div").css("color","blue");



var liters = [1000,650,500,30]


$("document").ready(


	function()
	{
		$("#next_btn").click(function(){

			var randomnumber = Math.floor(Math.random() * (5 - 1 + 1)) + 1;
			var new_src = 'C:/Users/ninachroscicka/Desktop/kurs_html/assets/pic'+randomnumber+'.jpg';
			$(".picture").attr("src",new_src);

			// alert(files.length);
		})

		$("#myform").submit(function(e){
		var Value = $("input[name='Liters']").attr("Value");
    	if (Value == liters[randomnumer]){
      	$('#picture_text').text('CORRECT');
      } else if (Value >= 0.9*liters[randomnumber] || Value <= 1.1 liters[randomnumber]){
      	$('#picture_text').text('CLOSE ENOUGH');
      } else {
      	$('#picture_text').text('WRONG');
      }
      	
		e.preventDefault();
		alert(Value);

	})
  
  $('.support').click(function() {
    	window.location.href = 'https://www.worldwildlife.org/pages/green-tips';
    	return false;
		})
  
  


	}

	






	// function()
	// {
	// 	$("#start_button").click(function(){
	// 		$(this).css("visibility","hidden")
	// 		$(".main_container").css("background-image","url('C:/Users/ninachroscicka/Desktop/kurs_html/assets/AMNT_Oct15_Burn-750x300.jpg')");


	// 	})
	// 	// $("#start_button").css("visibility","hidden");
	// }



	);



// $("document").ready(init);

// function init(){
// 	alert("lalala");
// }