Skip to content

J
javascript-assignment
Commit 6d62448a authored by Alana Shannon's avatar Alana Shannon
Browse files
Options

First commit

parents
Hide whitespace changes
Inline Side-by-side
Showing with 479 additions and 0 deletions
challenges/assets/images/everyday.svg 0 → 100644
View file @ 6d62448a
<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>
challenges/assets/images/frog.svg 0 → 100644
View file @ 6d62448a
<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>
challenges/challenge_1/Book.js 0 → 100644
View file @ 6d62448a
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
challenges/challenge_1/index.html 0 → 100644
View file @ 6d62448a
<!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
challenges/challenge_1/script.js 0 → 100644
View file @ 6d62448a
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
challenges/challenge_2/index.css 0 → 100644
View file @ 6d62448a
.nav-bar {
padding: 10px;
background-color: lightblue;
border: 1px solid rgb(30, 99, 156);
}
a {
color: rgb(30, 99, 156);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul {
display: flex;
justify-content: space-evenly;
}
li {
list-style: none;
}
\ No newline at end of file
challenges/challenge_2/index.html 0 → 100644
View file @ 6d62448a
<!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 2</title>
<script type="module" src="./script.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<main class="main-content"></main>
</body>
</html>
\ No newline at end of file
challenges/challenge_2/script.js 0 → 100644
View file @ 6d62448a
const main = document.querySelector(".main-content");
const header = `
<nav class="nav-bar">
<ul>
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
<li>
<a href="#">Link 4</a>
</li>
<li>
<a href="#">Link 5</a>
</li>
</ul>
</nav>
`
main.innerHTML = header;
\ No newline at end of file
challenges/challenge_3/index.html 0 → 100644
View file @ 6d62448a
<!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 3</title>
<script type="module" src="./script.js"></script>
</head>
<body>
</body>
</html>
\ No newline at end of file
challenges/challenge_3/script.js 0 → 100644
View file @ 6d62448a
const arr = ["harry", "ron", "hermione", "neville", "draco", "luna", "cedric"];
console.log(arr);
let removed = arr.pop();
console.log("removed: ", removed);
console.log("without cedric: ", arr);
arr.unshift(removed);
console.log("cedric at front ", arr);
let sorted = arr.sort();
console.log("sorted: ", sorted);
let wizard = arr.find((wiz) => wiz === "neville");
console.log(wizard);
let nevilleIdx = arr.indexOf("neville");
let newArr = arr.slice(0, nevilleIdx).concat(arr.slice(nevilleIdx + 1));
console.log("array without neville: ", newArr);
\ No newline at end of file
challenges/challenge_4/components/Backpack.js 0 → 100644
View file @ 6d62448a
// 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
challenges/challenge_4/components/data.js 0 → 100644
View file @ 6d62448a
// 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
challenges/challenge_4/index.html 0 → 100644
View file @ 6d62448a
<!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 4</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
challenges/challenge_4/script.js 0 → 100644
View file @ 6d62448a
import backpackObjectArray from "./components/data.js";
// console.log(backpackObjectArray);
const main = document.querySelector(".main-content");
const content = backpackObjectArray.map((pack) => {
return (
`
<h1>${pack.name}</h1>
<ul>
<li>
Volume: ${pack.volume}
</li>
<li>
Color: ${pack.color}
</li>
<li>
Number of Pockets: ${pack.pocketNum}
</li>
<li>
Lid is open? ${pack.lidOpen}
</li>
<li>
Date Acquired: ${pack.dateAcquired}
</li>
<li>
<img id="img" src=${pack.image} alt="pic"/>
</li>
</ul>
`
)
});
const newArticle = document.createElement("article");
newArticle.classList.add("backpack");
newArticle.setAttribute("id", "everyday");
newArticle.innerHTML = content;
main.append(newArticle);
\ No newline at end of file
challenges/challenge_5/components/Backpack.js 0 → 100644
View file @ 6d62448a
// 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
challenges/challenge_5/components/data.js 0 → 100644
View file @ 6d62448a
// 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
challenges/challenge_5/index.html 0 → 100644
View file @ 6d62448a
<!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
challenges/challenge_5/script.js 0 → 100644
View file @ 6d62448a
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
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