Je nám líto, ale Thimble nemůže fungovat ve vašem prohlížeči

Thimble funguje ve všech následujících prohlížečích:Firefox, Google Chrome, Internet Explorer 11, Microsoft Edge, Safari (8+) a Opera.

Přesto zkusit!
Thimble má nové aktualizace - Prosím, obnovte váš prohlížeč pro získání nejnovějších funkcí.

Načítání projektu

Zdá se, že se váš projekt načítá dlouhou dobu.
Pokud se nenačte, obnovte prosím stránku a zkuste to znovu.

Thimble se nepodařilo spustit.

Prosím, restartujte váš prohlížeč pro načtení Thimblu znovu.

Pro podrobnosti o chybě otevřete konzoli ve vývojářských nástrojích vašeho prohlížeče.

POZNÁMKA: Pokud používáte režim anonymního prohlížení, přejděte prosím do normálního režimu.

SOUBORY
  • Přidat HTML soubor
  • Přidat CSS soubor
  • Přidat JavaScriptový soubor
  • Přidat návod
  • Přidat složku
  • Nahrát soubor...
  • Stáhnout soubory (.zip)
EDITOR
Zpět

Vložit úryvek kódu

HTML CSS JS
  • Komentář
  • Tabulka
  • Číslovaný seznam
  • Neuspořádaný seznam
  • Formulář
  • Vložit JavaScriptový soubor
  • Vložit CSS soubor
  • Přehrávač videa
  • Přehrávač zvuku
  • Komentář
  • Selektor typu prvku
  • Selektor třídy
  • Selektor ID
  • Keyframe animace
  • Styly odkazu
  • Media Queries
  • Fonty
  • Přidat pseudo prvek
  • Komentář
  • Jednoduchá funkce
  • Pole
  • Objekt
  • Cyklus typu for
  • Cyklus typu while
  • Deklarace If...Else
  • Deklarace switch
  • Přidat událost po kliknutí
  • Změnit CSS vlastnost
<!-- Přidejte sem svůj komentář -->
<table>
  <tr>
    <th>Záhlaví</th>
    <th>Záhlaví</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">Jméno</label>
  <input id="first-name" type="text" name="firstname"><br>
  <label for="last-name">Příjmení</label>
  <input id="last-name" type="text" name="lastname"><br>
  <input type="submit" value="Odeslat">
</form>

<script src="script.js"></script>
<!-- Přidat značku <link> do vašeho HTML souboru. Tato značka se většinou vkládá do značky <head> -->
<link href="style.css" rel="stylesheet">

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

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Váš prohlížeč nepodporuje značku audio.
</audio>

/* Přidejte sem svůj komentář */

p {
  font-size: 20px;
}

.className {
  background-color: green;
}

#idName {
  background-color: green;
}

/* Na který prvek se má animace použít */
.animated {
  animation-name: animationName;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

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

/* Základní styl */
a:link {
  color: RoyalBlue;
  text-decoration: none;
}

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

/* Aktivní */
a:active {
  color: OrangeRed;
}

/* Při najetí myší */
a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 320px) {
  /* Pravidla pro šířku displeje do 320 pixelů */
}

@media screen and (min-width: 321px) and (max-width: 768px) {
  /* Pravidla pro šířku displeje mezi 321 a 768 pixely */
}

@media screen and (min-width: 769px) {
 /* Pravidla pro displeje širší než 768 pixelů */
}

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

/* Přidává šipku před každý prvek s class='arrow' */
.arrow::before {
  content: "→";
  background: DodgerBlue;
  color: white;
}

// Přidejte sem svůj komentář

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

sayHello("David");

var names = ["David", "Bob", "Katka"];

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

var names = ["David", "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, cizinče!");
}

var name = "Bob";

switch(name) {
  case "Bob":
    console.log("Ahoj, " + name);
    break;
  case "Katka":
    console.log("Ahoj, " + name);
    break;
  default:
    // Udělat něco, pokud není splněna podmínka
    console.log("Ahoj, cizinče!");
}
  
// Vybrat prvek s id="button"
var element = document.querySelector('#button');

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

// Vybrat prvek s id='alert'
var element = document.querySelector('#alert');

element.style.background = "OrangeRed";
  • Velikost textu  ()
  • Barevné schéma
  • Zalomit dlouhé řádky
  • Povolit JavaScript
  • Zobrazit mezery
  • Automaticky uzavírat značky
  • Automatické doplňování kódu
  • Úprava kódu SVG obrázků
NÁHLED NÁVOD
Automaticky

Publikovat projekt

Od posledního publikování tohoto projektu jste již provedli změny.

Aktualizovat publikovanou verzi

Zde je odkaz, kterým můžete sdílet váš projekt...

Smazat publikovanou verzi
Publikované projekty potřebují stránku "index.html", prosím, přidejte ji a zkuste to znovu. Zjistit více
Zrušit
Publikovat
Publikované projekty potřebují stránku "index.html", prosím, přidejte ji a zkuste to znovu. Zjistit více