Ledsen, Thimble fungerar inte i din Webbläsare

Thimble fungerar i följande webbläsare: Firefox, Chrome, Internet Explorer 11, Microsoft Edge, Safari (8+) och Opera.

Låt mig försöka ändå!
Thimble har uppdateringar - vänligen uppdatera din webbläsare för att få de senaste ändringarna.

Laddar projekt

Projektet verkar ta lång tid att ladda.
Om det inte laddas, vänligen ladda om sidan och försök igen.

Thimble kunde inte starta.

Vänligen uppdatera din webbläsare för att ladda in Thimble igen.

För felinformation öppna webbläsarens konsol för utvecklingsverktyg.

OBS: om du använder Privat surfläge, vänligen ladda om i vanligt läge.

FILER
  • Lägg till HTML-fil
  • Lägg till CSS-fil
  • Lägg till JavaScript-fil
  • Lägg till en guide
  • Lägg till mapp
  • Överför en fil...
  • Ladda ner filer (.zip)
REDIGERARE
Ångra

Infoga ett kodstycke

HTML CSS JS
  • Kommentar
  • Tabell
  • Sorterad lista
  • Osorterad lista
  • Formulär
  • Inkludera en JavaScript-fil
  • Inkludera en CSS-fil
  • Videospelare
  • Ljudspelare
  • Kommentar
  • Element-typväljare
  • Klassväljare
  • ID-väljare
  • Keyframe-animering
  • Länkstilar
  • Media-förfrågningar
  • Typsnitt
  • Lägg till en Pseudo-element
  • Kommentar
  • En grundläggande funktion
  • Vektor
  • Objekt
  • For-loop
  • While-loop
  • If...Else-sats
  • Switch-sats
  • Lägg till en Klick-händelse
  • Ändra CSS-egenskap
<!-- Lägg till din kommentar här -->
<table>
  <tr>
    <th>Rubrik</th>
    <th>Rubrik</th>
  </tr>
  <tr>
    <td>Värde</td>
    <td>Värde</td>
  </tr>
</table>

<ol>
  <li>Objekt 1</li>
  <li>Objekt 2</li>
  <li>Objekt 3</li>
</ol>

<ul>
  <li>Objekt 1</li>
  <li>Objekt 2</li>
  <li>Objekt 3</li>
</ul>

<form action="" method="get">
  <label for="first-name">Förnamn</label>
  <input id="first-name" type="text" name="firstname"><br>
  <label for="last-name">Efternamn</label>
  <input id="last-name" type="text" name="lastname"><br>
  <input type="submit" value="Skicka in">
</form>

<script src="script.js"></script>
<!-- Lägg till taggen <link> till din HTML-fil. Vanligtvis är den i taggen <head> -->
<link href="style.css" rel="stylesheet">

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Din webbläsare stöder inte videotaggen.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Din webbläsare stöder inte ljudtaggen.
</audio>

/* Lägg till din kommentar här */

p {
  font-size: 20px;
}

.className {
  background-color: green;
}

#idName {
  background-color: green;
}

/* Elementet att applicera animationen på */
.animated {
  animation-name: animationName;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

/* Animeringskoden */
@keyframes animationName {
  0%   { background-color: red;    }
  50%  { background-color: orange; }
  100% { background-color: yellow; }
}

/* Grundläggande stil */
a:link {
  color: RoyalBlue;
  text-decoration: none;
}

/* Besökt */
a:visited {
  color: Orchid;
}

/* Aktiv */
a:active {
  color: OrangeRed;
}

/* Svept över */
a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 320px) {
  /* Regler när skärmen är upp till 320px bred */
}

@media screen and (min-width: 321px) and (max-width: 768px) {
  /* Regler när skärmen är mellan 321px och 768px bred */
}

@media screen and (min-width: 769px) {
 /* Regler när skärmen är bredare än 768px */
}

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

/* Lägger till en pil innan varje element med klass='arrow' */
.arrow::before {
  content: "→";
  background: DodgerBlue;
  color: white;
}

// Lägg till din kommentar här

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

sayHello("David");

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

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

var names = ["David", "Bob", "Kate"];
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("Hej, " + name);
} else if (name === "Kate") {
  console.log("Hej, " + name);
} else {
  console.log("Hej främling!");
}

var name = "Bob";

switch(name) {
  case "Bob":
    console.log("Hej, " + name);
    break;
  case "Kate":
    console.log("Hej, " + name);
    break;
  default:
    // Gör något om inga villkor uppfylldes
    console.log("Hej främling!");
}
  
// Välj ett element med id="button"
var element = document.querySelector('#button');

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

// Välj elementet med id='alert'
var element = document.querySelector('#alert');

element.style.background = "OrangeRed";
  • Textstorlek  ()
  • Färgschema
  • Radbryt långa rader
  • Tillåt JavaScript
  • Visa blanktecken
  • Automatiskt stäng taggar
  • Autokomplettera kod
  • Redigera SVG-bilder som kod
FÖRHANDSGRANSKA GUIDE
Automatiska

Publicera ditt projekt

Du har gjort ändringar sedan du senast publicerade detta projekt.

Uppdatera publicerad version

Här är en länk som du kan dela...

Ta bort publicerad version
Publicerade projekt behöver en "index.html" sida, lägg till den och försök igen. Läs mer
Avbryt
Publicera
Publicerade projekt behöver en "index.html" sida, lägg till den och försök igen. Läs mer