senaduka/old-kivi-za-auta-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add filter js

Browse Source
This commit is contained in:
ismailsosic
2022-03-11 09:40:12 +01:00
parent d808705c45
commit be01f7ac58
11 changed files with 1737 additions and 16168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16157
kivi-cars/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
kivi-cars/package.json
View File

@@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0",
"nouislider": "^15.5.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",

2
kivi-cars/public/index.html
View File

@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Kivi Cars</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

38
kivi-cars/src/App.css
View File

@@ -1,38 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

83
kivi-cars/src/components/Filters.css Normal file
View File

@@ -0,0 +1,83 @@
*{
margin: 0;
padding: 0;
}
nav {
width: 100%;
background-color: #02adba;
color: #fff;
height: 54px;
line-height: 54px;
text-align: center;
}
@media only screen and (min-width: 601px) {
nav {
text-align: center;
width: 100%;
background-color: #02adba;
color: #fff;
height: 64px;
line-height: 64px;
}
.container {
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
margin: auto;
}
.filters-tab {
width: 100%;
height: 48;
}
.filters-links{
margin-top: 2rem;
width: 100%;
display: flex;
flex-grow: 1;
flex-wrap: nowrap;
justify-content: space-evenly;
list-style-type: none;
}
.filters-links li {
text-align: center;
width: 7rem;
flex-grow: 1;
flex-wrap: nowrap;
}
.filters {
display: inline-block;
border-bottom: 2px solid #02adba;
width: 5rem;
padding: 1rem 10rem;
white-space: nowrap;
margin-left: auto;
font-size: 22px;
}
.filters a{
text-decoration: none;
color: #02adba;
}
.filters a:visited {
color: #02adba;
}
.cars-brands-models {
border: 2px solid blue;
width: 100%;
}
}

46
kivi-cars/src/components/Filters.js Normal file
View File

@@ -0,0 +1,46 @@
import React from "react";
import "./Filters.css";
import Cars from "./cars";
const Filters = () => {
const unsortedCars = Cars
const cars = unsortedCars.sort(unsortedCars.brand)
return(
<div>
<nav>
<h3 className="title">Filteri za pretrazivanje</h3>
</nav>
<div className="container">
<div className="filters-tabs">
<ul className="filters-links">
<li className="filters">
<a id="standard-filters" href="#">Filteri</a>
</li>
<li className="filters">
<a id="advanced-filters" href="#">Napredni filteri</a>
</li>
</ul>
</div>
<div className="container-standard">
<div className="cars-brands-models">
<label>Marka: </label>
<select name="brands" id="brands">
{cars.map(car => <option className="option-field" value={car.brand}>{car.brand}</option>)}
</select>
</div>
</div>
<div className="container-advanced">
</div>
</div>
</div>
)
}
export default Filters

1547
kivi-cars/src/components/cars.js Normal file
View File

File diff suppressed because it is too large Load Diff

4
kivi-cars/src/containers/App.css Normal file
View File

@@ -0,0 +1,4 @@
.App{
display: flex;
flex-direction: column;
}

4
kivi-cars/src/App.js → kivi-cars/src/containers/App.js
View File

@@ -1,9 +1,11 @@
import './App.css';
import React from 'react';
import Filters from '../components/Filters';
function App() {
return (
<div className="App">
<h1>Hello</h1>
<Filters />
</div>
);
}

10
kivi-cars/src/index.js
View File

@@ -1,17 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import App from './containers/App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
);

13
kivi-cars/src/reportWebVitals.js
View File

@@ -1,13 +0,0 @@
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;