TAIMED

In this example below you will see how to do a TAIMED with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by kristinaliisi, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright kristinaliisi ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>TAIMED</title>
  
  
  <link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

   <html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>

<body ng-app="BlankApp" ng-cloak>
    
    <div layout="column" layout-align="space-between center">
  
    <img id="pilt"src="https://upload.wikimedia.org/wikipedia/commons/b/b3/Fragaria_viridis_(Knack-Erdbeere)_IMG_24525.JPG" style="max-width:95%">

      
    <div class="buttons" layout="column" layout-align="space-between center">
     
      <md-button class="md-raised choice" id="choice1" onclick="setColor('choice1')">metsmaasikas</md-button> 
      <md-button class="md-raised choice" id="choice2" onclick="setColor('choice2')">aedmaasikas</md-button>
      <md-button class="md-raised choice" id="choice3" onclick="setColor('choice3')">pohl</md-button>
   
    </div>
      
    <div class="choice" layout="row" layout-align="end end"> 
       
        <md-button  ng-disabled="true" class="md-raised next" id="next1" onclick="uus()";/>järgmine</md-button>
   
    </div>
  </div>
 
</body>
</html>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/kristinaliisi/taimed-RozOrw */
html {
  background-color: lightgreen;
}
body {
  background-color: transparent;
}
  
.choice {
	width: 500px;
  font-size: 25px;
  font-weight: bold;
}

.next {
  margin-top: 9%;
  margin-left: 45%;
}

img {
	margin-top: 4%;
  width: 500px;
  height: auto; 
}

.buttons {
	max-width: 95%;
}


/*Downloaded from https://www.codeseek.co/kristinaliisi/taimed-RozOrw */
 angular.module('BlankApp', ['ngMaterial']);

 function  setColor(btn) {
   
        var property = document.getElementById(btn);
        if (nupud.indexOf(btn) == taimed[jrk].oige ) {
            property.style.backgroundColor ="#7FFF00";
            document.getElementById("next1").disabled =false;
            if (vastatud == false) {
                oiged++;
            }
                   
        } else {
            property.style.backgroundColor = "#FC1501";
            if (vastatud == false) {
               valed++;
            }
          
        }
        vastatud = true; 
      }
 
      var taimed = [ 
        {pilt:"https://upload.wikimedia.org/wikipedia/commons/b/b3/Fragaria_viridis_(Knack-Erdbeere)_IMG_24525.JPG", variandid:["metsmaasikas", "aedmaasikas", "pohl"], oige:0} ,
        {pilt:"https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Radijs_planten_%28Raphanus_sativus_subsp._sativus%29.jpg/1200px-Radijs_planten_%28Raphanus_sativus_subsp._sativus%29.jpg" , variandid: ["peet", "redis", "kaalikas"], oige:1} ,
        {pilt:"https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/E8304-Kosh-Kol-sea-buckthorn.jpg/1200px-E8304-Kosh-Kol-sea-buckthorn.jpg", variandid:["astelpaju", "pihakas", "kreek"], oige:0} ,
        {pilt:"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Rutabaga%2C_variety_nadmorska.JPG/1200px-Rutabaga%2C_variety_nadmorska.JPG", variandid:["naeris", "mädarõigas", "kaalikas"],oige:2} ,
        {pilt:"https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Beetroot_Bettolo_Capel_Manor_Enfield_London_England.jpg/1200px-Beetroot_Bettolo_Capel_Manor_Enfield_London_England.jpg", variandid:["kapsas", "peet", "lehtsalat"], oige:1} ,
        {pilt:"https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Allium_sativum_003.JPG/1024px-Allium_sativum_003.JPG", variandid:["sibul", "murulauk", "küüslauk"], oige:2} ,
        {pilt:"https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Kren_Verkauf.jpg/1280px-Kren_Verkauf.jpg", variandid:["ingver", "mädarõigas", "puujuur"], oige:1} ,
        {pilt:"https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/ARS_cucumber.jpg/627px-ARS_cucumber.jpg", variandid:["kurk", "suvikõrvits", "hapukurk"], oige:0} , 
        {pilt:"https://upload.wikimedia.org/wikipedia/commons/2/2a/Prunus_cerasus_-_K%C3%B6hler%E2%80%93s_Medizinal-Pflanzen-113.jpg", variandid:["murel","ploom","kirss"], oige:2} ,
        {pilt:"https://upload.wikimedia.org/wikipedia/commons/1/15/Blooming_apple_tree_in_spring.JPG", variandid:["õunapuuõied", "jasmiin", "müürilill"], oige:0} ,
        {pilt:"https://static.pexels.com/photos/162767/carrot-why-growth-diet-162767.jpeg", variandid:["kaalikas", "redis", "porgand"], oige:2} ,
        {pilt:"https://upload.wikimedia.org/wikipedia/commons/d/d5/St%C3%A4rkekartoffel_Amflora_7.jpg", variandid:["kartul", "pähklid", "kaalikas"], oige:0} , 
        {pilt:"https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Paprika_Rumba_%282%29.jpg/1200px-Paprika_Rumba_%282%29.jpg", variandid:["tšilli", "pipar", "paprika"], oige:2} , 
       {pilt:"https://upload.wikimedia.org/wikipedia/commons/9/91/Apple_tree%2C_Fry%C5%A1t%C3%A1k_%284%29.jpg", variandid:["ploomipuu", "arbuus", "õunapuu"], oige:2} , 
        {pilt:"https://images.pexels.com/photos/162984/carrots-carrot-plant-garden-in-the-garden-162984.jpeg?w=940&h=650&auto=compress&cs=tinysrgb", variandid:["porgand", "till", "sibul"], oige:0} , 
        {pilt:"https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Aardappel_%28Solanum_tuberosum%29_Nicola.jpg/375px-Aardappel_%28Solanum_tuberosum%29_Nicola.jpg", variandid:["kartul", "kurk", "tomat"], oige:0} , 
      
{pilt:"https://images.pexels.com/photos/131019/pexels-photo-131019.jpeg?w=940&h=650&auto=compress&cs=tinysrgb", variandid:["petersell", "murulauk", "sibul"], oige:2} ,
        {pilt:"http://www.publicdomainpictures.net/pictures/190000/velka/red-pepper-1468566949Yca.jpg", variandid:["tomat", "tšilli", "paprika"], oige:2} ,

{pilt:"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Aroonia_20_august_2011_026.jpg/1200px-Aroonia_20_august_2011_026.jpg", variandid:["mustsõstar", "aroonia", "mustikas"], oige:1} ,

        {pilt:"https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Field_with_onions.jpg/1024px-Field_with_onions.jpg", variandid:["porulauk", "sibul", "murulauk"], oige:1}] ;

  
     
      var jrk=0;
      var nupud = ["choice1","choice2","choice3"];  

      function uus () {
        document.getElementById("choice1").style.backgroundColor ="white"; 
        document.getElementById("choice2").style.backgroundColor ="white"; 
        document.getElementById("choice3").style.backgroundColor ="white"; 
        document.getElementById("next1").disabled =true;

        function vaheta(change) {
          var random = Math.floor(Math.random() * 3); 
          var ok = change[random];
          change[random]=change[2];
          change[2]=ok;
          return change;
        }

        var rand = vaheta(nupud);
        jrk=jrk+1;

        if (taimed.length == jrk) {
          document.getElementById("choice1").innerHTML = oiged;
          document.getElementById("choice2").innerHTML = valed;
          document.getElementById("choice3").innerHTML = "";
  

        
        } else { 
          document.getElementById(rand[0]).innerHTML = taimed[jrk].variandid[0];
          document.getElementById(rand[1]).innerHTML = taimed[jrk].variandid[1];
          document.getElementById(rand[2]).innerHTML = taimed[jrk].variandid[2];
          document.getElementById("pilt").src = taimed[jrk].pilt;
        }
        vastatud = false; 
      }

      var oiged = 0;
      var valed = 0;
      var vastatud = false;

Comments