x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-03-21 17:10:48 +03:00 committed by GitHub
parent d633103321
commit 9b763df63c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 76 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
100_projects/28-show-random-image-every-x-second/css.css Normal file
View File

@ -0,0 +1,40 @@
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
position: relative;
background: linear-gradient(to bottom right, #2389da, #74ccf4, #5abcd8);
}
#myImg{
position: relative;
width: 800px;
height: 450px;
box-shadow: 10px 10px 5px rgba(0,0,0, .4);
transition: .3s;
}
body::before{
content: '';
width: calc(800px - 30px);
height: calc(450px - 30px);
border: 3px solid #e0ffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
@media(max-width:767px){
#myImg{
width: 300px;
}
body::before{
width: calc(300px - 30px);
}
}

BIN
100_projects/28-show-random-image-every-x-second/imgs/01.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
100_projects/28-show-random-image-every-x-second/imgs/02.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
100_projects/28-show-random-image-every-x-second/imgs/03.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
100_projects/28-show-random-image-every-x-second/imgs/04.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
100_projects/28-show-random-image-every-x-second/imgs/05.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
100_projects/28-show-random-image-every-x-second/imgs/06.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
100_projects/28-show-random-image-every-x-second/imgs/07.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
100_projects/28-show-random-image-every-x-second/imgs/08.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

15
100_projects/28-show-random-image-every-x-second/index.html Normal file
View File

@ -0,0 +1,15 @@
<!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>Document</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<img src="imgs/01.jpg" alt="" id="myImg">
<script src="main.js"></script>
</body>
</html>

21
100_projects/28-show-random-image-every-x-second/main.js Normal file
View File

@ -0,0 +1,21 @@
var myElement = document.getElementById('myImg'),
myImgs = [
'imgs/01.jpg',
'imgs/02.jpg',
'imgs/03.jpg',
'imgs/04.jpg',
'imgs/05.jpg',
'imgs/06.jpg',
'imgs/07.jpg',
'imgs/08.jpg'
];
function changeImage(myElement, myImgs){
'use strict';
setInterval(function () {
var myRandomNum = Math.floor(Math.random() * myImgs.length);
console.log(myRandomNum)
myElement.src = myImgs[myRandomNum];
}, 1000);
}
changeImage(myElement, myImgs);