Spectrum UI Library

Custom Component Sandbox

Explore, interact, and integrate beautiful customized React widgets and modular interface elements built for speed and visual excellence.

Assembling playground modules...

Palindrome Checker

Enter a string

Factorial Calculator

Enter a positive integer

Parking Price Calculator

Enter a Time

Price for minutes : Rupees.

Bubble Sort Algorithm

Enter an Array

Step Type: N/A

Sum of Two Numbers

Switch Case

Fibonacci Series Generator

Calculator

Answer:

Mini Window & Browser Info

Dialog Examples

Text Transfer

manjeet singh

This is a Heading

This is a paragraph.

This is a Heading

This is a paragraph. By : Manjeet Singh

Style Manipulator

SpiderMonkey is the code name for the first JavaScript engine, written by Brendan Eich at Netscape Communications, later released as open-source and currently maintained by the Mozilla Foundation

JS Basics

function fullName(first, last) {
    console.log(first + " " + last)
}

fullName('Rahul', 'Maurya');

let num = 5;
var age;
let name;

let message = "Hello World!";
let _message = "Hello World!!";
let $message = "Hello World!!!!";
num =10;
name = fullName('Rahul', 'Rahi');

console.log(num);
console.log(age);
console.log(message);
console.log(_message);
console.log($message);
console.log(name);

Full Name: Rahul Maurya

Num: 10

Age: undefined

Message: Hello World!

_Message: Hello World!!

$Message: Hello World!!!!

Name: Rahul Rahi

Alerts

Alerts are created with the .alert class, followed by a contextual color classes:

Success! This alert box could indicate a successful or positive action.

Info! This alert box could indicate a neutral informative change or action.

Warning! This alert box could indicate a warning that might need attention.

Danger! This alert box could indicate a dangerous or potentially negative action.

Success! Indicates an important action.

Info! Indicates a slightly less important action.

Warning! Dark grey alert.

Danger! Light grey alert.

Loops in JS

While Loop

Odd Numers

1

3

5

7

9

Number List

1

2

3

4

5

Do While Loop

Rahi

For Loop

5 Times Table:

5

10

15

20

25

30

35

40

45

50

Even Numbers:

2

4

6

8

10

Full Example

Output

Full Example

Console Output

Open the browser console to see the output from Python logic.

Full Example

Choice ↔ Number Converter

Open your browser console to see the function outputs.

Full Example

Rotating Squares Pattern

Full Example

Turtle Circle Drawing

Full Example

Try Again

Quadratic Equation Solver

Quadratic equations are in the form ax² + bx + c = 0

Solve a Quadratic Equation: ax² + bx + c = 0

Enter Student Details

Enter Student Record

Doubly Linked List Operations

Forward Traversal:

Empty

Reverse Traversal:

Empty

Interactive Node List (with delete):

List is empty

Sort Integer List

Integer Sort Demo (React Version of C qsort)

Unsorted List:

103, 549, 22, 699, 1029, 9, 45, 653, 22, 541, 990, 149, 269, 399

Subject Average Calculator

String Permutation Generator

Enter string: 

Class Demo Simulation (C++ → React)

Enter Your Number: 

Enter 10 Numbers

Multiplication Table Generator

Enter a single digit number (1-9): 

Storage Classes and Scope (C to React)

First Lines

<?php

echo "hello world! My first php script"."<br>";
echo 15 ."<br>";

?>

Variables

<?php 

$myName ="Rahi";
echo $myName ."<br>";

$num1 = 6;
$num2 = 4;
$result = $num1+$num2;
echo $result ."<br>";

?>

Variables Scope

Global & Local Variables

  <?php 

$global = "I am a global variable";
$local = "I am actually golbal";
function printTxt(){

    $local = "I am a local variable";

    GLOBAL $global;
     echo $global ."<br>";
     echo $local ."<br>";
 }

 printTxt()

?>

Static Variable

<?php

 function trackNumber(){
     STATIC $number = 0;
     $number++;
     echo $number ."<br>";
 }

 trackNumber();
 trackNumber();
 trackNumber();
 trackNumber();
 trackNumber();
 trackNumber();

?>

Data Types

String

<?php 

$x = "Hello world!";

echo $x;
echo "<br>";
var_dump($x);

?>

Integer

<?php

$x = 5985;

echo $x;
echo "<br>";
var_dump($x);

?>

Float

<?php

$x = 10.365;

echo $x;
echo "<br>";
var_dump($x);

?>

Boolean

<?php

$x = true;
$y = false;

echo $x;
echo $y;
echo "<br>";
var_dump($x);
var_dump($y);

?>

Array

<?php

$cars = array("Volvo","BMW","Toyota");
var_dump($cars);

?>

Conditional Statements

If Statement

<?php

$t = date("H");

if ($t < "20") {
  echo "Have a good day!";
}

?>

If...else Statement

<?php

$t = date("H");

if ($t < "20") {
  echo "Have a good day!";
} else {
  echo "Have a good night!";
}

?>

If...elseif...else Statement

<?php

$t = date("H");

if ($t < "10") {
  echo "Have a good morning!";
} elseif ($t < "20") {
  echo "Have a good day!";
} else {
  echo "Have a good night!";
}

?>

Switch Statement

<?php

$favcolor = "red";

switch ($favcolor) {
  case "red":
    echo "Your favorite color is red!";
    break;
  case "blue":
    echo "Your favorite color is blue!";
    break;
  case "green":
    echo "Your favorite color is green!";
    break;
  default:
    echo "Your favorite color is neither red, blue, nor green!";
}

?>

Loops

For Loop

<?php

for ($x = 0; $x <= 10; $x++) {
  echo "The number is: $x <br>";
}

?>

Foreach Loop

<?php

$colors = array("red", "green", "blue", "yellow");

foreach ($colors as $value) {
  echo "$value <br>";
}

?>

While Loop

<?php

$x = 1;

while($x <= 5) {
  echo "The number is: $x <br>";
  $x++;
}

?>

Do...while Loop

<?php

$x = 1;

do {
  echo "The number is: $x <br>";
  $x++;
} while ($x <= 5);

?>

PHP Break

<?php

for ($x = 0; $x < 10; $x++) {
  if ($x == 4) {
    break;
  }
  echo "The number is: $x <br>";
}

?>

PHP Continue

<?php

for ($x = 0; $x < 10; $x++) {
  if ($x == 4) {
    continue;
  }
  echo "The number is: $x <br>";
}

?>

PHP Functions

<?php

function familyName($fname, $year) {
  echo "$fname Refsnes. Born in $year <br>";
}

familyName("Hege", "1975");
familyName("Stale", "1978");
familyName("Kai Jim", "1983");

?>

PHP Superglobals

PHP $GLOBALS

<?php

$x = 75;
$y = 25;
 
function addition() {
  $GLOBALS['z'] = $GLOBALS['x'] + $GLOBALS['y'];
}
 
addition();
echo $z;

?>

PHP $_GET

<?php

echo "Study " . $_GET['subject'] . " at " . $_GET['web'];

?>

PHP $_POST

<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
  Name: <input type="text" name="fname">
  <input type="submit">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  // collect value of input field
  $name = $_POST['fname'];
  if (empty($name)) {
    echo "Name is empty";
  } else {
    echo $name;
  }
}
?>

PHP $_SERVER

<?php
echo $_SERVER['PHP_SELF'];
echo "<br>";
echo $_SERVER['SERVER_NAME'];
echo "<br>";
echo $_SERVER['HTTP_HOST'];
echo "<br>";
echo $_SERVER['HTTP_REFERER'];
echo "<br>";
echo $_SERVER['HTTP_USER_AGENT'];
echo "<br>";
echo $_SERVER['SCRIPT_NAME'];
?>

PHP $_REQUEST

<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
  Name: <input type="text" name="fname">
  <input type="submit">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  // collect value of input field
  $name = $_REQUEST['fname'];
  if (empty($name)) {
    echo "Name is empty";
  } else {
    echo $name;
  }
}
?>