Skip to content

J
Javascript_assignment
Commit 2649f488 authored by vchalamalsetty's avatar vchalamalsetty
Browse files
Options

check in

parents
Hide whitespace changes
Inline Side-by-side
Showing with 553 additions and 0 deletions
.DS_Store 0 → 100644
View file @ 2649f488
File added
01/Book.js 0 → 100644
View file @ 2649f488
class Book {
constructor(title, author, numPages, publishDate, hasRead, currentPage) {
this.title = title;
this.author = author;
this.numPages = numPages;
this.publishDate = publishDate;
this.hasRead = hasRead;
this.currentPage = currentPage;
}
toggleHasRead(readStatus) {
this.hasRead = readStatus;
}
setCurrentPage(page) {
this.currentPage = page;
}
}
export default Book;
\ No newline at end of file
01/index.html 0 → 100644
View file @ 2649f488
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Challenge 1</title>
<script type="module" src="./Book.js"></script>
<script type="module" src="./script.js"></script>
</head>
<body>
</body>
</html>
\ No newline at end of file
01/script.js 0 → 100644
View file @ 2649f488
import Book from './Book.js';
const book1 = new Book (
"Harry Potter",
"JK Rowling",
650,
"January 1, 2001",
true,
545
);
const book2 = new Book (
"To Kill a Mockinbird",
"Harper Lee",
345,
"July 11, 1960",
false,
0
);
book1.toggleHasRead(false);
book1.toggleHasRead(true);
console.log("book 1: ", book1);
console.log("book 1 has been read: ", book1.hasRead);
console.log(book2);
book2.setCurrentPage(34);
console.log("book 2 current page: ", book2.currentPage);
\ No newline at end of file
02/nav.html 0 → 100644
View file @ 2649f488
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Practice: Play with event listeners</title>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<script src="script.js" defer></script>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div style="padding-left: 16px">
<h2>Top Navigation Example</h2>
<p>Some content..</p>
</div>
<main class="main-content"></main>
</body>
</html>
02/script.js 0 → 100644
View file @ 2649f488
const main = document.querySelector(".main-content");
const header = `
<nav class="nav-bar">
<ul>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">Javascript</a>
</li>
<li>
<a href="#">Angular</a>
</li>
<li>
<a href="#">React</a>
</li>
<li>
<a href="#">Java</a>
</li>
</ul>
</nav>
`;
main.innerHTML = header;
02/style.css 0 → 100644
View file @ 2649f488
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #04aa6d;
color: white;
}
04/.DS_Store 0 → 100644
View file @ 2649f488
File added
04/challengefour.js 0 → 100644
View file @ 2649f488
/**
* Challenge: Create an advanced function.
* - Loop through backpackObjectArray to create an article with the class "backpack".
* - Give the article the ID of the current backpack object.
* - Set the inner HTML of the article to the existing HTML output provided in const content.
* - Append each backpack object to the <main> element.
*/
import backpackObjectArray from "./components/data.js";
const main = document.querySelector(".maincontent");
for(var i = 0; i < backpackObjectArray.length; i++)
{
const article = document.createElement("article");
article.classList.add("backpack");
article.setAttribute("id", backpackObjectArray[i].id);
const content = `
<figure class="backpack__image">
<img src=${backpackObjectArray[i].image} alt="" />
</figure>
<h1 class="backpack__name">${backpackObjectArray[i].name}</h1>
<ul class="backpack__features">
<li class="packprop backpack__volume">Volume:<span> ${
backpackObjectArray[i].volume
}l</span></li>
<li class="packprop backpack__color">Color:<span> ${
backpackObjectArray[i].color
}</span></li>
<li class="backpack__age">Age:<span> ${backpackObjectArray[i].backpackAge()} days old</span></li>
<li class="packprop backpack__pockets">Number of pockets:<span> ${
backpackObjectArray[i].pocketNum
}</span></li>
<li class="packprop backpack__strap">Left strap length:<span> ${
backpackObjectArray[i].strapLength.left
} inches</span></li>
<li class="packprop backpack__strap">Right strap length:<span> ${
backpackObjectArray[i].strapLength.right
} inches</span></li>
<li class="feature backpack__lid">Lid status:<span> ${
backpackObjectArray[i].lidOpen ? "open" : "closed"
}</span></li>
</ul>
`;
article.innerHTML = content;
main.append(article);
}
\ No newline at end of file
04/components/Backpack.js 0 → 100644
View file @ 2649f488
// Set up the Backpack class
class Backpack {
constructor(
id,
name,
volume,
color,
pocketNum,
strapLengthL,
strapLengthR,
lidOpen,
dateAcquired,
image
) {
this.id = id;
this.name = name;
this.volume = volume;
this.color = color;
this.pocketNum = pocketNum;
this.strapLength = {
left: strapLengthL,
right: strapLengthR,
};
this.lidOpen = lidOpen;
this.dateAcquired = dateAcquired;
this.image = image;
}
toggleLid(lidStatus) {
this.lidOpen = lidStatus;
}
newStrapLength(lengthLeft, lengthRight) {
this.strapLength.left = lengthLeft;
this.strapLength.right = lengthRight;
}
backpackAge() {
let now = new Date();
let acquired = new Date(this.dateAcquired);
let elapsed = now - acquired; // elapsed time in milliseconds
let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24));
return daysSinceAcquired;
}
}
// Export the Backpack class to be used by other files
export default Backpack;
\ No newline at end of file
04/components/data.js 0 → 100644
View file @ 2649f488
// Import the Backpack class so we can make new Backpack objects.
import Backpack from "./Backpack.js";
// Create new Backpack object
const everydayPack = new Backpack(
"pack01",
"Everyday Backpack",
30,
"grey",
15,
26,
26,
false,
"December 5, 2018 15:00:00 PST",
"../../assets/images/everyday.svg"
);
// Create new Backpack object
const frogPack = new Backpack(
"pack02",
"Frog Backpack",
8,
"green",
3,
10,
10,
false,
"October 16, 2019 15:00:00 PST",
"../../assets/images/frog.svg"
);
// Add Backpack objects into an array
const backpackObjectArray = [everydayPack, frogPack];
// Export the array to be used in other files
export default backpackObjectArray;
04/index.html 0 → 100644
View file @ 2649f488
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BackpackPacker</title>
<link
href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Work+Sans:wght@100..900&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="../assets/style.css"
type="text/css"
media="all"
/>
<script type="module" src="./components/Backpack.js"></script>
<script type="module" src="./components/data.js"></script>
<script type="module" src="challengefour.js"></script>
</head>
<body>
<header class="siteheader">
<div class="site-title">BackpackPacker</div>
<div class="site-description">All backpack packing, all the time.</div>
</header>
<main class="maincontent">
<div class="page-header">
<h2 class="page-header__heading">A pack for every purpose</h2>
<p>
If you're carrying a heavy load, you can't find a better tool than a
backpack. Distributing the weight evenly across your shoulders, back,
and hips, the backpack lets you use the natural frame of your body to
literally <em>shoulder</em> the weight while your legs do the
carrying.
</p>
</div>
</main>
<footer class="sitefooter">
<p>
Demo project for JavaScript Essential Training, a LinkedIn Learning
course.
</p>
</footer>
</body>
</html>
05/.DS_Store 0 → 100644
View file @ 2649f488
File added
05/components/Backpack.js 0 → 100644
View file @ 2649f488
// Set up the Backpack class
class Backpack {
constructor(
id,
name,
volume,
color,
pocketNum,
strapLengthL,
strapLengthR,
lidOpen,
dateAcquired,
image
) {
this.id = id;
this.name = name;
this.volume = volume;
this.color = color;
this.pocketNum = pocketNum;
this.strapLength = {
left: strapLengthL,
right: strapLengthR,
};
this.lidOpen = lidOpen;
this.dateAcquired = dateAcquired;
this.image = image;
}
toggleLid(lidStatus) {
this.lidOpen = lidStatus;
}
newStrapLength(lengthLeft, lengthRight) {
this.strapLength.left = lengthLeft;
this.strapLength.right = lengthRight;
}
backpackAge() {
let now = new Date();
let acquired = new Date(this.dateAcquired);
let elapsed = now - acquired; // elapsed time in milliseconds
let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24));
return daysSinceAcquired;
}
}
// Export the Backpack class to be used by other files
export default Backpack;
\ No newline at end of file
05/components/data.js 0 → 100644
View file @ 2649f488
// Import the Backpack class so we can make new Backpack objects.
import Backpack from "./Backpack.js";
// Create new Backpack object
const everydayPack = new Backpack(
"pack01",
"Everyday Backpack",
30,
"grey",
15,
26,
26,
false,
"December 5, 2018 15:00:00 PST",
"../assets/images/everyday.svg"
);
// Create new Backpack object
const frogPack = new Backpack(
"pack02",
"Frog Backpack",
8,
"green",
3,
10,
10,
false,
"October 16, 2019 15:00:00 PST",
"../assets/images/frog.svg"
);
// Add Backpack objects into an array
const backpackObjectArray = [everydayPack, frogPack];
// Export the array to be used in other files
export default backpackObjectArray;
\ No newline at end of file
05/index.html 0 → 100644
View file @ 2649f488
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Challenge 5</title>
<script type="module" src="./components/Backpack.js"></script>
<script type="module" src="./components/data.js"></script>
<script type="module" src="./script.js"></script>
</head>
<body>
<main class="main-content"></main>
</body>
</html>
\ No newline at end of file
05/script.js 0 → 100644
View file @ 2649f488
import backpackObjectArray from "./components/data.js";
const main = document.querySelector(".main-content");
const content = backpackObjectArray.map((pack) => {
const newArticle = document.createElement("article");
newArticle.classList.add("backpack");
newArticle.setAttribute("id", "everyday");
newArticle.innerHTML =
`
<h1>${pack.name}</h1>
<ul>
<li>
Volume: ${pack.volume}
</li>
<li>
Color: ${pack.color}
</li>
<li>
Number of Pockets: ${pack.pocketNum}
</li>
<li id="left-strap-display"> Left Strap: ${pack.strapLength.left}</li>
<form>
<input id="left-strap" />
<button id="left-button">Submit</button>
</form>
<li id="right-strap-display"> Right Strap: ${pack.strapLength.right}</li>
<form>
<input id="right-strap" />
<button id="right-button">Submit</button>
</form>
<li>
Lid is open? ${pack.lidOpen}
</li>
<li>
Date Acquired: ${pack.dateAcquired}
</li>
<li>
<img id="img" src=${pack.image} alt="pic"/>
</li>
</ul>
`;
let leftInput = newArticle.querySelector("#left-strap");
let rightInput = newArticle.querySelector("#right-strap");
let leftButton = newArticle.querySelector("#left-button");
let rightButton = newArticle.querySelector("#right-button");
leftButton.addEventListener("click", (event) => {
event.preventDefault();
//get value from input
let value = leftInput.value;
//set value to display
newArticle.querySelector("#left-strap-display").innerHTML = "Left Strap: " + value;
});
rightButton.addEventListener("click", (event) => {
event.preventDefault();
let value = rightInput.value;
newArticle.querySelector("#right-strap-display").innerHTML = "Right Strap: " + value;
});
return newArticle;
});
content.forEach((backpack) => {
main.append(backpack);
});
\ No newline at end of file
3/index.html 0 → 100755
View file @ 2649f488
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge: Build and modify an array</title>
<script src="script.js" defer></script>
</head>
<body></body>
</html>
3/script.js 0 → 100755
View file @ 2649f488
/**
* Challenge: Build and modify an array
* - Build an array with 8 items
* - Remove the last item
* - Add the last item as the first item on the array
* - Sort the items by alphabetical order
* - Use the find() method to find a specific item in the array
* - Remove the item you found using the find method from the array.
*/
let array1 = ["Vanaja", "Priya", "Lakshmi", 5, 7, 10];
console.log(array1);
console.log(array1[0]);
console.log(array1.length);
//console.log(array1.pop());
console.log(array1);
//console.log(array1.push(10));
//console.log(array1);
array1.unshift("Rohan");
let last = array1.pop();
array1.unshift(last);
console.log(array1);
let array2 = ["asd", "dfer", "rtdf", "bsd"];
console.log(array2);
array1.sort();
console.log(array2);
//array1.find("asd");
array2.find(function (value, index) {
console.log("Visited index ", index, " with value ", value);
});
array2.includes("asd");
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
for (var i = 0; i < arr.length; i++) {
if (arr[i] === 5) {
arr.splice(i, 1);
}
}
assets/images/everyday.svg 0 → 100644
View file @ 2649f488
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 219.92 288.08" xml:space="preserve"><style>.st0{fill:#b5b5b6;stroke:#000;stroke-width:4;stroke-linejoin:round;stroke-miterlimit:10}</style><path class="st0" d="M215.92 286.08H4L2 2h215.92z"/><path class="st0" d="M45.31 266.97L4 286.08 2 2l43.31 100zM174.61 266.97l41.31 19.11 2-284.08-43.31 100z"/><path d="M118.03 117.47h-16.15c-2.23 0-4.03-1.8-4.03-4.03v-9.78c0-2.23 1.8-4.03 4.03-4.03h16.15c2.23 0 4.03 1.8 4.03 4.03v9.78c0 2.23-1.8 4.03-4.03 4.03z" fill="#b5b5b6" stroke="#f4f4f5" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10"/><path class="st0" d="M45.31 266.97h129.3M217.92 2H2l50.64 100.64h114.65z"/></svg>
assets/images/frog.svg 0 → 100644
View file @ 2649f488
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.54 288.08"><style>.st1,.st3,.st4{stroke:#000;stroke-linejoin:round;stroke-miterlimit:10}.st1{display:inline;fill:#b5b5b6;stroke-width:4}.st3,.st4{fill:#80c34d;stroke-width:3}.st4{fill:#bcdc97}.st6{fill:#e7e515}.st7{fill:#f7901e}.st8{fill:#fff}</style><g id="Layer_2"><path class="st3" d="M181.81 286.08H47.73c-10.64 0-19.27-8.63-19.27-19.27V21.27C28.46 10.63 37.09 2 47.73 2h134.08c10.64 0 19.27 8.63 19.27 19.27v245.54c-.01 10.64-8.63 19.27-19.27 19.27z"/><path class="st4" d="M160.24 266.51H69.3c-6.6 0-12-5.4-12-12l3-184.88c0-6.6 2.4-12 9-12h90.94c6.6 0 9 5.4 9 12l3 184.88c0 6.6-5.4 12-12 12z"/><path class="st4" d="M126.99 131.53h-24.44c-51.52 0-74.09-106.13-74.09-106.13C28.46 12.48 37.04 2 47.61 2h134.32c10.57 0 19.15 10.48 19.15 23.4-.01 0-25.54 106.13-74.09 106.13z"/><path class="st3" d="M126.37 111.72h-23.19C59.63 111 32.87 23.66 32.87 23.66 32.87 11.7 41 2 51.04 2h127.48c10.04 0 18.17 9.7 18.17 21.66-.01 0-28.41 88.06-70.32 88.06zM31.43 245.37H13.5c-6.6 0-12-5.4-12-12v-73.65c0-6.6 5.4-12 12-12h17.93c6.6 0 12 5.4 12 12v73.65c0 6.6-5.4 12-12 12zM216.04 245.37h-17.93c-6.6 0-12-5.4-12-12v-73.65c0-6.6 5.4-12 12-12h17.93c6.6 0 12 5.4 12 12v73.65c0 6.6-5.4 12-12 12z"/><path d="M142.5 77.34h0c-4.63-.5-8.77 2.35-9.21 6.33l-1.43 13.2c-.22 1.99-1.85 14.64.26 14.12 3.79-.93 5.55-2.36 8.48-3.54l2.17-1.35c4.05-2.52 5.5-3.42 5.93-7.4l1.43-13.2c.44-3.99-2.99-7.66-7.63-8.16z" fill="#ed2024" stroke="#000" stroke-width="3" stroke-linejoin="round" stroke-miterlimit="10"/><circle class="st6" cx="134.46" cy="54.44" r="15.06"/><circle class="st7" cx="134.46" cy="55.45" r="13.15"/><circle cx="134.46" cy="56.78" r="9.99"/><ellipse class="st8" cx="134.05" cy="58.8" rx="3" ry="4.33"/><g><circle class="st6" cx="91.74" cy="55.37" r="14.97"/><circle class="st7" cx="91.74" cy="56.36" r="13.07"/><circle cx="91.74" cy="57.7" r="9.92"/><ellipse class="st8" cx="91.33" cy="59.7" rx="2.98" ry="4.3"/></g></g></svg>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment