Created
May 13, 2018 19:16
-
-
Save Mortimer333/8e1eace46051913e85f9a0b0b0479742 to your computer and use it in GitHub Desktop.
first attempt to make a shop with searching for products
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<DOCTYPE html> | |
<html> | |
<head> | |
<title> | |
Moja Strona | |
</title> | |
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8"> | |
<meta http-equiv= "Content-Language" content="pl"> | |
<link rel="stylesheet" type="text/css" href="style.css"> | |
</head> | |
<body> | |
<div class="grid"> | |
<div class="column_span header"> | |
</div> | |
<div class="menu column_span" id='MENU' > | |
<a href="katalog.html" target='main' class="noneDecoration"><div class="border_sklep">Sklep</div></a> | |
<a class="noneDecoration"><div class="border_katalog" id="KATALOG">Katalog</div></a> | |
<a class="noneDecoration"><div class="border" id='border_kontakt'>Kontakt | |
<section id='menu_kontakt'> | |
<div class='elem_kontakt'>w</div> | |
<div class='elem_kontakt'>w</div> | |
<section> | |
</div></a> | |
<a class="noneDecoration"><div class="border">Koszyk</div></a> | |
</div> | |
<div class="border_wyszuk"><h1>Wyszukaj</h1> | |
<center><input type="text" id='search'></textarea></center> | |
</div> | |
<div id="products" name='main'> | |
</div> | |
</div> | |
<script type="text/javascript" src="main.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<DOCTYPE html> | |
<html> | |
<head> | |
<title> | |
Moja Strona | |
</title> | |
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8"> | |
<meta http-equiv= "Content-Language" content="pl"> | |
</head> | |
<body> | |
Coś | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let closingKat = 1; | |
var X=3; | |
var Y=["polska.png", "francja.jpg", "rosja.jpg"]; | |
var TYTUL = ["tytul1","tytul2","tytul3","invalid"]; | |
var Z=["opis 1", "opis 2", "opis 3"]; | |
var L=["li_1","li_2","li_3","li_4","li_5","li_6","li_7","li_8","li_9"]; | |
var T=2; | |
//PRODUKTY | |
class productEx { | |
constructor(index_img,index_name,index_list,index_description) | |
{ | |
this.img = index_img; | |
this.name = index_name; | |
this.list = index_list; | |
this.decrp = index_description; | |
} | |
output(){ | |
if(Y[this.img] != undefined && TYTUL[this.name] != undefined && L[this.list] != undefined && Z[this.decrp] != undefined){ | |
return document.getElementById("products").innerHTML +="<div class='content'><div class='grid_img'><img src='./ZDJ/"+Y[this.img]+"'></div><div class='grid_tytul'>"+TYTUL[this.name]+"</div><div class='grid_list'>"+L[this.list]+"<br>"+L[this.list+1]+"<br>"+L[this.list+2]+"</div><div>"+Z[this.decrp]+"</div></div>"; | |
} | |
else{ | |
return document.getElementById("products").innerHTML += "<div class='content'>"+TYTUL[3]+"</div>"; | |
} | |
} | |
} | |
//WYSZUKIWANIE | |
document.getElementById("search").addEventListener('keydown',function(){ | |
document.getElementById("products").innerHTML = ""; | |
if(document.getElementById("search").value!=""){ | |
for(i=0;i<X;i++){ | |
if(document.getElementById("search").value==TYTUL[i]){ | |
if(i==0)T=2; | |
else if(i==1)T=5; | |
else T=8; | |
document.getElementById("products").innerHTML="<div class='content'><div class='grid_img'><img src='./ZDJ/"+Y[i]+"'></div><div class='grid_tytul'>"+TYTUL[i]+"</div><div class='grid_list'>"+L[T-2]+"<br>"+L[T-1]+"<br>"+L[T]+"</div><div>"+Z[i]+"</div></div>"; | |
} | |
} | |
} | |
else{ | |
var polska = new productEx(0,0,0,0); | |
polska.output(); | |
var francja = new productEx(1,1,3,1); | |
francja.output(); | |
var rosja = new productEx(2,2,6,2); | |
rosja.output(); | |
var example = new productEx(3,3,7,2); | |
example.output(); | |
} | |
} | |
); | |
document.getElementById("KATALOG").addEventListener('click', function(){ | |
console.log(closingKat); | |
if(closingKat == 1){ | |
console.log("if"); | |
document.getElementById("KATALOG").innerHTML+="<div class='position' id='ELEMENT' ><a href='katalo.html' class='noneDecoration' target='blank_'><div class='div_kat_element div_pad_element'>nana</div></a><div class='div_kat_element'>nana</div></div>"; | |
closingKat = 0; | |
} | |
else{ | |
document.getElementById("KATALOG").innerHTML="Katalog"; | |
closingKat = 1; | |
} | |
}); | |
var polska = new productEx(0,0,0,0); | |
polska.output(); | |
var francja = new productEx(1,1,3,1); | |
francja.output(); | |
var rosja = new productEx(2,2,6,2); | |
rosja.output(); | |
var example = new productEx(3,3,7,2); | |
example.output(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
*{ | |
margin:0; | |
padding:0; | |
box-sizing:border-box; | |
} | |
body{ | |
background-color:blue; | |
} | |
img{ | |
height:200px; | |
width:250px; | |
} | |
input{ | |
} | |
#search{ | |
height:20px; | |
width:150px; | |
} | |
.grid{ | |
display:grid; | |
width:100%; | |
height:100%; | |
grid-template-columns:100%; | |
grid-template-rows:1fr 1fr 1fr 9fr; | |
grid-gap:0px 0px; | |
} | |
.header{ | |
height:100px; | |
background-color:brown; | |
} | |
.menu{ | |
display:grid; | |
background-color:grey; | |
grid-template-columns:1fr 1fr 1fr 1fr; | |
height:100%; | |
width:100%; | |
margin:0; | |
} | |
.menu_span{ | |
display:grid; | |
grid-template-columns:2 / span 2; | |
} | |
.div_kat{ | |
padding-bottom:15px; | |
} | |
.div_kat_element{ | |
display:grid; | |
background-color:yellow; | |
font-size:20px; | |
border-top-width:0; | |
border-bottom-width:3px; | |
border-color:black; | |
border-style:solid; | |
} | |
.div_kat_element:hover{ | |
background-color:pink; | |
} | |
.div_pad_element{ | |
margin-top:13px; | |
} | |
.position{ | |
position:relative; | |
} | |
.wyszukiwarka{ | |
display:grid; | |
grid-template-columns:1 / span 2; | |
background-color:black; | |
color:white; | |
} | |
#products{ | |
overflow:scroll; | |
background-color:grey; | |
} | |
.grid_tytul{ | |
grid-column-start:2; | |
grid-column-end:span 2; | |
background-color:red; | |
} | |
.grid_img{ | |
grid-row-start:1; | |
grid-row-end:3; | |
} | |
.grid_list{ | |
background-color:magenta; | |
} | |
.column_span{ | |
grid-column-start:1; | |
grid-column-end:span 2; | |
} | |
.content{ | |
display:grid; | |
margin-bottom:1px; | |
grid-template:50px 150px /250px 1fr 7fr; | |
background-color:pink; | |
height:200px; | |
width:100%; | |
} | |
.border{ | |
border-width:3px; | |
text-align:center; | |
font-size:30px; | |
padding:13px; | |
color:black; | |
border-style:solid; | |
border-bottom-color:black; | |
border-left-width:0; | |
} | |
.border:hover{ | |
background-color:grey; | |
cursor:pointer; | |
} | |
.border_sklep{ | |
border-width:3px; | |
text-align:center; | |
font-size:30px; | |
padding:13px; | |
color:black; | |
border-style:solid; | |
border-bottom-color:black; | |
border-left-width:0; | |
border-right-width:0; | |
} | |
.border_sklep:hover{ | |
background-color:grey; | |
cursor:pointer; | |
} | |
#border_kontakt:hover #menu_kontakt{ | |
display:block; | |
background-color:pink; | |
} | |
#menu_kontakt{ | |
background-color:red; | |
position:absolute; | |
display:none; | |
top:250.6px; | |
left:50%; | |
width:25%; | |
border: 5px double black; | |
} | |
.elem_kontakt:hover{ | |
background-color:red; | |
} | |
.border_katalog{ | |
height:67px; | |
border-width:3px; | |
text-align:center; | |
font-size:30px; | |
color:black; | |
padding-top:13px; | |
border-style:solid; | |
border-bottom-color:black; | |
} | |
.border_katalog:hover{ | |
background-color:grey; | |
cursor:pointer; | |
} | |
.border_wyszuk{ | |
display:grid; | |
background-color:black; | |
color:white; | |
text-align:center; | |
padding:13px; | |
width:100%; | |
grid-row-start:2; | |
grid-row-end:2; | |
grid-template-columns:1/ 3; | |
} | |
.noneDecoration{ | |
text-decoration:none; | |
background-color:white; | |
color:black; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Well... close enough