From 0efed22013d8d59e89edd00b997351391db756df Mon Sep 17 00:00:00 2001 From: Andrew Simonson Date: Fri, 6 Jan 2023 22:16:21 -0500 Subject: [PATCH] Create checkbox filtering --- src/App.js | 1 + src/assets/css/checkbox.css | 53 +++++++ src/componets/Project.js | 2 +- src/componets/ProjectList.js | 2 +- src/pages/Projects.js | 295 +++++++++++++++++++++++++++-------- src/scripts/checkbox.js | 21 +++ 6 files changed, 309 insertions(+), 65 deletions(-) create mode 100644 src/assets/css/checkbox.css create mode 100644 src/scripts/checkbox.js diff --git a/src/App.js b/src/App.js index 8b08bc4..11ad1dd 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import { Route, Link, Routes, BrowserRouter as Router } from "react-router-dom"; import "./assets/css/App.css"; +import "./assets/css/checkbox.css" import "./assets/css/head.scss"; import menu from "./assets/icons/menu.svg"; import Nav from "./componets/Nav.js"; diff --git a/src/assets/css/checkbox.css b/src/assets/css/checkbox.css new file mode 100644 index 0000000..a473b18 --- /dev/null +++ b/src/assets/css/checkbox.css @@ -0,0 +1,53 @@ +.hidden { + display: none; +} + +/* checkbox by Matt Smith */ +.checkbox-wrapper .switch { + display: inline-block; + height: 34px; + position: relative; + width: 60px; +} + +.checkbox-wrapper .switch input { + display: none; +} + +.checkbox-wrapper .slider { + background-color: #ccc; + bottom: 0; + cursor: pointer; + left: 0; + position: absolute; + right: 0; + top: 0; + transition: 0.4s; +} + +.checkbox-wrapper .slider:before { + background-color: #fff; + bottom: 4px; + content: ""; + height: 26px; + left: 4px; + position: absolute; + transition: 0.4s; + width: 26px; +} + +.checkbox-wrapper input:checked+.slider { + background-color: #66bb6a; +} + +.checkbox-wrapper input:checked+.slider:before { + transform: translateX(26px); +} + +.checkbox-wrapper .slider.round { + border-radius: 34px; +} + +.checkbox-wrapper .slider.round:before { + border-radius: 50%; +} \ No newline at end of file diff --git a/src/componets/Project.js b/src/componets/Project.js index 4bc58b5..fcb94e0 100644 --- a/src/componets/Project.js +++ b/src/componets/Project.js @@ -24,7 +24,7 @@ export default class Project extends React.Component { ); } return ( -
+

{this.props.title}

diff --git a/src/componets/ProjectList.js b/src/componets/ProjectList.js index d01a276..463bf45 100644 --- a/src/componets/ProjectList.js +++ b/src/componets/ProjectList.js @@ -11,7 +11,7 @@ export default function ProjectList(props){ ); }); return( -
+
{projects}
); diff --git a/src/pages/Projects.js b/src/pages/Projects.js index 751c159..1897832 100644 --- a/src/pages/Projects.js +++ b/src/pages/Projects.js @@ -1,91 +1,260 @@ -import ProjectList from '../componets/ProjectList' -import Project from '../componets/Project' -import github from '../assets/icons/github.svg' -import globe from '../assets/icons/globe.svg' +import ProjectList from "../componets/ProjectList"; +import Project from "../componets/Project"; +import { toggle } from "../scripts/checkbox"; +import github from "../assets/icons/github.svg"; +import globe from "../assets/icons/globe.svg"; -import geovisF from '../assets/photos/geovisF.png' -import chessbed from '../assets/photos/chessbed.png' -import occupyrit from '../assets/photos/occupyRIT.png' -import slate from '../assets/photos/slate.png' -import website from '../assets/photos/website.png' -import resume from '../assets/photos/resume.png' -import yugoslavia from '../assets/photos/ceoOfYugo.png' -import vexbutt from '../assets/photos/vexcodeButtons.jpeg' +import geovisF from "../assets/photos/geovisF.png"; +import chessbed from "../assets/photos/chessbed.png"; +import occupyrit from "../assets/photos/occupyRIT.png"; +import slate from "../assets/photos/slate.png"; +import website from "../assets/photos/website.png"; +import resume from "../assets/photos/resume.png"; +import yugoslavia from "../assets/photos/ceoOfYugo.png"; +import vexbutt from "../assets/photos/vexcodeButtons.jpeg"; export default function Projects() { return ( -
-
-

Projects

-

Project status is indicated by the color of the project card:
⬤ - Complete
- ⬤ - Work In Progress
⬤ - Incomplete +

+
+

Projects

+

+ Project status is indicated by the color of the project card: +
+ ⬤ - Complete +
+ ⬤ - Work In Progress +
+ ⬤ - Incomplete

-

Pinned:

- - ], ["https://slate.csh.rit.edu/", site]]} > - Slate is a web app designed to help event coordinators schedule events by congregating participant calendar data. Includes Computer Science House account integration. +
+ + Pinned + + Programming + + Geospacial +
+ + , + ], + ]} + > + ArcGIS Map of the most effective alternative energy sources in the + continental United States - ]]}> - ArcGIS Map of the most effective alternative energy sources in the continental United States + , + ], + ]} + > + Collects RIT Gym Occupancy data for analysis, determining busiest + times. - ]]}> - Collects RIT Gym Occupancy data for analysis, determining busiest times. - - ]]} > - A team derived from the RIT Financial Management Association dedicated to learning about financial management of equities using automated solutions developed by students. - - -

All:

- - ]]}> - ArcGIS Map of the most effective alternative energy sources in the continental United States - - ]]}> - Collects RIT Gym Occupancy data for analysis, determining busiest times. - - ]]} > + , + ], + ]} + > A template for creating Chess.com user profile embeds - ], ["https://asimonson.com/Resume.pdf/", site]]} > - My Resume, made in LaTeX with a custom design derived by the AltaCV template on OverLeaf. + , + ], + [ + "https://asimonson.com/Resume.pdf/", + site, + ], + ]} + > + My Resume, made in LaTeX with a custom design derived by the AltaCV + template on OverLeaf. - ], ["https://asimonson.com/", site]]} > + , + ], + ["https://asimonson.com/", site], + ]} + > A personal portfolio site made with React.js. - ], ["https://slate.csh.rit.edu/", site]]} > - Slate is a web app designed to help event coordinators schedule events by congregating participant calendar data. Includes Computer Science House account integration. + , + ], + ["https://slate.csh.rit.edu/", site], + ]} + > + Slate is a web app designed to help event coordinators schedule events + by congregating participant calendar data. Includes Computer Science + House account integration. - ]]} > - A Discord bot to handle role management and statistics for RIT's Humans vs. Zombies games. + , + ], + ]} + > + A Discord bot to handle role management and statistics for RIT's + Humans vs. Zombies games. - ]]} > - A team derived from the RIT Financial Management Association dedicated to learning about financial management of equities using automated solutions developed by students. + , + ], + ]} + > + A team derived from the RIT Financial Management Association dedicated + to learning about financial management of equities using automated + solutions developed by students. - - A tampermonkey tool used to automatically answer and submit online trivia forms, which can be tailored to different site layouts.

+ + A tampermonkey tool used to automatically answer and submit online + trivia forms, which can be tailored to different site layouts. +
+
Source is currently private. - ]]} > - A modular discord bot to manage class discord servers divided by class sections. Used in my Web and Mobile 101 class discord server. + , + ], + ]} + > + A modular discord bot to manage class discord servers divided by class + sections. Used in my Web and Mobile 101 class discord server. - ]]} > - A personal Discord bot focused on statistical insight and role management for NationsGame, including NG Rolls Sim accessibility. + , + ], + ]} + > + A personal Discord bot focused on statistical insight and role + management for NationsGame, including NG Rolls Sim accessibility. - ]]} > - A simulator for the browser game, NationsGame, to analyze unit composition and predict in-game victors and unit statistics.
- Unfortunately, NationsGame is now defunct. Limited screenshots of functionality. + , + ], + ]} + > + A simulator for the browser game, NationsGame, to analyze unit + composition and predict in-game victors and unit statistics. +
+ Unfortunately, NationsGame is now defunct. Limited screenshots of + functionality. - ]]} > + , + ], + ]} + > A GNOME extension that cycles through a folder of wallpapers. - ]]} > + , + ], + ]} + > VEXcode button library + examples and template for the VEX V5 brain - ]]}> - A C++ keylogger for windows based off a udemy course with my custom modifications and powershell script. + , + ], + ]} + > + A C++ keylogger for windows based off a udemy course with my custom + modifications and powershell script.
- ) -} \ No newline at end of file + ); +} diff --git a/src/scripts/checkbox.js b/src/scripts/checkbox.js new file mode 100644 index 0000000..8c83bac --- /dev/null +++ b/src/scripts/checkbox.js @@ -0,0 +1,21 @@ +export function toggle() { + let toggles = document.querySelectorAll( + ".checkbox-wrapper input[type=checkbox]" + ); + let allow = []; + toggles.forEach(function (x) { + if (x.checked) { + allow.push(x.id); + } + }); + let list = document.querySelectorAll(".checkbox-client > div"); + for (let i = 0; i < list.length; i++) { + list[i].classList.add("hidden"); + for (let x = 0; x < list[i].classList.length; x++) { + if (allow.includes(list[i].classList[x])) { + list[i].classList.remove("hidden"); + break; + } + } + } +}