Kojakuyu', Thimble man nisamäj ta pan Awokik'amaya'l

Thimble nisamäj pa re taq okik'amaya'l re': Firefox, Chrome, Internet Explorer 11, Microsoft Edge, Safari (8+), chuqa' Opera.

¡Ninwajo' nintojtob'ej!
K'o taq ruk'exoj ri Thimble - Tasamajib'ej ri awokik'amaya'l richin ye'ak'ül ri ruk'isib'äl taq jaloj.

Tajin Nisamajïx ri Nimasamaj

Achi'el chi ri animasamaj yalan tajin niyoke' richin nusamajib'ej ri'.
We man nusamajib'ej ta ri', tatojtob'ej chik nasamajib'ej ri ruxaq.

Man tikirel ta nitikirisäx ri Thimble.

Tasamajij chik ri awokik'amaya'l richin natojtob'ej chik nasamajij ri Thimble.

Richin kicholajem taq sachoj tajaqa' rutemeb'al Rusamajib'al B'anonel pa awokik'amaya'l.

NOTE: we tajin nawokisaj ri rub'anikil Ichinan Okem pa K'amaya'l, tab'ana' utzil tasamajib'ej chik ri relik rub'anikil.

FILES
  • Titz'aqatisäx HTML yakb'äl
  • Titz'aqatisäx CSS yakb'äl
  • Titz'aqatisäx JavaScript yakb'äl
  • Titz'aqatisäx jun Tijonïk
  • Titz'aqatisäx Yakwuj
  • Tijotob'äx jun yakb'äl…
  • Keqasäx taq yakb'äl (.zip)
EDITOR
Titzolïx

Tiju' jun Ruk'aj B'itz'ib'

HTML CSS JS
  • Na'oj
  • Kemoj kajtz'ik
  • Nuk'un Cholajem
  • Menuk'un Cholajem
  • Nojwuj
  • Titz'aqatisäx jun JavaScript yakb'äl
  • Titz'aqatisäx jun CSS yakb'äl
  • Ruq'axab'al Silowäch
  • Ruq'axab'al K'oxom
  • Tzijol
  • Rucha'onel Ruwäch Ch'akulal
  • Rucha'onel Ruwäch
  • ID Cha'onel
  • Keyframe Wachinïk
  • Kib'anikil Ximonel
  • Kik'ulb'enik Q'ojom
  • Ruwäch tz'ib'
  • Titz'aqatisäx jun Pseudo Element
  • Tzijol
  • Jun Nab'ey Samaj
  • Te'ej
  • Wachinäq
  • Chajïl Tzolinel
  • While Chajïl Tzolinel
  • If...Else Q'alajirisanel
  • Tijal Ojqanem
  • Titz'aqatisäx jun Click Samaj
  • Tijal CSS Ichinil
<!-- Tatz&#39;aqatisaj ana&#39;oj wawe&#39; -->
<table>
  <tr>
    <th>Jub&#39;i&#39;aj</th>
    <th>Jub&#39;i&#39;aj</th>
  </tr>
  <tr>
    <td>Retal</td>
    <td>Retal</td>
  </tr>
</table>

<ol>
  <li>Ch&#39;akulaj 1</li>
  <li>Ch&#39;akulaj 2</li>
  <li>Ch&#39;akulaj 3</li>
</ol>

<ul>
  <li>Ch&#39;akulaj 1</li>
  <li>Ch&#39;akulaj 2</li>
  <li>Ch&#39;akulaj 3</li>
</ul>

<form action="" method="get">
  <label for="first-name">Nab&#39;ey b&#39;i&#39;aj</label>
  <input id="first-name" type="text" name="firstname"><br>
  <label for="last-name">Ruk&#39;isib&#39;äl b&#39;i&#39;aj</label>
  <input id="last-name" type="text" name="lastname"><br>
  <input type="submit" value="Titaq">
</form>

<script src="script.js"></script>
<!-- Titz'aqatisäx ri <link> retal HTML ayakb'al. Jantape' tib'e pa <head> etal -->
<link href="style.css" rel="stylesheet">

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Man nuk&#39;äm ta ri&#39; ri awokik&#39;amaya&#39;l rik&#39;in ri retal silowäch.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Man nuk&#39;äm ta ri&#39; ri awokik&#39;amaya&#39;l rik&#39;in ri retal k&#39;oxom.
</audio>

/* Tatz&#39;aqatisaj ana&#39;oj wawe&#39; */

p {
  font-size: 20px;
}

.className {
  background-color: green;
}

#idName {
  background-color: green;
}

/* Ri ch&#39;akulal achoq ik&#39;in nisamäj ri wachinïk */
.animated {
  animation-name: animationName;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

/* Ri rub&#39;itz&#39;ib&#39; wachinïk */
@keyframes animationName {
  0%   { background-color: red;    }
  50%  { background-color: orange; }
  100% { background-color: yellow; }
}

/* Nab&#39;ey Rub&#39;anikil */
a:link {
  color: RoyalBlue;
  text-decoration: none;
}

/* Tz&#39;eton */
a:visited {
  color: Orchid;
}

/* Tzijïl */
a:active {
  color: OrangeRed;
}

/* Ch&#39;ikon */
a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 320px) {
  /* Rub&#39;eyal toq ri ruwa man nik&#39;o ta chi re ri 320 px ruwäch */
}

@media screen and (min-width: 321px) and (max-width: 768px) {
  /* Rub&#39;eyal toq ri ruwa k&#39;o chi kikojol ri 321px chuqa&#39; 768px ruwäch */
}

@media screen and (min-width: 769px) {
 /* Rub&#39;eyal toq ri ruwa nik&#39;o chi re ri 768px ruwäch */
}

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

/* Titz'aqatisäx jun ch'ab' chi kiwa chi kijujunal taq ch'akulal rik'in jun class='arrow' */
.arrow::before {
  content: "→";
  background: DodgerBlue;
  color: white;
}

// Tatz&#39;aqatisaj ana&#39;oj wawe&#39;

function sayHello(name) {
  console.log("Ütz awäch, " + b'i'aj);
}

sayHello("David");

var names = ["David", "Ch&#39;ob&#39;eto", "Kati"];

var person = {
  name: "Ch&#39;ob&#39;eto",
  skills: ["JS", "HTML"]
};

var names = ["David", "Ch&#39;ob&#39;eto", "Kati"];
var name;

for (var i = 0; i < names.length; i++) {
  name = names[i];
  console.log(name);
}

var count = 5;

while (count > 0) {
  console.log(count);
  count = count - 1;
}

var name = "Ch&#39;ob&#39;eto";

if (name === "Ch&#39;ob&#39;eto") {
  console.log("Ütz awäch, " + b'i'aj);
} else if (name === "Kati") {
  console.log("Ütz awäch, " + b'i'aj);
} else {
  console.log("¡Ütz awäch, winäq!");
}

var name = "Ch&#39;ob&#39;eto";

switch(name) {
  case "Ch&#39;ob&#39;eto":
    console.log("Ütz awäch, " + b'i'aj);
    break;
  case "Kati":
    console.log("Ütz awäch, " + b'i'aj);
    break;
  default:
    // K&#39;o tib&#39;an we man nik&#39;ulutäj ta ri aruma
    console.log("¡Ütz awäch, winäq!");
}
  
// Ticha' jun ch'akulal rik'in id="button"
var element = document.querySelector('#button');

element.addEventListener("click", function() {
  console.log("Click!");
});

// Ticha' ri ch'akulal rik'in id='alert'
var element = document.querySelector('#alert');

element.style.background = "OrangeRed";
  • Runimilem ri rucholajem tzij  ()
  • Rub'onil wachinel
  • Kenuk' ri yuquyäq taq cholaj
  • Tiya' q'ij chi re ri JavaScript
  • Tik'ut ri Kowöl K'ojlem
  • Ketz'apïx kiyonil ri taq etal
  • Titz'aqatisäx ruyon ri b'itz'ib'
  • Tinuk' SVG taq wachib'äl achi'el bitz'ib'
PREVIEW TUTORIAL
Yonil

Tataluj Rutzijol ri Animasamaj

Ab'anon taq jaloj toq atalun rutzijol animasamaj.

Tik'ex ruwäch talun rutzijol

Ja ximonel re' ri yatikïr nakomonij…

Tiyuj Ruwäch Talun Rutzijol
Ri talun kitzijol taq nimasamaj nikajo' jun "index.html" ruxaq, tab'ana' utzil tatz'aqatisaj qa chuqa' tatojtob'ej chik. Titamäx ch'aqa' chik
Tiq'at
Titalüx rutzijol
Ri talun kitzijol taq nimasamaj nikajo' jun "index.html" ruxaq, tab'ana' utzil tatz'aqatisaj qa chuqa' tatojtob'ej chik. Titamäx ch'aqa' chik