Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>CoderDojo <code>JavaScript</code> Fundamentals</h1>
<section>
  <h2>Click Events</h2>
  <h3>Alert</h3>
  <button class="alert">Alert</button>
  <h3>Counter</h3>
  <p>Count: <span class="count">0</span></p>
  <button class="plus">+1</button>
  <button class="minus">-1</button>
</section>
<section>
  <h2>Hover Event</h2>
  <div class="color-changer">
    <p>Hover Over Me</p>
  </div>
</section>
<section>
  <h2>Tic Tac Toe</h2>
  <p>Player turn: <span class="turn-display">O</span></p>
  <div class="grid">
    <div class="cell cell--x"></div>
    <div class="cell cell--o"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</section>
              
            
!

CSS

              
                body {
  margin: 1rem 3.5rem;
}

h1 {
  margin-bottom: 3rem;
}

section {
  margin-bottom: 3rem;
}

.color-changer {
  background: cyan;
  display: inline-block;
  height: 10em;
  line-height: 10em;
  text-align: center;
  transition: background-color .2s ease-in-out;
  width: 10em;
}

.color-changer p {
  margin: 0;
}

.grid {
  border: 1px solid #333;
  display: grid;
  grid-template-columns: repeat(3, minmax(1rem, 1fr));
  grid-auto-rows: 1fr;
  width: 15vw;
}

.cell {
  border: 1px solid #333;
  font-size: 3rem;
  height: calc(15vw / 3);
  line-height: calc(15vw / 3);
  text-align: center;
}

.cell--x::after {
  content: 'X';
}

.cell--o::after {
  content: 'O';
}
              
            
!

JS

              
                'use strict';
// Comment

/*
Multiline
comments
*/

// Variables
var myString = 'This is a string';
var myInteger = 123;
var syntaxA = 'a semicolon is used to separate statments which means'; var syntaxB = 'you can have multiple statements on one line. This is considered bad practice';

// Functions
function myFirstFunction() {
  console.log('Welcome to CoderDojo!');
  // The console can be viewed by clicking the "Console" button in the toolbar at the bottom left of the screen
}

myFirstFunction(); //this is how you call a function

function helloWorld() {
  console.log('Hello World');
}

// Event Listener
document.addEventListener('DOMContentLoaded', helloWorld);
/* 
document is an object referring to the root of the page you're viewing.
Read more about the DOM (Document Object Model)
here: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

addEventListener is a built in method (function)
of the document object. It takes two arguments:
the first is an event type, the second is a function
known as an event handler. Notice how this
function doesn't use parentheses.

load is an event type. There are
many types of events. View them all
here: https://developer.mozilla.org/en-US/docs/Web/API/Document#event_handlers
*/

///////////////////
// Click Events ///
///////////////////

// first let's grab the node we want to attach an event to
var alertButton = document.querySelector('.alert');

// Next let's define a function that will handle the event
function myAlert() {
  alert('This is my custom alert');
}

// Finally, let's attach the function to the button's click event
alertButton.addEventListener('click', myAlert);


// Counter

// variables
var plusButton = document.querySelector('.plus');
var minusButton = document.querySelector('.minus');
var count = document.querySelector('.count');

// functions
function increaseCount() {
  var currentCount = parseInt(count.innerHTML);
  var newCount = currentCount + 1;
  count.innerHTML = newCount;
}

function decreaseCount() {
  // try to write this function yourself.
  // Hint: use increaseCount() as a guide
}

// event listeners
plusButton.addEventListener('click', increaseCount);
// try to create your own event listener!
// Hint: use the plusButton event listener as a guide


//////////////////
// Hover Events //
//////////////////

// variables
var colorChanger = document.querySelector('.color-changer');

// functions

function getRandomInt(min, max) {
  // copied from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
}

function createRandomColor() {
  /*
  rgb values are from 0 to 255.
  rgb(0,0,0) is black
  rgb(255,255,255) is white
  red is rgb(255,0,0)
  green is rgb(0,255,0)
  blue is (0,0,255)
  yellow is rgb(255,255,0)
  and so on
  */
  let colorsArray = [0,0,0];
  return colorsArray.map(color => getRandomInt(0,255)).join(',');
}

function changeToRandomColor() {
  colorChanger.setAttribute('style', `background-color:rgb(${createRandomColor()});`);
}

// event listener
colorChanger.addEventListener('mouseover', changeToRandomColor);

/////////////////
// Tic Tac Toe //
/////////////////

/*
 Try hooking the elements with class 'cell' to a click event
 that will add an X or an O to that cell
 Hint: add the class 'cell--x' to a cell to make an X,
 and add the class 'cell--o' to a cell to make an O
 */

// variables
var playerTurn = 'O';
var turnDisplay = document.querySelector('.turn-display');
var cells = document.querySelectorAll('.cell');

// functions
function drawPlayerSymbol() {
  if (this.classList.contains('cell--o') || this.classList.contains('cell--x')) {
    return; // stop the function and don't do anything, this cell already has a symbol
  }
  
  if (playerTurn == 'O') {
    this.classList.add('cell--o');
    playerTurn = 'X';
  } else {
    this.classList.add('cell--x');
    playerTurn = 'O'
  }
  turnDisplay.innerHTML = playerTurn;
}

[...cells].forEach(cell => {
  cell.addEventListener('click', drawPlayerSymbol);
});

              
            
!
999px

Console