mirror of
https://github.com/JonasunderscoreJones/jonasjones.dev.git
synced 2025-10-23 08:59:19 +02:00
attempted fix at projects page
This commit is contained in:
parent
f894d3fde5
commit
b3a7595a5e
1 changed files with 56 additions and 64 deletions
|
@ -1,61 +1,42 @@
|
|||
<script script lang="ts" async>
|
||||
import { select_option } from "svelte/internal";
|
||||
<script lang="ts">
|
||||
import FontAwesome from "../../components/FontAwesome.svelte";
|
||||
import Footer from "../../components/Footer.svelte";
|
||||
import Footer from "../../components/Footer.svelte";
|
||||
import NavBar from "../../components/NavBar.svelte";
|
||||
import ParallaxBg from "../../components/ParallaxBg.svelte";
|
||||
import Padding from "../../components/padding.svelte";
|
||||
|
||||
// fetch data from https://cdn.jonasjones.dev/api/projects/projects.json
|
||||
// and store it in a variable called projects
|
||||
import projects from "./projects.json";
|
||||
|
||||
let searchResults = [];
|
||||
|
||||
async function fetchProjects() {
|
||||
try {
|
||||
const response = await fetch('https://cdn.jonasjones.dev/api/projects/projects.json');
|
||||
console.log(response);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch projects data');
|
||||
}
|
||||
projects = await response.json().then(uwu => console.log(projects));
|
||||
searchResults = projects;
|
||||
return projects;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
let projects = fetchProjects();
|
||||
console.log(projects);
|
||||
var searchResults = projects;
|
||||
|
||||
var searchtext = '';
|
||||
var searchcategory = '';
|
||||
var searchlanguage = '';
|
||||
var searchstatus = '';
|
||||
var searchtext = '';
|
||||
var searchcategory = '';
|
||||
var searchlanguage = '';
|
||||
var searchstatus = '';
|
||||
|
||||
function handleSearchText(event) {
|
||||
function handleSearchText(event) {
|
||||
searchtext = event.target.value.toLowerCase();
|
||||
console.log(projects)
|
||||
handleSearch()
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearchCategory(event) {
|
||||
function handleSearchCategory(event) {
|
||||
searchcategory = event.target.value.toLowerCase();
|
||||
handleSearch()
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearchLang(event) {
|
||||
function handleSearchLang(event) {
|
||||
searchlanguage = event.target.value.toLowerCase();
|
||||
handleSearch()
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearchStatus(event) {
|
||||
function handleSearchStatus(event) {
|
||||
searchstatus = event.target.value.toLowerCase();
|
||||
handleSearch()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function handleSearch() {
|
||||
function handleSearch() {
|
||||
// set searchResults by filtering with searchtext, searchcategory, and searchlanguage
|
||||
searchResults = projects.filter(project => {
|
||||
var text = project.title.toLowerCase() + project.description.toLowerCase();
|
||||
|
@ -64,7 +45,7 @@
|
|||
var status = project.status.toLowerCase();
|
||||
return text.includes(searchtext) && category.includes(searchcategory) && language.includes(searchlanguage) && status.includes(searchstatus);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
@ -223,6 +204,17 @@
|
|||
padding-right: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 620px) {
|
||||
.project-container {
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<FontAwesome />
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue