Skip to content

London | Phone_Naing | Module-Data-Groups| WEEK3SLideShow #255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions Sprint-1/fix/median.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,15 @@
// If you're in the Sprint-1 directory, you can run `npm test -- fix` to run the tests in the fix directory

function calculateMedian(list) {
let isEven = list.length % 2 == 0;
const middleIndex = Math.floor(list.length / 2);
const median = list.splice(middleIndex, 1)[0];
return median;
if (isEven) {
const median = (list[middleIndex] + list[middleIndex - 1]) / 2;
return median;
} else {
const median = list[middleIndex];
return median;
}
}

module.exports = calculateMedian;
378 changes: 130 additions & 248 deletions Sprint-1/package-lock.json

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions Sprint-3/quote-generator/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,17 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title here</title>
<link rel="stylesheet" href="style.css" />
<script defer src="quotes.js"></script>
</head>
<body>
<h1>hello there</h1>
<p id="quote"></p>
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
<label id="toggle">
<input type="checkbox" id="quote-autoplay" />
<span id="quote-text">Off Quote Change</span>
</label>
</body>
</html>
46 changes: 46 additions & 0 deletions Sprint-3/quote-generator/quotes.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,49 @@
/*
1.when button click random quote get
2.assign quote and author name
3.display it on the screen
4.add toggle button off no change
5.toggle button on change
a.setinterval 60 seconds
b.call random Value function
*/
function buttonClick() {
const button = document.getElementById("new-quote");
button.addEventListener("click", () => getNewQuote());
}
function autoClick() {
const button = document.getElementById("new-quote");
button.click();
}
function getNewQuote() {
const randomValue = pickFromArray(quotes);
const newQuote = randomValue.quote;
const newAuthor = randomValue.author;
const findQuoteToChange = document.querySelector("#quote");
const findAuthorToChange = document.querySelector("#author");
findAuthorToChange.innerText = newAuthor;
findQuoteToChange.innerText = newQuote;
}
function toggleFun() {
let intervalId;
const checkToggle = document.getElementById("quote-autoplay");
const toggleLabelText = document.getElementById("quote-text");
checkToggle.addEventListener("change", () => {
if (checkToggle.checked) {
toggleLabelText.textContent = "On Quote Change";
intervalId = setInterval(autoClick, 60000);
} else {
clearInterval(intervalId);
toggleLabelText.textContent = "Off Quote Change";
}
});
}
function setup() {
buttonClick();
toggleFun();
}
window.onload = setup;

// DO NOT EDIT BELOW HERE

// pickFromArray is a function which will return one item, at
Expand Down
1 change: 0 additions & 1 deletion Sprint-3/quote-generator/style.css
Original file line number Diff line number Diff line change
@@ -1 +0,0 @@
/** Write your CSS in here **/
26 changes: 26 additions & 0 deletions Sprint-3/reading-list/script.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,30 @@ const books = [
bookCoverImage: "https://blackwells.co.uk/jacket/l/9780135957059.jpg",
},
];
function setup() {
const readingList = document.getElementById("reading-list");
books.map((book) => {
const listBook = document.createElement("li");
listBook.style.backgroundColor = book.alreadyRead ? "Red" : "Green";
listBook.style.height = "20%";
listBook.style.width = "40vw";
listBook.style.marginBottom = "10px";
//p tag inside li
const bookTitle = document.createElement("p");
bookTitle.textContent = book.title + " ";
//span tag inside p tag
const authorSpan = document.createElement("span");
authorSpan.textContent = book.author;
bookTitle.appendChild(authorSpan);
const img = document.createElement("img");
img.src = book.bookCoverImage;
img.alt = book.title;
img.style.height = "81%";
img.style.width = "auto";
listBook.appendChild(bookTitle);
listBook.appendChild(img);

readingList.appendChild(listBook);
});
}
window.onload = setup;
17 changes: 14 additions & 3 deletions Sprint-3/slideshow/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,23 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title here</title>
<title>Image carousel</title>
<script defer src="slideshow.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
<button type="button" id="backward-btn">Backwards</button>
<button type="button" id="forward-btn">Forward</button>
<p id="image-index"></p>
<div class="button-group">
<button type="button" id="auto-backward-btn">Auto Back</button>

<button type="button" id="backward-btn">Back</button>
<button type="button" id="stop-btn">Stop</button>

<button type="button" id="forward-btn">Forward</button>
<button type="button" id="auto-forward-btn">Auto Forward</button>

<!-- <script src="slideshow.js"></script> -->
</div>
</body>
</html>
77 changes: 72 additions & 5 deletions Sprint-3/slideshow/slideshow.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,75 @@
const images = [
"./assets/cute-cat-a.png",
"./assets/cute-cat-b.jpg",
"./assets/cute-cat-c.jpg",
"./assets/cute-cat-a.png",
"./assets/cute-cat-b.jpg",
"./assets/cute-cat-c.jpg",
];
let imageValue = 0;
const buttons = document.querySelector(".button-group");
const checkNumber = document.getElementById("image-index");
const imageFinder = document.getElementById("carousel-img");
//for interval
let forwardIntervalId;
let backwardIntervalId;
function setup() {
const makeDemo1 = document.createElement("h1");
makeDemo1.textContent = "Image Carousel.Level 1 Demo";
document.body.prepend(makeDemo1);
// findArrayInd();
findWhichButton();
checkNumber.innerText = imageValue;
// const queryImage=
}
function findArrayInd(value) {
if (value == "increase") {
imageValue = (imageValue + 1) % images.length;
checkNumber.innerText = imageValue;
imageFinder.src = images[imageValue];
} else if (value == "decrease") {
imageValue = (imageValue - 1 + images.length) % images.length;
checkNumber.innerText = imageValue;
imageFinder.src = images[imageValue];
} else if (value == "auto-forward-btn") {
if (forwardIntervalId) {
clearInterval(forwardIntervalId);
}
forwardIntervalId = setInterval(() => {
imageValue = (imageValue + 1) % images.length;
checkNumber.innerText = imageValue;
imageFinder.src = images[imageValue];
}, 1000);
} else if (value == "auto-backward-btn") {
if (backwardIntervalId) {
clearInterval(backwardIntervalId);
}
backwardIntervalId = setInterval(() => {
imageValue = (imageValue - 1 + images.length) % images.length;
checkNumber.innerText = imageValue;
imageFinder.src = images[imageValue];
}, 1000);
} else if (value == "stop-btn") {
if (forwardIntervalId) {
clearInterval(forwardIntervalId);
}
if (backwardIntervalId) {
clearInterval(backwardIntervalId);
}
}
return imageValue;
}
function findWhichButton() {
buttons.addEventListener("click", (e) => {
if (e.target.id == "forward-btn") {
findArrayInd("increase");
} else if (e.target.id == "backward-btn") {
findArrayInd("decrease");
} else if (e.target.id == "auto-backward-btn") {
findArrayInd("auto-backward-btn");
} else if (e.target.id == "stop-btn") {
findArrayInd("stop-btn");
} else if (e.target.id == "auto-forward-btn") {
findArrayInd("auto-forward-btn");
}
});
}


// Write your code here
window.onload = setup;
4 changes: 4 additions & 0 deletions Sprint-3/slideshow/style.css
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
/** Write your CSS in here **/
img {
width: 200px;
height: 200px;
}