diff --git a/truthy-falsy-demo/index.html b/truthy-falsy-demo/index.html new file mode 100644 index 0000000..ab7bcc0 --- /dev/null +++ b/truthy-falsy-demo/index.html @@ -0,0 +1,226 @@ + + + + + Truthy & Falsy Values Demo | Bit by Bit + + + + + + + + +
+ +
+

Introduction

+

+ In JavaScript, boolean (true or false) types and comparisons are not the only forms of truthy and falsy + values. But first, what are truthy and falsy values?

+ As the names suggest... +

+ + Bit by Bot + + Here are the falsy values: +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Falsy ValueDescription
+
false
+ 		If the boolean variable is set to be false, then it will evaluate to false.
+
0
+ 		If the value of the number is 0, then it will be considered as falsy.
+
"" or ''
+ 		If the string is blank (empty), then it will evaluate to false.
+
null
+ 		If there is no value at all, then JavaScript will return a value called null, which will also be considered as falsy.
+
undefined
+ 		If a variable is declared but not assigned a value, then it will return a value called undefined and will also evaluate to false.
+
NaN
+ 		If the value is not a number, (e.g. divide a string by a number), then NaN (Not a Number) will be returned and will evaluate to false.
+

** NOTE: Values other than the ones listed above are truthy values! **

+
+
+

Test it Out!

+

Go through each example below to see whether or not they will evaluate to false!

+ Bit by Bot Using a Computer +
+ +
+
+

false:

+
+
let friday
+ = +
false
; +
+
if
+
(!friday) {
+
+
alert("Today is not Friday!");
+
+
}
+
+
+
+
+ +
+
+
+

0:

+
+
let grade
+ = +
0
; +
+
if
+
(!grade) {
+
+
alert("This is not a valid grade!");
+
+
}
+
+
+
+
+ +
+
+
+ +
+
+

Empty String:

+
+
let sentence
+ = +
""
; +
+
if
+
(!sentence) {
+
+
alert("This is a blank string!");
+
+
}
+
+
+
+
+ +
+
+
+

null Value:

+
+
let rank
+ = +
null
; +
+
if
+
(!rank) {
+
+
alert("Your rank is currently unavailable!");
+
+
}
+
+
+
+
+ +
+
+
+ +
+
+

undefined Value (unassigned value):

+
+
let word
; +
+
if
+
(!word) {
+
+
alert("This variable has not been assigned a value yet!");
+
+
}
+
+
+
+
+ +
+
+
+

NaN Value (invalid number):

+
+
let food
+ = +
"jelly" / 3
; +
+
if
+
(!food) {
+
+
alert("There is a problem with the number!");
+
+
}
+
+
+
+
+ +
+
+
+ +
+ + + diff --git a/truthy-falsy-demo/script.js b/truthy-falsy-demo/script.js new file mode 100644 index 0000000..2b9f35e --- /dev/null +++ b/truthy-falsy-demo/script.js @@ -0,0 +1,41 @@ +function falseValue() { + let friday = false; + if (!friday) { + alert("Today is not Friday!"); + } +} + +function zero() { + let grade = 0; + if (!grade) { + alert("This is not a valid grade!"); + } +} + +function emptyString() { + let sentence = ""; + if (!sentence) { + alert("This is a blank string!"); + } +} + +function nullValue() { + let rank = null; + if (!rank) { + alert("Your rank is currently unavailable!"); + } +} + +function undefinedValue() { + let word; + if (!word) { + alert("This variable has not been assigned a value yet!"); + } +} + +function notANumber() { + let food = "jelly" / 3; + if (!food) { + alert("There is a problem with the number!"); + } +} \ No newline at end of file diff --git a/truthy-falsy-demo/style.css b/truthy-falsy-demo/style.css new file mode 100644 index 0000000..cbfbdf5 --- /dev/null +++ b/truthy-falsy-demo/style.css @@ -0,0 +1,269 @@ +/* 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 */ +h2 { + font-size: 1.5em; +} + +table { + border: 0.0625em solid #38Bfe7; + border-collapse: collapse; + width: 100%; +} + +th, +td { + border: 0.0625em solid #38Bfe7; + border-collapse: collapse; + padding: 0.5em 1em; +} + +.center { + text-align: center; +} + +.note { + font-size: large; + color: #ff8900; +} + +.type { + font-size: large; + font-weight: bolder; +} + +.section { + position: relative; +} + +.flex-box { + margin-bottom: 0.5em; +} + +.code { + display: inline-block; + color: #000; + font-size: 18px; + font-weight: 600; + font-family: "Source Code Pro", monospace; +} + +.codePartOne { + display: inline-block; + color: #153570; +} + +.codePartTwo { + display: inline-block; + color: #dfb600; +} + +.codePartThree { + display: inline-block; + color: #38Bfe7; +} + +.codeInside { + display: inline-block; + color: #ff8900; + margin-left: 2em; +} + +#bit-by-bot-intro { + height: 120px; + width: auto; + position: absolute; + right: 100px; + top: 120px; +} + +#bit-by-bot-interactive { + height: 100px; + width: auto; + position: absolute; + right: 100px; + top: 10px; +} +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/truthy-falsy-demo/style.scss b/truthy-falsy-demo/style.scss new file mode 100644 index 0000000..96ba0b6 --- /dev/null +++ b/truthy-falsy-demo/style.scss @@ -0,0 +1,91 @@ +/* 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 */ + +h2 { + font-size: 1.5em; +} + +table { + border: 0.0625em solid $primary-color; + border-collapse: collapse; + width: 100%; +} + +th, +td { + border: 0.0625em solid $primary-color; + border-collapse: collapse; + padding: 0.5em 1em; +} + +.center { + text-align: center; +} + +.note { + font-size: large; + color: $accent-color; +} + +.type { + font-size: large; + font-weight: bolder; +} + +.section { + position: relative; +} + +.flex-box { + margin-bottom: 0.5em; +} + +.code { + display: inline-block; + color: $text-color; + font-size: 18px; + font-weight: 600; + font-family: "Source Code Pro", monospace; +} + +.codePartOne { + display: inline-block; + color: #153570; +} + +.codePartTwo { + display: inline-block; + color: #dfb600; +} + +.codePartThree { + display: inline-block; + color: $primary-color; +} + +.codeInside { + display: inline-block; + color: $accent-color; + margin-left: 2em; +} + +#bit-by-bot-intro { + height: 120px; + width: auto; + position: absolute; + right: 100px; + top: 120px; +} + +#bit-by-bot-interactive { + height: 100px; + width: auto; + position: absolute; + right: 100px; + top: 10px; +}