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