Beklagar, Thimble fungerer ikkje i nettlesaren din

Thimble fungerer i følgjande nettlesarar: Firefox, Chrome, Internet Explorer 11, Microsoft Edge, Safari (8+) och Opera.

La meg prøve likevel!
Thimble has Updates - Please refresh your browser to get the latest changes.

Lastar prosjekt

Det ser ut til at prosjektet ditt tek lang tid til å laste.
Om det ikkje lastar, ver snill og oppdater sida og prøv på nytt.

Thimble klarte ikkje å starte.

Oppdater nettlesaren din for å laste inn Thimble på nytt.

For feilinformasjon, opne Developer Tools-konsollen i nettlesaren.

MERK: Om du brukar modusen Privat nettlesing, ver snill og oppdater i vanleg modus.

FILER
  • Legg til HTML-fil
  • Legg til CSS-fil
  • Legg til JavaScript-fil
  • Legg til ein guide
  • Legg til mappe
  • Last opp ei fil…
  • Last ned filer (.zip)
REDIGERAR
Angre

Set inn ein kodesnutt

HTML CSS JS
  • Kommentar
  • Tabell
  • Sortert liste
  • Usortert liste
  • Formular
  • Inkluder ei JavaScript-fil
  • Inkluder ei CSS-fil
  • Videospelar
  • Lydspelar
  • Kommentar
  • Elementtype-veljar
  • Klasseveljar
  • ID-veljar
  • Keyframe-animering
  • Lenkestilar
  • Mediaspørsmål
  • Skrifter
  • Legg til eit Pseudo-element
  • Kommentar
  • Ein grunnleggjande funksjon
  • Vektor
  • Objekt
  • For-loop
  • While-loop
  • If...Else Statement
  • Switch Statement
  • Legg til ei klikk-hending
  • Endre CSS-eigenskap
<!-- Legg til kommentaren din her -->
<table>
  <tr>
    <th>Overskrift</th>
    <th>Overskrift</th>
  </tr>
  <tr>
    <td>Verdi</td>
    <td>Verdi</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">Fornamn</label>
  <input id="first-name" type="text" name="firstname"><br>
  <label for="last-name">Etternamn</label>
  <input id="last-name" type="text" name="lastname"><br>
  <input type="submit" value="Send inn">
</form>

<script src="script.js"></script>
<!-- Legg til taggen <link> til HTML-fila di. Vanlegvis er den i taggen <head> -->
<link href="style.css" rel="stylesheet">

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Nettlesaren din støttar ikkje videotaggen.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Nettlesaren din støttar ikkje lydtaggen.
</audio>

/* Legg til kommentaren din her */

p {
  font-size: 20px;
}

.className {
  background-color: green;
}

#idName {
  background-color: green;
}

/* Elementet å applisere animasjonen 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; }
}

/* Grunnleggjande stil */
a:link {
  color: RoyalBlue;
  text-decoration: none;
}

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

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

/* Sveipa over */
a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 320px) {
  /* Rules when screen is up to 320px wide */
}

@media screen and (min-width: 321px) and (max-width: 768px) {
  /* Rules when screen is between 321px and 768px wide */
}

@media screen and (min-width: 769px) {
 /* Rules when screen is wider than 768px */
}

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

/* Legg til ei pil før kvart element med klass='arrow' */
.arrow::before {
  content: "→";
  background: DodgerBlue;
  color: white;
}

// Legg til kommentaren din her

function sayHello(name) {
  console.log("Hei, " + 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("Hei, " + name);
} else if (name === "Kate") {
  console.log("Hei, " + name);
} else {
  console.log("Hei framandkar!");
}

var name = "Bob";

switch(name) {
  case "Bob":
    console.log("Hei, " + name);
    break;
  case "Kate":
    console.log("Hei, " + name);
    break;
  default:
    // Do something if no condition was met
    console.log("Hei framandkar!");
}
  
// Vel eit element med id="button"
var element = document.querySelector('#button');

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

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

element.style.background = "OrangeRed";
  • Tekststørrelse  ()
  • Fargetema
  • Wrap long lines
  • Tillat JavaScript
  • Vis mellomrom
  • Autosteng taggar
  • Autofullfør kode
  • Redige SVG-bilde som kode
FØREHANDSVISING GUIDE
Auto

Publiser prosjektet ditt

Du har gjort endringar sidan du sist publiserte dette prosjektet.

Oppdatert publisert versjon

Her er ei lenke som du kan dele…

Slett publisert versjon
Published projects need an "index.html" page, please add it and try again. Learn more
Avbryt
Publiser
Published projects need an "index.html" page, please add it and try again. Learn more