Wanna see any updates on that
1 Like
Day 12
Didn’t get much done today. I followed more of the tutorial and worked on concatenation, and events.
I change up the code a few times with the tutorial so I comment out the old code.
Working on concatenation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
//string concatenation
var sentence1 = "My name is Teck";
var sentence2 = " and I am a gearhead";
var combined_sentences = sentence1 + sentence2;
// document.write(combined_sentences);
//string concatenation with numbers
var age = 60;
// document.write("Hello you are "+ age +" years old");
//using HTML elements inside our string
document.write("<h1>Hello world</h1>");
</script>
</head>
<body>
</body>
</html>
Working on events
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
// alert("You have opened my web page");
</script>
</head>
<body>
<form>
<!-- <input type="button" value="click me" onclick="alert('You clicked me');"/>
-->
<input type="button" value="hover mouse over me" onmouseover="alert('You hovered over me');"/>
</form>
</body>
</html>
3 Likes
Day 13
Still working on the JS tutorials.
Functions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
function makeAwesome (){
//code in here
alert('You are awesome');
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me" onclick="makeAwesome();">
</form>
</body>
</html>
Functions with parameters
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
function alertMessage(message){
alert(message);
}
alertMessage("Hello");
alertMessage("Welcome to my website");
alertMessage("Are these alerts annoying you?");
</script>
</head>
<body>
</body>
</html>
Functions with multiple parameters
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
function addNumbers(num1,num2){
var answer = num1 + num2;
document.write(answer + "<br/>");
}
addNumbers(2,4);
addNumbers(15,3);
addNumbers(12,24);
</script>
</head>
<body>
</body>
</html>
Global variable vs local variable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
// var champion="fizz"; //global variable
function printChampion() {
var champion="fizz"; //local variable
document.write(champion + " inside function <br/>");
}
printChampion();
document.write(champion + " outside function <br/>");
</script>
</head>
<body>
</body>
</html>
4 Likes
Day 14
More tutorials. Everything is making sense, so I think I'll have a decent grasp of JS when I finished these tutorials.Arrays
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
var cars = new Array("Ferrari","Porsche","Jaguar","Lamborghrnr","Mcalaren");
document.write(cars[0]);
</script>
</head>
<body>
</body>
</html>
More arrays
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
var cars = new Array(5);
cars[0]="Volvo";
cars[1]="Mazda";
cars[2]="Suzuki";
cars[3]="MG";
cars[4]="Toyota";
document.write(cars[2]);
</script>
</head>
<body>
</body>
</html>
Still Arrays
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
var cars = new Array();
cars[0]="Volvo";
cars[1]="Mazda";
cars[2]="Suzuki";
cars[3]="MG";
cars[4]="Toyota";
document.write(cars.length);
</script>
</head>
<body>
</body>
</html>
Lol this guy told a cheesey AF joke so I thought I’d quote it.
Why did the programmer quit his job…
Because he couldn’t get arrays.
1 Like
Just wait till you get into callbacks, those still mess me up when it comes to scope.
1 Like
Day 15
Today I worked on…
If statements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
var age=17;
if(age != 18) {
document.write("Welcome!");
}
</script>
</head>
<body>
</body>
</html>
If else statements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
var age=17;
if(age>=18){
document.write("Welcome to the casino.");
}
else if(age==17){
document.write("Sorry, come back next year.");
}
else{
document.write("You need to be at least 18 to enter this site.");
}
</script>
</head>
<body>
</body>
</html>
Nesting if statements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
var age=50;
var max_age=30;
var min_age=18;
if(age>=min_age){
if(age<=max_age){
document.write("You meet the requirements");
}
else{
document.write("You are too old");
}
}
</script>
</head>
<body>
</body>
</html>
“Complex conditions”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
/* first_name="Quentin";
last_name="Watt";
if((first_name=="Quentin") && (last_name=="Watt")){
document.write("Hello Quentin Watt");
}
*/
first_name="Quentin";
last_name="Smith";
if((first_name=="Quentin") || (last_name=="Watt")){
document.write("Hello Quentin");
}
</script>
</head>
<body>
</body>
</html>
Edit: Oh, BTW that’s not my name. It’s what the tutorial was using.
1 Like
I am watching you
3 Likes
Don’t worry. I changed it to the loli blocker later in the tutorial.
if(age>=18){
document.write("Welcome");
}
else{
document.write("Get lost loli");
}
1 Like
and what if she’s 300 y.o. loli?
You need to add some sort of data structure and keep their physical age and loliness factor and name and stuff there.
Lol. I thought of putting “inb4 [insert it’s ok because she’s hundreds of years old starter pack meme]”, but I didn’t think about it until after I posted the post.
Maybe a height restriction || cup size. Lol
petite != loli
also look at you using programmers’ notations ( || )
1 Like
Haha. It’s my fist time.
I might have to do it more often. It feels good to be able to do that.
1 Like
Day 16
Getting to the good stuff. I can now do loops. yay
Switch statements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
var car="Ford";
switch(car){
case "Mazda":
document.write("Zoom Zoom");
break;
case "Volvo":
document.write("Is for life");
break;
case "Suzuki":
document.write("Way of Life");
break;
default:
document.write("Sorry, I don't have that brand's slogan.");
}
</script>
</head>
<body>
</body>
</html>
While loop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
var counter=1;
while(counter<=10){
document.write("<p>This is a paragraph "+counter+"</p>");
counter++;
}
</script>
</head>
<body>
</body>
</html>
Do while loop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
var counter=11;
do{
document.write("Test "+counter+"<br/>");
counter++;
}while(counter<=10);
</script>
</head>
<body>
</body>
</html>
For loop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
for(i=1;i<=10;i++) {
document.write("This loop ran "+i+"<br/>")
}
</script>
</head>
<body>
</body>
</html>
3 Likes
Day 17
More listening than coding today, but here’s what I got done today.
Objects, properties and methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
var x = "Volvo's five cylinder engines are amazing!";
var capitals = x.toUpperCase();
document.write(capitals);
</script>
</head>
<body>
</body>
</html>
Referencing elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
function change(){
document.getElementById("para");
para.innerHTML="lul";
}
</script>
</head>
<body>
<p id="para" onclick="change()"> Click me </p>
</body>
</html>
I’m on lesson 25 of 33, so I’m somewhat close to the end, and if it’s as good as his HTML, and CSS one then I will have a good foundation to expand on.
4 Likes
Day 18
Changing an image source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
var image_tracker="f";
function change(){
var image=document.getElementById("social");
if(image_tracker=='f'){
image.src='twitter.png';
image_tracker='t';
}else{
image.src='fb.png';
image_tracker='f';
}
}
</script>
</head>
<body>
<img src="fb.png" alt="social logo" id="social" onclick="change();">
</body>
</html>
timers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
var image_tracker="f";
function change(){
var image=document.getElementById("social");
if(image_tracker=='f'){
image.src='twitter.png';
image_tracker='t';
}else{
image.src='fb.png';
image_tracker='f';
}
}
// setTimeout('change()',2000);
var timer=setInterval('change()',2000);
</script>
</head>
<body>
<img src="fb.png" alt="social logo" id="social" onclick="clearInterval(timer);">
</body>
</html>
forms
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
function write_name(){
var welcome_parra=document.getElementById('welcome');
var name=document.getElementById('name');
welcome_parra.innerHTML="Welcome "+name.value;
}
</script>
</head>
<body>
<p id="welcome"></p>
<form class="" action="index.html" method="post">
What is your name:<input type="text" id="name"><br>
<input type="button" value="done" onclick="write_name();">
</form>
</body>
</html>
Had to give up way too much sleep to get this done tonight. Hopefully I can make it through work without dying tomorrow.
Merry Christmas guys, and I hope you all had a good one!
3 Likes
Day 19
Form values explained
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
function write_name(){
//var welcome_parra=document.getElementById('welcome');
var name=document.getElementById('name').value;
alert(name);
//welcome_parra.innerHTML="Welcome "+name.value;
}
</script>
</head>
<body>
<p id="welcome"></p>
<form class="" action="index.html" method="post">
What is your name:<input type="text" id="name" value=""><br>
<input type="button" value="done" onclick="write_name();">
</form>
</body>
</html>
Submitting forms
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
</script>
</head>
<body>
<form action="index.php" method="post">
Username:<input type="text" name="username">
Password:<input type="password" name="password">
<input type="submit" value="login">
</form>
</body>
</html>
Form validation text boxes and passwords
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
function check_info() {
var username=document.getElementById('username').value;
var password=document.getElementById('password').value;
if (username=="" || password=="") {
alert("Please fill in all fields");
return false;
}
}
</script>
</head>
<body>
<form action="submission.html" method="post" onsubmit="return check_info();">
Username:<input type="text" name="username" id="username">
Password:<input type="password" name="password" id="password">
<input type="submit" value="login">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Submitted</title>
</head>
<body>
<h1>Thanks you for submitting</h1>
</body>
</html>
2 Likes
Day 20
Radio buttons (part 1 & 2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
function is_checked() {
var Yes_checked = document.getElementById('auto_renew_yes').checked;
var No_checked = document.getElementById('auto_renew_no').checked;
if (Yes_checked==false&&No_checked==false) {
alert('Please select an option');
return false;
}else {
return true;
}
}
</script>
</head>
<body>
<form action="submission.html" method="get" onsubmit="return is_checked()">
<p>Do you want to renew your membership</p>
Yes<input type="radio" name="auto_renew" value="yes" id="auto_renew_yes"><br>
No<input type="radio" name="auto_renew" value="no" id="auto_renew_no"><br>
<input type="submit" value="submit">
</form>
</body>
</html>
Checkboxes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
function is_checked() {
var sports = document.getElementById('sports').checked;
var electronics = document.getElementById('electronics').checked;
var tools = document.getElementById('tools').checked;
if (sports == false && electronics==false && tools==false) {
alert('Please check a category');
return false;
}else {
return true;
}
}
</script>
</head>
<body>
<form action="submission.html" method="get" onsubmit="return is_checked()">
<p>Please select some categories that you are interested in</p>
<input type="checkbox" name="interests" value="sports" id="sports">Sports<br>
<input type="checkbox" name="interests" value="electronics" id="electronics">Electronics<br>
<input type="checkbox" name="interests" value="tools" id="tools">Tools<br>
<input type="submit" value="submit">
</form>
</body>
</html>
Alright, That was the last tutorial on JS. Now I feel learning sever side programing would be next step for me, but I think I need to do something with the knowledge I’ve just got before learning more. I think I’m going to take another shot at my website using what I know.
Also I’m going to look into building a PC I can use as a sever.
4 Likes
A Raspberry Pi is very good for this stuff.
2 Likes
What all do I need? Is this everything?
I already have a 64gig SanDisk ultra plus just laying around.
2 Likes
That it.
Its nice and compact for taking out of town. Also will be good for a low power web server/emulator/piHole or whatever you can dream up.
There’s also can bus modules for them 
Maybe build a web front end for monitoring sensor and telemetric data from your car.
3 Likes