Skip to content

Commit

Permalink
finishing jquery hacks
Browse files Browse the repository at this point in the history
  • Loading branch information
@vardaansinha
vardaansinha committed Dec 21, 2023
1 parent 39da139 commit d77ac76
Showing 1 changed file with 215 additions and 0 deletions.
215 changes: 215 additions & 0 deletions _notebooks/2023-12-19-jqueryhacks.ipynb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"---\n",
"- title: JQuery and CRUD Hacks\n",
"- categories: [Lesson]\n",
"- tags: [java, lesson]\n",
"- type: hacks\n",
"- week: 15\n",
"- author: Vardaan\n",
"- description: CRUD + JQUERY Hacks\n",
"- toc: True\n",
"---"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Question: What are some real life applications of jQuery? Name at least two you can think of\n",
"- Form Validation: Validate user input on the client side before submitting the form to the server\n",
"- Slideshows, galleries, etc.: Create image galleries and sliders on websites with animation capabilities make it easy to implement features like image slideshows and lightboxes\n",
"\n",
"popcorn hack: talk about usage of one of four elements of CRUD from your project in tri 1. Focus on how CRUD was implemented.\n",
"- My project last trimester was a JFreechart implementation where users can input a number and it creates a dataset in the backend, this employed the 'R' functionality of CRUD as the server has to read the user input in order to create a real-time graph."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Free Response and MCQ"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"1. What does CRUD stand for?\n",
" - Create\n",
" - Read\n",
" - Update\n",
" - Delete\n",
"\n",
"2. What are the HTTP verbs that are associated with each CRUD action?\n",
" - C - POST\n",
" - R - GET\n",
" - U - UPDATE\n",
" - D - DELETE\n",
"\n",
"3. What is JQuery?\n",
" - a library that allows us to use some of JavaScript’s built in functions\n",
"\n",
"4. Match A, B, and C into the JQuery event handler for a data table\n",
" - A: 'click'\n",
" - B: '.delete-btn'\n",
" - C: '#data-table'\n",
"\n",
" $(???).on(???, ???, function() {\n",
" // code\n",
" });\n",
"\n",
" $('.delete-btn').on(click, #data-table, function() {\n",
" //code\n",
" });\n",
"\n",
"5. Why do we use JQUERY with CRUD?\n",
"- JQuery is frontend, while CRUD is done on backend. Using the combination of the two allows for efficient and simpler backend and frontend code connections. "
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Finish the update JQUERY function\n",
"- its all the way at the end, you should see the green comment\n",
"- you can choose to use the two lines I've already given or not"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"<script src=\"https://code.jquery.com/jquery-3.6.4.min.js\"></script>\n",
"\n",
"<style>\n",
" body {\n",
" background-color: #ffe1f4; /* Barbie Pink */\n",
" font-family: 'Arial', sans-serif;\n",
" margin: 0;\n",
" padding: 0;\n",
" }\n",
"\n",
" table {\n",
" border-collapse: collapse;\n",
" width: 100%;\n",
" margin-top: 20px;\n",
" }\n",
"\n",
" th, td {\n",
" border: 1px solid #e66b8f; /* Barbie Pink */\n",
" padding: 10px;\n",
" text-align: left;\n",
" }\n",
"\n",
" th {\n",
" background-color: #ff8bbd; /* Barbie Pink */\n",
" color: white;\n",
" }\n",
"\n",
" button {\n",
" background-color: #ff8bbd; /* Barbie Pink */\n",
" color: white;\n",
" border: none;\n",
" padding: 8px 12px;\n",
" cursor: pointer;\n",
" }\n",
"\n",
" button:hover {\n",
" background-color: #e66b8f; /* Lighter Barbie Pink */\n",
" }\n",
"</style>\n",
"\n",
"\n",
"<table id=\"data-table\">\n",
" <thead>\n",
" <tr>\n",
" <th>ID</th>\n",
" <th>Name</th>\n",
" <th>Email</th>\n",
" <th>Actions</th>\n",
" </tr>\n",
" </thead>\n",
" <tbody>\n",
" <!-- Data will be dynamically added here -->\n",
" </tbody>\n",
"</table>\n",
"\n",
"<button id=\"create-btn\">Create Barbie Character</button>\n",
"\n",
"<script>\n",
" const initialData = [\n",
" { id: 1, name: 'Barbie', email: 'barbie@example.com' },\n",
" { id: 2, name: 'Ken', email: 'ken@example.com' }\n",
" ];\n",
"\n",
" function renderData(data) {\n",
" const tableBody = $('#data-table tbody');\n",
" tableBody.empty();\n",
"\n",
" data.forEach(item => {\n",
" const row = `\n",
" <tr>\n",
" <td>${item.id}</td>\n",
" <td>${item.name}</td>\n",
" <td>${item.email}</td>\n",
" <td>\n",
" <button class=\"update-btn\" data-id=\"${item.id}\">Update</button>\n",
" <button class=\"delete-btn\" data-id=\"${item.id}\">Delete</button>\n",
" </td>\n",
" </tr>\n",
" `;\n",
" tableBody.append(row);\n",
" });\n",
" }\n",
"\n",
" function createBarbieCharacter() {\n",
" const newName = prompt('Enter the name of the Barbie character:');\n",
" const newEmail = prompt('Enter the email of the Barbie character:');\n",
" const newId = initialData.length + 1;\n",
" \n",
" const newData = [...initialData, { id: newId, name: newName, email: newEmail }];\n",
" renderData(newData);\n",
" }\n",
"\n",
" $('#create-btn').on('click', createBarbieCharacter);\n",
"\n",
" $('#data-table').on('click', '.delete-btn', function() {\n",
" const idToDelete = $(this).data('id');\n",
" const newData = initialData.filter(item => item.id !== idToDelete);\n",
" renderData(newData);\n",
" });\n",
"\n",
"$('#data-table').on('click', '.update-btn', function() {const idToEdit = $(this).data('id');\n",
" const updateIndex = initialData.findIndex(item => item.id === idToEdit);\n",
" const updateName = prompt('Enter a new name:');\n",
" const updateEmail = prompt('Enter a new email:');\n",
" currentData[updateIndex] = {id: idToEdit, name: updateName, email: updateEmail};\n",
" renderData(currentData);\n",
" });\n",
"\n",
"\n",
" // Initial rendering\n",
" renderData(initialData);\n",
"</script>\n"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Java",
"language": "java",
"name": "java"
},
"language_info": {
"name": "java",
"version": "3.12.0"
}
},
"nbformat": 4,
"nbformat_minor": 2
}

0 comments on commit d77ac76

Please sign in to comment.