Skip to content
This repository was archived by the owner on Jan 3, 2023. It is now read-only.

Java script core 2 homework week3/osagie o #77

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

Java script core 2 homework week3/osagie o #77

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
cbb98a3
fcompleted task
osagiestar Aug 1, 2020
2249893
async function used
osagiestar Aug 1, 2020
8dbe393
more work needed
osagiestar Aug 3, 2020
55f6e36
completed
osagiestar Aug 9, 2020
8076cec
completed - adding extra features
osagiestar Aug 9, 2020
20cccaa
improved on the background images
osagiestar Aug 10, 2020
8add6e2
completed
osagiestar Aug 12, 2020
0fe848b
modified and added more images
osagiestar Aug 21, 2020
755a551
complted - updated
osagiestar Aug 22, 2020
9d94872
sharpen skills on array
osagiestar Dec 30, 2020
865b7b6
sharpen skills on array
osagiestar Dec 30, 2020
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
Prev Previous commit
Next Next commit
more work needed
  • Loading branch information
@osagiestar
osagiestar committed Aug 3, 2020
commit 8dbe3935c1e8c2ac5ef5c5a58f6834f42bedfd75
Binary file added Week-3/Homework/mandatory/3-slideshow/images/cake1.jpg
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.
Binary file added Week-3/Homework/mandatory/3-slideshow/images/cake2.jpg
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.
Binary file added Week-3/Homework/mandatory/3-slideshow/images/cake3.jpg
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.
Binary file added Week-3/Homework/mandatory/3-slideshow/images/cake4.jpg
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.
21 changes: 20 additions & 1 deletion Week-3/Homework/mandatory/3-slideshow/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<html>
<head>
<title>Slideshow</title>
<script src="slideshow.js"></script>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
Expand All @@ -13,5 +12,25 @@
</head>
<body>
<!-- Write your HTML in here -->
<div>
<div class="image-set">
<img src="images/cake1.jpg" alt="cake images" />
</div>
<div class="button-container">
<button id="auto-forward">
AutoForward
</button>
<button id="forward">
Forward
</button>
<button id="backward">
Backward
</button>
<button id="auto-backward">
AutoBackward
</button>
</div>
</div>
</body>
<script src="slideshow.js"></script>
</html>
47 changes: 47 additions & 0 deletions Week-3/Homework/mandatory/3-slideshow/slideshow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,48 @@
// Write your code here
let imgArray = [
"images/cake1.jpg",
"images/cake2.jpg",
"images/cake3.jpg",
"images/cake4.jpg",
];
let i = 0;
let imgArray = [];
let time = 2000;
function changeTheImage() {
console.log("hey man");
if (i < imgArray.length
]- 1) {
i++;
} else {
i = 0;
}
document.querySelector(".image-set").src = imgArray[i];
}
function changeBackwards() {
if (i === 0) {
i = i + 3;
} else if (i < imgArray.length) {
i--;
}
document.querySelector(".image-set").src = imgArray[i];
}
function changeTheImageAutoForward() {
setInterval(function () {
if (i === 3) {
document.querySelector(".image-set").src = imgArray[3];
} else if (i < imgArray.length) {
i++;
}
document.querySelector(".image-set").src = imgArray[i];
}, 1000);
}
let forward = document.querySelector("#forward");
forward.addEventListener("click", changeTheImage);

let backward = document.querySelector("#backward");
backward.addEventListener("click", changeBackwards);
/*
let stopButton = document.querySelector(“.stop-button”)
stopButton.addEventListener (“click”,); */
let autoForward = document.querySelector("#auto-forward");
autoForward.addEventListener("click", changeTheImageAutoForward);
16 changes: 16 additions & 0 deletions Week-3/Homework/mandatory/3-slideshow/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,17 @@
/** Write your CSS in here **/
html {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg width='48' height='64' viewBox='0 0 48 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48 28v-4L36 12 24 24 12 12 0 24v4l4 4-4 4v4l12 12 12-12 12 12 12-12v-4l-4-4 4-4zM8 32l-6-6 10-10 10 10-6 6 6 6-10 10L2 38l6-6zm12 0l4-4 4 4-4 4-4-4zm12 0l-6-6 10-10 10 10-6 6 6 6-10 10-10-10 6-6zM0 16L10 6 4 0h4l4 4 4-4h4l-6 6 10 10L34 6l-6-6h4l4 4 4-4h4l-6 6 10 10v4L36 8 24 20 12 8 0 20v-4zm0 32l10 10-6 6h4l4-4 4 4h4l-6-6 10-10 10 10-6 6h4l4-4 4 4h4l-6-6 10-10v-4L36 56 24 44 12 56 0 44v4z' fill='%232b3332' fill-opacity='0.13' fill-rule='evenodd'/%3E%3C/svg%3E");
color: #000000;
font-family: "Montserrat", sans-serif;
text-align: center;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}