diff --git a/Lean-Mean-Drag-and-Drop-master/README.md b/Lean-Mean-Drag-and-Drop-master/README.md
index 9f86850..dde3890 100644
--- a/Lean-Mean-Drag-and-Drop-master/README.md
+++ b/Lean-Mean-Drag-and-Drop-master/README.md
@@ -1,14 +1,15 @@
## Lean-Mean-Drag-and-Drop
-Lean & Mean Drag and Drop is a small script for dragging, dropping, sorting and reordering html structures
+
+Lean & Mean Drag and Drop is a small script for dragging, dropping, sorting and reordering html structures
### Features
-- Supports nested structures ('nestable sortables')
-- Smooth transitions
-- Auto scroll while dragging
-- Lightweight (~3.5kb gzipped) With no dependencies
-- Supports touch events
-- Super easy to integrate
+- Supports nested structures ('nestable sortables')
+- Smooth transitions
+- Auto scroll while dragging
+- Lightweight (~3.5kb gzipped) With no dependencies
+- Supports touch events
+- Super easy to integrate
### Usage
@@ -23,12 +24,14 @@ Lean & Mean Drag and Drop is a small script for dragging, dropping, sorting and
```
-### Examples & Instrcutions
+### Examples & Instructions
can be found here: https://supraniti.github.io/Lean-Mean-Drag-and-Drop/
### Notes
+
- Bug reports, Feature requests, Questions and any other feedback are welcome
### License
+
MIT
diff --git a/alerts-data-types-variables-tutorial/index.html b/alerts-data-types-variables-tutorial/index.html
new file mode 100644
index 0000000..973bafc
--- /dev/null
+++ b/alerts-data-types-variables-tutorial/index.html
@@ -0,0 +1,356 @@
+
+
+
+
+ Alerts, Data Types, Variables Tutorial | Bit by Bit
+
+
+
+
+
Alerts
+
+ Alerts are helpful in understanding code at its beginnings
+ and also when looking for errors in code.
+ Alerts, when run, create a popup containing text which tells
+ the user something. Alerts in JavaScript are written as so:
+
alert
(
*Thing alerted* )
;
+
+
+ Let's break this down. The first part of the alert is the
+ word alert. This tells the computer that we have created an
+ alert.
+
+
+ The next part of the alert are the parentheses. These are
+ the brackets that surround the things that are alerted.
+
+
+ Inside the parentheses are the things that are alerted. To
+ learn more about how these things turn out, go to the data types section.
+
+
+ The last part of the alert is the semicolon which signifies
+ the end of the line of code.
+
+
+
+
+ Here are some examples of alerts:
+
+
+
+
alert
+
+ First, we have the word alert which speacifies that
+ we want to create an alert
+
+ (
"Hello World!"
)
+
;
+
+
+
+
alert
+
(
+ Next, we have parentheses that surround the alerted message
+
5
)
+
;
+
+
+
+
alert
+ (
true
+ The final part of an alert is the thing that is alerted
+
)
+
;
+
+
+
Run code above
+
+
+
+
+
+
+
+
+
+
Data types
+
+ There are three different data types that we learn
+ in Hello World. They are Strings, Numbers, and Boolean values.
+
+
+
+
Strings
+
+ Strings are just words. They are text and they always appear
+ as they are written. You can tell things are strings as they
+ have quotation marks around them.
+
+
+ There are two parts of strings. The quotation marks that
+ surround the string and the words/stuff inside the string.
+ The stuff inside the quotation marks are what show up
+ when things are alerted.
+
+
+ Here are some examples of strings:
+
+
+ "Hello World!"
+
+ Here are those examples as alerts:
+
+
+
+
alert
(
"This is a string. It is words. Isn't it amazing"
)
;
+
alert
(
"This is string number 3. It can have numbers and the words true or false"
)
;
+
+
Run code above
+
+
+
+
Numbers
+
+ Just like their name suggests, the numbers data type refers to
+ things with numbers in them. Numbers also include different
+ opperators, or things you can find in math like + , - , / ,
+ * , and more.
+
+
+ You can tell that a data type is numbers if there are numbers
+ and/or operators (+ , - , / , *) with no quotation marks
+ around them.
+
+
+ Here are some examples of numbers:
+
+
+ 25
+
+ Here are those examples as alerts:
+
+
+
+
+
+
+
Run code above
+
+
+
Boolean values
+
+ Boolean values are just true or false. Though they are words,
+ they aren't strings. Instead, they represent whether something
+ is true, like 2 > 1, or false, like 1 > 2.
+
+
+ You can tell if things are a boolean value in two ways:
+
+
+ Here are some examples of boolean values:
+
+
+ true
+
+ Here are those examples as alerts:
+
+
+
+
+
+
+
Run code above
+
+
+
+
+
+
Variables
+
+
+
+ Variables are all about storing data types in a container that
+ is labeled by a word or letter, just like math. For example, if
+ I have 2 apples, John has 10 apples, and Susan has twice as
+ many apples as the difference between John's apples and mine,
+ how would I find out how many apples Susan has? I would use
+ variables to represent the number of apples Susan has until I can
+ find the answer.
+
+
+ My apples = m
+
+ From this example, we can see that m, j, and s are all variables
+ that store/represent a value/data type which, in this case, is
+ numbers.
+
+
+
+
+ In JavaScript, variables are used to store a data type or a
+ piece of information that might change over time or that
+ we want to use several times.
let
variableName
=
data type ;
+
+
+ Here are some examples of variables:
+
+
+
+
let
+
+ We first write the word "let" to start a variable
+
+
greeting
=
+
"Hello! Nice to meet you"
+
;
+
+
+
+
let
+
appleNumber
+
+ Next, we write the name of our variable. We use this to
+ call upon the variable later
+
+ =
+
10
+
;
+
+
+
+
let
+
bigDog
=
+
false
+
+ Lastly, we give the variable a value which should be a
+ data type
+
+
;
+
+
+
+
+ Here are those examples as alerts:
+
+
+
let
greeting
=
"Hello! Nice to meet you"
;
+
+
+
+
+
+
+
+
+
+
Run code above
+
+
+
+
+
+
+
+
Game
+
+ Try to create what is asked of you by clicking the correct
+ buttons. Once you have sucessfully made the code, it will
+ be run so that you can see how it works.
+
+
+
Alerts
+
+
+
Option 1
+
Press to play
+
Option 3
+
+
+
Data types
+
+
+
Option 1
+
Press to play
+
Option 3
+
+
+
Variables
+
+
+
Option 1
+
Press to play
+
Option 3
+
+
Points: 0
+
+
+
+
+
Quiz time:
+
+ Take this quiz to check your understanding!
+
+
+ Quiz Button
+
+
+
+
+
+
+
+
+
Array Tutorial | Bit by Bit
+
+
+
+
+
Creating an Array
+
+ Here is a breakdown of arrays:
+
+
+
+
let arrayName
= [
+
arrayValue1, arrayValue2, arrayValue3
];
+
+
+
+ Here are some examples of arrays:
+
+
+
+
let shoppingList
= [
+
"eggs", "milk", "bread", "apples"
];
+
+
+
+
+
let oodNumbersLessThanTen
= [
+
1, 3, 5, 7, 9
];
+
+
+
+
+
let isItWorking
= [
+
true, false, true
];
+
+
+
Alert arrays above
+
+
+
+
+
+
+
+
Indexing Arrays
+
+ Indexing array syntax:
+
+
+
+
let arrayName = [
+
+
array
0
alue1, array
1
alue2, array
2
alue3
+
+
+
+
+
let arrayName
= [
+
arrayValue1, arrayValue2, arrayValue3
];
+
+
+ To obtain arrayValue1:
+
+
+ To obtain arrayValue2:
+
+
+ To obtain arrayValue3:
+
+
+
+
+ Here are some examples of indexing arrays:
+
+
+
+
+
let perfectSquareNumbers
= [
+
1, 4, 9, 16, 25, 36, 49, 64, 81, 100
];
+
+
+
+
perfectSquareNumbers
[
+
5
];
+
+
+
+
+
let greaterThanThree
= [
+
false, false, false, true, true
];
+
+
+
+
greaterThanThree
[
+
2
];
+
+
+
+
+
let colors
= [
+
"red", "orange", "yellow", "green", "blue", "purple"
];
+
+
+
+
+
Alert indexed arrays
+
+
+
+
+ Practice indexing arrays:
+
+
+
+
+
let answerCheck
= [
+
true, false, true, false, false
];
+
+
+
+
Run code
+
+
+
+
let flowerTypes
= [
+
"daffodils", "daisies", "roses", "tulips", "hydrangeas"
];
+
+
+
+
Run code
+
+
+
+
let multiplesOfThree
= [
+
3, 6, 9, 12, 15, 18, 21, 24, 27, 30
];
+
+
+
+
multiplesOfThree
[
+
];
+
+
Run code
+
+
+
+
+
+
Changing Arrays
+
+ Here is a breakdown of changing arrays:
+
+
+
let arrayName
= [
+
arrayValue1, arrayValue2, arrayValue3
];
+
+
+
+
+
+ Here is some examples for changing arrays:
+
+
+
+
let sodaBrands
= [
+
"Coke", "Mountain Dew", "Fanta", "Dr Pepper"
];
+
+
+
+
+
+
+
let numberOfBeanCans
= [
+
2, 6, 3, 1, 7, 5, 8
];
+
+
+
+
+
+
+
let bestGame
= [
+
true, false, true, true
];
+
+
+
+
+
Alert changed arrays
+
+
+
+
+
+
+
+
Game
+
+ Practice building and indexing arrays to master the concept!
+
+
+
Building Arrays
+
+
+
Option 1
+
Press to play
+
Option 3
+
+
+
Indexing Arrays
+
+
+
Option 1
+
Press to play
+
Option 3
+
+
+
Changing Arrays
+
+
+
Option 1
+
Press to play
+
Option 3
+
+
Points: 0
+
+
+
+
+
Quiz time:
+
+ Take this quiz to check your understanding!
+
+
+ Quiz Button
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/bit-by-bot-images/bulb-suspicious-open-bot.svg b/assets/bit-by-bot-images/bulb-suspicious-open-bot.svg
new file mode 100755
index 0000000..8f21e4e
--- /dev/null
+++ b/assets/bit-by-bot-images/bulb-suspicious-open-bot.svg
@@ -0,0 +1,7088 @@
+
+
+
+
+
+
+
diff --git a/assets/bit-by-bot-images/candy-cane-bot.svg b/assets/bit-by-bot-images/candy-cane-bot.svg
new file mode 100755
index 0000000..0839ba3
--- /dev/null
+++ b/assets/bit-by-bot-images/candy-cane-bot.svg
@@ -0,0 +1,273 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/bit-by-bot-images/computer-error-bot.svg b/assets/bit-by-bot-images/computer-error-bot.svg
new file mode 100755
index 0000000..4dca448
--- /dev/null
+++ b/assets/bit-by-bot-images/computer-error-bot.svg
@@ -0,0 +1,7862 @@
+
+
+
+
+
+
+
diff --git a/assets/bit-by-bot-images/computer-open-bot.svg b/assets/bit-by-bot-images/computer-open-bot.svg
new file mode 100755
index 0000000..14b7cd7
--- /dev/null
+++ b/assets/bit-by-bot-images/computer-open-bot.svg
@@ -0,0 +1,236 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/bit-by-bot-images/computer-sound-open-bot.svg b/assets/bit-by-bot-images/computer-sound-open-bot.svg
new file mode 100755
index 0000000..1d6f8b6
--- /dev/null
+++ b/assets/bit-by-bot-images/computer-sound-open-bot.svg
@@ -0,0 +1,240 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/bit-by-bot-images/computer-suspicious-closed-bot.svg b/assets/bit-by-bot-images/computer-suspicious-closed-bot.svg
new file mode 100755
index 0000000..db84b04
--- /dev/null
+++ b/assets/bit-by-bot-images/computer-suspicious-closed-bot.svg
@@ -0,0 +1,7445 @@
+
+
+
+
+
+
+
diff --git a/assets/bit-by-bot-images/explosion-bot.svg b/assets/bit-by-bot-images/explosion-bot.svg
new file mode 100755
index 0000000..b387758
--- /dev/null
+++ b/assets/bit-by-bot-images/explosion-bot.svg
@@ -0,0 +1,508 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/bit-by-bot-images/pumpkin-orange-bot.svg b/assets/bit-by-bot-images/pumpkin-orange-bot.svg
new file mode 100755
index 0000000..aaca74c
--- /dev/null
+++ b/assets/bit-by-bot-images/pumpkin-orange-bot.svg
@@ -0,0 +1,255 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/bit-by-bot-images/pumpkin-yellow-bot.svg b/assets/bit-by-bot-images/pumpkin-yellow-bot.svg
new file mode 100755
index 0000000..fc39ca2
--- /dev/null
+++ b/assets/bit-by-bot-images/pumpkin-yellow-bot.svg
@@ -0,0 +1,7075 @@
+
+
+
+
+
+
+
diff --git a/assets/bit-by-bot-images/snowman-bot.svg b/assets/bit-by-bot-images/snowman-bot.svg
new file mode 100755
index 0000000..7df97d2
--- /dev/null
+++ b/assets/bit-by-bot-images/snowman-bot.svg
@@ -0,0 +1,238 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/bit-by-bot-images/sound-suspicious-closed-bot.svg b/assets/bit-by-bot-images/sound-suspicious-closed-bot.svg
new file mode 100755
index 0000000..5a4e4b7
--- /dev/null
+++ b/assets/bit-by-bot-images/sound-suspicious-closed-bot.svg
@@ -0,0 +1,6727 @@
+
+
+
+
+
+
+
diff --git a/assets/bit-by-bot-images/sound-suspicious-open-bot.svg b/assets/bit-by-bot-images/sound-suspicious-open-bot.svg
new file mode 100755
index 0000000..bd41757
--- /dev/null
+++ b/assets/bit-by-bot-images/sound-suspicious-open-bot.svg
@@ -0,0 +1,6736 @@
+
+
+
+
+
+
+
diff --git a/assets/bit-by-bot-images/suspicious-closed-bot.svg b/assets/bit-by-bot-images/suspicious-closed-bot.svg
new file mode 100755
index 0000000..572a6b8
--- /dev/null
+++ b/assets/bit-by-bot-images/suspicious-closed-bot.svg
@@ -0,0 +1,6272 @@
+
+
+
+
+
+
+
diff --git a/assets/bit-by-bot-images/suspicious-open-bot.svg b/assets/bit-by-bot-images/suspicious-open-bot.svg
new file mode 100755
index 0000000..41d3e3d
--- /dev/null
+++ b/assets/bit-by-bot-images/suspicious-open-bot.svg
@@ -0,0 +1,6280 @@
+
+
+
+
+
+
+
diff --git a/assets/bit-by-bot-images/two-hands-confetti-bot.svg b/assets/bit-by-bot-images/two-hands-confetti-bot.svg
new file mode 100755
index 0000000..545a07a
--- /dev/null
+++ b/assets/bit-by-bot-images/two-hands-confetti-bot.svg
@@ -0,0 +1,11849 @@
+
+
+
+
+
+
+
diff --git a/assets/bit-by-bot-images/two-hands-happy-bot.svg b/assets/bit-by-bot-images/two-hands-happy-bot.svg
new file mode 100755
index 0000000..3f126ac
--- /dev/null
+++ b/assets/bit-by-bot-images/two-hands-happy-bot.svg
@@ -0,0 +1,6356 @@
+
+
+
+
+
+
+
diff --git a/assets/bit-by-bot-images/two-hands-party-bot.svg b/assets/bit-by-bot-images/two-hands-party-bot.svg
new file mode 100755
index 0000000..f7b486d
--- /dev/null
+++ b/assets/bit-by-bot-images/two-hands-party-bot.svg
@@ -0,0 +1,8772 @@
+
+
+
+
+
+
+
diff --git a/assets/bit-by-bot-images/waving-happy-bot.svg b/assets/bit-by-bot-images/waving-happy-bot.svg
new file mode 100755
index 0000000..8c3a09c
--- /dev/null
+++ b/assets/bit-by-bot-images/waving-happy-bot.svg
@@ -0,0 +1,6125 @@
+
+
+
+
+
+
+
diff --git a/assets/bit-by-bot-images/waving-neutral-bot.svg b/assets/bit-by-bot-images/waving-neutral-bot.svg
new file mode 100755
index 0000000..b509b5d
--- /dev/null
+++ b/assets/bit-by-bot-images/waving-neutral-bot.svg
@@ -0,0 +1,6092 @@
+
+
+
+
+
+
+
diff --git a/ifelse-demo/style.css b/assets/common.css
similarity index 56%
rename from ifelse-demo/style.css
rename to assets/common.css
index f81a189..14262f0 100644
--- a/ifelse-demo/style.css
+++ b/assets/common.css
@@ -1,12 +1,10 @@
-/* style.scss */
-/* Import the common styling */
/* common.scss */
/* Define all the colors */
body {
margin: 5em 0 0 0;
padding: 0;
background-color: #fff;
- font-family: "Nunito", sans-serif;
+ font-family: 'Nunito', sans-serif;
font-weight: 600;
}
@@ -19,14 +17,18 @@ button {
border: none;
background: #38Bfe7;
padding: 0.5em 1em;
- box-shadow: 0.125em 0.125em 0.2em #bfbfbf;
+ -webkit-box-shadow: 0.125em 0.125em 0.2em #bfbfbf;
+ box-shadow: 0.125em 0.125em 0.2em #bfbfbf;
cursor: pointer;
}
+
button:hover {
background-color: #19a8d3;
}
+
button:active {
- box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
}
#header {
@@ -40,11 +42,14 @@ button:active {
max-height: 3em;
z-index: 1000;
opacity: 95%;
- box-shadow: 0 2px 2px #eee;
+ -webkit-box-shadow: 0 2px 2px #eee;
+ box-shadow: 0 2px 2px #eee;
}
+
#header > * {
margin: 0;
}
+
#header button {
width: 3em;
}
@@ -63,28 +68,50 @@ button:active {
/*Flexbox*/
.flex-container-header {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- justify-content: space-between;
- align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
.flex-container-left {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- justify-content: space-evenly;
- align-items: center;
+ -webkit-box-pack: space-evenly;
+ -ms-flex-pack: space-evenly;
+ justify-content: space-evenly;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ max-width: -webkit-max-content;
+ max-width: -moz-max-content;
max-width: max-content;
}
.flex-item-header {
- flex: 1 1 200px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 200px;
+ flex: 1 1 200px;
}
.flex-item-left {
- flex: 1 1 100px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100px;
+ flex: 1 1 100px;
+ max-width: -webkit-max-content;
+ max-width: -moz-max-content;
max-width: max-content;
}
#top-heading {
+ width: -webkit-max-content;
+ width: -moz-max-content;
width: max-content;
}
@@ -104,11 +131,15 @@ button:active {
}
.flex-box {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
}
.flex-col {
- flex: 1;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
padding: 0.5em;
}
@@ -121,7 +152,9 @@ button:active {
}
.no-flex-col {
- flex: 0;
+ -webkit-box-flex: 0;
+ -ms-flex: 0;
+ flex: 0;
}
.showcase-section {
@@ -138,7 +171,7 @@ button:active {
margin: 0;
height: 20em;
width: calc(100% - 35px - calc(0.625em*2));
- font-family: "Anonymous Pro", monospace;
+ font-family: 'Anonymous Pro', monospace;
font-size: 0.875em;
line-height: 1.25em;
padding: 1px 0.625em;
@@ -150,8 +183,4 @@ button:active {
right: 1em;
padding: 0;
}
-
-/* The page-specific styling */
-/* TODO: Put whatever styles you need for just your demo here */
-
-/*# sourceMappingURL=style.css.map */
+/*# sourceMappingURL=common.css.map */
\ No newline at end of file
diff --git a/attribute-demo/style.css b/attribute-demo/style.css
index c6d241b..021f4c3 100644
--- a/attribute-demo/style.css
+++ b/attribute-demo/style.css
@@ -4,7 +4,7 @@ body {
margin: 5em 0 0 0;
padding: 0;
background-color: #fff;
- font-family: "Nunito", sans-serif;
+ font-family: 'Nunito', sans-serif;
font-weight: 600;
}
@@ -12,14 +12,18 @@ button {
border: none;
background: #38Bfe7;
padding: 0.5em 1em;
- box-shadow: 0.125em 0.125em 0.2em #bfbfbf;
+ -webkit-box-shadow: 0.125em 0.125em 0.2em #bfbfbf;
+ box-shadow: 0.125em 0.125em 0.2em #bfbfbf;
cursor: pointer;
}
+
button:hover {
background-color: #19a8d3;
}
+
button:active {
- box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
}
#header {
@@ -33,11 +37,14 @@ button:active {
max-height: 3em;
z-index: 1000;
opacity: 95%;
- box-shadow: 0 2px 2px #eee;
+ -webkit-box-shadow: 0 2px 2px #eee;
+ box-shadow: 0 2px 2px #eee;
}
+
#header > * {
margin: 0;
}
+
#header button {
width: 3em;
}
@@ -56,28 +63,50 @@ button:active {
/*Flexbox*/
.flex-container-header {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- justify-content: space-between;
- align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
.flex-container-left {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- justify-content: space-evenly;
- align-items: center;
+ -webkit-box-pack: space-evenly;
+ -ms-flex-pack: space-evenly;
+ justify-content: space-evenly;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ max-width: -webkit-max-content;
+ max-width: -moz-max-content;
max-width: max-content;
}
.flex-item-header {
- flex: 1 1 200px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 200px;
+ flex: 1 1 200px;
}
.flex-item-left {
- flex: 1 1 100px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100px;
+ flex: 1 1 100px;
+ max-width: -webkit-max-content;
+ max-width: -moz-max-content;
max-width: max-content;
}
#top-heading {
+ width: -webkit-max-content;
+ width: -moz-max-content;
width: max-content;
}
@@ -97,11 +126,15 @@ button:active {
}
.flex-box {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
}
.flex-col {
- flex: 1;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
padding: 0.5em;
}
@@ -114,7 +147,9 @@ button:active {
}
.no-flex-col {
- flex: 0;
+ -webkit-box-flex: 0;
+ -ms-flex: 0;
+ flex: 0;
}
.showcase-section {
@@ -131,7 +166,7 @@ button:active {
margin: 0;
height: 20em;
width: calc(100% - 35px - calc(0.625em*2));
- font-family: "Anonymous Pro", monospace;
+ font-family: 'Anonymous Pro', monospace;
font-size: 0.875em;
line-height: 1.25em;
padding: 1px 0.625em;
@@ -145,7 +180,7 @@ button:active {
}
.code {
- font-family: "Anonymous Pro", monospace;
+ font-family: 'Anonymous Pro', monospace;
}
#explore-show {
@@ -158,27 +193,38 @@ button:active {
div.option-wrapper {
margin: 0.5em 0 0.5em 0;
width: 30%;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
}
+
div.option-wrapper > *:first-child {
- flex: 0.55;
+ -webkit-box-flex: 0.55;
+ -ms-flex: 0.55;
+ flex: 0.55;
}
#dest-option {
margin: 0.5em 0 0.5em 0;
width: 15%;
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
}
.slider {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
}
+
.slider > *:first-child {
- flex: 0.11;
+ -webkit-box-flex: 0.11;
+ -ms-flex: 0.11;
+ flex: 0.11;
}
#atageditor {
height: 40%;
}
-
-/*# sourceMappingURL=style.css.map */
+/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/back-2-booleans-game/chess.html b/back-2-booleans-game/chess.html
new file mode 100644
index 0000000..4811d70
--- /dev/null
+++ b/back-2-booleans-game/chess.html
@@ -0,0 +1,54 @@
+
+
+
+
+ Chess Application | Bit by Bit
+
+
+
+
Back 2 Booleans!
+
+ Welcome to the Chess club's application! We require that:
+
+
!(!grade < 90 && personality==="loud")
+
First Name:
+
Last Name:
+
What is your current grade?
+
What personality trait best describes you? Pick one below
+
+ quiet/shy
+ enthusiastic
+ diligent
+ kind
+ loud
+
+
+
Click here to submit your application!
+
+
+
Gaming Application | Bit by Bit
+
+
+
+
Back 2 Booleans!
+
+ Welcome to the Gaming club's application! We require that:
+
+
!(grade < 70 && personality==="hates-minecraft")
+
First Name:
+
Last Name:
+
What is your current grade?
+
What personality trait best describes you? Pick one below
+
+ quiet/shy
+ enthusiastic
+ diligent
+ hates-minecraft
+
+
+
Click here to submit your application!
+
+
+
Back 2 Booleans Game | Bit by Bit
+
+
+
+
Back 2 Booleans!
+
+ Welcome back to Booleans! Let's see if you can join our clubs! We give our requirements in DeMorgan's Laws!
+
+
+
+
+
+
Soup Kitchen Application | Bit by Bit
+
+
+
+
Back 2 Booleans!
+
+ Welcome to the Outreach club's application! We require that:
+
+
!(!grade > 70 || personality!=="nice")
+
First Name:
+
Last Name:
+
What is your current grade?
+
What personality trait best describes you? Pick one below
+
+ quiet/shy
+ enthusiastic
+ diligent
+ nice
+
+
+
Click here to submit your application!
+
+
+
Volleyball Application | Bit by Bit
+
+
+
+
Back 2 Booleans!
+
+ Welcome to the Volleyball club's application! We require that:
+
+
!(grade < 80 && personality==="quiet")
+
First Name:
+
Last Name:
+
What is your current grade?
+
What personality trait best describes you? Pick one below
+
+ quiet/shy
+ enthusiastic
+ diligent
+ kind
+
+
+
Click here to submit your application!
+
+
+
DOM Tutorial | Bit by Bit
+
+
+
+
+
+
Game
+
+
+
+
Option 1
+
Press to play
+
Option 3
+
+
Points: 0
+
+
+
+
This is an element
';
+ buildingJavaScriptElement.innerText =
+ 'let pElement = document.getElementById("element")';
+
+ pGameElement.innerText =
+ "Congrats, you finished creating a variable using the DOM! You got " +
+ point +
+ " points!";
+
+ optionOne.innerText = " ";
+ optionTwo.innerText = "";
+ optionThree.innerText = " ";
+
+ optionOne.onclick = doneFunction;
+ optionTwo.onclick = doneFunction;
+ optionThree.onclick = doneFunction;
+
+ pointsElement.innerText = "Points: " + point + "/10";
+}
+
+function DOMthreeCorrect() {
+ point++;
+ buildingCodeElement.innerText = 'This is an element
';
+ buildingJavaScriptElement.innerText =
+ "let pElement = document.getElementById()";
+
+ pGameElement.innerText = "Correct! What goes inside the parentheses?";
+
+ optionOne.innerText = '"element"';
+ optionTwo.innerText = "element";
+ optionThree.innerText = 'id="element"';
+
+ optionOne.onclick = DOMComplete;
+
+ pointsElement.innerText = "Points: " + point + "/10";
+}
+
+function twoCorrect() {
+ point++;
+ buildingCodeElement.innerText = 'This is an element
';
+ buildingJavaScriptElement.innerText = "let pElement = ";
+
+ pGameElement.innerText = "Correct! What do we type next?";
+
+ optionOne.innerText = "document.getElementById();";
+ optionTwo.innerText = "document.getElementByClass();";
+ optionThree.innerText = 'document.getElementById"";';
+
+ optionOne.onclick = DOMthreeCorrect;
+ optionTwo.onclick = wrong;
+
+ pointsElement.innerText = "Points: " + point + "/10";
+}
+
+function oneCorrect() {
+ point++;
+ buildingCodeElement.innerText = 'This is an element
';
+
+ pGameElement.innerText =
+ "Correct! What do we do in JavaScript to create an HTML element variable?";
+
+ optionOne.innerText = "let document.getElementById() = ";
+ optionTwo.innerText = "let pElement = ";
+ optionThree.innerText = "document.getElementById() = ";
+
+ optionTwo.onclick = twoCorrect;
+ optionOne.onclick = wrong;
+
+ pointsElement.innerText = "Points: " + point + "/10";
+}
+
+function startGame() {
+ buildingCodeElement.innerText = "This is an element
";
+ pGameElement.innerText =
+ "What do you use to call an HTML element in JavaScript?";
+
+ optionOne.innerText = "id";
+ optionTwo.innerText = "class";
+ optionThree.innerText = "Come here element! Come here!";
+
+ optionOne.onclick = oneCorrect;
+ optionTwo.onclick = wrong;
+ optionThree.onclick = wrong;
+
+ pointsElement.innerText = "Points: " + point + "/10";
+}
+
+optionTwo.onclick = startGame;
+
+//Game code: New Code
+/*
+let pGame2Element = document.getElementById("gameCode2");
+let buildingCode2Element = document.getElementById("buildingCode2");
+
+let optionOne2 = document.getElementById("option4");
+let optionTwo2 = document.getElementById("option5");
+let optionThree2 = document.getElementById("option6");
+
+function wrong2() {
+ point--;
+ pGame2Element.innerText = "Whoops, wrong guess, try again";
+}
+
+function dataTypeComplete() {
+ point++;
+ buildingCode2Element.innerHTML =
+ 'alert(8); For Loop Tutorial | Bit by Bit
+
+
+
+
+
For Loops
+
+ Here is a breakdown of for loop syntax:
+
+
+
+
for
(
let i = *numberOne* ;
+
i < *numberTwo* ;
+
i = i + 1
){
+
*repeated code*
+ }
+
+
+
+ The first part of the for loop is the word for. This tells
+ the computer that we are creating a for loop.
+ Declaring a condition variable: let i = *numberOne* ;
+ Declaring the condition: i < *numberTwo* ;
+ Declaring how our condition variable changes each time the for loop runs: i = i + 1
+
+
+
+ We can tell how many time the code is repeated by
+ subtracting
+
*numberOne*
+ by
*numberTwo*
+
+
+ Here are some examples of functions:
+
+
+
+
+
for
(
let i = 0;
+
i < 3;
+
i = i + 1
){
+
alert("Hello World!");
+ }
+
+
+
+ Run Hello World Loop
+
+
+
+
+
+
for
(
let i = 5;
+
i < 10;
+
i = i + 1
){
+
alert(i);
+ }
+
+
+
+ Run Number Loop
+
+
+
+
+
+
for
(
let i = 3;
+
i >= 0;
+
i = i - 1
){
+
+ if(i===0){
+
alert("Blast off!");
+ } else {
+
alert(i);
+ }
+
+ }
+
+
+
+ Run Blast Off Loop
+
+
+
+
+
+
+
+
Building For Loops
+
+ Practice building for loops down below:
+
+
+ First, start the for loop:
+
+
+
+
+
Check and next
+
+
+
+
Functions and Parameters Tutorial | Bit by Bit
+
+
+
+
+
Functions
+
+ Functions are a fundemental part of JavaScript. They allow us
+ to store lines of code to use later. Unlike variables,
+ functions can store multiple lines of code including: alerts,
+ variables, prompts, and much more!
+
+
+ There are three different parts of a function: the function
+ name, declaring the function, and the contained code.
+
+
+ Here is a breakdown of function syntax:
+
+
+
+
let functionName
=
+
function()
{
+
code
+ }
+
+
+
+ Here are some examples of functions:
+
+
+
+
+
+
let morning
=
+
function()
{
+
+ alert("Good morning! Have a lovely day");
+
+ }
+
+
+
+
+
let vibeCheck
=
+
function()
{
+
+ if(vibe==="good"){
+
alert("There are good vibes");
+ } else {
+
alert("Bad vibes");
+ }
+
+ }
+
+
+
+
+
+
let questionFunction
=
+
function()
{
+
+ let question = prompt("What is 2 * 9?");
+ if(question==="18"){
+
alert("You are correct!");
+ } else if (question===""){
+
alert("No response given :(");
+ } else {
+
alert("That is incorrect.");
+ }
+
+ }
+
+
+
+
Run code above
+
+ To run a function you must write the name of the function,
+ two parentheses and a semicolon. Since functions only store
+ code, they need to be called upon so that the code inside them
+ actually runs.
+
+
+
+
+
+
+
+
+
+
+
+
Parameters
+
+ Parameters are another more complex part of functions.
+ They are basically variables that are made specifically for the function.
+ These parameters are declared inside parentheses.
+ The value of these parameters are then assigned when calling/running the function
+ once again, inside the parentheses.
+
+
+ You can make as many parameters as you want, they just need
+ to be inside the parentheses, and separted by a comma.
+
+
+ Parameter syntax:
+
+
+
+
let functionName
=
+
function(
+
parameter1, parameter2, parameter3
)
+
{
+
code
+ }
+
+
+
+
+
+ Here are some examples of functions with parameters:
+
+
+
+
+
let mathEquation
=
+
{
+
+ let y = 3 * x + 5;
+ }
+
+
+
mathEquation function options:
+
mathEquation(4);
+
mathEquation(0);
+
mathEquation(1);
+
+
+
+
+
let questionFunction
=
+
{
+
+ let y = 4 * x + 2;
+ let question = prompt("What is x if 4x + 2 = " + y + " ?");
+ if(question===x){
+
alert("You are correct!");
+ } else {
+
alert("Wrong, try again");
+ }
+
+ }
+
+
+
questionFunction function options:
+
questionFunction(0);
+
questionFunction(5);
+
questionFunction(2);
+
+
+
+
+
let weatherCheck
=
+
function(
cloudyCheck, temperature
)
{
+
+ if(cloudyCheck===false && temperature > 50){
+
alert("The weather is good");
+ } else if (temperature > 50){
+
alert("Cloudy but not cold");
+ } else if (cloudyCheck===false){
+
alert("Not cloudy but cold");
+ } else {
+
alert("It's both cloudy and cold");
+ }
+
+ }
+
+
+
weatherCheck function options:
+
weatherCheck(true, 25);
+
weatherCheck(false, 50);
+
weatherCheck(true, 80);
+
+
+
+
+
+
+
Game
+
+ Practice building and calling functions to master these
+ complex concepts.
+
+
+
Building Functions
+
+
+
Option 1
+
Press to play
+
Option 3
+
+
+
Functions with Parameters
+
+
+
Option 1
+
Press to play
+
Option 3
+
+
+
Calling Functions
+
+
+
Option 1
+
Press to play
+
Option 3
+
+
Points: 0
+
+
+
Quiz time:
+
+ Take this quiz to check your understanding!
+
+
+ Quiz Button
+
+
+
+
+
+
+
+
alert("How are we doing today?");
}';
+
+ bfInstruction.innerText = "What will this function do?";
+
+ bfOption1.innerText = "Check how we are doing today";
+ bfOption2.innerText = 'Alert: "How are we doing today?"';
+ bfOption3.innerText = "Alert: How are we doing today?";
+
+ bfOption3.onclick = bfGameWin;
+ bfOption2.onclick = bfWrong;
+};
+
+let bfGameCorrect4 = function () {
+ point++;
+ pointCheck.innerText = "Points: " + point;
+ bfCode.innerHTML = "let functionName = function() {let y = x/2 + 5;
alert(y);
} let y = x/2 + 5;
alert(y);
}';
+ fpInstruction.innerHTML =
+ "How do we call this function with the value of the parameter x = 4?";
+
+ fpOption1.innerText = "parameterFunction(0);";
+ fpOption2.innerText = "parameterFunction(4);";
+ fpOption3.innerText = "parameterFunction(x = 4);";
+
+ fpOption2.onclick = fpGameCorrect4;
+ fpOption3.onclick = fpWrong;
+};
+
+let fpGameCorrect2 = function () {
+ point++;
+ pointCheck.innerText = "Points: " + point;
+ fpCode.innerHTML =
+ 'let parameterFunction = function(x){let y = x/2 + 5;
}';
+ fpInstruction.innerHTML =
+ "Which piece of code alerts the new variable ";
+
+ fpOption1.innerText = "alert(x);";
+ fpOption2.innerText = 'alert("y");';
+ fpOption3.innerText = "alert(y);";
+
+ fpOption3.onclick = fpGameCorrect3;
+ fpOption1.onclick = fpWrong;
+};
+
+let fpGameCorrect1 = function () {
+ point++;
+ pointCheck.innerText = "Points: " + point;
+ fpCode.innerHTML = "let parameterFunction = function(x){if((science + math + english)/3 > 75){
alert("You have an A in all classes!");
} else if ((science + math + english)/3 > 50){
alert("You have a C average");
} else {
alert("Time to study!");
}
}if(free)
alert("Time for vacation!");
} else {
alert("No vacation, too busy");
}
}alert("Hello World");
}';
+
+ let runCodeOne = function () {
+ let funFunction = function () {
+ alert("Hello World");
+ };
+ funFunction();
+ };
+
+ cOption2.onclick = runCodeOne;
+ cOption1.onclick = cycleTwo;
+ cOption3.onclick = doneFunction;
+ };
+
+ cOption1.innerText = "Cycle through";
+ cOption2.innerText = "Run code";
+ cOption3.innerText = "";
+
+ cOption1.onclick = cycleOne;
+ cOption2.onclick = cWinGame;
+ cOption3.onclick = doneFunction;
+};
+
+let cCorrect3 = function () {
+ point++;
+ pointCheck.innerText = "Points: " + point;
+ cInstruction.innerText = "How do you call this function?";
+ cCode.innerHTML =
+ 'let checkGrades = function(science, math, english){if((science + math + english)/3 > 75){
alert("You have an A in all classes!");
} else if ((science + math + english)/3 > 50){
alert("You have a C average");
} else {
alert("Time to study!");
}
}';
+
+ cOption1.innerText = 'checkGrades("90", "30", "100");';
+ cOption2.innerText = "checkGrades(true, false, true);";
+ cOption3.innerText = "checkGrades(90, 67, 45);";
+
+ cOption3.onclick = cWinGame;
+ cOption1.onclick = cWrong;
+};
+
+let cCorrect2 = function () {
+ point++;
+ pointCheck.innerText = "Points: " + point;
+ cInstruction.innerText = "What does this function alert?";
+ cCode.innerHTML =
+ 'let vacationCheck = function(free){if(free)
alert("Time for vacation!");
} else {
alert("No vacation, too busy");
}
}if(free){
alert("Time for vacation!");
} else {
alert("No vacation, too busy");
}
}';
+
+ cOption1.innerText = "function(true);";
+ cOption2.innerText = "vacationCheck(true);";
+ cOption3.innerText = "vacationCheck(good);";
+
+ cOption2.onclick = cCorrect2;
+ cOption3.onclick = cWrong;
+};
+
+let cStartGame = function () {
+ cInstruction.innerText = "How do you call this function?";
+ cCode.innerHTML =
+ 'let funFunction = function(){alert("Hello World");
}';
+
+ cOption1.innerText = "function();";
+ cOption2.innerText = "funFunction(4);";
+ cOption3.innerText = "funFunction();";
+
+ cOption3.onclick = cCorrect1;
+ cOption2.onclick = cWrong;
+ cOption1.onclick = cWrong;
+};
+
+cOption2.onclick = cStartGame;
+
diff --git a/functions-parameters-tutorial/style.css b/functions-parameters-tutorial/style.css
new file mode 100644
index 0000000..e0d8413
--- /dev/null
+++ b/functions-parameters-tutorial/style.css
@@ -0,0 +1,310 @@
+/* style.scss */
+/* Import the common styling */
+/* common.scss */
+/* Define all the colors */
+body {
+ margin: 5em 0 0 0;
+ padding: 0;
+ background-color: #fff;
+ font-family: 'Nunito', sans-serif;
+ font-weight: 600;
+}
+
+button {
+ border: none;
+ background: #38Bfe7;
+ padding: 0.5em 1em;
+ -webkit-box-shadow: 0.125em 0.125em 0.2em #bfbfbf;
+ box-shadow: 0.125em 0.125em 0.2em #bfbfbf;
+ cursor: pointer;
+}
+
+button:hover {
+ background-color: #19a8d3;
+}
+
+button:active {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+#header {
+ padding: 1em 2em;
+ background-color: white;
+ color: #000;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ max-height: 3em;
+ z-index: 1000;
+ opacity: 95%;
+ -webkit-box-shadow: 0 2px 2px #eee;
+ box-shadow: 0 2px 2px #eee;
+}
+
+#header > * {
+ margin: 0;
+}
+
+#header button {
+ width: 3em;
+}
+
+#back-button {
+ padding: 0.25em 1em;
+ font-size: 1em;
+ height: 48px;
+}
+
+.content {
+ padding: 1em;
+ max-width: 80%;
+ margin: 0 auto;
+}
+
+/*Flexbox*/
+.flex-container-header {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.flex-container-left {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: space-evenly;
+ -ms-flex-pack: space-evenly;
+ justify-content: space-evenly;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ max-width: -webkit-max-content;
+ max-width: -moz-max-content;
+ max-width: max-content;
+}
+
+.flex-item-header {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 200px;
+ flex: 1 1 200px;
+}
+
+.flex-item-left {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100px;
+ flex: 1 1 100px;
+ max-width: -webkit-max-content;
+ max-width: -moz-max-content;
+ max-width: max-content;
+}
+
+#top-heading {
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+}
+
+#bxb-logo {
+ max-height: 3em;
+ display: block;
+ text-align: left;
+ margin-left: calc(100% - 200px);
+}
+
+.section {
+ margin: 1em 0;
+ padding: 0.5em;
+ border: 0.2em solid #38Bfe7;
+ background-color: #fff;
+ color: #000;
+}
+
+.flex-box {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.flex-col {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding: 0.5em;
+}
+
+.flex-col:not(:last-child) {
+ margin: 0 0.2em 0 0;
+}
+
+.flex-col:last-child {
+ margin: 0 0 0 0.2em;
+}
+
+.no-flex-col {
+ -webkit-box-flex: 0;
+ -ms-flex: 0;
+ flex: 0;
+}
+
+.showcase-section {
+ padding: 0;
+}
+
+.editor-section {
+ position: relative;
+ overflow: scroll;
+ padding: 0;
+}
+
+.editor {
+ margin: 0;
+ height: 20em;
+ width: calc(100% - 35px - calc(0.625em*2));
+ font-family: 'Anonymous Pro', monospace;
+ font-size: 0.875em;
+ line-height: 1.25em;
+ padding: 1px 0.625em;
+}
+
+.editor-button-overlay {
+ position: absolute;
+ bottom: 1em;
+ right: 1em;
+ padding: 0;
+}
+
+/* The page-specific styling */
+/* TODO: Put whatever styles you need for just your demo here */
+ul {
+ list-style: none;
+ padding: 0;
+ margin: 0 0 0 -45px;
+}
+
+li {
+ display: inline-block;
+}
+
+.code {
+ display: inline-block;
+ color: #153570;
+ font-size: 18px;
+ font-weight: 600;
+ font-family: "Source Code Pro", monospace;
+ margin-left: 35px;
+}
+
+.codePartOne {
+ display: inline-block;
+ color: #50c6e9ff;
+}
+
+.codePartTwo {
+ display: inline-block;
+ color: #ffb560ff;
+}
+
+.codePartThree {
+ display: inline-block;
+ color: #236274;
+}
+
+.codeOrange {
+ color: #ffb560ff;
+ font-size: 18px;
+ font-weight: 600;
+ font-family: "Source Code Pro", monospace;
+ margin-left: 35px;
+}
+
+.codeInside {
+ margin-left: 30px;
+ color: #fad636;
+}
+
+.semicolon {
+ display: inline-block;
+ color: #f8d227;
+}
+
+.variableStart {
+ display: inline-block;
+}
+
+.hiddenVariable {
+ display: none;
+}
+
+.variableStart:hover + .hiddenVariable {
+ display: inline-block;
+ position: relative;
+ z-index: 10;
+ top: 5px;
+ left: 5px;
+ background-color: white;
+ padding: 2px 5px 5px 5px;
+ margin: 0;
+ margin-right: 10px;
+ width: 250px;
+ border: black solid 3px;
+ -webkit-box-shadow: black 3px 3px;
+ box-shadow: black 3px 3px;
+}
+
+.gameButton {
+ display: inline-block;
+ margin-right: 20px;
+ margin-bottom: 5px;
+ padding: 5px;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ min-width: 150px;
+ min-height: 40px;
+}
+
+.buildingGameCode {
+ background-color: black;
+ min-height: 20px;
+ padding: 5px;
+ font-family: "Source Code Pro", monospace;
+ color: #50c6e9ff;
+}
+
+.container {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: space-evenly;
+ -ms-flex-pack: space-evenly;
+ justify-content: space-evenly;
+}
+
+.item {
+ -webkit-box-flex: 100px;
+ -ms-flex: 100px 1 1;
+ flex: 100px 1 1;
+}
+
+#navQuiz {
+ position: relative;
+}
+
+#bit-by-bot-quiz {
+ width: 20em;
+ height: auto;
+ position: absolute;
+ top: 180px;
+ right: 150px;
+}
+/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/functions-parameters-tutorial/style.scss b/functions-parameters-tutorial/style.scss
new file mode 100644
index 0000000..6ab453e
--- /dev/null
+++ b/functions-parameters-tutorial/style.scss
@@ -0,0 +1,117 @@
+/* style.scss */
+
+/* Import the common styling */
+@import "../assets/common.scss";
+
+/* The page-specific styling */
+/* TODO: Put whatever styles you need for just your demo here */
+
+ul {
+ list-style: none;
+ padding: 0;
+ margin: 0 0 0 -45px;
+}
+
+li {
+ display: inline-block;
+}
+
+.code {
+ display: inline-block;
+ color: #153570;
+ font-size: 18px;
+ font-weight: 600;
+ font-family: "Source Code Pro", monospace;
+ margin-left: 35px;
+}
+.codePartOne {
+ display: inline-block;
+ color: #50c6e9ff;
+}
+.codePartTwo {
+ display: inline-block;
+ color: #ffb560ff;
+}
+.codePartThree {
+ display: inline-block;
+ color: #236274;
+}
+.codeOrange {
+ color: #ffb560ff;
+ font-size: 18px;
+ font-weight: 600;
+ font-family: "Source Code Pro", monospace;
+ margin-left: 35px;
+}
+.codeInside {
+ margin-left: 30px;
+ color: rgb(250, 214, 54);
+}
+
+.semicolon {
+ display: inline-block;
+ color: rgb(248, 210, 39);
+}
+
+.variableStart {
+ display: inline-block;
+}
+
+.hiddenVariable {
+ display: none;
+}
+
+.variableStart:hover + .hiddenVariable {
+ display: inline-block;
+ position: relative;
+ z-index: 10;
+ top: 5px;
+ left: 5px;
+ background-color: white;
+ padding: 2px 5px 5px 5px;
+ margin: 0;
+ margin-right: 10px;
+ width: 250px;
+ border: black solid 3px;
+ box-shadow: black 3px 3px;
+}
+
+.gameButton {
+ display: inline-block;
+ margin-right: 20px;
+ margin-bottom: 5px;
+ padding: 5px;
+ width: max-content;
+ min-width: 150px;
+ min-height: 40px;
+}
+
+.buildingGameCode {
+ background-color: black;
+ min-height: 20px;
+ padding: 5px;
+ font-family: "Source Code Pro", monospace;
+ color: #50c6e9ff;
+}
+
+.container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+}
+
+.item {
+ flex: 100px 1 1;
+}
+
+#navQuiz {
+ position: relative;
+}
+
+#bit-by-bot-quiz {
+ width: 20em;
+ height: auto;
+ position: absolute;
+ top: 180px;
+ right: 150px;
+}
diff --git a/html1/index.html b/html1/index.html
deleted file mode 100644
index 6ca4f81..0000000
--- a/html1/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
- First div
-
Left Div
-
Right Div
-
Top
-
Mid
-
Bot
-
-
b){e--;break}for(;f<=d&&f!==d&&!(a[f].top>b);f++);for(b=
-e+1;b<=f;b++)if(b===f){g=b;break}else if(a[b].left>k.clientX){g=b;break}a=g===d?a[g-1].index+1:a[g].index}c.currentPosition=a}else c.currentPosition=!1}function F(){var a;if(a=c.currentContainer){var b=c.currentContainer;a=g;a.contains(b)||b.classList.contains("lmdd-dispatcher")?a=!1:d.lmddOptions.matchObject?(b=b.dataset.containerType||!1,a=a.dataset.itemType||!1,a=b?a?d.lmddOptions.matchObject[b][a]:d.lmddOptions.matchObject[b]["default"]:d.lmddOptions.matchObject["default"]):a=!0}a?(c.currentContainer.insertBefore(g,
-c.currentContainer.childNodes[c.currentPosition]),c.currentIndex=Array.prototype.indexOf.call(g.parentNode.childNodes,g),n&&!t&&(h.elref.classList.remove("no-display"),h.elref.cloneRef.classList.remove("no-display"),h.elref.cloneRef.classList.add("no-transition"),E(g)),t=!0):d.lmddOptions.revert&&(c.originalContainer.insertBefore(g,c.originalNextSibling),c.currentIndex=c.originalIndex);z();A=k}function G(a){a.cloneRef.rectRef=a.getBoundingClientRect();var b=window.getComputedStyle?getComputedStyle(a,
-null):a.currentStyle;a.cloneRef.styleRef={top:{padding:parseInt(b.paddingTop,10),margin:parseInt(b.marginTop,10),border:parseInt(b.borderTopWidth,10)},left:{padding:parseInt(b.paddingLeft,10),margin:parseInt(b.marginLeft,10),border:parseInt(b.borderLeftWidth,10)}};a.classList.contains("lmdd-block")||Array.prototype.forEach.call(a.childNodes,function(a){1===a.nodeType&&G(a)})}function U(a){var b=a.cloneNode(!0);b.id+="-lmddClone";var c=[],d=[],e=function(a,b){b.push(a);Array.prototype.forEach.call(a.childNodes,
-function(a){e(a,b)})};e(a,c);e(b,d);for(a=0;a=this.el.clientHeight-this.sm&&window.pageYOffset=this.el.clientWidth-this.sm&&window.pageXOffset
-
-
- If/Else Demo | Bit by Bit
-
-
-
- Pick two numbers and an operator to compare them with.
-
-
-
-
-
-
-
- Number 1:
-
-
- Number 2:
-
-
- Operator:
-
-
Run
-
-
-
-
-
-
- Bit by Bit Coding is a registered nonprofit
-
-
-
-
diff --git a/ifelse-demo/script.js b/ifelse-demo/script.js
deleted file mode 100644
index d16b744..0000000
--- a/ifelse-demo/script.js
+++ /dev/null
@@ -1,76 +0,0 @@
-let resultBox = document.getElementById("result");
-
-let op = document.getElementById("op");
-createOption(op, {
- '<':'<',
- '>':'>',
- '===':'===',
- '<=':'<=',
- '>=':'>='
-});
-
-
-function calculate(){
- let num1 = document.getElementById("num1").value;
- let num2 = document.getElementById("num2").value;
-
-
- if(op.value == '<'){
- if(num1 < num2){
- resultBox.style.backgroundColor = "lime";
- resultBox.innerText = "True!";
- }else{
- resultBox.style.backgroundColor = "red";
- if(num1 > num2){
- resultBox.innerText = `This is false because number 1:${num1} is greater than number 2:${num2}.`;
- }else if(num1 == num2){
- resultBox.innerText = `This is false because number 1:${num1} is equal to number 2:${num2}, and not smaller than it.`;
- }
- }
- }
-
- if(op.value == '==='){
- if(num1 == num2){
- resultBox.style.backgroundColor = "lime";
- resultBox.innerText = "True!";
- }else{
- resultBox.style.backgroundColor = "red";
- resultBox.innerText = `This is false because number 1: ${num1} is not equal to number 2: ${num2}.`;
- }
- }
-
- if(op.value == '>'){
- if(num1 > num2){
- resultBox.style.backgroundColor = "lime";
- resultBox.innerText = "True!";
- }else{
- resultBox.style.backgroundColor = "red";
- if(num1 < num2){
- resultBox.innerText = `This is false because number 1: ${num1} is smaller than number 2: ${num2}.`;
- }else if(num1 == num2){
- resultBox.innerText = `This is false because number 1: ${num1} is equal to number 2: ${num2}, and not strictly greater than it.`;
- }
- }
- }
-
- if(op.value == '<='){
- if(num1 <= num2){
- resultBox.style.backgroundColor = "lime";
- resultBox.innerText = "True!";
- }else{
- resultBox.style.backgroundColor = "red";
- resultBox.innerText = `This is false because number 1: ${num1} is greater than number 2: ${num2}.`;
- }
- }
-
- if(op.value == '>='){
- if(num1 >= num2){
- resultBox.style.backgroundColor = "lime";
- resultBox.innerText = "True!";
- }else{
- resultBox.style.backgroundColor = "red";
- resultBox.innerText = `This is false because number 1: ${num1} is smaller than number 2: ${num2}.`;
- }
- }
-}
-
diff --git a/ifelse-demo/style.scss b/ifelse-demo/style.scss
deleted file mode 100644
index 29314c9..0000000
--- a/ifelse-demo/style.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/* style.scss */
-
-/* Import the common styling */
-@import "../assets/common.scss";
-
-/* The page-specific styling */
-/* TODO: Put whatever styles you need for just your demo here */
diff --git a/math-random-demo/index.html b/math-random-demo/index.html
index 55ed2a7..79d0fc9 100644
--- a/math-random-demo/index.html
+++ b/math-random-demo/index.html
@@ -31,7 +31,7 @@ Random Function Demo
Instructions:
- Math.random picks a random decimal between 0 and 1. By adding a coefficient you can widen the range that the random number can fall within. Adding a constant can change where the range will fall on the number line. Try adding both a coefficient and adding a constant in the boxes below.
+ Math.random picks a random decimal between 0 and 1. By adding a coefficient, you can widen the range that the random number can fall within. Adding a constant can change where the range will fall on the number line. Try adding both a coefficient and a constant in the boxes below.
(Math.random() x
diff --git a/math-random-demo/style.css b/math-random-demo/style.css
index c4c2bd3..64ce4af 100644
--- a/math-random-demo/style.css
+++ b/math-random-demo/style.css
@@ -6,7 +6,7 @@ body {
margin: 5em 0 0 0;
padding: 0;
background-color: #fff;
- font-family: "Nunito", sans-serif;
+ font-family: 'Nunito', sans-serif;
font-weight: 600;
}
@@ -19,14 +19,18 @@ button {
border: none;
background: #38Bfe7;
padding: 0.5em 1em;
- box-shadow: 0.125em 0.125em 0.2em #bfbfbf;
+ -webkit-box-shadow: 0.125em 0.125em 0.2em #bfbfbf;
+ box-shadow: 0.125em 0.125em 0.2em #bfbfbf;
cursor: pointer;
}
+
button:hover {
background-color: #19a8d3;
}
+
button:active {
- box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
}
#header {
@@ -40,11 +44,14 @@ button:active {
max-height: 3em;
z-index: 1000;
opacity: 95%;
- box-shadow: 0 2px 2px #eee;
+ -webkit-box-shadow: 0 2px 2px #eee;
+ box-shadow: 0 2px 2px #eee;
}
+
#header > * {
margin: 0;
}
+
#header button {
width: 3em;
}
@@ -63,28 +70,50 @@ button:active {
/*Flexbox*/
.flex-container-header {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- justify-content: space-between;
- align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
.flex-container-left {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- justify-content: space-evenly;
- align-items: center;
+ -webkit-box-pack: space-evenly;
+ -ms-flex-pack: space-evenly;
+ justify-content: space-evenly;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ max-width: -webkit-max-content;
+ max-width: -moz-max-content;
max-width: max-content;
}
.flex-item-header {
- flex: 1 1 200px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 200px;
+ flex: 1 1 200px;
}
.flex-item-left {
- flex: 1 1 100px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100px;
+ flex: 1 1 100px;
+ max-width: -webkit-max-content;
+ max-width: -moz-max-content;
max-width: max-content;
}
#top-heading {
+ width: -webkit-max-content;
+ width: -moz-max-content;
width: max-content;
}
@@ -104,11 +133,15 @@ button:active {
}
.flex-box {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
}
.flex-col {
- flex: 1;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
padding: 0.5em;
}
@@ -121,7 +154,9 @@ button:active {
}
.no-flex-col {
- flex: 0;
+ -webkit-box-flex: 0;
+ -ms-flex: 0;
+ flex: 0;
}
.showcase-section {
@@ -138,7 +173,7 @@ button:active {
margin: 0;
height: 20em;
width: calc(100% - 35px - calc(0.625em*2));
- font-family: "Anonymous Pro", monospace;
+ font-family: 'Anonymous Pro', monospace;
font-size: 0.875em;
line-height: 1.25em;
padding: 1px 0.625em;
@@ -175,5 +210,4 @@ div.marker {
height: 200px;
border: 0.2em solid #38Bfe7;
}
-
-/*# sourceMappingURL=style.css.map */
+/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/object-demo/style.css b/object-demo/style.css
index ae69239..66bd6e6 100644
--- a/object-demo/style.css
+++ b/object-demo/style.css
@@ -6,7 +6,7 @@ body {
margin: 5em 0 0 0;
padding: 0;
background-color: #fff;
- font-family: "Nunito", sans-serif;
+ font-family: 'Nunito', sans-serif;
font-weight: 600;
}
@@ -19,14 +19,18 @@ button {
border: none;
background: #38Bfe7;
padding: 0.5em 1em;
- box-shadow: 0.125em 0.125em 0.2em #bfbfbf;
+ -webkit-box-shadow: 0.125em 0.125em 0.2em #bfbfbf;
+ box-shadow: 0.125em 0.125em 0.2em #bfbfbf;
cursor: pointer;
}
+
button:hover {
background-color: #19a8d3;
}
+
button:active {
- box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
}
#header {
@@ -40,11 +44,14 @@ button:active {
max-height: 3em;
z-index: 1000;
opacity: 95%;
- box-shadow: 0 2px 2px #eee;
+ -webkit-box-shadow: 0 2px 2px #eee;
+ box-shadow: 0 2px 2px #eee;
}
+
#header > * {
margin: 0;
}
+
#header button {
width: 3em;
}
@@ -63,28 +70,50 @@ button:active {
/*Flexbox*/
.flex-container-header {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- justify-content: space-between;
- align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
.flex-container-left {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- justify-content: space-evenly;
- align-items: center;
+ -webkit-box-pack: space-evenly;
+ -ms-flex-pack: space-evenly;
+ justify-content: space-evenly;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ max-width: -webkit-max-content;
+ max-width: -moz-max-content;
max-width: max-content;
}
.flex-item-header {
- flex: 1 1 200px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 200px;
+ flex: 1 1 200px;
}
.flex-item-left {
- flex: 1 1 100px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100px;
+ flex: 1 1 100px;
+ max-width: -webkit-max-content;
+ max-width: -moz-max-content;
max-width: max-content;
}
#top-heading {
+ width: -webkit-max-content;
+ width: -moz-max-content;
width: max-content;
}
@@ -104,11 +133,15 @@ button:active {
}
.flex-box {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
}
.flex-col {
- flex: 1;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
padding: 0.5em;
}
@@ -121,7 +154,9 @@ button:active {
}
.no-flex-col {
- flex: 0;
+ -webkit-box-flex: 0;
+ -ms-flex: 0;
+ flex: 0;
}
.showcase-section {
@@ -138,7 +173,7 @@ button:active {
margin: 0;
height: 20em;
width: calc(100% - 35px - calc(0.625em*2));
- font-family: "Anonymous Pro", monospace;
+ font-family: 'Anonymous Pro', monospace;
font-size: 0.875em;
line-height: 1.25em;
padding: 1px 0.625em;
@@ -155,11 +190,13 @@ button:active {
.showcase-section {
position: relative;
}
+
.showcase-section svg {
position: absolute;
top: 50%;
left: 50%;
- transform: translate(-50%, -50%);
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
height: 100%;
}
@@ -169,14 +206,21 @@ button:active {
}
div.option-wrapper {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
margin: 1em 0 1em 0;
}
+
div.option-wrapper > *:first-child {
- flex: 1;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
}
+
div.option-wrapper > *:last-child {
- flex: 2;
+ -webkit-box-flex: 2;
+ -ms-flex: 2;
+ flex: 2;
}
-
-/*# sourceMappingURL=style.css.map */
+/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/DEMO2.html b/original-demos/DEMO2.html
similarity index 100%
rename from DEMO2.html
rename to original-demos/DEMO2.html
diff --git a/DEMOcss.html b/original-demos/DEMOcss.html
similarity index 100%
rename from DEMOcss.html
rename to original-demos/DEMOcss.html
diff --git a/css3/selector.html b/original-demos/css3/selector.html
similarity index 100%
rename from css3/selector.html
rename to original-demos/css3/selector.html
diff --git a/css3/selectscript.js b/original-demos/css3/selectscript.js
similarity index 100%
rename from css3/selectscript.js
rename to original-demos/css3/selectscript.js
diff --git a/generateScript/generatescript.js b/original-demos/generateScript/generatescript.js
similarity index 100%
rename from generateScript/generatescript.js
rename to original-demos/generateScript/generatescript.js
diff --git a/generateScript/selectorGame.html b/original-demos/generateScript/selectorGame.html
similarity index 100%
rename from generateScript/selectorGame.html
rename to original-demos/generateScript/selectorGame.html
diff --git a/style.css b/style.css
index f7851aa..05dd2c4 100644
--- a/style.css
+++ b/style.css
@@ -213,4 +213,4 @@ div.grid-item:hover {
box-shadow: #aaaaaa 2px 2px 2px;
background-color: #fafafa;
}
-/*# sourceMappingURL=style.css.map */
+/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/template/style.css b/template/style.css
index 3a36ad6..5d269e9 100644
--- a/template/style.css
+++ b/template/style.css
@@ -6,7 +6,7 @@ body {
margin: 5em 0 0 0;
padding: 0;
background-color: #fff;
- font-family: "Nunito", sans-serif;
+ font-family: 'Nunito', sans-serif;
font-weight: 600;
}
@@ -14,14 +14,18 @@ button {
border: none;
background: #38Bfe7;
padding: 0.5em 1em;
- box-shadow: 0.125em 0.125em 0.2em #bfbfbf;
+ -webkit-box-shadow: 0.125em 0.125em 0.2em #bfbfbf;
+ box-shadow: 0.125em 0.125em 0.2em #bfbfbf;
cursor: pointer;
}
+
button:hover {
background-color: #19a8d3;
}
+
button:active {
- box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
}
#header {
@@ -35,11 +39,14 @@ button:active {
max-height: 3em;
z-index: 1000;
opacity: 95%;
- box-shadow: 0 2px 2px #eee;
+ -webkit-box-shadow: 0 2px 2px #eee;
+ box-shadow: 0 2px 2px #eee;
}
+
#header > * {
margin: 0;
}
+
#header button {
width: 3em;
}
@@ -58,28 +65,50 @@ button:active {
/*Flexbox*/
.flex-container-header {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- justify-content: space-between;
- align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
.flex-container-left {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
- justify-content: space-evenly;
- align-items: center;
+ -webkit-box-pack: space-evenly;
+ -ms-flex-pack: space-evenly;
+ justify-content: space-evenly;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ max-width: -webkit-max-content;
+ max-width: -moz-max-content;
max-width: max-content;
}
.flex-item-header {
- flex: 1 1 200px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 200px;
+ flex: 1 1 200px;
}
.flex-item-left {
- flex: 1 1 100px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100px;
+ flex: 1 1 100px;
+ max-width: -webkit-max-content;
+ max-width: -moz-max-content;
max-width: max-content;
}
#top-heading {
+ width: -webkit-max-content;
+ width: -moz-max-content;
width: max-content;
}
@@ -99,11 +128,15 @@ button:active {
}
.flex-box {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
}
.flex-col {
- flex: 1;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
padding: 0.5em;
}
@@ -116,7 +149,9 @@ button:active {
}
.no-flex-col {
- flex: 0;
+ -webkit-box-flex: 0;
+ -ms-flex: 0;
+ flex: 0;
}
.showcase-section {
@@ -133,7 +168,7 @@ button:active {
margin: 0;
height: 20em;
width: calc(100% - 35px - calc(0.625em*2));
- font-family: "Anonymous Pro", monospace;
+ font-family: 'Anonymous Pro', monospace;
font-size: 0.875em;
line-height: 1.25em;
padding: 1px 0.625em;
@@ -148,5 +183,4 @@ button:active {
/* The page-specific styling */
/* TODO: Put whatever styles you need for just your demo here */
-
-/*# sourceMappingURL=style.css.map */
+/*# sourceMappingURL=style.css.map */
\ No newline at end of file
+ 
+ 
+ 
+ 
+ 
+ 
+