Staff picks

The latest and greatest from our community!
    /* Design Pattern */
    
    
    function switchFunction(num: number):string {
      let b: string = "functionb";
    
      switch (num) {
        case 1: {
          let b: string = "case 1";
          break;
        } // After break
        case 2:
          {
            let b: string = "case 2";
          } // Before break
          break;
      }
    const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
    let arr2;
    (function() {
      arr2 = [...arr1]; // change this line
      arr1[0] = 'potato'
    })();
    console.log(arr2);
    class SpaceShuttle {
      constructor(targetPlanet){
        this.targetPlanet = targetPlanet;
      }
    }
    var zeus = new SpaceShuttle('Jupiter');
    
    console.log(zeus.targetPlanet)
    
    
    
    function makeClass() {
      class Vegetable {
        constructor(name){
    * {
        margin: 0;
        padding: 0;
    }
    nav{
        font-family: raleway;
        color: #fff;
        background-color: tomato;
        text-align: center;
    }
    nav ul li a{
        text-decoration: none;
        color: #000;
    }
    <html>
        <head>
            <link rel="stylesheet" 
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
            <link rel="stylesheet" href="index.css">
            <script type="text/javascript">
      !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.
      analytics.load("24QLebdJXMS60jZuUnd1L5NOFL8sOGGN");
      analytics.page();
      }}();
            </script>
        </head>
        <body>
            <div id="form-container">
    import Kairos from './kairos';
    var kairos = new Kairos("877fa379", "d385e022e742b6e4be530f22f03374be");
    
    var ageNode = $('#age');
    var genderNode = $('#gender');
    var fetchImgBtn = $('#fetchImgBtn');
    var imgUrlInput = $('#imgUrlInput');
    var face = $('#face');
    var classifyBtn = $("#classifyBtn");
    
    fetchImgBtn.click(function() {
        face.attr('src', imgUrlInput.val());
        classifyBtn.show();
        imgUrlInput.hide();
    body {
        margin: 0;
    }
    
    * {
        animation: 10s infinite linear;
    }
    
    .sky {
        width: 100vw;
        height: 100vh;
        background-color: skyblue;
        position: relative;
        display: flex;
    <html>
        <head>
            <script src="https://js.braintreegateway.com/web/dropin/1.10.0/js/dropin.min.js"></script>
        </head>
        <body>
            <div id="dropin-container"></div>
            <button id="submit-button">Pay</button>
    
        </body>
        <script>
            /*
            https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/customize-button/#button-styles 
            
            https://braintree.github.io/braintree-web-drop-in/docs/current/module-braintree-web-drop-in.html#~paypalCreateOptions
    <html>
        <head></head>
        <body>
            <h1>Cookie Clicker!</h1>
            <h2>Clicks: <span id="counter">0</span> </h2>
            <img onclick="increase()" src="cookie.png" width="200px">
            
            <script>
                var clicks = 0;
                
                function increase(){
                    clicks ++;
                    document.getElementById("counter").innerHTML= clicks;
                    
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello Bulma!</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
        <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
      </head>
      <body>
      <section class="section">
        <div class="container">
          <h1 class="title">
            Bulma button tutorial
    <html>
        <head>
            <script src="https://js.braintreegateway.com/web/dropin/1.10.0/js/dropin.min.js"></script>
        </head>
        <body>
            <div id="dropin-container"></div>
            <button id="submit-button">Pay</button>
    
        </body>
        <script>
            let button = document.querySelector("#submit-button");
            
            braintree.dropin.create({
                authorization: "sandbox_g42y39zw_348pk9cgf3bgyw2b",
    function convertToF(celsius) {
      let fahrenheit = celsius * 9/5 + 32;
      return fahrenheit;
    }
    
    console.log(convertToF(-30));
    
    /*
    
    convertToF(0) should return a number
    convertToF(-30) should return a value of -22
    convertToF(-10) should return a value of 14
    convertToF(0) should return a value of 32
    convertToF(20) should return a value of 68
    <html>
        <head>
    		<style>
    
    /* css reset */
    * { margin: auto; padding: 0; }
    
    :root{
    	--hue-lght: #ffeecc;
    	--hue-dark: #ffccaa;
    }
    
    html{ background: var(--hue-lght); }
    body{ background: linear-gradient(var(--hue-lght), var(--hue-dark)); }
    function factorialize(num) {
        if (num === 0) { return 1;}
        return num * factorialize(num-1);
        /* 
        5*4*3*2*1*1
        */
    }
    
    console.log(factorialize(5));
    
    /*
    Factorials are often represented with the shorthand notation n!
    For example: 5! = 1 * 2 * 3 * 4 * 5 = 120
    
    html, body {
        margin: 0;
        padding: 0;
    }
    .box {
    	border-radius: .3em;
    	box-sizing: border-box;
    	border: 3px solid #09F;
    	padding: 10px;
    	background:antiquewhite;
    	font-size:1.3em;
    	margin:.1em;
    	word-wrap:break-word;
    }
ahudmuffin4:0010 months ago
    import {Game} from './Game'
    
    tag Tile
    	prop nr
    
    	def render
    		let placed = data.history.indexOf(nr)
    		let won = data.winner and data.winner.indexOf(nr) >= 0
    		<self .won=won>
    			<span> data.tiles[nr]
    
    tag App
    	def place tileIndex
    		data.addCross(tileIndex)
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
    <!-- For guidance or help with this banner, contact Seddon (WMF) -->
    <!-- This banners is set up to run to loggedin users only -->
    <style>
    
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      src: local('Montserrat'), local('Montserrat'), url(https://upload.wikimedia.org/wikipedia/donate/c/cd/Montserrat.woff2) format('woff2');}
    
    function request(){
     var url = 'https://api.github.com/users/kennymark/repos';
     
     fetch(url).then(data => data.json()).then(data => {
         var repolink = data.map(repo => {
             console.log(repo.url)
         })
     })
        
    
    }
    
    request()
    const allVoices = require('./voices')
    
    const msg = new SpeechSynthesisUtterance();
    msg.rate = 1; // 0.1 to 10
    msg.pitch = 1; // 0 to 2
    msg.text = "Yo my name is Jeff";
    
    const voice = allVoices[34] // 47 total
    console.log(`voice: ${voice.name}, language: ${voice.lang}`)
    msg.voiceURI = voice.voiceURI;
    msg.lang = voice.lang;
    
    speechSynthesis.speak(msg);
    """
    
        Page Templating with Python 🌐🐍
        GitHub :: PCabralSoftware - 2K18 - Twitter :: @pedrogcabral
    
    """
    
    from browser import document
    from browser import html
    from browser.template import Template
    
    pageName = "Python 🐍"
    
    articleContent = open('news_file.txt').read()
    """
    
        Creating a Simple Website with Python 🐍
        Github :: PCabralSoftware - 2K18 - Twitter :: @pedrogcabral
    
    """
    
    from browser import document
    from browser import html
    
    nav = html.DIV('Python!', Class="nav")
    
    text = "Hello there!"
    
    # Custom tag acting as root of your app
    tag App
    	
    	# When <App> is mounted in the document
    	# schedule it to render after events are handled
    	def mount
    		schedule(events: yes)
    
    	# Define the content to render inside <App>
    	def render
    		<self>
    			<div.offcanvas.left.hide>
    				<span> "left"
    			<div.togglebar>