Activity S20

master
Ron Reciproco 1 year ago
parent 40833e62b4
commit 1f50fd942a

@ -1,3 +1,3 @@
{ {
"liveServer.settings.port": 5501 "liveServer.settings.port": 5502
} }

@ -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>

@ -10,3 +10,6 @@
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>
</html> </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,116 @@
console.log("Hello World");
/*
Note: strictly follow the variable names.
Note: Do not change any variable and function names. All variables and functions to be checked are listed in the exports.
1. Debug the following code to return the correct value and mimic the output.
*/
let num1 = 25;
let num2 = 5;
console.log("The result of num1 + num2 should be 30.");
console.log("Actual Result:");
console.log(num1 + num2);
let num3 = 156;
let num4 = 44;
console.log("The result of num3 + num4 should be 200.");
console.log("Actual Result:");
console.log(num3 + num4);
let num5 = 17;
let num6 = 10;
console.log("The result of num5 - num6 should be 7.");
console.log("Actual Result:");
console.log(num5-num6);
/*
2. Given the values below, calculate the total number of minutes in a year and save the result in a variable called resultMinutes.
*/
let minutesHour = 60;
let hoursDay = 24;
let daysWeek = 7;
let weeksMonth = 4;
let monthsYear = 12;
let daysYear = 365;
let resultMinutes = minutesHour * hoursDay * daysYear;
console.log("There are " + resultMinutes + " minutes in a year.");
/*
3. Given the values below, calculate and convert the temperature from celsius to fahrenheit and save the result in a variable called resultFahrenheit.
*/
let tempCelsius = 132;
let farhrenheit = 32;
resultFahrenheit = tempCelsius * (9/5) + farhrenheit;
console.log(tempCelsius + " degrees Celsius when converted to Farhrenheit is " + resultFahrenheit)
// (132°C × 9/5) + 32 = 269.6°F
/*
4a. Given the values below, identify if the values of the following variable are divisible by 8.
-Use a modulo operator to identify the divisibility of the number to 8.
-Save the result of the operation in a variable called remainder1.
-Log the value of the remainder in the console.
-Using the strict equality operator, check if the remainder is equal to 0.
-Save the returned value of the comparison in a variable called isDivisibleBy8
-Log a message in the console if num7 is divisible by 8.
-Log the value of isDivisibleBy8 in the console.
*/
let num7 = 165;
let remainder1 = num7 % 8;
console.log("The remainder of " + num7 + " divided by 8 is: " + remainder1);
let isDivisibleBy8 = remainder1 === 0;
console.log("Is num8 divisible by 8?");
console.log(isDivisibleBy8);
//Log the value of the remainder in the console.
//Log the value of isDivisibleBy8 in the console.
/*
4b. Given the values below, identify if the values of the following variable are divisible by 4.
-Use a modulo operator to identify the divisibility of the number to 4.
-Save the result of the operation in a variable called remainder2.
-Log the value of the remainder in the console.
-Using the strict equality operator, check if the remainder is equal to 0.
-Save the returned value of the comparison in a variable called isDivisibleBy4
-Log a message in the console if num8 is divisible by 4.
-Log the value of isDivisibleBy4 in the console.
*/
let num8 = 348;
let remainder2 = num8%4;
console.log("The remainder of " + num8 + " divided by 4 is: " + remainder2);
let isDivisibleBy4 = remainder2 === 0;
console.log("Is num8 divisible by 4?");
console.log(isDivisibleBy4);
//Log the value of the remainder in the console.
//Log the value of isDivisibleBy4 in the console.
//Do not modify
//For exporting to test.js
//Note: Do not change any variable and function names. All variables and functions to be checked are listed in the exports.
try{
module.exports = {
num1: typeof num1 !== 'undefined' ? num1 : null,
num2: typeof num2 !== 'undefined' ? num2 : null,
num3: typeof num3 !== 'undefined' ? num3 : null,
num4: typeof num4 !== 'undefined' ? num4 : null,
num5: typeof num5 !== 'undefined' ? num5 : null,
num6: typeof num6 !== 'undefined' ? num6 : null,
resultMinutes: typeof resultMinutes !== 'undefined' ? resultMinutes : null,
resultFahrenheit: typeof resultFahrenheit !== 'undefined' ? resultFahrenheit : null,
remainder1: typeof remainder1 !== 'undefined' ? remainder1 : null,
remainder2: typeof remainder2 !== 'undefined' ? remainder2 : null,
isDivisibleBy4: typeof isDivisibleBy4 !== 'undefined' ? isDivisibleBy4 : null,
isDivisibleBy8: typeof isDivisibleBy8 !== 'undefined' ? isDivisibleBy8 : null
}
} catch(err){
}

@ -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…
Cancel
Save