Cheat sheet

API

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest();
// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'https://ghibliapi.herokuapp.com/films', true);
request.onload = function () {
// Begin accessing JSON data here
var data = JSON.parse(this.response);
console.log(data);
};
// Send request
request.send();

JSON

{ 
"name": "Rikke",
"age": 24
}

JSON parse

JSON.parse(text)

JSON stringify

JSON.stringify(value)

Obejct Methods

const house = {
color: "red",
rooms: 2,
pool: false,
owners: null,
bedrooms: function() {
return this.rooms - 1;
}
};

Accessing Object methods

console.log(house.bedrooms());

Obejct Properties

const house = {
color: "red",
rooms: 2,
pool: false,
owners: null
};

Accessing Object Properties

console.log(house.color);
console.log(house['color']);

Validering

Letters check

//checks if there is any letters
let lettersOnly = (input) =>{
let req = /[A-Z]/ig;
return req.test(input);
}

Numbers check

//checks if there is any numbers
let numbersOnly = (input) =>{
let req = /\d/g;
return req.test(input);
}

Specialcharacters check

//checks if there is any specialcharacters
let symbolsOnly = (input) =>{
let req = /[^A-Z][^\d]/ig;
return req.test(input);
}

6 characters check

//checks if there is any characters
let numChar = (input) =>{
let req = /^.{6,}$/;
return req.test(input);
}

Keyhandlers events

element.addEventListener("keyup", function(){ ... });
element.addEventListener("keydown", function(){ ... });

Scroll events

element.addEventListener("scroll", function(){ ... });

Touch events

element.addEventListener("touchstart", function(){ ... });
element.addEventListener("touchend", function(){ ... });
element.addEventListener("touchmove", function(){ ... });

Click events

element.addEventListener("click", function(){ ... });
element.addEventListener("dblclick", function(){ ... });
element.addEventListener("mousemove", function(){ ... });
element.addEventListener("mousedown", function(){ ... });
element.addEventListener("mouseup", function(){ ... });

Events

element.addEventListener(event, functionName);
element.addEventListener(event, function(){ ... });

DOM methods

.innerHTML
.style
.[attribut]
node.append(node)
.value

DOM

document.getElementById(id)
document.getElementsByTagName(tag)
document.getElementsByClassName(classname)
document.createElement(element)
document.setAttribute(attribute, value)
target.addEventListener(type, function)
document.querySelector(selectors)

Iteration methods

Calls a function once for each element in an array

.forEach()

Returns a new array with the updated elements

.map()

Checks each element in an array to see if it meets a condition

.filter()

Is used to reduce the array to a single value

.reduce()

Do while loops

let x = 0;
do {
x++;
console.log(x);
} while (false);

While

let i = 0;
while (i < 10) {
// code to be repeated
console.log('Rep ' + i);
i++;
}
console.log('after loop ' + i);

For loop

for (var i = 0; i >= 10; i++){ 
console.log(i)
}

Array

let arr = [];

Add new items to the end of an array

array.push();

Removes the last element of an array

array.pop();

Adds/removes items to/from an array

array.splice();

Removes the first item of an array

array.shift();

Adds new items to the beginning of an array,

array.unshift();

Arrow functions

const greeting = (name) => { 
console.log(`Greetings ${name}!`);
}
greeting("Rikke");

Function Expressions

const func = function(number) {
return number + number;
}

Declared functions

function firstLastWord(str) { 
return str.substring(0, str.length - 1);
}
console.log(firstLastWord('JavaScript') + "S");

Conditional Statements (switch)

var fruits = "apple";
switch(fruits){
case "Banana":
console.log("Banana is good");
break;
case "orange":
console.log("Oranges? That is not me");
break;
default:
console.log("What fruit is that?")
}

Conditional Statements (if)

if(false) { 
console.log("if block");
}else if (false) {
console.log("else if block");
}else {
console.log("else block");
}

Logical operators

&& (and)

if(10 > 5 && 20 > 10) { 
console.log("This is true");
}

|| (or)

if(10 > 5 || "dogs" === "cats") { 
console.log("This is true");
}

!== (not equal)

if("dogs" !== "cats") { 
console.log("This is true");
}

Arithmetic operators

Remainder (%)

12 % 5 returns 2

Increment (++)

x = 3; 
x++;
x=4;

Decrement (--)

x = 3;
x--;
x=2;

Assignment operators

Assignment

x = 5;

Addition assignment

x = x += 6

Subtraction assignment

x = x -= 9

Multiplication assignment

x = x *= 4

Division assignment

x = x /= 2

Remainder assignment

x = x %= 3

Datatypes

String
Number
Boolean
Null
Symbol
Object
Undefined

Variables

var variable = "oneVar";
let variables = "anotherNameVat;
const variabless = "theLastOne";

Debug tool

'use strict';
console.log();

Comments

/* JS comments */
// Single JS comments

JavaScript link

<script type="text/javascript" src="path-to-javascript-file.js"></script>
<script type="text/javascript" src="path-to-javascript-file.js" defer></script>

Lets start with some JavaScript

GIT commands

git version
git clone <repo>
git status
git add . 
git commit -m "<message>"
git pull
git push
git fetch

Meta data

Description

<meta name="description" content="something">

robots.txt

Disallow a folder

User-agent: *
Disallow: /PDF/

Allow everything

User-agent: *
Allow: /

Transform

Rotate

transform: rotate(45deg);

Scale

transform: scale(1.4, 1.4);

Video

<video width="320" height="240" controls>
   <source src="movie.mp4" type="video/mp4">
      Your browser does not support the video tag.
</video>

Grid

display: grid;

Rows

grid-template-rows: 50px 50px 50px;

Colums

grid-template-columns: repeat(3, 1fr);

Forms

<form> ... </form>

Labels

<label for="thisConnectToAnIputfield">Full name</label>

Input - text

<input type="text" id="thisConnectToAnIputfield" name="youCanSeeThisInTheDatabase">

Input - email

<input type="email" id="thisConnectToAnIputfield2" name="youCanSeeThisInTheDatabase">

Input - number

<input type="number" id="thisConnectToAnIputfield3" name="youCanSeeThisInTheDatabase">

Texrarea

<textare cols="1" rows="1"> </textare>

Required

<input type="text" id="thisConnectToAnIputfield" name="youCanSeeThisInTheDatabase" required>

Placeholder

<input type="text" id="thisConnectToAnIputfield" name="youCanSeeThisInTheDatabase" placeholder="this">

Responsive Web Design

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Flexible images and media (CSS)

max-width: 100%;

Media queries (CSS)

@media screen and (min-width: 800px)

Don't go down there.. It is just some CSS and HTML

Tables

<table>
<caption>Information about tables</caption>
<tr>
<th>Table header</th>
</tr>
<tr>
<td>Table data</td>
</tr>
</table>

Create tables





            

Lists

Ordered list
A list with numbers

<ol>
<li>A list point</li>
<li>A list point</li>
</ol>

Unordered lists
A list with dots

<ul>
<li>A list </li>
<li>A list </li>
</ul>

Create lists





            

Games

Flexbox

display: flex;

Flex direction

flex-direction: column | column-reverse | row | row-reverse;

Justify-content

justify-content: flex-start | flex-end | center | space-around | space-between | space-evenly;

Align elements

align-items: flex-start | flex-end | center | baseline | stretch;

Global attributes

Attributes must be written in lowercase

<tag lang="da-DK">
<tag charset="UTF-8" >
<tag alt="description">
<tag style="height:200px;">
<tag id="idName">
<tag class="className">
<tag title="more information">

Font awesome

Link in head

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Shortcode

<i class="fas fa-camera"> </i>

Links

<a href="path-to-file.html" target="_blank">Link<a>
<a href="mailto:rdis@iba.dk"> rdis@iba.dk<a>
<a href="telto:00000000">00 00 00 00<a>
<a href="https://example.com/" rel="nofollow">A site<a>

Validators

Layout

Display

display: block | inline-block | inline | flex | grid

Position

position: static | relative | absolute | fixed | sticky

Float

float: left | right | none | inline-start | inline-end

Clear float

clear: both;

Font

Change the size

font-size: 14px;

Change the family

font-family: Georgia, serif;

Paragraphs

Line break

<br>

Normal paragraph

<p>Normal paragraph</p>

Bold paragraph

<p><b>Bold paragraph</b></p>

Mark a text

<p>Normal paragraph<mark>with a mark</mark></p>

Colors

color: blue; /* change the color of the element */
background-color: blue; /* change the background color of the element */

Name

IndianRed

Hex color

#CD5C5C

RGB code

rgb(205, 92, 92)

RGBA code

rgb(205, 92, 92, 0.5)

Comments

<!--HTML comments-->
/* CSS comments */
/* JS comments */
// Single JS comments

Background image

background-image: url(img/unsplash.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
min-height: 200px;

Image

<img src="/demo.jpg" alt="description about the img" title="Extra info about the img" width="100" height="48" />

Heading

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h2>Heading 2</h2>
<h6>Heading 6</h6>

Nav

The nav element defines the main navigation links. It represents a group of navigation links.

<nav> ... </nav>

Main

The main element specifies the main content of a document.

<main> ... </main>

Footer

The footer element defines a footer for a document or section

<footer> ... </footer>

Header

Used for introduction content or a navigation

<header> ... </header>

Section

Defines a section on the web page. There must always be a heading inside

<section> ... </section>

Link to documents

CSS doucument

<link rel="stylesheet" href="css/style.css" type="text/css">

A file

<a href="path-to-file.html">Name</a>

A file in a folder

<a href="../path-to-file.html">Name</a>

Another site

<a href="https://www.google.com">Google</a>

Article

Specifies independent, self-contained content.

<article> ... </article>

HTML characters

<
&lt;
>
&gt;
&
&amp;

&phone;

&#10084;
🙂
&#128578;
©
&copy;

&hearts;

&#9804;

&#9889;
🌌
&#127756;
🌝
&#127773;
🐍
&#128013;