Bohužiaľ, Thimble nebude vo vašom prehliadači fungovať

Thimble funguje vo všetkých nasledujúcich prehliadačoch: Firefox, Chrome, Internet Explorer 11, Microsoft Edge, Safari (8+), a Opera.

Napriek tomu skúsiť!
Thimble má nové aktualizácie - prosím, obnovte stránku a načítajte najnovšie zmeny.

Načítavanie projektu

Zdá sa, že načítanie vášho projektu trvá pridlho.
Ak sa nenačíta, prosím, obnovte stránku a skúste to znova.

Thimble sa nepodarilo spustiť.

Prosím, obnovte stránku, aby sa mohol Thimble znova načítať.

Ak chcete zobraziť podrobnosti o chybe, otvorte vývojárske nástroje vášho prehliadača.

POZNÁMKA: ak používate režim Súkromné prehliadanie, prejdite, prosím, do normálneho režimu.

SÚBORY
  • Pridať HTML súbor
  • Pridať CSS súbor
  • Pridať JavaScript súbor
  • Pridať návod
  • Pridať priečinok
  • Nahrať súbor...
  • Prevziať súbor (.zip)
EDITOR
Späť

Vložiť úryvok kódu

HTML CSS JS
  • Komentár
  • Tabuľka
  • Usporiadaný zoznam
  • Neusporiadaný zoznam
  • Formulár
  • Zahrnúť JavaScript súbor
  • Zahrnúť CSS súbor
  • Prehrávač videa
  • Prehrávač zvuku
  • Komentár
  • Výber typu prvku
  • Výber triedy
  • Selektor ID
  • Keyframe animácia
  • Štýly odkazu
  • Media Queries
  • Písma
  • Pridať pseudo prvok
  • Komentár
  • Jednoduchá funkcia
  • Pole
  • Objekt
  • Slučka typu for
  • Slučka typu while
  • Deklarácia If...Else
  • Deklarácia switch
  • Pridať udalosť po kliknutí
  • Zmeniť CSS vlastnosť
<!-- Sem pridajte svoj komentár -->
<table>
  <tr>
    <th>Hlavička</th>
    <th>Hlavička</th>
  </tr>
  <tr>
    <td>Hodnota</td>
    <td>Hodnota</td>
  </tr>
</table>

<ol>
  <li>Položka 1</li>
  <li>Položka 2</li>
  <li>Položka 3</li>
</ol>

<ul>
  <li>Položka 1</li>
  <li>Položka 2</li>
  <li>Položka 3</li>
</ul>

<form action="" method="get">
  <label for="first-name">Meno</label>
  <input id="first-name" type="text" name="firstname"><br>
  <label for="last-name">Priezvisko</label>
  <input id="last-name" type="text" name="lastname"><br>
  <input type="submit" value="Odoslať">
</form>

<script src="script.js"></script>
<!-- Pridajte značku <link> do vášho HTML súboru. Táto značka sa väčšinou vkladá do značky <head> -->
<link href="style.css" rel="stylesheet">

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Váš prehliadač nepodporuje značku video.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Vás prehliadač nepodporuje značku audio.
</audio>

/* Sem pridajte svoj komentár */

p {
  font-size: 20px;
}

.className {
  background-color: green;
}

#idName {
  background-color: green;
}

/* Na ktorý prvok sa má animácia použiť */
.animated {
  animation-name: animationName;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

/* Kód animácie */
@keyframes animationName {
  0%   { background-color: red;    }
  50%  { background-color: orange; }
  100% { background-color: yellow; }
}

/* Základný štýl */
a:link {
  color: RoyalBlue;
  text-decoration: none;
}

/* Navštívený */
a:visited {
  color: Orchid;
}

/* Aktívny */
a:active {
  color: OrangeRed;
}

/* Prechod myšou */
a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 320px) {
  /* Pravidlá pre šírku obrazovky do 320 pixelov */
}

@media screen and (min-width: 321px) and (max-width: 768px) {
  /* Pravidlá pre šírku obrazovky medzi 321 a 768 pixelmi */
}

@media screen and (min-width: 769px) {
 /* Pravidlá pre šírku obrazovky nad 768 pixelov */
}

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

/* Pridá šípku pred každý prvok s class='arrow' */
.arrow::before {
  content: "→";
  background: DodgerBlue;
  color: white;
}

// Sem pridajte svoj komentár

function sayHello(name) {
  console.log("Ahoj, " + name);
}

sayHello("Dávid");

var names = ["Dávid", "Bob", "Katka"];

var person = {
  name: "Bob",
  skills: ["JS", "HTML"]
};

var names = ["Dávid", "Bob", "Katka"];
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 = "Bob";

if (name === "Bob") {
  console.log("Ahoj, " + name);
} else if (name === "Katka") {
  console.log("Ahoj, " + name);
} else {
  console.log("Ahoj, cudzinec!");
}

var name = "Bob";

switch(name) {
  case "Bob":
    console.log("Ahoj, " + name);
    break;
  case "Katka":
    console.log("Ahoj, " + name);
    break;
  default:
    // Urobiť niečo, ak nie je splnená žiadna podmienka
    console.log("Ahoj, cudzinec!");
}
  
// Vybrať prvok s id="button"
var element = document.querySelector('#button');

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

// Vybrať prvok s id='alert'
var element = document.querySelector('#alert');

element.style.background = "OrangeRed";
  • Veľkosť textu  ()
  • Farba vzhľadu
  • Zalomiť dlhé riadky
  • Povoliť JavaScript
  • Zobrazovať medzery
  • Automaticky uzatvárať značky
  • Automatické dokončovanie kódu
  • Upraviť SVG obrázky ako kód
NÁHĽAD NÁVOD
Automaticky

Publikujte svoj projekt

Od posledného publikovania tohto projektu ste urobili zmeny.

Aktualizovať publikovanú verziu

Tu je odkaz, pomocou ktorého môžete zdieľať váš projekt…

Odstrániť publikovanú verziu
Publikované projekty potrebujú stránku "index.html", prosím, pridajte ju a skúste to znova. Ďalšie informácie
Zrušiť
Publikovať
Publikované projekty potrebujú stránku "index.html", prosím, pridajte ju a skúste to znova. Ďalšie informácie