Skip to content

Commit

Permalink
add files for 1 version of final project
Browse files Browse the repository at this point in the history
  • Loading branch information
@mronowska
mronowska authored Oct 1, 2019
1 parent 9cc22b4 commit f1e4a06
Show file tree
Hide file tree
Showing 26 changed files with 842 additions and 422 deletions.
42 changes: 23 additions & 19 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,23 @@
# Gallery

## General info
This project was created for the purposes of recruitment

## Technologies
Project is created with:
* CSS
* HTML
* JavaScript
* SCSS pattern 7-1
* BEM

## Setup
To run this project, you can easily visit page

## How I can add a picture?
This is a simple project that does not download data about files from the database, etc.
To add a photo, add it in the "img" folder, enter the name with the next number and the extension ".jpg". Then you need to include them in the file "main.js", in which you should add the file name, its title and date in the lists: "listOfImgNames", "listOfImgTitles", "listOfImgDates"
# Gallery

## General info
This project was created for the purposes of recruitment

## Technologies
Project is created with:
* CSS
* HTML
* JavaScript
* SCSS pattern 7-1
* BEM

## Setup
To run this project, you can easily visit page

## How I can add a picture?
This is a simple project that does not download data about files from the database, etc.
<<<<<<< HEAD
To add a photo, add it in the "img" folder, enter the name with the next number and the extension ".jpg". Then you need to include them in the file "main.js", in which you should add the file name, its title and date in the lists: "listOfImgNames", "listOfImgTitles", "listOfImgDates"
=======
To add a photo, add it in the "img" folder, enter the name with the next number and the extension ".jpg". Then you need to include them in the file "main.js", in which you should add the file name, its title and date in the lists: "listOfImgNames", "listOfImgTitles", "listOfImgDates"
>>>>>>> 9cc22b42558415fdfaed3cb96be4127cf8d7d75f
Binary file modified img/9.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
125 changes: 30 additions & 95 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>Gallery</title>

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<!--[endif]-->

<!--my styles-->
<link href="./scss/main.css" rel="stylesheet">
<!--fonts-->
<link href="https://fonts.googleapis.com/css?family=Bai+Jamjuree&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<h1 class="header__title">Gallery of photos</h1>
</header>

<div class="masonry">
<!-- <div class="masonry__item">
<img class="masonry__img"src="../img/5.jpg">
<div class="masonry__description">
<p class="masonry__description--title">Tytuł1</p>
<p class="masonry__description--date">Data 2017</p></div>
</div>
<div class="masonry__item">
<img class="masonry__img"src="../img/5.jpg">
<div class="masonry__description">
<p class="masonry__description--title">Tytuł2</p>
<p class="masonry__description--date">Data 2018</p></div>
</div>
<div class="masonry__item">
<img class="masonry__img"src="../img/5.jpg">
<div class="masonry__description">
<p class="masonry__description--title">Tytuł3</p>
<p class="masonry__description--date">Data 2019</p></div>
</div>
<div class="masonry__item">
<img class="masonry__img"src="../img/5.jpg">
<div class="masonry__description">
<p class="masonry__description--title">Tytuł1</p>
<p class="masonry__description--date">Data 2017</p></div>
</div>
<div class="masonry__item">
<img class="masonry__img" src="../img/5.jpg">
<div class="masonry__description">
<p class="masonry__description--title">Tytuł2</p>
<p class="masonry__description--date">Data 2018</p></div>
</div>
<div class="masonry__item">
<img class="masonry__img"src="../img/5.jpg">
<div class="masonry__description">
<p class="masonry__description--title">Tytuł3</p>
<p class="masonry__description--date">Data 2019</p></div>
</div>-->
</div>
<script src="js/main.js"></script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>Gallery</title>

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<!--[endif]-->

<!--my styles-->
<link href="./scss/main.css" rel="stylesheet">
<!--fonts-->
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<h1 class="header__title">Gallery for IMSET</h1>
</header>
<!--main div-->
<div class="masonry"></div>
<footer class="footer">
<h6 class="footer__title">Made with &hearts; by mronowska. All photos come from pixabay.com</h6>
</footer>
<script src="js/main.js"></script>
</body>
</html>
153 changes: 93 additions & 60 deletions js/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,94 @@
const listOfImgNames = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg'];
const listOfImgTitles = ['Wędrówka', 'Wolność', 'Spacer', 'Zielony kanion', 'Górskie widoki', 'W chmurach', 'Przbijające słońce', 'Tak mieszkać', 'Natura'];


for (let i = 0; i < listOfImgNames.length; i++)
{
//adding div with masonry__item class
const masonry = document.getElementsByClassName('masonry')[0];
const masonryItem = document.createElement('div');
masonryItem.className = "masonry__item";
masonry.appendChild(masonryItem);

const item = document.getElementsByClassName('masonry__item')[i];

//adding img with masonry__img class
const img = document.createElement('img');
img.className = "masonry__img w3-image";
img.src = `././img/${i+1}.jpg`;
item.appendChild(img);


//adding div with masonry__description class
const description = document.createElement('div');
description.className = "masonry__description";
item.appendChild(description);

const descriptionItem = document.getElementsByClassName('masonry__description')[i];

//adding p with masonry__description--title class
const title = document.createElement('p');
title.className = "masonry__description--title";
title.innerText = `${listOfImgTitles[i]}`;
descriptionItem.appendChild(title);

//adding p with masonry__description--date class
const date = document.createElement('p');
date.className = "masonry__description--date";
date.innerText = `10.02.200${i}`;
descriptionItem.appendChild(date);

}

for (let i = 0; i < listOfImgNames.length; i++)
{
document.getElementsByTagName("img")[i].addEventListener("click", () => {
console.log("WOOW");
})}



// const showImage = () => {
// image = document.querySelector(img);
// image.addEventListener("click", change);
// }

const change = () => {
// let obraz = document.getElementsByTagName(img);
// obraz.styles.width = "100%";
console.log("JUZ");

const listOfImgNames = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg'];
const listOfImgTitles = ['Wandering', 'Freedom', 'Walk', 'Green canyon', 'Mountain views', 'Sky is the limit', 'Here comes the sun', 'Live like this', 'Nature lover'];
const listOfImgDates = ['20.05.2017', '16.04.2002', '06.06.1994', '19.09.2003', '07.03.2005', '19.10.2009', '19.08.2006', '11.05.2004', '14.07.2003'];

if (listOfImgNames.length > 0){

for (let i = 0; i < listOfImgNames.length; i++)
{
/*
masonry class
*/

//adding div with masonry__item class
const masonry = document.getElementsByClassName('masonry')[0];
const masonryItem = document.createElement('div');
masonryItem.className = "masonry__item";
masonry.appendChild(masonryItem);

const item = document.getElementsByClassName('masonry__item')[i];

//adding img with masonry__img class
const img = document.createElement('img');
img.className = "masonry__img"; //w3-image
img.src = `././img/${i+1}.jpg`;
item.appendChild(img);

//adding div with masonry__description class
const description = document.createElement('div');
description.className = "masonry__description";
item.appendChild(description);

const descriptionItem = document.getElementsByClassName('masonry__description')[i];

//adding p with masonry__description--title class
const title = document.createElement('p');
title.className = "masonry__description--title";
title.innerText = `${listOfImgTitles[i]}`;
descriptionItem.appendChild(title);

//adding p with masonry__description--date class
const date = document.createElement('p');
date.className = "masonry__description--date";
date.innerText = `${listOfImgDates[i]}`;
descriptionItem.appendChild(date);


/*
modal class
*/
//adding div with modal class to body
const bodyModal = document.getElementsByTagName('body')[0];
const modal = document.createElement('div');
modal.className = "modal";
bodyModal.appendChild(modal);

//adding span with modal__close class

const close = document.createElement('span');
close.className = "modal__close";
close.innerText = "x";
modal.appendChild(close);

//adding img with modal__img class
const modalImg = document.createElement('img');
modalImg.className = "modal__img";
modal.appendChild(modalImg);

//adding img with modal__img class
const modalContent = document.createElement('div');
modalContent.className = "modal__content";
modal.appendChild(modalContent);


document.getElementsByClassName("masonry__img")[i].onclick = function()
{
document.getElementsByClassName("modal")[i].style.display = "block";
document.getElementsByClassName("modal__img")[i].src = `././img/${i+1}.jpg`;
document.getElementsByClassName("modal__content")[i].innerHTML = `${listOfImgTitles[i]}, ${listOfImgDates[i]}`;
}

//let span = document.getElementsByClassName("modal__close")[0];

document.getElementsByClassName("modal__close")[i].onclick = function()
{
document.getElementsByClassName("modal")[i].style.display="none";
}
}

} else {
const noFiles = document.getElementsByClassName('header__title')[0];
noFiles.innerText = "Gallery is empty, sorry!";
}
7 changes: 4 additions & 3 deletions scss/abstracts/_abstracts.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
//ABSTRACTS

$imgList2 : '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg';
//ABSTRACTS

$darkGreen: #203801;
$lightGreen: #4E8507;
1 change: 1 addition & 0 deletions scss/base/_base.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
null
1 change: 1 addition & 0 deletions scss/base/_base.min.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
null
1 change: 1 addition & 0 deletions scss/base/_base.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
//BASE
Loading

0 comments on commit f1e4a06

Please sign in to comment.