This document provides an overview and agenda for a workshop on building an app with JavaScript and jQuery. The workshop will be hosted by Thinkful and will teach attendees how to build a shopping list app. The agenda includes reviewing starter code, learning key JavaScript and jQuery concepts, building the app with help from TAs, and reviewing solutions at the end. Attendees are encouraged to fully take advantage of support from instructors and TAs during the building process.
Accessible custom radio buttons and checkboxesRuss Weakley
Creating custom-designed radio buttons and checkboxes has never been easy. Many developers have found ways of hacking these elements using CSS and JavaScript. but can they also be accessible. The answer is yes, with a little extra effort. This presentation will walk through some simple examples to show how radio buttons and checkboxes can be semantic as well as keyboard/screen-reader accessible.
ASP.NET has evolved a lot in the last few years with the addition of ASP.NET MVC and Dynamic Data, as well as the continuous improvement of WebForms and ASP.NET AJAX. This session will provide a roadmap of the changes that are coming with ASP.NET 4 and Visual Studio 2010.
This presentation for Inclusive Design 24 (#ID24) explores how to create accessible, usable "floating" labels. Floating labels are where the label moves above form controls based on user interaction.
Intro wordpress (1) copy with dipesh sharmadegana2009
this is my own website making add. in this artical we know that how to make website in easy without coading.so my friends make sure that how make a website with ur domain
Whether you have a bit of experience or you're brand new to code, this webinar is right for you. Walk away with:
Valuable resources that will save you time during the holiday season
The ability to update your email design like a veteran developer
Tips on how to to update your HTML more efficiently
A decrease in daily frustrations when making web updates and more!
This talk will look at a range of common application components and how they can be made accessible - quickly and easily - for all users. We'll look at how to notify users when changing the DOM after page load. We will also look in-depth at accessible form validation, modal windows and adding additional information for screen reader users.
Accessible custom radio buttons and checkboxesRuss Weakley
Creating custom-designed radio buttons and checkboxes has never been easy. Many developers have found ways of hacking these elements using CSS and JavaScript. but can they also be accessible. The answer is yes, with a little extra effort. This presentation will walk through some simple examples to show how radio buttons and checkboxes can be semantic as well as keyboard/screen-reader accessible.
ASP.NET has evolved a lot in the last few years with the addition of ASP.NET MVC and Dynamic Data, as well as the continuous improvement of WebForms and ASP.NET AJAX. This session will provide a roadmap of the changes that are coming with ASP.NET 4 and Visual Studio 2010.
This presentation for Inclusive Design 24 (#ID24) explores how to create accessible, usable "floating" labels. Floating labels are where the label moves above form controls based on user interaction.
Intro wordpress (1) copy with dipesh sharmadegana2009
this is my own website making add. in this artical we know that how to make website in easy without coading.so my friends make sure that how make a website with ur domain
Whether you have a bit of experience or you're brand new to code, this webinar is right for you. Walk away with:
Valuable resources that will save you time during the holiday season
The ability to update your email design like a veteran developer
Tips on how to to update your HTML more efficiently
A decrease in daily frustrations when making web updates and more!
This talk will look at a range of common application components and how they can be made accessible - quickly and easily - for all users. We'll look at how to notify users when changing the DOM after page load. We will also look in-depth at accessible form validation, modal windows and adding additional information for screen reader users.
How to use a blog for publishing scientific research: A training guide part 2AfricanCommonsProject
The African Commons Project ran a two-day training workshop with the Academy of Science of South Africa in August 2009. We set up a basic Wordpress blog for them, and then led through intensive training on how to use the platform and the basics of blogging: from content to marketing.
In this article, I’m going to continue with the ideas for your portfolio, today with React.js projects for beginners. In previous weeks, I’ve published two articles with project ideas for a front-end developer portfolio.
A brownbag presentation at IPC media in London about the need to use libraries to make web development much less random and more professional. Get the audio at: http://www.archive.org/details/ProfessionalWebDevelopmentWithLibraries
Qalcwise Introduction to Designer v20160215qalcwise
Create your first Qalcwise Business App Tutorial.
Qalcwise Business Applications Cloud Platform.
This tutorial let's you create your first qalcwise business application. It's 2-4h teaching course. Have fun!!!
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptxEduSkills OECD
Andreas Schleicher presents at the OECD webinar ‘Digital devices in schools: detrimental distraction or secret to success?’ on 27 May 2024. The presentation was based on findings from PISA 2022 results and the webinar helped launch the PISA in Focus ‘Managing screen time: How to protect and equip students against distraction’ https://www.oecd-ilibrary.org/education/managing-screen-time_7c225af4-en and the OECD Education Policy Perspective ‘Students, digital devices and success’ can be found here - https://oe.cd/il/5yV
Ethnobotany and Ethnopharmacology:
Ethnobotany in herbal drug evaluation,
Impact of Ethnobotany in traditional medicine,
New development in herbals,
Bio-prospecting tools for drug discovery,
Role of Ethnopharmacology in drug evaluation,
Reverse Pharmacology.
Model Attribute Check Company Auto PropertyCeline George
In Odoo, the multi-company feature allows you to manage multiple companies within a single Odoo database instance. Each company can have its own configurations while still sharing common resources such as products, customers, and suppliers.
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdfTechSoup
In this webinar you will learn how your organization can access TechSoup's wide variety of product discount and donation programs. From hardware to software, we'll give you a tour of the tools available to help your nonprofit with productivity, collaboration, financial management, donor tracking, security, and more.
Synthetic Fiber Construction in lab .pptxPavel ( NSTU)
Synthetic fiber production is a fascinating and complex field that blends chemistry, engineering, and environmental science. By understanding these aspects, students can gain a comprehensive view of synthetic fiber production, its impact on society and the environment, and the potential for future innovations. Synthetic fibers play a crucial role in modern society, impacting various aspects of daily life, industry, and the environment. ynthetic fibers are integral to modern life, offering a range of benefits from cost-effectiveness and versatility to innovative applications and performance characteristics. While they pose environmental challenges, ongoing research and development aim to create more sustainable and eco-friendly alternatives. Understanding the importance of synthetic fibers helps in appreciating their role in the economy, industry, and daily life, while also emphasizing the need for sustainable practices and innovation.
1. Build an App with Javascript & jQueryBuild an App with Javascript & jQuery
May 2018
WIFI: Free Geek
No Password
bit.ly/jsapp-pdxbit.ly/jsapp-pdx
Interactive Slides: bit.ly/jsapp-pdx-slides
1
2. Welcome to "Build an App with Javascript and jQuery". The Wi-Fi network is X and the password is Y The website
for this class is Z.
Speaker notes
4. Let me start with a little about me. My name is X and my background is Y. We have some TA's that will be helping
us today. I'm going to go around and have them introduce themselves.
Speaker notes
5. About you
What's your name?
Why do you want to learn JavaScript/jQuery?
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L 3
6. I'd love to learn a little more about you guys. So can we go around the room and can everyone give us your name,
what your goal is for attending the class and your programming background?
Speaker notes
7. About Thinkful
Thinkful helps people become developers or data scientists
through one-on-one mentorship and project-based learning
These workshops are built using this approach.
4
8. Thinkful is hosting the event tonight. Thinkful is a coding bootcamp built on a belief in one-on-one mentorship and
project based learning. This workshop today is designed using this approach. The bulk of the workshop will be you
guys working one-on-one with our TA’s to build a real project.
Speaker notes
9. Suggestions for learning
Don't treat this as a drill, we're making something real
Don't get discouraged, struggle leads to mastery
Don't be shy, take full advantage of our support
5
10. To get the most out of this class, we have three suggestions for getting the most our of this experience.
The first suggestion is to realize we're building something real and accept that's going to be messy. There will be
many right answers and a good project is never done. There will always be ways you can make it better.
Whatever your level, we're going to push you so it's a little hard. Even basic addition was hard at one point.
Struggle is a part of mastery. Try not to get discouraged.
Finally, we're here to help. Take advantage of that support, make sure to ask questions during lecture when you're
confused. Make sure you call your TA when you need help. When coding, be resourceful. Always!
Speaker notes
11. Show me a "good programmer" and I'llShow me a "good programmer" and I'll
show you a bad programmer who'sshow you a bad programmer who's
stubbornly optimistic and wholeheartedlystubbornly optimistic and wholeheartedly
dedicated to sucking less.dedicated to sucking less.
6
12. Success is going from failure to failureSuccess is going from failure to failure
without loss of enthusiasm.without loss of enthusiasm.
7
13. This is what we're making
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L 8
14. Today we're building a shopping list app. This app does three things. First you can type the list of an item to add
and click the "add item" button to add it to your shopping list. Second you can click on an item to check it off the list.
Third you can click the X to remove the item altogether.
Speaker notes
15. Agenda
Go over starter code (10 min)
Learn key jQuery & Javascript concepts (30 min)
Build your app! (30 min)
Go over solutions (10 min)
Next steps (10 min)
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L 9
16. I’ll start by walking you through the HTML/CSS starter code so you have a reference of what you’ll be working with.
Then I’ll go over important Javascript and jQuery concepts that you’ll need to complete the app. You’ll then build the
app during which time the TA’s and myself will be walking around to help you guys out. At the end we’ll go over
solutions and then cover next steps for continuing your learning.
Speaker notes
18. HTML defines the content and the structure of a page. We use "tags" to divide our HTML into sections. Each
section of HTML has an opening tag, and a closing tag (demonstrate).
In our HTML, we can create labels for our sections. We create labels by adding a "class=" some name in our
opening tag. These labels help us "grab" these sections both to add styles. But also as we'll see with jQuery, to
manipulate our HTML with Javascript.
Lets start with adding styles. We add styles with CSS. We can basically grab a section using it's class. Then we can
define different aspects of the section we want to change. (demonstrate)
In this case, we are going to grab the "title" section, then make it blue and put a line through it.
Speaker notes
20. Alright, now let's dive into the starter code. Go ahead and go to this url to get the starter code. We’re using a online
code editor called Glitch which will let us see the result of our code really quickly.
On the README.MD file you should see an overview of the project and the challenges you'll be completing. The
files we’ll be using today on the left are client.js, style.css, and index.html. You can ignore server.js, package.json
and .env. Once you’ve written some code, click the “Show Live” button at the top to open a new tab that will
automatically update as you edit your code.
Next let's go over the starter code so you guys know what’s going on. At the top of our index.html, we have a head
element. This element is different from most others because what it contains won’t actually show up on the page.
The main purpose of the head section is to pull other files into our app. This is known as “importing”. You can see
here that we're importing our styles.css, our client.js, and jQuery which will be discussing soon.
We generally put the content of our HTML, the stuff people might see, in the "body" section of our HTML (versus
the "head" section).
The "list-content" section houses the three main components of our app. The first component is the text box where
a user will type in their shopping list item. The second component is a list where we will add items to our shopping
cart. It's empty for now but as we add items to our list, it will show up here. The third component is a button called
Add Item. When people click on this button, the item they type in will be added to the list.
Speaker notes
21. Think of our HTML as a "tree"
<form>
list-content
<input>
item-input
<ul>
shopping-list
<button>
add-item
12
22. We can visualize these HTML components as a tree. We have a list-content section but inside that section, we
have three smaller sections: our text input, our shopping list, and our button.
In HTML, we call this tree the DOM or the "Document Object Model". In this system, list-content is the "parent" to
the three components and the three components are the "children" to list-content.
Speaker notes
23. What is Javascript? What is jQuery?
<input>
<ul>
shopping-list <button>
<li>
String
cheese
<li>
Summer
sausage
<li>
Chicken
nuggets
13
<div>
24. jQuery is an extension of Javascript. jQuery does a bunch of things one of which is to make it easy to add, modify
and remove items from our DOM. 70% of websites use jQuery.
For this app, what we want to do is add sections to our shopping list after someone adds a grocery item to the input
box and then taps the button. So when someone taps the button, we'll add a new section to the shopping list
section, one section for each item added. Those items will be children to shopping list, which is a child to list-
content.
Speaker notes
25. "Grabbing" a section directly
$('.shopping-list')
jQuery always starts with this
Element to grab
14
26. jQuery makes it really easy to add, change, and remove sections from our HTML.
In this case we want to add to a section. The first thing we must do is to tell the computer which section we want to
grab.
In jQuery, the first thing we'll do is start our line of code with a "$". This tells the computer we're writing a jQuery
command. Then inside the parentheses, we add the "class" of the section we want to grab. So in this case,
"shopping-list" but starting with a ".".
Speaker notes
28. NOTE: All lines for the walkthrough are accessible in the Javascript tab of the demo.
Once we grab the right section, we can then use jQuery to perform some action: to add, change, or remove, that
section.
Lets start by seeing how we can use jQuery to add and remove sections from our app. To add a section, the first
thing we want to do is grab the section we want to add to. In this case, we want to add our shopping items to the
shopping-list section. So we'll $('.shopping-list'). Then we want to perform an add action. One add action is
.append. So lets say we want to add an apple to our shopping list we can do this:
$('.shopping-list').append("
apples
")
Now we've added this item and given it a label "item". To remove the items we added, we can then do this:
$('.item').remove()
Another thing we can use jQuery for is to change how a section looks. There are a number of ways to do this but
the best way to do this is to define a new class in your CSS and then add or remove those "labels" or "classes" to
sections. (enable the CSS tab for this section)
Lets say we wanted to use jQuery to change the background color of our header section to pink. In this case, we'd
define a new class called "pink". When we add "pink" as a class to the header section, background color will
change to pink.
Speaker notes
29. $('header').addClass('pink')
You can see here that in this case, header is not a class, but the name of a tag. To grab all sections with a specific
HTML tag, we just give the tag name without the period in front.
With jQuery, we can "chain" actions together. So once we grab a section, we can perform action after action on it in
a particular order. Here's an example of using chaining to change the button.
$('.add-item').text("Add Shopping Item").css("background", "pink")
Finally, you can use jQuery to "traverse" or move up and down the HTML tree to select elements. The easiest way
to grab an element is to grab it directly via it's class label. But in some cases, you might not know the class label
you want to grab, just where it is in relation to another section. In those cases, you can "traverse" the tree to grab
the right section before acting on it. Here's an example:
$('.shopping-list').append("
Apple
")
$('.shopping-list').children().first().text("Oranges")
30. Attaching an "Event Listener"
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L 16
31. jQuery also lets us manage what happens when some event occurs, say when someone clicks on our button. We
do this by attaching a "listener" on a section. A section would then listen, for say, a "click" and then execute the
actions we tell it to once that section is clicked.
The code will run every time it "hears" that event. The easiest way to attach a listener is when a section has been
loaded. There are, however, ways to add listeners to sections that we expect will be loaded but haven't yet.
In this case, we want to add an event listener to our button so when someone clicks on it, the text of the button
changes and as well as the background color of the button.
We see here that we've added a listener to add-item and then we grab add-item again. Instead of repeating
ourselves, jQuery lets us refer to thing that was clicked by just saying event.currentTarget. This is an important
concept that you'll build on later as you do more programming.
Speaker notes
33. Google is an everyday part of being a developer. A key part of becoming a developer is getting comfortable using
Google to learn and look up things. The more you code, the more you will use Google, not the other way around.
When you get stuck tonight, or whenever, make sure to Google it first!
Speaker notes
34. Let's work on the rst step together
http://bit.ly/tf-shopping-list
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L 18
35. Alright, with that let's start building our app.
On the left, you can see the files you'll be working on. The Readme will give you instructions. You'll be writing your
code in client.js but referring to style.css and index.html. You shouldn't need to touch any of the other files.
After you write your code, it will automatically be saved. At any point you can hit "Show Live" to see a live version of
your app.
Let's start the first step together. So in this first step, we're adding an event listener to the add-item button so when
it's clicked, we're going to execute this code which should grab the text in the input box and add that item to our
shopping list.
The first thing we want to do is grab the value in our input box. How would we grab that element? (Ultimately fill in
answer)
Alright, once we grab that element, how might we pull out the text inside it? We haven't shown you this yet so I
want you guys to Google "getting a value out of an input box with jQuery". Does anyone know the right function to
use? (Ultimately fill in the answer)
Alright so now we've stored the text from our input box in this variable listItem. So when we write listItem, that value
will show up. We've combined that listItem with some HTML to add to our shopping list. Then once you're done with
that, we want to zero out the text in our input box. Take it from here!
(Assign TA's to different sections of class)
Speaker notes
37. Alright. Let's go over the solutions to the main challenges.
The first task was to add HTML to the shopping list. We do that with the "prepend" or "append" action. In the
parentheses we just give the computer the HTML we want to add. To zero-out the input box, we grab the item-input
section and use the .val function to set the box to "".
For the second challenge, the user will click on the X button. When we try to remove it, it just removed the X. What
we need to do is "traverse" to the parent of the X which is the entire section and remove that. We can chain these
actions together.
Finally, when we click on the checkbox next to the item, we want to add or remove the "complete" class to add and
remove the checkmark. We can do this pretty easily with the toggleClass function.
Speaker notes
39. Thinkful's free resources
Talk to one of us and email portland@thinkful.com to learn more
2 free weeks of access to our learning
platform + mentorship resources
Covers HTML, CSS, JavaScript & jQuery
Unlimited, live, mentor-led Q&A sessions
(~40 sessions per week)
Lifetime access to our Student Slack Group of
7,000+ Developers (all our mentors and
students worldwide)
1 free 30 minute 1:1 Mentor Session
Personal Program Manager to help you set
goals and navigate resources
bit.ly/dev-free-pdxbit.ly/dev-free-pdx
21