Learn Bootcamp From Zero

Boolean Logic: True & False Boolean is one of the five primitives. There are only two possible options for Boolean value: True or False. Boolean logic is simple writing statements that evaluate to be true or false. Then, we can combine those initial statements to create more complex statement that also evaluate to true or false. Comparison Operators Screenshot from Udemy Course Lecture Most of those operators are very easy to understand. I just want to mention two of them, which are "==" and "===". Those two operators are all equal sign, but they are different. According to the course, "==" performs type coercion which means that it takes two numbers (or strings or variables) and tries to turn them into a similar type so that we can compare them. In the meanwhile, "===" does not perform type coercion.  For example: var x = 5; x == "5" // true ("5" is a string. The "==" turns the string ...

Today the course assigned a simple JavaScript exercise: Here is my steps: Step One: Create a HTML page and link to the JavaScript File I create a simple HTML page and give a title "JS Stalker Exercise". Then, I link the HTML page to a new JS file named "stalker.js". Step Two: Enter variable data in the JS file In the JS file, I start to write three prompt messages which are asking for user's first name, last name and age. In order to print out user's full name and age in separate sentences, I set two console.log message. The only thing we need to pay attention is the spacing between each word.  The print sentence has one small space between each word : Your full name is X X. Therefore, in the console.log, we need to set the right space for each word. Step Three: Test the result When I open the page, it asks me three pop up questions in orders: After I answer each questions, I can see the print sentences in...

In the last post, I shared five primitive data types. Even though I could write some basic variables and do some math in the console, I don't see any action from the website.  How to let website take action? We will need to know three built-in methods: Alert It pops up a message to the user, and it alerts the user. Console.log What console.log will do is print something to the JavaScript console. Prompt Prompt is very useful for us because it lets us get input from a user. The second part of prompt is that we can store it in a variable. Now I am going to apply those three built-in methods in HTML, so you can see how they work. Firstly, I create a simple HTML page, and I only add the title. Then I add a <script> tag and link to a separate file named "script.js". I want my site to pop up a message when you open it. In the "script. js" file, I name my variable as "userName", and it equal to prompt("What is ...

JavaScript (JS) is a programming language which can add logic and interactivity to a page. If we treat HTML as a noun and treat CSS as a adjective in a sentence, we can treat JS as a verb which is the one to take action. Today, I learned five primitive datatypes about JS. Numbers Numbers are very simple, just like 4, 10, -29.etc It can do some math . For example we type a simple math in the console (open any web page on Google Chrome, right click and inspect the page, click "console" next to the "Element" bar): I type "4+26" and the result is calculated automatically. The JS follows the order of operations that all regular math follows as well. For example, (3+5)*8=8*8=64. Besides simple math, JS can also do modulo which is a reminder operator. It has "%" sign between two numbers. For example: The result shows when 10 divide 3, the reminder is 1 (3*3+1=10). Strings They can be text inside single or double quotes Fo...

Today, I learned how to add picture card on the page. The Udemy course shows a simple pattern project to demonstrate it. Then, I follow the instructor's steps and create my own pattern page. Step One: Create Simple Nav Bar On the top of page, we need to create a nav. Inside the <nav> tag, I set the background color (bg-dark) and navbar color (navbar-dark). You can always change your background color to light or any other choices. The instructor showed us how to install an icon from Font Awesome . Basically, you find your ideal icon from their icon page and copy the tag and paste in your HTML. Moreover, we also need to add a support link from Font Awesome Start Page inside header tag, so the icon tag will work. The result: dark nav bar with a small icon in front of the brand name. Step Two: Create A Jumbotron We create a Jumbotron, and inside it we adding the header text, paragraph text and two small buttons. All the button class value are selected fr...

I mentioned that flex box allows items to move inside a container. In the last post, I use buttons as an example to show how do those buttons move in the flex box. Today, I learned navs can also move in a flex box. I would love to share my study note here. Firstly, I copy the Bootstrap 4 starter template on the editor, and also put the base nav code in the body. In order to show how navs move in the flex, I add a border outside the navs. The result shows a base nav bar inside a box. Move in Row Then, I want to add some space between each nav items, so I set "justify-content-around" value in the <ul>. The result: You can also move the items to the right (justify-content-end) or to the center (justify-content-center). Move Vertically If I want to show my nav bar vertically, I can just simple set "flex-column" value. The result:  Responsive Nav If I want the nav bar change from the horizontal to vertical as the page cha...

Compare with Bootstrap 3, Bootstrap 4 has added many new functions and made some changes. Flex box is one of the new functions. According to the course instructor, flex box includes a bunch of CSSA properties to move things around the position elements inside of a container instead of a page. Basically, flex box is a model for positioning content inside a box. Let's see some flex box examples. Bootstrap 4 has a new starter template which includes the latest design and development standards. Therefore, I just copy the HTML template on my code editor. Then, I create two buttons inside a container and add a border to the container. This will help you to see how those buttons move inside the box. Justify-Content (Move in Row) To make two buttons move to the left in the flex box, we need to add a property value: "d-flex" . It means "display flex", and it will help to set the directions. For the default value, the items are on the left. The ...