Core/codeLink naar externe websiteLink naar externe website

Light mode

HTML

<!DOCTYPE html​>
<html​>
<head​>
<title​>Page Title</​title​>
</​head​>
<body​>

<h1​>My First Heading</​h1​>
<p​>My first paragraph.</​p​>

</​body​>
</​html​>

PHP

// Enter your code here, enjoy!
$array = array("1" =​> "PHP code tester Sandbox Online",
    "emoji" =​> "&#128512; &#128515; &#128516; &#128513; &#128518;", 5 , 5 =​> 89009,
    "Random number" =​> rand(100,999),
    "PHP Version" =​> phpversion()
);

foreach( $array as $key =​> $value ){
    echo $key."\t=​>\t".$value."\n";
}

CSS

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
}

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;

  button {
    background: $blue-darker;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
  }

  &amp;:hover {
    background: $blue-darker;
    color: #fff;
    margin-top: 40px;
    width: 200px;
  }

  &amp;:hover button {
    background: #fff;
    color: #000;
  }
}

JS

// Type your code as an expression and then click Run, for example:
const dogs = [
  {age: 10, name: 'Fido'},
  {age: 14, name: 'Bowser'},
  {age: 16, name: 'Rusty'}
];
dogs.map(dog =​> dog.name);

Dark mode

HTML

<!DOCTYPE html​>
<html​>
<head​>
<title​>Page Title</​title​>
</​head​>
<body​>

<h1​>My First Heading</​h1​>
<p​>My first paragraph.</​p​>

</​body​>
</​html​>

PHP

<?php
// Enter your code here, enjoy!
$array = array("1" =​> "PHP code tester Sandbox Online",
    "emoji" =​> "&#128512; &#128515; &#128516; &#128513; &#128518;", 5 , 5 =​> 89009,
    "Random number" =​> rand(100,999),
    "PHP Version" =​> phpversion()
);

foreach( $array as $key =​> $value ){
    echo $key."\t=​>\t".$value."\n";
}

CSS

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
}

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;

  button {
    background: $blue-darker;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
  }

  &amp;:hover {
    background: $blue-darker;
    color: #fff;
    margin-top: 40px;
    width: 200px;
  }

  &amp;:hover button {
    background: #fff;
    color: #000;
  }
}

JS

// Type your code as an expression and then click Run, for example:
const dogs = [
  {age: 10, name: 'Fido'},
  {age: 14, name: 'Bowser'},
  {age: 16, name: 'Rusty'}
];
dogs.map(dog =​> dog.name);