I get asked to make a JavaScript tutorial with real projects so here it is. We’ll make real apps of increasing complexity using JavaScript. While doing so I’ll also teach Bootstrap, Node, Express, MongoDB, JQuery, React, Vue, HTML Canvas and much more!
It is one thing to see a long list of JavaScript functions. It is more beneficial to see those functions put into action and used to solve real world problems. Eventually we’ll be accessing databases, creating complex interfaces, making games, charts, mobile apps and much more. All of the code follows below.
This 45 minute tutorial only has one 5 second skippable ad. Please consider not Ad Blocking it so that I can continue making free tutorials.
Code from the Video
JSTut.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>JavaScript Tutorial</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="mainstyle.css">
<script src="JSTut.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h3>MadLib Generator</h3>
<form class="form-inline">
<input type="text" class="form-control" id="i0" value="Person"/>
<input type="text" class="form-control" id="i1" value="Noun"/>
<input type="text" class="form-control" id="i2" value="Verb"/>
<input type="text" class="form-control" id="i3" value="Verb"/>
<input type="text" class="form-control" id="i4" value="Verb"/>
<input type="text" class="form-control" id="i5" value="Verb"/>
<input type="text" class="form-control" id="i6" value="Plural Verb"/>
<input type="text" class="form-control" id="i7" value="Verb"/>
<input type="text" class="form-control" id="i8" value="Adjective"/>
<input type="text" class="form-control" id="i9" value="Noun"/>
<input type="text" class="form-control" id="i10" value="Event"/>
<input type="text" class="form-control" id="i11" value="Noun"/>
<input type="text" class="form-control" id="i12" value="Body Part"/>
<input type="text" class="form-control" id="i13" value="Noun"/>
</form><br><br>
<button type="submit" class="btn-lg" onClick="alert('Hello')">Hello</button>
<button type="submit" class="btn-lg" onClick="calcPI(100000000)">Get PI</button>
<button type="submit" class="btn-lg" onClick="getFibList(20)">Get Fibs</button>
<button type="submit" class="btn-lg" onClick="madLibGenerator()">MadLib Generate</button><br><br>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Output</span>
</div>
<textarea id="output1" rows="18" class="form-control"></textarea>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</body>
</html>
mainstyle.css
.jumbotron{
background-color:rgb(37, 35, 124);
color:white;
}
.textarea { height: 200px; }
html {
font-size: 1em;
}
JSTut.js
// JavaScript was originally designed to write programs
// that would execute in the browser but now it is used
// on the server side, with databases, and more
// Print to the JavaScript console
// Chrome : View -> Developer -> Developer Tools
console.log("Hello World");
// ----- CALCULATE PI -----
// The formula for calculating PI is
// Pi = 4/1 - 4/3 + 4/5 - 4/7...
// A function is a block of code that you give a name to
// You can pass the function a value that will be
// assigned to the name iterations
function calcPI(iterations){
// This is a constant which has a value that can't change
const piVal = 3.14159;
// You assign names to numbers, text and functions
// Variable names can't start with a number, contain
// spaces, but can contain letters, numbers, underscores
// or $ (Are case sensitive)
let pi = 0, divisor = 1;
// Numbers have 16 digits of precision so our PI
// can't be bigger than that
v5 = 0.11111111111111111;
console.log(v5 + 0.11111111111111111);
// This loop will execute the code between { }
// as long as the condition is true
for(i = 0; i <= iterations; i++){
pi = pi + (4/divisor) - (4/(divisor + 2));
divisor += 4;
}
// You can change the value in an HTML element
// by referring to its id with getElementById()
// toFixed returns value to 10 decimal places
document.getElementById("output1").value = pi.toFixed(10);
}
// ----- CREATE A FIBONACCI SEQUENCE -----
// 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, ...
// This array can hold multiple values
let fibList = [];
function getFibList(howMany){
for(i = 0; i < howMany; i++){
fibList[i] = fib(i);
}
// Remove 1st item in array
// fibList.pop() removes the last
// fibList.splice(index, 1) woudl remove the item
// starting at the given index followed by the number of
// items to remove
fibList.shift();
// join will turn the array into a string whose values
// a separated by commas
document.getElementById("output1").value = fibList.join(", ");
}
// Will return individual numbers
function fib(whichNum){
let num1 = 1, num2 = 0, temp, i = 0;
// The code between { } is executed as long as the
// condition is true
while(i < whichNum){
temp = num1;
num1 = num1 + num2;
num2 = temp;
i++;
}
return num2;
}
// ----- MADLIB GENERATOR -----
// Create the MadLib using a ~ every place we want to
// enter a user supplied string
let mLText = "My dear old ~ sat me down to hear some words of wisdom \n 1. Give a man a ~ and you ~ him for a day ~ a man to ~ and he'll ~ forever \n 2. He who ~ at the right time can ~ again \n 3. Always wear ~ ~ in case you're in a ~ \n 4. Don't use your ~ to wipe your ~ Always have a clean ~ with you";
// Convert the string into an array where spaces determine
// the individual pieces to put in each array cell
let mLArray = mLText.split(" ");
// Array that will hold user input
let inputArray = [];
function madLibGenerator(){
createInputArray();
// If this function returns true we know the user
// didn't supply new data
if(checkForMissingInput()){
document.getElementById("output1").value = "Enter all values above";
// If they did supply new data we can create the
// custom MadLib
} else {
createMLSentence();
}
}
function createInputArray(){
// Get all the values the user entered by incrementing
// from 0 to 13 to match the given ids
for(i = 0; i <= 13; i++){
inputArray[i] = document.getElementById("i" + i).value;
}
}
function checkForMissingInput(){
// Create an array with the default values
let defaultArrayVals = ["Person", "Noun", "Verb", "Adjective", "Plural Verb", "Body Part", "Event"];
// length tells us how many values the array has
for(i=0; i < inputArray.length; i++){
// Checks to see if input matches any of the defaults
// If there are no matches a -1 is returned
if(defaultArrayVals.indexOf(inputArray[i]) > -1 ){
return true;
}
}
return false;
}
// Cycle through all words in our default MadLib and
// every place there is a ~ put in the user supplied
// values
function createMLSentence(){
let arrIndex = 0;
for(i=0; i < mLArray.length; i++){
let matchIndex = mLArray.indexOf("~");
mLArray[matchIndex] = inputArray[arrIndex];
arrIndex++;
}
document.getElementById("output1").value = mLArray.join(" ");
}