Website létrehozás

GITHUB

git clone [URL]- lemásoolja a repository-t

git status – különbségeket listázza

git add [file]- hozzáadja az állományt

git commit – nyugtázza a változásokat

git pull – lehívja a változásokat

git push – betolja a változásokat

sorrend: git add -A; git commit; git push;

 

GIT BRANCH

git branch [név] – több fejlesztő dolgozik ugyanazon a projekten

git checkout [ág] –

git merge – egyesítés

 

Parancssor

ls – az  aktuális könyvtárból nyíló könyvtárak, állományok listázása

pwd (print working directory) – munkakönyvtár listázása

cd (change directory) – könyvtár váltása

mkdir – könyvtár létrejozása

rm – könyvtár törlése -r (rekurzív) az alkönyvtárakat is törli

touch – file létrehozása

open – file megnyitása

  •   -a “” megadott programmal nyitja meg.
  • . az aktuális könyvtárat nyitja meg.

rm – törli a file-t -r (rekurzív) az alkönyvtárakat is törli

mv – átnevezés vagy mozgatás

 

BASH

.bash_profile – ban megadható parancsok.

alias rövidítés = ‘elérési út pl.’

echo

fn_név () {függvény leírása}

SSH into a remote machine

ssh user@mydomain.com
#or by ip address
ssh user@192.168.1.1

exit: exit

Install Something

#If it's a new server, update apt-get first thing
sudo apt-get update
#then you can install something - say Git
sudo apt-get install git

Copy/Deploy files

#copy all of the files in this directory to the /home/will/newapp directory
rsync -av . will@domain.com:~/newapp
#delete a file and run rsync again, and it only copies the one mising file

Generate an SSH keypair for passwordless SSH

#on your computer
cd ~/.ssh
#you might need to make the .ssh directory
ssh-keygen -C "my@email.com"
#hit enter a few times to generate key

#copy the file contents to the clipboard
cat id_rsa.pub | pbcopy

#log into your machine
ssh user@mydomain.com
#make the .ssh directory and get in it
mkdir .ssh
cd .ssh
#open authorized_keys in nano and paste the contents in
nano authorized_keys
#paste contents in and save by hitting ctrl+x

#exit and you can now ssh without a password!

 

NodeJS alapok

 

Telepítendő: Bracket szövegszerkesztő, de bármi más is jó lehet. NodeJs: parancssorból lehet futtatni a megírt js kiterjesztésű modulokat.

Pl. egyszerű szerver létrehozása:

var http = require('http');

var server = http.createServer(function (request, response) {
    console.log('got a request!');
    response.write('hi!');
    response.end();
});

server.listen(3000);

Node.JS ismerkedés

ESZKÖZÖK

Oktatóvideók: Youtube – Mindscape. Node.js ingyenessen letölthető, a kódoláshoz a PhpStorm-ot használják, ami 30 napig ingyenes próbaverzió után évi 199Euro-ért megvásárolható.

SZERVER.JS

var http = require('http');
var module1 = require('./module1');

function onRequest(request, response){
    response.writeHead(200,{"Content-Type": "text/plain"});
    response.write('Hello World');
    module1.module1();
    response.end();
}

http.createServer(onRequest).listen(3000);

MODULE1.JS

function module1(){
    console.log('Modul-1 is activated.');
}

module.exports.module1 = module1;

HTML FILE KISZOLGÁLÁSA

var http = require('http');
var fs = require('fs');

function onRequest(request, response){
    response.writeHead(200,{'Content-Type': 'text/html'});

    fs.readFile('./index.html', null, function(error, data){
        if (error) {
            response.writeHead(404);
            response.write('File not found!');
        } else {
            response.write(data);
        }
       response.end();
    });
}
http.createServer(onRequest).listen(8000);

ABOUT

app.js

var url = require('url');
var fs = require('fs');

function renderHTML(path, response){
  fs.readFile(path, null, function(error, data){
      if (error) {
          response.writeHead(404);
          response.write('File not found!');
      }
      else {
          response.write(data);
      }
      response.end();
  });
}

module.exports = {
    handleRequest: function(request, response){
        response.writeHead(200,{'Content-Type': 'text/html'});
        var path = url.parse(request.url).pathname;
        switch (path){
            case '/':
                renderHTML('./index.html', response);
                break;
            case '/about':
                renderHTML('./about.html', response);
                break;
            default:
                response.writeHead(404);
                response.write('Route not defined');
                response.end();
        }
    }
}

server.js

var http = require('http');
var app = require('./app');

http.createServer(app.handleRequest).listen(3000);

Handlebars

Get and Post

// INDEX.JS
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.get('/test/:id', function(req, res, next){
  res.render('test', {output: req.params.id});
});

router.post('/test/submit', function(req, res, next){
  var id = req.body.id;
  res.redirect('/test/' + id);
});

module.exports = router;
// INDEX.HBS
<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>
<form action="/test/submit" method="post">
  <input type="text" name="id">
  <button type="submit">Submit</button>
</form>

MONGO ADATBÁZIS SZERVER

alternatíva lehet: https://mlab.com/

MONGO insert/get data

MONGOOSE

Adatbázis kezelés (SQL ismeretek)

Új táblázat a semmiből:

CREATE TABLE (id INTEGER, name STRING, age INTEGER);
CREATE TABLE artists(id INTEGER PRIMARY KEY, name TEXT);

Érték bevitele meglévő táblázatba:

INSERT INTO celebs (id, name, age) VALUES (1, 'Justin Biber', 21);

Értékek kiolvasása – a ‘*’ ‘_’ ‘%’  helyettesítő karakterek, keresési feltételként több oszlopnév is megadható, vesszővel elválasztva. Logikai kapcsolat AND OR BETWEEN. ORDER BY DESC (csökkenő) ASC (növekvő) – sorbarendezés. LIMIT – listázottak számát korlátozza  :

SELECT * FROM celebs WHERE age < 25;

SELECT DISTINCT genre FROM movies; //csak 1x írja ki a tételeket

SELECT * FROM movies WHERE name BETWEEN 'A' AND 'J';
  • = equals
  • != not equals
  • > greater than
  • < less than
  • >= greater than or equal to
  • <= less than or equal to

Meglévő rekord módosítása:

UPDATE celebs SET age=22 WHERE id=1;

Meglévő táblázathoz új oszlop illesztése (NULL értékkel lesznek feltöltve):

ALTER TABLE celebs ADD COLUMN twitter_handle TEXT;

Rekordok törlése a táblázatból:

DELETE FROM celebs WHERE twitter_handle IS NULL;

Rekordok számlálása:

SELECT COUNT(*) FROM fake_apps WHERE price = 0;

SELECT price, COUNT(*) FROM fake_apps GROUP BY price;

SELECT price, COUNT(*) FROM fake_apps WHERE downloads > 20000 GROUP BY price;

SELECT category, SUM(downloads) FROM fake_apps GROUP BY category;

SELECT MAX(downloads) FROM fake_apps;

SELECT price, ROUND(AVG(downloads),2) FROM fake_apps GROUP BY price;

Táblák összefűzése:

SELECT albums.name, albums.year, artists.name FROM albums, artists;
SELECT * FROM albums JOIN artists ON albums.artist_id = artists.id;
SELECT * FROM albums LEFT JOIN artists ON albums.artist_id = artists.id;

Összegzés:

  • CREATE TABLE creates a new table.
  • INSERT INTO adds a new row to a table.
  • SELECT queries data from a table.
  • UPDATE edits a row in a table.
  • ALTER TABLE changes an existing table.
  • DELETE FROM deletes rows from a table.
  • SELECT is the clause you use every time you want to query information from a database.
  • WHERE is a popular command that lets you filter the results of the query based on conditions that you specify.
  • LIKE and BETWEEN are special operators that can be used in a WHERE clause
  • AND and OR are special operators that you can use with WHERE to filter the query on two or more conditions.
  • ORDER BY lets you sort the results of the query in either ascending or descending order.
  • LIMIT lets you specify the maximum number of rows that the query will return. This is especially important in large tables that have thousands or even millions of rows.
  • Aggregate functions combine multiple rows together to form a single value of more meaningful information.
  • COUNT takes the name of a column(s) as an argument and counts the number of rows where the value(s) is not NULL.
  • GROUP BY is a clause used with aggregate functions to combine data from one or more columns.
  • SUM() takes the column name as an argument and returns the sum of all the values in that column.
  • MAX() takes the column name as an argument and returns the largest value in that column.
  • MIN() takes the column name as an argument and returns the smallest value in that column.
  • AVG() takes a column name as an argument and returns the average value for that column.
  • ROUND() takes two arguments, a column name and the number of decimal places to round the values in that column.
  • Primary Key is a column that serves a unique identifier for row in the table. Values in this column must be unique and cannot be NULL.
  • Foreign Key is a column that contains the primary key to another table in the database. It is used to identify a particular row in the referenced table.
  • Joins are used in SQL to combine data from multiple tables.
  • INNER JOIN will combine rows from different tables if the join condition is true.
  • LEFT OUTER JOIN will return every row in the left table, and if the join condition is not met, NULL values are used to fill in the columns from the right table.
  • AS is a keyword in SQL that allows you to rename a column or table in the result set using an alias.

Subquery:

SELECT * FROM flights WHERE origin IN (SELECT code FROM airports WHERE elevation < 2000);


SELECT a.dep_month,
       a.dep_day_of_week,
       AVG(a.flight_distance) AS average_distance
  FROM (
        SELECT dep_month,
              dep_day_of_week,
               dep_date,
               sum(distance) AS flight_distance
          FROM flights
         GROUP BY 1,2,3
       ) a
 GROUP BY 1,2
 ORDER BY 1,2

CORRELATED SUBQUERY

SELECT id FROM flights AS f WHERE distance < (SELECT AVG(distance) FROM flights WHERE carrier = f.carrier);
SELECT origin, id,
    (SELECT COUNT(*)
FROM flights f
WHERE f.id < flights.id
AND f.origin=flights.origin) + 1
 AS flight_sequence_number
FROM flights;

Összegzés:

Subqueries are used to complete an SQL transformation by nesting one query within another query.

– A non-correlated subquery is a subquery that can be run independently of the outer query and can be used to complete a multi-step transformation.

– A correlated subquery is a subquery that cannot be run independently of the outer query. The order of operations in a correlated subquery is as follows:

1. A row is processed in the outer query.

2. Then, for that particular row in the outer query, the subquery is executed.

UNION:

SELECT brand FROM legacy_products
UNION 
SELECT brand FROM new_products;
SELECT id, avg(a.sale_price) FROM (
  SELECT id, sale_price FROM order_items
  UNION ALL
  SELECT id, sale_price FROM order_items_historic) AS a 
  GROUP BY 1;
SELECT category FROM new_products
INTERSECT
SELECT category FROM legacy_products;
SELECT category FROM legacy_products
EXCEPT
SELECT category FROM new_products;
  • The UNION clause allows us to utilize information from multiple tables in our queries.
  • The UNION ALL clause allows us to utilize information from multiple tables in our queries, including duplicate values.
  • INTERSECT is used to combine two SELECT statements, but returns rows only from the first SELECT statement that are identical to a row in the second SELECT statement.
  • EXCEPT returns distinct rows from the first SELECT statement that aren’t output by the second SELECT statement

COUNT:

SELECT DATE(ordered_at), COUNT(delivered_to) FROM orders GROUP BY 1 ORDER BY 1;
SELECT DATE(ordered_at), ROUND(SUM(amount_paid),2) FROM orders 
JOIN order_items ON orders.id = order_items.order_id WHERE name='kale-smoothie'
GROUP BY 1 ORDER BY 1;
SELECT name, round(SUM(amount_paid) /
  (SELECT SUM(amount_paid) FROM order_items)*100,2) as pct
FROM order_items GROUP BY 1 ORDER BY 2 DESC;
select
  case name
    when 'kale-smoothie'    then 'smoothie'
    when 'banana-smoothie'  then 'smoothie'
    when 'orange-juice'     then 'drink'
    when 'soda'             then 'drink'
    when 'blt'              then 'sandwich'
    when 'grilled-cheese'   then 'sandwich'
    when 'tikka-masala'     then 'dinner'
    when 'chicken-parm'     then 'dinner'
    else 'other'
  end as category, round(1.0 * sum(amount_paid) /
    (select sum(amount_paid) from order_items) * 100, 2) as pct
from order_items group by 1 order by 2 desc;
select name, round(1.0 * count(distinct order_id) /
  count(distinct orders.delivered_to), 2) as reorder_rate
from order_items
  join orders on
    orders.id = order_items.order_id
group by 1
order by 2 desc;
  • Data aggregation is the grouping of data in summary form.
  • Daily Count is the count of orders in a day.
  • Daily Revenue Count is the revenue on orders per day.
  • Product Sum is the total revenue of a product.
  • Subqueries can be used to perform complicated calculations and create filtered or aggregate tables on the fly.
  • Reorder Rate is the ratio of the total number of orders to the number of people making orders.

 

 

Objektum Orientált Programozás (Javascript)

 

Methode:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script type="text/javascript">
    function employee(id, salary){
      this.id = id;
      this.salary = salary;
      this.paidTax = payTaxes;
    }
    function payTaxes(){
      var tax = (this.salary * 0.20);
      return tax;
    }
    
    var employee_1 = new employee("44880001", 100000);  
    var employee_2 = new employee("44880002", 200000);  
    
  </script>
</head>
<body>
  <script type="text/javascript">
    document.write(employee_1.paidTax());
  </script>
</body>
</html>

Constructorral:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script type="text/javascript">
    function led(color,status){
      this.color=color;
      this.status=status;
    };
    var led_1 = new led("green","off");
    var led_2 = new led("red","on");
  </script>
</head>
<body>
  <script type="text/javascript">
    document.write(led_1.color);
    document.write(" / ");
    document.write(led_2.status);
  </script>
</body>
</html>

1-2 példány esetén ez is használható:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script type="text/javascript">
    enemyWarrior = {positionX:12,positionY:10};
    friendlywarrior = {positionX:10,positionY:21};
  </script>
</head>
<body>
  <script type="text/javascript">
    document.write("enemy position is: " + enemyWarrior.positionX + " " +enemyWarrior.positionY);
  </script>
</body>
</html>

JQuery Alapok

 

A JSBin-en A jQuery-t hozzáadása: Add library menüponton belül a jQuery.

<script>$(document).ready(function()){};</script> tagok közé írhatóak a parancsok, érdemes a </body> tag elé írni, a html végére. Egyszerűbb alak $(function(){});

$(“#panel1”.hide(30)); 30ms alatt elreji a panel1-et. Láncolható pl. .hide(300).show(300).hide(300);

  • hide(timer);
  • remove();
  • toggle();
  • show(timer);
  • slideUp(timer); slideDown(timer);
  • delay(timer);
  • fadeIn(timer); fadeOut(timer); fadeToggle(timer);

$(“panel1”).css({color:’red’, fontWeight:’bold’, display: ‘none’, opacity:0.5});

<body>
  
  <div class=row>
    <div class=col-xs-4>
      <div id="panel1" class="panel panel-primary">
        <div id="head1" class="panel-heading">I. műszak</div>
        <div class="panel-body">Kiss Dávid</div>
        <div class="panel-body">Koncz György</div>
        <div class="panel-body">Papp István</div>
      </div>
    </div>
    <div class=col-xs-4>
      <div id="panel2" class="panel panel-primary">
        <div id="head2" class="panel-heading">II. műszak</div>
        <div class="panel-body">Angyal Attila</div>
        <div class="panel-body">Baráth István</div>
        <div class="panel-body">Pinczés Adrián</div>
      </div>
    </div>
    <div class=col-xs-4>
      <div id="panel3" class="panel panel-primary">
        <div id="head3" class="panel-heading">III. műszak</div>
        <div class="panel-body">Gáti Csaba</div>
        <div class="panel-body">Herceg József</div>
        <div class="panel-body">Végh Tibor</div>
      </div>
    </div>
  </div>
  
  <script>
    $(function(){
      $('#head1').on('click', function(){
        $('#panel1').toggle().show(2000);
      });      
    })  
  </script>
</body>
<body>
  <div class="col-xs-3">
    <div class="btn btn-success" imgId="img1">BTN1</div>
  </div>  
  <div class="col-xs-3">
    <div class="btn btn-success" imgId="img2">BTN2</div>
  </div>  
  <div class="col-xs-3">  
    <div class="btn btn-success" imgId="img3">BTN3</div>
  </div>  
  <div class="col-xs-3">  
    <div class="btn btn-success" imgId="img4">BTN4</div>
  </div>  
  
  <div class="col-xs-3">
    <img id="img1" class="img-responsive" src="https://orange.tryfruit.com/images/badges/6.png"></img>
  </div>  
  <div class="col-xs-3">
    <img id="img2" class="img-responsive" src="https://orange.tryfruit.com/images/badges/3.png"></img>
  </div>  
  <div class="col-xs-3">  
    <img id="img3" class="img-responsive" src="https://orange.tryfruit.com/images/badges/4.png"></img>
  </div>  
  <div class="col-xs-3">  
    <img id="img4" class="img-responsive" src="https://orange.tryfruit.com/images/badges/5.png"></img>
  </div>
  
  <div class="col-xs-12">
    <ol class="list-styled">
      <li class="list-group-item">Narancs</li>
      <li class="list-group-item">Gránátalma</li>
      <li class="list-group-item">Füge</li>
      <li class="list-group-item">Kiwi</li>
    </ul>
  </div>  
  <script>
    $(function(){
      $('.btn-success').on('click',function(){
        var buttonId=$(this).attr('imgId');
        $('#'+buttonId).toggle();
      });  
      $('li').on('click', function(){
        $(this).prev().remove()
        $(this).next().addClass('list-group-item-success')
      });
    });    
  </script>
</body>

DOM Traversal

.first(); .last(); .next(); .prev(); .children(); .parent(); .sibling();

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <title>JS Bin</title>
</head>

<body>
    <div class="header">
      <h1>Képtár</h1>
    </div>

    <div id="slider">
      <ul class="slides">
        <li class="slide"><img class="image" src=""></img></li>
        <li class="slide"><img class="image" src=""></img></li>
        <li class="slide"><img class="image" src=""></img></li>
        <li class="slide"><img class="image" src=""></img></li>
        <li class="slide"><img class="image" src=""></img></li>
        <li class="slide"><img class="image" src=""></img></li>
      </ul>
    </div>
</body>
</html>

CSS
#slider {
    width: 720px;
    height: 400px;
    overflow: hidden;
}

#slider .slides {
    display: block;
    width: 6000px;
    height: 400px;
    margin: 0;
    padding: 0;
}

#slider .slide {
    float: left;
    list-style-type: none;
    width: 720px;
    height: 400px;
}

.image {
    width: 720px;
    height: 400px;
}

JS
$(function() {

    //settings for slider
    var width = 720;
    var animationSpeed = 1000;
    var pause = 2000;
    var currentSlide = 1;

    //cache DOM elements
    var $slider = $('#slider');
    var $slideContainer = $('.slides', $slider);
    var $slides = $('.slide', $slider);

    var interval;

    function startSlider() {
        interval = setInterval(function() {
            $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
                if (++currentSlide == $slides.length) {
                    currentSlide = 1;
                    $slideContainer.css('margin-left', 0);
                }
            });
        }, pause);
    }
    function pauseSlider() {
        clearInterval(interval);
    }

    $slideContainer
        .on('mouseenter', pauseSlider)
        .on('mouseleave', startSlider);

    startSlider();
});
<body>
  <div class="tab-panels">
    <ul class="tabs">
      <li rel="panel1" class="active">panel1</li>
      <li rel="panel2">panel2</li>
      <li rel="panel3">panel3</li>
      <li rel="panel4">panel4</li>
    </ul>
    
    <div id="panel1" class="panel active">
      content1<br/>
      content1<br/>
      content1<br/>
      content1<br/>
      content1<br/>
    </div>
    
    <div id="panel2" class="panel">
      content2<br/>
      content2<br/>
      content2<br/>
      content2<br/>
      content2<br/>
    </div>
    
    <div id="panel3" class="panel">
      content3<br/>
      content3<br/>
      content3<br/>
      content3<br/>
      content3<br/>
    </div>
    
    <div id="panel4" class="panel">
      content4<br/>
      content4<br/>
      content4<br/>
      content4<br/>
      content4<br/>
    </div>
 
  </div>
  
  <script>
    $(function(){
      $('.tab-panels .tabs li').on('click',function(){
        var $panel = $(this).closest('.tab-panels');
        $panel.find('.tabs li.active').removeClass('active');
        $(this).addClass('active');
        
        //figure out panel to show
        var panelToShow = $(this).attr('rel');

        //hide current panel
        $panel.find('.panel.active').hide(300, showNextPanel);
        
        //show new panel
        function showNextPanel(){
          $(this).removeClass('active');

          $('#'+panelToShow).show(300, function(){
            $(this).addClass('active');
          });
        }
      });
    });
  </script>
</body>

Javascript

JavaScript alapok

Meghívás:

  1. <script>JS kód</script> érdemes a html végére tenni, miután az oldal megjelenik. (gyorsabb megjelenítés érzése)
  2. <script src=”scripts/main.js”></script>

Megjegyzések: // után írva

Logikai kapcsolatok: vagy: ||

Változók: var x = 1; var name=”Will”; name=prompt(“”)-bekérés; alert(x);

Feltételes elágazás: if (feltétel1) {} else if (feltétel2) {} else {};

Tömbök: var myList = [e0, e1, e2, ..]; elem bármi lehet, még function is. előhívni név[0…]. név.shift() kiveszi a 0. elemet a tömbből.

Függvények: function functionNév(arg1, arg2, ..){}; Meghívás: functionNév(a);

Selectors:

  • querySelect(‘keresett’) – Pl.:’.class’; ‘#id’; ‘tagname’
  • getelemetById(”);
  • getelemetsById(”);

Html kód változtatása JS-ből: var.innerHTML=””

Event listener: var.addEventListener(“esemény” function(){mi történjen});

esemény lehet: click; mouseenter; mouseleave; focus; blur; mousedown; mouseup; mousemove; keydown; keyup; input;

<body>
  <h1>Osztályok</h1>
  <ul id="checklist">
    <li> 
      <span>Warrior</span>
      <input value="Warrior" />
    </li>
    <li>
      <span>Priest </span>
      <input value="Priest"/>
    </li>
    <li>
      <span>Mage   </span>
      <input value="Mage"/>
    </li>
    <li>
      <span>Rogue  </span>
      <input value="Rogue"/>
    </li>
  </ul>
  <script>
    var checklist=document.getElementById("checklist");
    var items =checklist.querySelectorAll("li");
    var inputs=checklist.querySelectorAll("input");
    
    for(var i=0;i<items.length; i++){
      items[i].addEventListener("click", editItem);
      inputs[i].addEventListener("blur", updateItem);
      inputs[i].addEventListener("keypress", itemKeypress);
    }
    function editItem(){
      this.className="edit";
      var input = this.querySelector("input");
      input.focus();
      input.setSelectionRange(0,input.value.length);
    }
    
    function updateItem(){
      this.previousElementSibling.innerHTML = this.value;
      this.parentNode.className="";
    }
    
    function itemKeypress(event){
      if(event.which == 13){
        updateItem.call(this);
      }
    }
    
  </script>
</body>

String to num konverzió: parseFloat();

HTML közététele (GitHub és JSBin)

Új repository a GitHubon

  1. Nyisd meg a GitHub oldalát (regisztrálj és jelentkezz be, ha ezt még nem tetted meg korábban).
  2. A jobb felső sarokban kattints a plusz ikonra, és válaszd a New repository menüpontot. Ez létrehoz a nevedhez tartozó “raktárat” (repository, repo), ahol a kódodat tudod tárolni.
  3. Adj egy nevet a repository-nak, pipáld be a Initialize this repository with a README opciót, és kattints a Create repository gombra.

JSBin kód –> GitHub repo

  1. Egy másik böngészőlapon nyisd meg a JSBin-ed oldalát, és kattints a File > Download menüpontra. A számítógépedre ekkor letöltődik egy HTML file.
  2. A GitHub repository oldalán kattints a Upload files gombra, és töltsd fel az imént letöltött .html kiterjesztésű file-t (tipp: Chrome-ban például a letöltési sorról egyből rá tudod húzni a feltöltődobozba).
  3. Nyomd meg az oldal alján a Commit changes (változtatások beküldése) gombot.
  4. A repository oldalán – ha minden jól ment, megjelent a hosszabb nevű file-od. Kattints rá a nevére, ekkor megnyílik.

index.html

  1. Keresd meg az Edit this file (egy kis ceruza jelöli) opciót, és kattints rá.
  2. Az oldal tetején, a pici szövegdobozban írd át a file nevét, hogy index.html legyen (nekem például colorClock a repository nevem, ezért a sorban ezt látom: colorClock/index.html).
  3. Nyomd meg az oldal alján a Commit changes (változtatások beküldése) gombot.

Publikálás az interneten

  1. Navigálj vissza a repository főoldalára (például kattints rá a nevére).
  2. Kattints rá a Branch: master feliratú gombra, és a szövegdobozba írd be: gh-pages, majd nyomj egy entert.
  3. Egy új böngészőlapra írd be: http://a-te-felhasznaloneved.github.io/repository-name, ahol az a-te-felhasznaloneved részt cseréld ki a saját GitHub felhasználónevedre, a repository-name részt pedig arra a névre, amit a repository-nak adtál.
  4. Ezt a webcímet már bárkinek elküldheted, büszkélkedj el bátran az alkotásoddal. Pl.: https://farkass47.github.io/ColorClock/