Jonas_Jones/jonasjones.dev
1
0
Fork 0
mirror of https://github.com/JonasunderscoreJones/jonasjones.dev.git synced 2025-10-23 08:59:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

attempted fix at projects page

Browse source
This commit is contained in:
Jonas_Jones 2023-07-24 03:00:24 +02:00
parent f894d3fde5
commit b3a7595a5e
1 changed files with 56 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

120
src/routes/projects/+page.svelte
View file

@ -1,70 +1,51 @@
<script script lang="ts" async> <script lang="ts">
import { select_option } from "svelte/internal"; import FontAwesome from "../../components/FontAwesome.svelte";
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 NavBar from "../../components/NavBar.svelte"; import ParallaxBg from "../../components/ParallaxBg.svelte";
import ParallaxBg from "../../components/ParallaxBg.svelte"; import Padding from "../../components/padding.svelte";
import Padding from "../../components/padding.svelte";
// fetch data from https://cdn.jonasjones.dev/api/projects/projects.json import projects from "./projects.json";
// and store it in a variable called projects
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 searchtext = '';
var searchcategory = '';
var searchlanguage = '';
var searchstatus = '';
function handleSearchText(event) {
searchtext = event.target.value.toLowerCase();
console.log(projects)
handleSearch()
}
function handleSearchCategory(event) {
searchcategory = event.target.value.toLowerCase();
handleSearch()
}
function handleSearchLang(event) {
searchlanguage = event.target.value.toLowerCase();
handleSearch()
}
function handleSearchStatus(event) {
searchstatus = event.target.value.toLowerCase();
handleSearch()
}
function handleSearch() { var searchResults = projects;
// set searchResults by filtering with searchtext, searchcategory, and searchlanguage
searchResults = projects.filter(project => { var searchtext = '';
var text = project.title.toLowerCase() + project.description.toLowerCase(); var searchcategory = '';
var category = project.categories.join(' ').toLowerCase(); var searchlanguage = '';
var language = project.languages.join(' ').toLowerCase(); var searchstatus = '';
var status = project.status.toLowerCase();
return text.includes(searchtext) && category.includes(searchcategory) && language.includes(searchlanguage) && status.includes(searchstatus); function handleSearchText(event) {
}); searchtext = event.target.value.toLowerCase();
} handleSearch()
}
function handleSearchCategory(event) {
searchcategory = event.target.value.toLowerCase();
handleSearch()
}
function handleSearchLang(event) {
searchlanguage = event.target.value.toLowerCase();
handleSearch()
}
function handleSearchStatus(event) {
searchstatus = event.target.value.toLowerCase();
handleSearch()
}
function handleSearch() {
// set searchResults by filtering with searchtext, searchcategory, and searchlanguage
searchResults = projects.filter(project => {
var text = project.title.toLowerCase() + project.description.toLowerCase();
var category = project.categories.join(' ').toLowerCase();
var language = project.languages.join(' ').toLowerCase();
var status = project.status.toLowerCase();
return text.includes(searchtext) && category.includes(searchcategory) && language.includes(searchlanguage) && status.includes(searchstatus);
});
}
</script> </script>
@ -223,6 +204,17 @@
padding-right: 10px; 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> </style>
<FontAwesome /> <FontAwesome />