Skip to content
This repository has been archived by the owner on Dec 18, 2024. It is now read-only.

NW6| Bakhat Begum | MODULE-JS2| Js2 slideshow/week 4 | Week-4 #219

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

NW6| Bakhat Begum | MODULE-JS2| Js2 slideshow/week 4 | Week-4 #219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e399c06
final sweep of module js2
BakhatBegum Dec 4, 2023
ed6c355
added some function and title name
BakhatBegum Jan 9, 2024
0a9b393
removed codes
BakhatBegum Jan 9, 2024
f805b56
removed codes
BakhatBegum Jan 9, 2024
e0fe1c8
added function on javascipt and also made changies on html and css
BakhatBegum Jan 16, 2024
2e4ffaa
I removed unnecessary codes from file
BakhatBegum Jan 16, 2024
115acf4
I removed unnecessary codes from js file
BakhatBegum Jan 16, 2024
6aaceae
removed let img_list from code
BakhatBegum Jan 23, 2024
e254847
remove commented lines
BakhatBegum Jan 23, 2024
27f05e7
added style i.e. fonst size, background colour and media screen
BakhatBegum Jan 23, 2024
347b164
added padding left
BakhatBegum Jan 23, 2024
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
13 changes: 9 additions & 4 deletions week-1/fix/median.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
// Fix this implementation
// Start by running the tests for this function
// If you're in the week-1 directory, you can run npm test -- fix to run the tests in the fix directory
//Fix this implementation
//Start by running the tests for this function
//If you're in the week-1 directory, you can run npm test -- fix to run the tests in the fix directory

function calculateMedian(list) {
const middleIndex = Math.floor(list.length / 2);
const median = list.splice(middleIndex, 1)[0];
return median;
}

module.exports = calculateMedian;
//calculateMedian( 3, 3, 4, 5)
//module.exports = calculateMedian;

// console.log(calculateMedian( 3, 3, 4, 5))


3 changes: 2 additions & 1 deletion week-3/alarmclock/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script src="alarmclock.js" defer ></script>
<title>Title here</title>
</head>
<body>
Expand All @@ -15,6 +16,6 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
<button id="set" type="button">Set Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
</div>
<script src="alarmclock.js"></script>

</body>
</html>
Binary file added week-3/slideshow/assets/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added week-3/slideshow/assets/cute-cat-d.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 22 additions & 4 deletions week-3/slideshow/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,30 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title here</title>
<title>Image carousel</title>
<link rel="stylesheet" href="style.css">
<script defer src="slideshow.js"></script>
</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>

<div id="carousel">
<h2>Image Carousel Simplest Demo</h2>
<img id="image" src="" alt="Image">

<div id="status"></div>
<button type="button" id="autoBack">auto-Back</button>
<button type="button" id="previous">Backwards</button>
<button type="button" id="next">Forward</button>
<button type="button" id="stopButton">Stop</button>
<button type="button" id="autoForward"> auto-Forward</button>
</div>

<div class="hr"></div>

</body>
</html>





97 changes: 91 additions & 6 deletions week-3/slideshow/slideshow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,93 @@
const images = [
"./assets/cute-cat-a.png",
"./assets/cute-cat-b.jpg",
"./assets/cute-cat-c.jpg",
];


// Write your code here
let element_image = document.getElementById('image');
let img_list = [
"./assets/cute-cat-a.png",
"./assets/cute-cat-b.jpg",
"./assets/cute-cat-c.jpg",
"./assets/cute-cat-d.png"
];
element_image.setAttribute("src", img_list[0]);

function add_carousel(){
let element_imageI = document.getElementById('image');
element_imageI.setAttribute("src", img_list.slice(-1)[0]);
}

function carousel(){
if(img_list) {
let element_imageJ = document.getElementsById('image');
element_imageJ.setAttribute("src", img_list[0]);
}else{
let element_imageK = document.getElementById('image');
element_imageK.setAttribute("src", img_list.slice(-1)[0])
}
}

function add_image() {
add_carousel();
carousel();
}

document.getElementById('previous').addEventListener('click', (event) => {
img_list.unshift(img_list.pop());
add_image();

});

document.getElementById('next').addEventListener('click', (event) => {
img_list.push(img_list.shift());
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is an interesting use of array methods to access the image and add it to the document. Consider simplifying by accessing the desired element in the array with bracket notation

add_image();

});


const buttonClick = document.getElementById("autoBack");
const autoPlay = document.getElementById("status");

let autoBackEnabled = false;

setInterval(() => {
if (autoBackEnabled) {
img_list.unshift(img_list.pop());
add_image();
}
}, 5000);

buttonClick.addEventListener("click", function () {
autoBackEnabled = !autoBackEnabled;
if (autoBackEnabled) {
autoPlay.textContent = "auto-Backword ON";
} else {
autoPlay.textContent = "";
}
});

const forwordButton = document.getElementById("autoForward");

let autoForwardButton = false;
setInterval(() => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You already have a set interval, consider refactoring this code into the same place.

if (autoForwardButton) {
img_list.push(img_list.shift());
add_image();
}
}, 5000);

forwordButton.addEventListener("click", function () {
autoForwardButton= !autoForwardButton;
if (autoForwardButton) {
autoPlay.textContent = "auto-Forword ON";
} else {
autoPlay.textContent = "";
}
});

const stopButton = document.getElementById("stopButton");
stopButton.addEventListener("click", stop);

function stop(){
autoForwardButton = false;
autoBackEnabled = false;
autoPlay.textContent = "";
}

49 changes: 49 additions & 0 deletions week-3/slideshow/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,50 @@
/** Write your CSS in here **/
body{
background-color: rgb(74, 149, 149);

}

#carousel{
margin-top: 100px;
margin-left: 400px;
}
h2{
margin-left: 100px;
font-size: 2em;
}

#image{
width: 40%;
border: 10px solid palevioletred;
border-radius: 9px;
margin-left: 100px;
}
button{
display: inline;
margin: 15px;
padding: 15px 15px;
border-radius: 12px;
border: 5px solid palevioletred;
}
.hr{
border: 1px solid rgb(63, 56, 56);
width: 100%;
margin: 0;
padding: 0;
}
@media screen and (max-width: 598px){
body{
background-color: rgb(109, 103, 95);
}
#carousel{
margin-left: 0px;
}
#image{
width: 60%;
margin: 0px;
}

h2{
margin: 0px;
}
}