1const projectData = [ 2 { 3 id: 1, 4 type: "JavaScript", 5 name: "Personal Portfolio", 6 image: "./images/Portfolio2.PNG", 7 technologies: ["Javascript", "jQuery", "HTML", "SASS"], 8 description: "Developed a personal portfolio website to display my projects and skills. This is a fully responsive website and works on majority media devices.This page is hosted by GitHub pages.", 9 github: "https://github.com/DevalPanchal/devalpanchal.github.io/tree/master", 10 location: "#Home", 11 highlight: true 12 }, 13 { 14 id: 2, 15 type: "JavaScript", 16 name: "Sorting Algorithm Visualization", 17 image: "./images/Sorting_Algorithm.PNG", 18 technologies: ["ReactJS", "HTML", "SASS"], 19 description: "This is a sorting algorithm visualization project, made to better understand different types of sorting algorithms. This project was made using ReactJS. This project displays how different types of sorting algorithms work, by giving the user a visual representation of the algorithm works behind the scenes step by step.", 20 github: "https://github.com/DevalPanchal/Sorting-Algorithms", 21 location: "https://devalpanchal.github.io/Sorting-Algorithms/", 22 highlight: true 23 }, 24 { 25 id: 3, 26 type: "Java", 27 name: "Pictionary Clone", 28 image: "./images/pictionary.PNG", 29 technologies: ["Java", "Javafx", "FXML", "CSS"], 30 description: "Responsible for the front end design for a simple multiplayer pictionary game made as group project with users: <a href='https://github.com/jkaterberg' class='member-link'>jkaterberg</a>, <a href='https://github.com/daniel-earley' class='member-link'>daniel-earley</a>, <a href='https://github.com/SJustinWong' class='member-link'>SJustinWong</a>. This game Follows the standard pictionary game loop, one player is selected to draw an image from a random word. The image is streamed to all other players, who are able to make guesses about the original word. Once the word is guessed, the next player is given a word to draw and the loop repeats", 31 github: "https://github.com/DevalPanchal/not-pictionary", 32 location: null, 33 highlight: true 34 }, 35 { 36 id: 4, 37 type: "React", 38 name: "Pokedex", 39 image: "./images/app-preview.PNG", 40 technologies: ["ReactJS", "HTML", "SASS"], 41 description: "A simple pokedex webpage showcasing pokemon, from <a href='pokeapi.co' class='member-link'>pokeapi.co</a>. This website was made using ReactJS and utilizing react hooks to achieve the desired outcome. The goal of this app was to familiarize myself with react hooks and the fetch api, and learn about caching fetched data.", 42 github: "https://github.com/DevalPanchal/react-pokedex", 43 location: "https://devalpanchal.github.io/react-pokedex/", 44 highlight: true 45 }, 46 { 47 id: 5, 48 type: "Node", 49 name: "Real-Time Chat Application", 50 image: "./images/JustChat.PNG", 51 technologies: ["NodeJS", "Express", "Socket.io", "ejs", "SASS"], 52 description: "This is a real time chat application, made using socket.io, enabling real-time bidirectional communication. This app at it's core showcases the communication between the frontend and backend, and made into a fun project, which can be used to talk to friends.", 53 github: "https://github.com/DevalPanchal/Chat_App", 54 location: "https://fast-citadel-22034.herokuapp.com/", 55 highlight: true 56 }, 57 { 58 id: 6, 59 type: "React", 60 name: "Simple Budget Calculator", 61 image: "./images/Budget_Calculator.PNG", 62 technologies: ["ReactJS", "HTML/CSS"], 63 description: "This is a simple frontend monthly budget planner. The goal of this project was to better understand the flow of frontend application using various techniques, such as CRUD methods, data visualization, and design flow. This project allows storage in your browser's localstorage, and is planned to move to a server and database, for robust usage of the app.", 64 github: "https://github.com/DevalPanchal/MonthlyBudgetPlanner", 65 location: "https://devalpanchal.github.io/MonthlyBudgetPlanner/", 66 highlight: true 67 }, 68 { 69 id: 7, 70 type: "Java", 71 name: "Spam Filter", 72 image: "./images/SpamFilter.PNG", 73 technologies: ['Java', 'Javafx', "FXML"], 74 description: "This is a simple spam detector developed using java and the interface was managed using javaFX. The purpose of this project was to understand File I/O and learn the MVC fundamentals using a provided dataset of emails for the model.", 75 github: "https://github.com/DevalPanchal/spam_filter", 76 location: null, 77 highlight: false 78 }, 79 { 80 id: 8, 81 type: "Java", 82 name: "File Sharer", 83 image: "./images/FileSharing.PNG", 84 technologies: ["Java", "Javafx", "FXML"], 85 description: "Developed a simple file sharing application using java and javafx. This project applied sockets multithreading and file i/o skills and built with an MVC structure in mind. This project depends on gradle and the files associated with it.", 86 github: "https://github.com/DevalPanchal/Assignment2", 87 location: null, 88 highlight: false 89 }, 90 { 91 id: 9, 92 type: "Node", 93 name: "Mini Message Board", 94 image: "./images/Mini_Message_Board.PNG", 95 technologies: ["NodeJS", "Express", "ejs", "SASS"], 96 description: "This project was developed using node.js. The project displays the basic functionality of a node project, using express as the backend web framework. The views of this project were generated by ejs templating language.", 97 github: "https://github.com/DevalPanchal/Mini-Message-Board", 98 location: "https://stormy-citadel-85540.herokuapp.com/", 99 highlight: false 100 }, 101 { 102 id: 10, 103 type: "React", 104 name: "Random Quote Machine", 105 image: "./images/Random_Quote_Machine.PNG", 106 technologies: ["ReactJS", "HTML/CSS"], 107 description: "This project was created using React.js Library. This project fetches data using axios, which is a promise based HTTP client for the browser. The data was collected from a site provided by", 108 github: "https://github.com/DevalPanchal/Random-Quote-Machine", 109 location: "https://codepen.io/devalpanchal2401/pen/poEaRJW", 110 highlight: false 111 }, 112 { 113 id: 11, 114 type: "JavaScript", 115 name: "Quiz App", 116 image: "./images/Simple_Quiz_App.PNG", 117 technologies: ["JavaScript", "HTML/CSS"], 118 description: "This project was made using plain HTML/CSS and Javascript. This app features 3 selectable quiz options each with there own set of questions. This quiz is multiple choice giving 4 options to the user to selected from and displaying a progress bar and a final mark when completed.", 119 github: "https://github.com/DevalPanchal/Simple-Quiz-App", 120 location: "https://codepen.io/devalpanchal2401/project/editor/ANwPeN#", 121 highlight: false 122 }, 123 { 124 id: 12, 125 type: "JavaScript", 126 name: "United States GDP Visualization", 127 image: "./images/Data_Visualisation.PNG", 128 technologies: ["JavaScript", "D3.js", "HTML/CSS"], 129 description: "This project was made using basic html/css and javascript along with javascript's data visualisation library. The project retrieves data using XMLHttpRequest() function and gives a graphical representation of the data provided.", 130 github: "https://github.com/DevalPanchal/United_States_GDP_Visualisation", 131 location: "https://codepen.io/devalpanchal2401/pen/yLaRjoJ", 132 highlight: false 133 }, 134 { 135 id: 13, 136 type: "JavaScript", 137 name: "JavaScript Calculator", 138 image: "./images/Javascript_Calculator.PNG", 139 technologies: ["JavaScript", "JQuery", "HTML/CSS"], 140 description: "This project was made using HTML/CSS, Javascript and Jquery. This is a simple javascript calculator capable to doing basic arithmetic operations (addition, subtraction, multiplication and division), following BEDMAS/PEMDAS rule.", 141 github: "https://github.com/DevalPanchal/Javascript-Calculator", 142 location: "https://codepen.io/devalpanchal2401/pen/bGwKWMQ", 143 highlight: false 144 }, 145 { 146 id: 14, 147 type: "Python", 148 name: "BlackJack", 149 image: "./images/Test.PNG", 150 technologies: ["Python"], 151 description: "This project was made using python. This project generates a deck of cards following an object-oriented principles delivering a robust card system which can be used in any card game.", 152 github: "https://github.com/DevalPanchal/Python_Blackjack", 153 location: "https://repl.it/@DevalPanchal/PythonBlackjack#Game.py", 154 highlight: false 155 }, 156]; 157 158const highlightProjects = document.getElementById('highlight-projects'); 159const allProjects = document.getElementById('all-projects'); 160const reactProjects = document.getElementById('react-projects'); 161const javascriptProjects = document.getElementById('javascript-projects'); 162const nodeProjects = document.getElementById('node-projects'); 163const pythonProjects = document.getElementById('python-projects'); 164const javaProjects = document.getElementById("java-projects"); 165 166const projectWrapper = document.querySelector('.project-wrapper'); 167 168let selections = document.querySelectorAll(".project-select"); 169 170let projects = document.getElementsByClassName("project"); 171 172const viewHighlightedProjects = () => { 173 console.log("you are viewing highlighted projects"); 174 let filteredData = projectData.filter(p => p.highlight); 175 selectedFilter(highlightProjects, "highlight-projects"); 176 resetState(); 177 appendFilteredData(filteredData); 178 return filteredData; 179} 180 181const viewAllProjects = () => { 182 console.log("you are view all projects"); 183 let filteredData = projectData.filter(p => p.type); 184 selectedFilter(allProjects, "all-projects"); 185 resetState(); 186 appendFilteredData(filteredData); 187 return filteredData; 188} 189 190const viewReactProjects = () => { 191 console.log("you are viewing react projects"); 192 let filteredData = projectData.filter(p => p.type == "React"); 193 selectedFilter(reactProjects, "react-projects"); 194 resetState(); 195 appendFilteredData(filteredData); 196 // console.log(filteredData); 197} 198 199const viewJavaScriptProjects = () => { 200 console.log("you are viewing react projects"); 201 let filteredData = projectData.filter(p => p.type == "JavaScript"); 202 selectedFilter(javascriptProjects, "javascript-projects"); 203 resetState(); 204 appendFilteredData(filteredData); 205 // console.log(filteredData); 206} 207 208const viewNodeProjects = () => { 209 console.log("you are viewing react projects"); 210 let filteredData = projectData.filter(p => p.type == "Node"); 211 selectedFilter(nodeProjects, "node-projects"); 212 resetState(); 213 appendFilteredData(filteredData); 214 // console.log(filteredData); 215} 216 217const viewPythonProjects = () => { 218 console.log("you are viewing react projects"); 219 let filteredData = projectData.filter(p => p.type == "Python"); 220 selectedFilter(pythonProjects, "python-projects"); 221 resetState(); 222 appendFilteredData(filteredData); 223 // console.log(filteredData); 224} 225 226const viewJavaProjects = () => { 227 console.log("you are viewing java projects"); 228 let filteredData = projectData.filter(p => p.type == "Java"); 229 selectedFilter(javaProjects, "java-projects"); 230 resetState(); 231 appendFilteredData(filteredData); 232 // console.log(filteredData); 233} 234 235let highlighedProjects = viewHighlightedProjects(); 236
237highlighedProjects.forEach((projects) => { 238 var projectDiv = document.createElement('div'); 239 240 projectDiv.innerHTML = ` 241 <div class="project" id="project"> 242 <img class="project-img" src="${projects.image}" alt="${projects.name}"/> 243 <div class="project-information"> 244 <div class="text"> 245 <h1>${projects.name}</h1> 246 <div class="technologies-used"> 247 ${projects.technologies.map(tech => `<div class="technologies">${tech}</div>`).join('')} 248 </div> 249 <p>${projects.description}</p> 250 <a href=${projects.github} rel="noopener noreferrer" target="_blank" class="link-github">Github</a> 251 ${projects.location ? `<a href=${projects.location} rel="noopener noreferrer" target="_blank" class="link-site">View Site</a>`: ""} 252 </div> 253 </div> 254 </div> 255 `; 256 257 // projectDiv.classList.add('project'); 258 // projectDiv.innerHTML = `${projectData.name}`; 259 260 // projectWrapper.appendChild(projectDiv); 261}); 262 263function appendFilteredData(filteredData) { 264 filteredData.forEach((filtered) => { 265 var projectDiv = document.createElement('div'); 266 projectDiv.innerHTML = ` 267 <div class="project" id="project"> 268 <img class="project-img" src="${filtered.image}" alt="${filtered.name}"/> 269 <div class="project-information"> 270 <div class="text"> 271 <h1>${filtered.name}</h1> 272 <div class="technologies-used"> 273 ${filtered.technologies.map(tech => `<div class="technologies">${tech}</div>`).join('')} 274 </div> 275 <p>${filtered.description}</p> 276 <a href=${filtered.github} rel="noopener noreferrer" target="_blank" class="link-github">Github</a> 277 ${filtered.location ? `<a href=${filtered.location} rel="noopener noreferrer" target="_blank" class="link-site">View Site</a>`: ""} 278 </div> 279 </div> 280 </div> 281 `; 282 // projectDiv.classList.add('project'); 283 // projectDiv.innerHTML = `${filteredData.name}`; 284 projectWrapper.appendChild(projectDiv); 285 }); 286} 287 288function selectedFilter(elementTag, elementID) { 289 elementTag.classList.add("selected"); 290 selections.forEach((item, index) => { 291 if (item.id !== elementID) { 292 item.classList.remove("selected"); 293 } 294 }) 295} 296 297function resetState() { 298 projectWrapper.classList.add("fade"); 299 300 projectWrapper.innerHTML = ``; 301 302 setTimeout(() => { 303 projectWrapper.classList.remove("fade"); 304 }, 600); 305} 306 307highlightProjects.addEventListener('click', viewHighlightedProjects); 308allProjects.addEventListener('click', viewAllProjects); 309reactProjects.addEventListener('click', viewReactProjects); 310javascriptProjects.addEventListener('click', viewJavaScriptProjects); 311nodeProjects.addEventListener('click', viewNodeProjects); 312pythonProjects.addEventListener('click', viewPythonProjects); 313javaProjects.addEventListener('click', viewJavaProjects);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.