Sorry, Thimble won't work in your Browser

Thimble works in all of the following browsers: Firefox, Chrome, Internet Explorer 11, Microsoft Edge, Safari (8+), and 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 error details open your browser's Developer Tools console.

NOTE: if you are using Private Browsing mode, please reload in normal mode.

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
Legg til fila "index.html" før du publiserer prosjektet ditt. Les meir
Avbryt
Publiser