Maciej Jordanek, Vienna 18.02.2020
in co-op with
🤡 🎉
codesandbox.io
(skeleton)
Facebook's feed has posts made of buttons and text.
<h1>Let's go to carnival!</h1>
INNER HTML
OPENING TAG
CLOSING TAG
HTML TAG
<div>
<img src="https://some-image.com" />
</div>
PARENT
CHILD
PARENT-CHILD TAGS RELATIONSHIP
ATTRIBUTE
ID
UNIQUE IDENTIFIER
<button id="special-button">SHUFFLE COSTUME</button>
<ul id="carnival-list">
<li class="clothes">Hat</li>
<li class="clothes">Jacket</li>
<li class="clothes">Pants</li>
<li class="food-and-beverages">Hot-Dog</li>
<li class="food-and-beverages">Hot Wine</li>
</ul>
CLASSES
CLASS
(make it look nice)
Facebook's navigation bar is blue, there are spaces between the posts.
Some fonts are bigger and some are smaller.
h1 {
color: blue;
}
PROPERTY
VALUE
SELECTOR
CSS SELECTOR "ANATOMY"
OPEN
CLOSE
SEMICOLON
COLON
h1 {
color: blue;
}
.bar-name {
font-size: 20px;
}
#bar-list {
text-align: center;
}
CSS SELECTORS
CLASS SELECTOR
ID SELECTOR
TAG SELECTOR
li.place {
...
}
COMBINED SELECTORS
SELECT TAG "li" WITH CLASS ".place"
li, .place {
...
}
SELECT TAG "li" AND
TAG WITH CLASS ".place"
(make it do things)
Facebook has a form to create a post.
You can send messages with yours friends.
VARIABLES
const activity = "dancing";
const ticketCost = 40;
LOGICAL OPERATORS
100 > 50 // true
1 > 2 // false
1 === 1 // true
1 === "1" // false
true && true // true
true && false // false
true || true // true
true || false // true
OPERATIONS
const allCostumesCost = 40 * 5; // 200
const hotelBillPerPerson = 100 / 5; // 20
const restFromTicket = 100 - 40; // 60
const carnivalTotal = 40 + 20; // 60
LOOPS
let costumes = [
'wonder-woman',
'bart-simpson',
'astronaut'
];
costumes.forEach((costume, i) => {
console.log(costume, i)
});
// wonder-woman 0
// bart-simpson 1
// astronaut 2
CONDITIONALS
if (style === 'mainstream' && destination === 'Germany') {
partyIn('Munich');
} else if (style === 'authentic' && destination === 'Germany') {
partyIn('Rottweil');
} else {
partyIn('Vienna');
}
DATA STRUCTURES
const locations = ["munich", "rottweil", "vienna"];
const partyGoer = {
name: "Lisa Oberhauer",
age: 31,
favouritePlace: "Rottweil",
};
ARRAY
OBJECT
const name = partyGoer.name; // Lisa Oberhauer
KEY
VALUE
FUNCTIONS
function getPartyDays(totalBudget, costPerDay) {
return totalBudget / costPerDay;
}
getPartyDays(200, 50); // 4
GET HTML ELEMENT
<button id="shuffle-button">
SHUFFLE COSTUME
</button>
const placeElements = document.getElementsByClassName("place");
const buttonElement = document.getElementById("shuffle-button");
<ul>
<li class="place">Munich</li>
<li class="place">Vienna</li>
</ul>
Spreadsheet with data:
What we are coding:
Slides:
@mjrdnk