Activity S20
parent
40833e62b4
commit
1f50fd942a
@ -1,3 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
"liveServer.settings.port": 5502
|
||||
}
|
||||
Binary file not shown.
@ -0,0 +1,229 @@
|
||||
/*CSS Reset*/
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#nav-b {
|
||||
background: #765C3D;
|
||||
}
|
||||
|
||||
/*navlinks*/
|
||||
nav a {
|
||||
text-align: center;
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: normal;
|
||||
|
||||
/*!important is used to prioritize a css rule*/
|
||||
color: #F2D2AE !important;
|
||||
}
|
||||
|
||||
/* lannding page*/
|
||||
|
||||
#landing {
|
||||
background:
|
||||
|
||||
linear-gradient(
|
||||
|
||||
rgba(0, 0, 0, 0.61),
|
||||
rgba(0, 0, 0, 0.61)
|
||||
|
||||
),
|
||||
url("images/background.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
;
|
||||
min-height: 51rem;
|
||||
min-width: 100vw;
|
||||
}
|
||||
|
||||
.title{
|
||||
|
||||
color: #FFF;
|
||||
font-family: Montserrat;
|
||||
font-size: 64px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 72px; /* 112.5% */
|
||||
letter-spacing: -1.28px;
|
||||
}
|
||||
|
||||
#landing p{
|
||||
color: #FFF;
|
||||
font-family: Montserrat;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.wrap-landing{
|
||||
display: flex;
|
||||
width: 493px;
|
||||
height: 124px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.lp-layout{
|
||||
width: 413px;
|
||||
height: 124px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.wrap-size{
|
||||
width: 493px;
|
||||
height: 290px;
|
||||
|
||||
}
|
||||
|
||||
.p-wrap-size{
|
||||
width: 413px;
|
||||
height: 124px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.button-1{
|
||||
display: flex;
|
||||
padding: 12px 32px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
background: #B59066;
|
||||
}
|
||||
|
||||
#but-text {
|
||||
height: 48px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
#but-text a {
|
||||
color: #FFF;
|
||||
font-family: Montserrat;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button-1:hover{
|
||||
background: blue;
|
||||
}
|
||||
/*end landing*/
|
||||
|
||||
/* Carousel */
|
||||
.h1-cus {
|
||||
color: #765C3D;
|
||||
font-family: Montserrat;
|
||||
font-size: 2.5rem;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
}
|
||||
.p1-cus {
|
||||
color: #765C3D;
|
||||
font-family: Montserrat;
|
||||
font-size: 1.5rem;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
padding: 10rem 0 7rem 0;
|
||||
}
|
||||
.container-info {
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
margin-left: 16.44rem;
|
||||
margin-top: 9.63rem;
|
||||
width: 500px;
|
||||
}
|
||||
.container-carousel-1 {
|
||||
width: 77.8125rem;
|
||||
height: 47.75rem;
|
||||
flex-shrink: 0;
|
||||
background: #FFF;
|
||||
box-shadow: 0px 4px 23px 0px rgba(0, 0, 0, 0.25);
|
||||
padding: 0 90px;
|
||||
}
|
||||
.container-info-1 {
|
||||
margin-top: 4.6rem;
|
||||
margin-left: 1rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.carousel-container {
|
||||
|
||||
height: 25.0625rem;
|
||||
flex-shrink: 0;
|
||||
margin: 6.81rem auto;
|
||||
}
|
||||
#carousel-1 {
|
||||
margin-bottom: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.carousel-inner, .carousel-item, #carouselExampleControls {
|
||||
width: 400px;
|
||||
}
|
||||
.container-carousel-1 {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
border: transparent;
|
||||
box-shadow: none;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
.carousel-container {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
.container-carousel-1 .container {
|
||||
margin: auto !important;
|
||||
padding: auto !important;
|
||||
}
|
||||
.container-footer {
|
||||
margin-top: 5rem !important;
|
||||
margin-left: 1rem !important;
|
||||
}
|
||||
.contact-container-2 {
|
||||
width: 90vw;
|
||||
margin: 5rem auto;
|
||||
}
|
||||
.container-carousel-1 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.landing-container {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
/* Carousel End*/
|
||||
|
||||
/*Contact Us - CSS*/
|
||||
form ul li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#build-img {
|
||||
width: 808px;
|
||||
height: 1088px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#cnt-us {
|
||||
display: flex;
|
||||
width: 501.751px;
|
||||
height: 49px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 0;
|
||||
|
||||
font-family: "Montserrat";
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
font-weight: 600
|
||||
line-height: normal;
|
||||
color: #765C3D;
|
||||
}
|
||||
@ -0,0 +1,199 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Activity S18 Wireframes, Mockup and Prototypes</title>
|
||||
|
||||
<!-- bootstrap css -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||
|
||||
<!-- external css -->
|
||||
<link rel="stylesheet" type="text/css" href="./index.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--navbar-->
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container-fluid py-2" id="nav-b">
|
||||
<a class="navbar-brand" href="#" id="logo">
|
||||
<img src="./images/Logo.png" class=" px-5 img-fluid">
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav ml-auto">
|
||||
<a class="nav-link pd-5" href="#">HOME</a>
|
||||
<a class="nav-link pd-3" href="#">GALLERY</a>
|
||||
<a class="nav-link pd-3" href="#">CONTACT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- landing -->
|
||||
<div class="py-5 container-fluid" id="landing">
|
||||
<div class="row my-5 py-5 justify-content-center">
|
||||
<div class="col-md-8 pt-md-5 text-left ">
|
||||
<h1 class="title">Replace This </h1>
|
||||
<h1 class="title">With Your Title</h1>
|
||||
|
||||
<div class="col-md-7 text-left p-wrap-size">
|
||||
<p class=" text-left">You can use this section to narrate a short description for the title or page.</p>
|
||||
<div id="but-text">
|
||||
<a href="" class="button-1">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end landing -->
|
||||
|
||||
|
||||
<!-- Gallery -->
|
||||
<section id="gallery" class="text-center mt-cus">
|
||||
<div>
|
||||
<h1 class="h1-cus">GALLERY</h1>
|
||||
<p class="col col-md-8 col-lg-7 mx-auto p1-cus mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Carousel -->
|
||||
<section id="carousel-1">
|
||||
<div class="container-fluid">
|
||||
<div class="container-carousel-1 container">
|
||||
<div class="container-info-1 pt-lg-5">
|
||||
<h1 class="h1-cus">ALBUM 1</h1>
|
||||
<p class="p1-cus">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
|
||||
</div>
|
||||
<div class="carousel-container container-fluid">
|
||||
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="images/album1-1.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/album1-2.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/album1-3.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="carousel-1">
|
||||
<div class="container-fluid">
|
||||
<div class="container-carousel-1 container">
|
||||
<div class="container-info-1 pt-lg-5">
|
||||
<h1 class="h1-cus">ALBUM 2</h1>
|
||||
<p class="p1-cus">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
|
||||
</div>
|
||||
<div class="carousel-container">
|
||||
<div id="carouselExampleControls1" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="images/album2-1.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/album2-2.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/album2-3.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls1" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls1" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="carousel-1">
|
||||
<div class="container-fluid">
|
||||
<div class="container-carousel-1 container">
|
||||
<div class="container-info-1 pt-lg-5">
|
||||
<h1 class="h1-cus">ALBUM 3</h1>
|
||||
<p class="p1-cus">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
|
||||
</div>
|
||||
<div class="carousel-container">
|
||||
<div id="carouselExampleControls2" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="images/album3-1.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/album3-2.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/album3-3.png" class="d-block w-100 img-fluid" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls2" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls2" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Contact US -->
|
||||
<div class="container-fluid" id="contact-us">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<img src="./images/building.png" id="build-img">
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<h1 id="cnt-us">CONTACT US</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
|
||||
|
||||
<!-- FORM DETAILS -->
|
||||
<form action="./index.html">
|
||||
<ul>
|
||||
<li><label for="nameInput">Name</label></li>
|
||||
<li><input type="text" id="nameInput"></li>
|
||||
|
||||
<li><label for="emailInput">Email Address</label></li>
|
||||
<li><input type="text" id="emailInput"></li>
|
||||
|
||||
<li><label for="msgInput">Message</label></li>
|
||||
<li><textarea rows="4" id="msgInput"></textarea></li>
|
||||
|
||||
<li><button type="submit" id="submit-btn">Submit</button></li>
|
||||
</ul>
|
||||
</form>
|
||||
<!-- End of Form -->
|
||||
|
||||
|
||||
<!-- bootstrap js -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="./index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,231 @@
|
||||
console.log("Hello B322!");
|
||||
|
||||
// [SECTION] Arithmetic Operators
|
||||
|
||||
let x = 1397;
|
||||
let y = 7831;
|
||||
|
||||
let sum = x + y;
|
||||
console.log("Result of addition operator: " + sum);
|
||||
|
||||
let difference = x - y;
|
||||
console.log("Result of subtraction operator: " + difference);
|
||||
|
||||
let product = x * y;
|
||||
console.log("Result of multiplication operator: " + product);
|
||||
|
||||
let quotient = x / y;
|
||||
console.log("Result of division operator: " + quotient);
|
||||
|
||||
let remainder = y % x;
|
||||
console.log("Result of modulo operator: " + remainder);
|
||||
|
||||
// [SECTION] Assignment Operators
|
||||
|
||||
// Basic Assignment Operator (=)
|
||||
// The assignment operator assigns the value of the **right** operand to a variable.
|
||||
let assignmentNumber = 8
|
||||
|
||||
// Addition Assignment Operator (+=)
|
||||
// The addition assignment operator adds the value of the right operand to a variable and assigns the result to the variable.
|
||||
|
||||
assignmentNumber = assignmentNumber + 2;
|
||||
console.log("Result of addition assignment operators: " + assignmentNumber);
|
||||
|
||||
assignmentNumber += 2;
|
||||
console.log("Result of addition assignment operator: " + assignmentNumber);
|
||||
|
||||
// Subtraction/Multiplication/Division Assignment Operator (-=,*=,/=);
|
||||
|
||||
assignmentNumber -= 2;
|
||||
console.log("Result of subtraction assignment operator: " + assignmentNumber);
|
||||
|
||||
assignmentNumber *= 2;
|
||||
console.log("Result of multiplication assignment operator: " + assignmentNumber);
|
||||
|
||||
assignmentNumber /= 2;
|
||||
console.log("Result of division assignment operator: " + assignmentNumber);
|
||||
|
||||
|
||||
// Multiple Operators
|
||||
|
||||
let mdas = 1 + 2 - 3 * 4 / 5;
|
||||
console.log("Result of mdas operation: " + mdas);
|
||||
|
||||
/*
|
||||
1. 3 * 4 = 12
|
||||
2. 12 / 5 = 2.4
|
||||
3. 1 + 2 = 3
|
||||
4. 3 = 2.4 = 0.6
|
||||
*/
|
||||
|
||||
// pemdas
|
||||
let pemdas = 1 + (2 - 3) * (4 / 5);
|
||||
console.log("Result of pemdas operation: " + pemdas);
|
||||
|
||||
// The operations were done in the following order
|
||||
/*
|
||||
1. 4/5 = -0.8
|
||||
2. 2-3 = -1
|
||||
3. 1 + -1 = 0
|
||||
4. 0 * 0.8 = 0
|
||||
*/
|
||||
|
||||
// Increment and Decrement
|
||||
// Operators that add or subtract values by 1 and reassigns the value of the variable where it was added to.
|
||||
let z = 1;
|
||||
// The value of "z" is added by a value of one before returning the value and storing it in the variable "increment"
|
||||
let increment = ++z;
|
||||
console.log("Result of pre-increment: " + increment);
|
||||
// The value of "z" was also increased even though we didn't implicitly specify any value reassignment.
|
||||
console.log("Result of pre-increment: " + z);
|
||||
|
||||
|
||||
// The value of "z" is returned and stored in the variable "increment" then the value of "z" is increased by one increment
|
||||
increment = z++;
|
||||
// The value of "z" is at 2 before it was incremented
|
||||
console.log ("Result of post-increment: " + increment);
|
||||
// The value of "z" was increased again reassigning the value to 3
|
||||
console.log("Result of post-increment: " + z);
|
||||
|
||||
let decrement = --z;
|
||||
|
||||
console.log("Result of pre-decrement: " + decrement);
|
||||
|
||||
console.log("Result of pre-decrement: " + z);
|
||||
|
||||
decrement = z--;
|
||||
|
||||
console.log("Result of post-decrement: " + decrement);
|
||||
|
||||
console.log("Result of post-decrement: " + z);
|
||||
|
||||
|
||||
// Coercion
|
||||
// Type coercion is the automatic or implicit conversion of values from one data type to another
|
||||
// This happens when operations are performed on different data types that would normally not be possible and yield irregular results
|
||||
// Values are automatically converted from one data type to another in order to resolve operations
|
||||
|
||||
let numA = '10';
|
||||
let numB = 12;
|
||||
|
||||
// Adding/concatenating a string and a number will result in a string
|
||||
// This can be proven in the console by looking at the color of the text displayed
|
||||
// Black text means that the output returned is a string data type.
|
||||
|
||||
let coercion = numA + numB;
|
||||
console.log(coercion);
|
||||
console.log(typeof coercion);
|
||||
|
||||
|
||||
let numC = 16;
|
||||
let numD = 14;
|
||||
|
||||
let nonCoercion = numC + numD;
|
||||
console.log(nonCoercion);
|
||||
console.log(typeof nonCoercion);
|
||||
|
||||
let numE = true + 1;
|
||||
console.log(numE);
|
||||
|
||||
let numF = false + 1;
|
||||
console.log(numF);
|
||||
console.log(typeof numF);
|
||||
|
||||
// [SECTION] Comparison Operators
|
||||
|
||||
// Equality Operator (==)
|
||||
// - checks whether the operands are equal/have the same content
|
||||
// - it returns a boolean value
|
||||
|
||||
let juan = 'juan';
|
||||
|
||||
console.log(1 == 1);
|
||||
console.log(1 == 2);
|
||||
console.log(1 == '1');
|
||||
console.log('juan' == 'juan');
|
||||
console.log('juan' == juan);
|
||||
|
||||
// Inequality Operator (!=)
|
||||
// -checks wheter the operands are not equal/have different content
|
||||
|
||||
console.log(1 != 1);
|
||||
console.log(1 != 2);
|
||||
console.log(1 != '1');
|
||||
console.log('juan' != 'juan');
|
||||
console.log('juan' != juan);
|
||||
|
||||
// Strict Equality Operator
|
||||
// Checks whether the operands are equal/have the same content
|
||||
// Also COMPARES the data types of 2 values.
|
||||
console.log(1 === 1);
|
||||
console.log(1 === 2);
|
||||
console.log(1 === '1');
|
||||
console.log('juan' === 'juan');
|
||||
console.log('juan' === juan);
|
||||
|
||||
// Strict Inequality Operator
|
||||
// Checks whether the operands are not equal/have the same content
|
||||
// Also COMPARES the data types of 2 values
|
||||
console.log(1 !== 1);
|
||||
console.log(1 !== 2);
|
||||
console.log(1 !== '1');
|
||||
console.log('juan' !== 'juan');
|
||||
console.log('juan' !== juan);
|
||||
|
||||
// Relational Operators
|
||||
|
||||
// Some comparison operators check whether one value is greater or less than to other value
|
||||
|
||||
let a = 50;
|
||||
let b = 65;
|
||||
|
||||
// GT or Greater Than operator ( > )
|
||||
let isGreaterThan = a > b;
|
||||
|
||||
// LT or Less Than operator ( < )
|
||||
let isLessThan = a < b;
|
||||
|
||||
// GTE or Greater Than or Equal Operator ( >= )
|
||||
let isGTorEqual = a >= b;
|
||||
|
||||
// LTE or Less Than or Equal Operator ( <= )
|
||||
let isLTorEqual = a <= b;
|
||||
|
||||
console.log(isGreaterThan);
|
||||
console.log(isLessThan);
|
||||
console.log(isGTorEqual);
|
||||
console.log(isLTorEqual);
|
||||
|
||||
let numStr = "30";
|
||||
console.log(a > numStr);
|
||||
// Coercion - forced coercion to change the string to a number.
|
||||
|
||||
console.log(b <= numStr);
|
||||
|
||||
let str = "twenty";
|
||||
console.log(b >= str);
|
||||
|
||||
// This results to NaN.
|
||||
|
||||
// Logical Operators
|
||||
|
||||
let isLegalAge = true;
|
||||
let isRegistered = false;
|
||||
|
||||
// Logical And Opertaor (&& - Double Ampersand)
|
||||
// Returns true if all operands true
|
||||
|
||||
let allRequirementsMet = isLegalAge && isRegistered;
|
||||
console.log("Result of logical AND Operator: " + allRequirementsMet);
|
||||
|
||||
|
||||
// Logical Or Operator (|| - Double Pipe)
|
||||
// Returns true if one of the operands are true
|
||||
let someRequirementsMet = isLegalAge || isRegistered;
|
||||
console.log("Result of logical OR Operator: " + someRequirementsMet);
|
||||
|
||||
// Logical Not Operator (! - Exclamation Point)
|
||||
// Returns the opposite value
|
||||
let someRequirementsNotMet = !isRegistered;
|
||||
console.log("Result of logical NOT Operator: " + someRequirementsNotMet);
|
||||
Loading…
Reference in New Issue