Skip to content

Instantly share code, notes, and snippets.

@Mortimer333

Mortimer333/index.html

Created May 13, 2018 19:16
Show Gist options
  • Save Mortimer333/8e1eace46051913e85f9a0b0b0479742 to your computer and use it in GitHub Desktop.
Save Mortimer333/8e1eace46051913e85f9a0b0b0479742 to your computer and use it in GitHub Desktop.
Download ZIP
first attempt to make a shop with searching for products
Raw
index.html
<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>
Raw
katalog.html
<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>
Raw
main.js
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();
Raw
style.css
*{
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;
}
@Mortimer333
Copy link
Author

Well... close enough

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment