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