Return to Level1Techs.com

Learning frontend web development - Devember challenge

blog
devember2k18

#42

Day 11

To day I acctualy did some JS, but just following along with the tutorial (nothing on my own). I started over from the beginning, but I remembered most of it from the first time through.

Here’s the last bit of code I did.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title> JS Test </title>
	<script type="text/javascript">
		var apples = 5;
		var pie = 3;
		apples += pie;
		document.write(apples);
	</script>
	
</head>
<body>


</body>
</html>

Website


Cool stuff. I was actually having a bit of fun today.


I did the coding on my Note’s Dex with a 12" portable monitor. I was testing to see how the experience would be, and it isn’t half bad so far. I think I’m going to try and make a laptop dock for my phone (like the Razor phone’s), and use that instead of getting a laptop.

Screen shot of my Dex with all this madness


#43

Wanna see any updates on that


#44

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>

#45

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>

#46

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.


#47

Just wait till you get into callbacks, those still mess me up when it comes to scope.


#48

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.


#49

image

image

I am watching you


#50

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");
		}

#51

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.


#52

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


#53

petite != loli

also look at you using programmers’ notations ( || )


#54

Haha. It’s my fist time.

I might have to do it more often. It feels good to be able to do that.


#55

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>

#56

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.


#57

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!


#58

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>

#59

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.


#60

A Raspberry Pi is very good for this stuff.


#61

What all do I need? Is this everything?

I already have a 64gig SanDisk ultra plus just laying around.