Activity S19
parent
c30d36604d
commit
974a45f4f4
@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 608 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 679 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 598 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 627 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 627 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 698 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 367 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 625 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,205 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Montserrat', sans-serif !important;
|
||||
}
|
||||
:root {
|
||||
--bg-primary: #765C3D;
|
||||
|
||||
--bg-button: #B59066;
|
||||
|
||||
--box-shadow: 0px 4px 23px 0px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
#navbar {
|
||||
background: var(--bg-primary) !important;
|
||||
}
|
||||
.navbar-brand, #navbarNav .nav-collapse, ul, li, a {
|
||||
color: #FFF !important;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
#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;
|
||||
}
|
||||
.container-info {
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
margin-left: 16.44rem;
|
||||
margin-top: 9.63rem;
|
||||
width: 500px;
|
||||
}
|
||||
.container-info h1 {
|
||||
color: #FFF;
|
||||
font-family: Montserrat;
|
||||
font-size: 4rem;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 4.5rem; /* 112.5% */
|
||||
letter-spacing: -0.08rem;
|
||||
}
|
||||
.container-info p {
|
||||
color: #FFF;
|
||||
font-family: Montserrat;
|
||||
font-size: 1.5rem !important;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.875rem; /* 125% */
|
||||
}
|
||||
.btn-1, .btn-end{
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 62.4375rem;
|
||||
background-color: var(--bg-button) !important;
|
||||
color: var(--button-text-button-primary-text, #FFF);
|
||||
text-align: center;
|
||||
font-family: Montserrat;
|
||||
font-size: 1.25rem;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 1.5rem !important;/* 120% */
|
||||
border:none;
|
||||
}
|
||||
.btn-end {
|
||||
display: flex !important;
|
||||
float: right;
|
||||
}
|
||||
#gallery {
|
||||
padding: 10rem 0 7rem 0;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.footer, .footer p {
|
||||
background: #B59066;
|
||||
margin: 0 !important;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.image-container {
|
||||
background:
|
||||
|
||||
linear-gradient(
|
||||
|
||||
rgba(0, 0, 0, 0.61),
|
||||
rgba(0, 0, 0, 0.61)
|
||||
|
||||
),
|
||||
url("images/footer-bg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
;
|
||||
min-height: 51rem;
|
||||
min-width: 50vw;
|
||||
}
|
||||
.contact-container {
|
||||
width: 100vw;
|
||||
background-color: hsla(32, 100%, 95%, 1);
|
||||
}
|
||||
.container-footer {
|
||||
margin-top: 10rem !important;
|
||||
margin-left: 7.81rem !important;
|
||||
}
|
||||
.form-group {
|
||||
color: hsla(32, 32%, 35%, 1);
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
/* Landing */
|
||||
#landing {
|
||||
min-width: 0 !important;
|
||||
}
|
||||
.container-info {
|
||||
margin-left: 2rem;
|
||||
width: 400px;
|
||||
}
|
||||
.container-info h1{
|
||||
font-size: 4rem;
|
||||
}
|
||||
.container-info-1 {
|
||||
margin-left: 1rem;
|
||||
width: 400px;
|
||||
display: none;
|
||||
}
|
||||
/* Carousel */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,193 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Title</title>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<!-- 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">
|
||||
<!-- Font -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<!-- External CSS -->
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<div class="container-fluid mx-5">
|
||||
<a class="navbar-brand" href="#"><img src="images/logo.png" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
|
||||
<ul class="navbar-nav" id="navbar-col">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Gallery</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<section id="landing">
|
||||
<div class="landing-container row">
|
||||
<div class="container-info">
|
||||
<h1 class="">Replace This With Your Title</h1>
|
||||
<p class="mt-4">You can use this section to narrate a short description for the title or page.</p>
|
||||
<button class="btn-1 mt-5">Get Started</button>
|
||||
</div>
|
||||
</section>
|
||||
<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>
|
||||
|
||||
<section id="contact">
|
||||
<div class="contact-container row">
|
||||
<div class="image-container d-none d-lg-block">
|
||||
</div>
|
||||
<div class="contact-container-2">
|
||||
<form id="form">
|
||||
<div class="container-footer container col-md-6 col-lg-10">
|
||||
<h1 class="h1-cus">CONTACT US</h1>
|
||||
<p class="p1-cus">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="exampleFormControlInput1">Name</label>
|
||||
<input type="name" class="form-control" id="exampleFormControlInput1" placeholder="Name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleFormControlInput1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="exampleFormControlTextarea1">Message</label>
|
||||
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn-end mt-5">Get Started</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="footer">
|
||||
<p class="text-white text-center">2023 | All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Optional JavaScript -->
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<!-- Add Bootstrap JavaScript and jQuery -->
|
||||
<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/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
@ -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>S19 Activity</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,102 @@
|
||||
console.log("Hello World");
|
||||
|
||||
/*
|
||||
1. Create the following variables to store to the following user details:
|
||||
|
||||
Variable Name - Value Data Type:
|
||||
|
||||
firstName - String
|
||||
lastName - String
|
||||
age - Number
|
||||
hobbies - Array
|
||||
workAddress - Object
|
||||
|
||||
The hobbies array should contain at least 3 hobbies as Strings.
|
||||
|
||||
The work address object should contain the following key-value pairs:
|
||||
|
||||
houseNumber: <value>
|
||||
street: <value>
|
||||
city: <value>
|
||||
state: <value>
|
||||
|
||||
Log the values of each variable to follow/mimic the output.
|
||||
|
||||
Note: strictly follow the variable names.
|
||||
*/
|
||||
|
||||
//Add your variables and console log for objective 1 here:
|
||||
// Activity - Part 1
|
||||
let firstName = 'First Name: John';
|
||||
let lastName = 'Last Name: Smith';
|
||||
let age = 30;
|
||||
let myHobbies = 'Hobbies:'
|
||||
let hobbies = ['Biking','Mountain Climbing', 'Swimming']
|
||||
let myWorkaddress = 'Work Address:'
|
||||
let workAddress = {
|
||||
houseNumber: 32,
|
||||
street: 'Washington',
|
||||
city: 'Lincoln',
|
||||
state: 'Nebraska'
|
||||
}
|
||||
console.log(firstName,'\n',lastName,'\n',age,'\n',myHobbies,'\n',hobbies,'\n',myWorkaddress,'\n',workAddress);
|
||||
|
||||
|
||||
|
||||
// Activity - Part 2
|
||||
/*
|
||||
2. Debugging Practice - Identify and implement the best practices of creating and using variables
|
||||
by avoiding errors and debugging the following codes:
|
||||
|
||||
-Log the values of each variable to follow/mimic the output.
|
||||
|
||||
Note: Do not change any variable and function names. All variables and functions to be checked are listed in the exports.
|
||||
*/
|
||||
|
||||
let fullName = "Steve Rogers";
|
||||
console.log("My full name is: " + fullName);
|
||||
|
||||
let currentAge = 40;
|
||||
console.log("My current age is: " + currentAge);
|
||||
|
||||
let friends = ["Tony"," Bruce"," Thor"," Natasha"," Clint"," Nick"];
|
||||
console.log("My Friends are: ")
|
||||
console.log(friends);
|
||||
|
||||
let profile = {
|
||||
|
||||
userName : "captain_america",
|
||||
fullName : "Steve Rogers",
|
||||
age: 40,
|
||||
isActive: false
|
||||
|
||||
}
|
||||
console.log("My Full Profile: ")
|
||||
console.log(profile);
|
||||
|
||||
let fullName2 = "Bucky Barnes";
|
||||
console.log("My bestfriend is: " + fullName2);
|
||||
|
||||
const lastLocation = "Arctic Ocean";
|
||||
console.log("I was found frozen in: " + lastLocation);
|
||||
|
||||
|
||||
//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 = {
|
||||
firstName: typeof firstName !== 'undefined' ? firstName : null,
|
||||
lastName: typeof lastName !== 'undefined' ? lastName : null,
|
||||
age: typeof age !== 'undefined' ? age : null,
|
||||
hobbies: typeof hobbies !== 'undefined' ? hobbies : null,
|
||||
workAddress: typeof workAddress !== 'undefined' ? workAddress : null,
|
||||
fullName: typeof fullName !== 'undefined' ? fullName : null,
|
||||
currentAge: typeof currentAge !== 'undefined' ? currentAge : null,
|
||||
friends: typeof friends !== 'undefined' ? friends : null,
|
||||
profile: typeof profile !== 'undefined' ? profile : null,
|
||||
fullName2: typeof fullName2 !== 'undefined' ? fullName2 : null,
|
||||
lastLocation: typeof lastLocation !== 'undefined' ? lastLocation : null
|
||||
}
|
||||
} catch(err){
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Javascript - Syntax, Variables & Simple Operations</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
alert("Hello World");
|
||||
</script>
|
||||
<!-- Linking of HTML & JS -->
|
||||
<script src="./index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,174 @@
|
||||
console.log("Hello B322");
|
||||
// Console.log() ise useful for printing values of variables or results into the browser's console.
|
||||
|
||||
let myVariable;
|
||||
|
||||
myVariable = 'Hello';
|
||||
// Trying to print out a value of a variable that has not been declared will return of "not defined"
|
||||
console.log(myVariable);
|
||||
|
||||
// The "not defined" error in the console refers to the variable not being created /defined, whereas in the previous example the code refers to the "value" of the variable as not defiend.
|
||||
let hello;
|
||||
hello = "Hello";
|
||||
console.log(hello);
|
||||
|
||||
// Naming Variables
|
||||
|
||||
// let FirstName = "Michael"; - bad variable name
|
||||
// let firstName = "Michael"; - good variable name
|
||||
// let product_description = "lorem ipsum" good variable name
|
||||
|
||||
// Declaring and initializing variables
|
||||
let productName = 'desktop computer';
|
||||
console.log (productName);
|
||||
|
||||
let seatsInTheatres = '10';
|
||||
console.log()
|
||||
|
||||
// let variable cannot be re-declared within its scope.
|
||||
// let friend = 'kate';
|
||||
// let friend = 'jane'; - would cause an error.
|
||||
// console.log(friend);
|
||||
|
||||
let friend = 'Kate'; // Straight declaration
|
||||
friend = 'Jane';
|
||||
console.log(friend);
|
||||
|
||||
let supplier; // Variable is a container
|
||||
// Initialization is done after the variable has been declared.
|
||||
supplier = 'John Smith Tradings';
|
||||
console.log(supplier);
|
||||
|
||||
const interest = 3.539;
|
||||
console.log(interest);
|
||||
|
||||
// You can't declare a const variable using initialization
|
||||
// const pi;
|
||||
// pi = 3.1416;
|
||||
// console.log(pi);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// SECTION Data types
|
||||
|
||||
// Strings
|
||||
let country = 'Philippines';
|
||||
let province = "Metro Manila";
|
||||
|
||||
// Concatenating strings
|
||||
// Multiple string values can be combined to create a single string using + symbol.
|
||||
let fullAddress = province + ',' + country; // use '' for as a string
|
||||
console.log(fullAddress);
|
||||
|
||||
let greeting = 'I live in the ' + country;
|
||||
console.log(greeting);
|
||||
|
||||
let string = "Hello";
|
||||
let number = 42;
|
||||
let result = string + " " + number;
|
||||
console.log(result);
|
||||
|
||||
// Escape character "\"
|
||||
let mailAddress = 'Metro Manila\n\nPhilippines';
|
||||
console.log(mailAddress);
|
||||
|
||||
let message = "John's employees went home early";
|
||||
console.log(message);
|
||||
|
||||
message = "John's employees went home early"; // you can also use 'John\'s'
|
||||
console.log(message);
|
||||
|
||||
// Numbers
|
||||
// Integers / Whole Numbers
|
||||
let headcount = 26;
|
||||
console.log(headcount);
|
||||
|
||||
|
||||
// Decimal Numbers/Fractions
|
||||
let grade = 98.7;
|
||||
console.log(grade);
|
||||
|
||||
// Exponential Notation
|
||||
let planetDistance = 2e10;
|
||||
console.log(planetDistance);
|
||||
|
||||
console.log("John's grade last quarter is " + grade);
|
||||
|
||||
// Boolean
|
||||
// Boolean values are normally used to store values relating to the state of certain things, this would be useful for logics.
|
||||
|
||||
let isMarried = false;
|
||||
let inGoodConduct = true;
|
||||
console.log("isMarried: " + isMarried);
|
||||
console.log("isGoodConduct: " + inGoodConduct);
|
||||
|
||||
// Arrays
|
||||
/// Arrays are a special kind of data type that's used to store multiple values
|
||||
// Arrays can store different data types but is normally used to store similar data types.
|
||||
|
||||
let grades = [98.7, 92.1, 90.2, 94.6];
|
||||
console.log(grades);
|
||||
|
||||
// Different data types
|
||||
// Storing different data types inside an array is not recommended because it nwill not make sense in the context of programming
|
||||
let details = ["John", "Smith", 32, true];
|
||||
console.log(details);
|
||||
|
||||
// Objects
|
||||
// Objects are another special kind o fdata type that's used to mimic real world objects/items.
|
||||
|
||||
let person = {
|
||||
fullName: 'Juan Dela Cruz',
|
||||
age: 35,
|
||||
isMarried: false,
|
||||
contact: ["+63917 123 4567", "8123 4567"],
|
||||
address: {
|
||||
houseNumber: '345',
|
||||
city: 'Manila'
|
||||
}
|
||||
};
|
||||
|
||||
console.log(person);
|
||||
|
||||
// typeof
|
||||
|
||||
console.log(typeof person);
|
||||
|
||||
let myGrades = {
|
||||
firstGrading: 98.7,
|
||||
secondGrading: 92.1,
|
||||
thirdGrading: 90.2,
|
||||
fourthGrading: 94.6
|
||||
}
|
||||
|
||||
console.log(myGrades);
|
||||
|
||||
// Null
|
||||
// It is used to intentionally express the absence of a value in variable declaration/initialization
|
||||
// Null simply means that a data type was assigned to a variable but it does not hold any value/amount or is nullified
|
||||
|
||||
let spouse = null;
|
||||
console.log(spouse);
|
||||
// Using null compared to 0 value and an empty string is much better for readability purposes
|
||||
// Null is also considered as a data type of it's own compared to 0 which is a data type of a number and a single quotes which are a data type of a string.
|
||||
let myNumber = 0;
|
||||
console.log(myNumber);
|
||||
let myString = '';
|
||||
console.log(myString);
|
||||
|
||||
// Undefined
|
||||
let fullName;
|
||||
console.log(fullName);
|
||||
|
||||
// Undefiend vs Null
|
||||
// One clear difference between undefined and null is that for undefined, a variable was created but was not provided a value but, null means that a variable was created and was assigned a value that does not hold any value/ amount.
|
||||
|
||||
// certain processes in programming would often return a "null" value when certain tasks results to nothing.
|
||||
let varA = null;
|
||||
console.log(varA);
|
||||
|
||||
let varB;
|
||||
console.log(varB);
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 313 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 557 KiB |
@ -0,0 +1,99 @@
|
||||
/*CSS Reset*/
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*logo section*/
|
||||
#logo {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal !important;
|
||||
font-weight: 900 !important;
|
||||
font-size: 24px !important;
|
||||
line-height: 24px;
|
||||
/*identical to box height, or 100%*/
|
||||
color: #003363;
|
||||
}
|
||||
|
||||
/*navlinks*/
|
||||
nav a {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
|
||||
/*!important is used to prioritize a css rule*/
|
||||
color: #004E84 !important;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 68px;
|
||||
line-height: 84px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
#base {
|
||||
text-align: center;
|
||||
padding: 8px 24px;
|
||||
background: #12C6FF;
|
||||
border-radius: 2px;
|
||||
font-family: 'Monsterrat';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
#landing {
|
||||
|
||||
background:
|
||||
|
||||
linear-gradient(
|
||||
|
||||
rgba(0, 34, 65, 0.61),
|
||||
rgba(0, 34, 65, 0.61)
|
||||
|
||||
),
|
||||
url("./images/landing.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
;
|
||||
}
|
||||
|
||||
#about {
|
||||
background: #003363;
|
||||
}
|
||||
|
||||
#text-title {
|
||||
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
|
||||
color: #12C6FF;
|
||||
}
|
||||
|
||||
#about p {
|
||||
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
|
||||
color: #FFFFFF;
|
||||
}
|
||||
@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>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">
|
||||
|
||||
<!-- google font -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- external css -->
|
||||
<link rel="stylesheet" type="text/css" href="./index.css">
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--navbar-->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#" id="logo">LOGO</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" href="#">About Me</a>
|
||||
<a class="nav-link" href="#">My Works</a>
|
||||
<a class="nav-link" 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-center">
|
||||
<h1 id="title">Seeing the world through my lens</h1>
|
||||
<a href="" id="base" class="mt-5 d-inline-block text-decoration-none">View My Work</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- about -->
|
||||
<div class="container-fluid py-md-5" id="about">
|
||||
<div class="row justify-content-center py-md-5 my-md-5">
|
||||
<div class="col-md-3 my-5 my-md-0">
|
||||
<!-- image -->
|
||||
<img src="./images/about.png" class ="img-fluid">
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<!-- text -->
|
||||
<h4 id="text-title" class="mt-md-5">
|
||||
Hi! I'm John Doe.
|
||||
</h4>
|
||||
<p>
|
||||
I am a passionate photographer who loves capturing life's special moments. From candid shots of everyday life to capturing the beauty of nature, I strive to create beautiful images that will last a lifetime. I am always looking for new opportunities to create unique and inspiring photos that are sure to leave a lasting impression.
|
||||
</p>
|
||||
<p>
|
||||
I have been a photographer for many years and have had the privilege of working with some of the most talented professionals in the industry. I have had the opportunity to travel to some of the most beautiful places in the world and capture the essence of each location. I am constantly learning new techniques and expanding my knowledge of photography to ensure my images are of the highest quality. I am excited to share my passion with others and create memories that will last a lifetime.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 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>
|
||||
@ -1 +1 @@
|
||||
Subproject commit 90e19e664877e7a1d4c8278fbc5119c599a22b85
|
||||
Subproject commit 0dbd965d0dab72e39bb9e948a9cbeba21147858f
|
||||
Loading…
Reference in New Issue