El Code Snippet

Take and Use ... It's cool!

Welcome

Please feel free to use this site to help you get the skills you need to help you land a coding job, redesign your own website or pick up some new skills. I've dedicated this site to help you get familiar with some of the more sought after coding skill sets that most employers are looking for.

I've designed this site to:

  • Provide a lecture type format
  • Try out the features I speak about
  • Use the mini-code samples you create to help you build your own portfolio.

JavaScript

Learn some of the basics of the web's most popular language

    var Inventory = function(make, model) {
      this.make = make;
      this.model = model;
     };
    
    var vin123 = new Inventory();
    vin123.make = "Chevrolet";
    vin123.model = "Impala";
    
    var vin456 = new Inventory();
    vin456.make = "Mercedes";
    vin456.model = "c230";
    
    console.log(vin123);
    console.log(vin456.model);
            

Hack this JavaScript Constructor Function yourself: https://repl.it/Ic11

Get Started

jQuery

Talk about just getting things done. Select and Go!

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>jQuery: Change the Look of a Paragraph</title>
      </head>
      <body>
        <p id="main">This is the main text</p>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
          $("p#main").css('backgroundColor', '#000').css('color', '#fff');
        </script>
      </body>
    </html>
            

Hack this jQuery code yourself: https://repl.it/Ic2n/1

Get Started

AngularJS 1.6

Talk about taking web development to another level

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>AngularJS: Insert Default Text</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
      </head>
      <body>
        <div ng-app="myApp" ng-controller="myCtrl">
          <p>{{ txt }}</p>
        </div>
        <script>
          var app = angular.module('myApp', []);
          app.controller('myCtrl', function($scope) {
            $scope.txt = "Good ol' Text!";
          });
        </script>
      </body>
    </html>
            

Hack this AngularJS code yourself: https://repl.it/Ic5v

Get Started

Ruby

Ruby's Object Oriented Programming ...

    # classes & objects
    class Employee 
      # initializing method used when creating new objects
      def initialize(full_name, id, dept)
        @full_name = full_name
        @id = id
        @dept = dept
      end 
      # use when you need to print out their full name
      def getFull_Name
        @full_name
      end
      # use when you need to print out their id
      def getId 
        @id
      end
      # use when you need to print out their department
      def getDept
       @dept
      end
    end
    
    # create the new objects: emp101 & emp102 and assign them default values
    emp101 = Employee.new("John Doe", 101, "HR")
    emp102 = Employee.new("Jane Smith", 102, "Engineering")
    
    # put information on the screen
    puts "#{emp101.getFull_Name} works in the #{emp101.getDept} department."
    puts "Employee ID #{emp102.getId} works in the #{emp102.getDept} department."
            

Just like variables, objects can contain specific variable information for the particular objects those variables are associated with. Try hacking the code yourself and see if you can create more objects: https://repl.it/IiMV

Get Started

Python 3

Learn how to get JSON using Python

     import json, requests 
     url = 'http://eddiemadrigal.org/JSON/worldpopulation.json'
     response = requests.get(url)
     popJSON = json.loads(response.text)
     print("Wordwide Population Ranking")
     for pop in popJSON:
         print(pop['country'])
            

Talk about being able to do some cool things with a computer and a little effort! Python, a scripting languange since 1991,

Get Started

Craigslist

Create an Craigslit HTML file using the <p> (paragraph) and <b> (bold) tag to create a cool looking sentence.

    <p>I hope you have a <b>fantastic day!</b></p>
            

Your turn. To experiment hacking this code, go to https://repl.it/Ioh6, click the run button located at the top and watch the system do its thing!

Get Started