Explore Free jQuery Tutorials – GameDev Academy

A Bite-Sized Guide to JQuery

Zenva — Fri, 15 Nov 2019 16:00:19 +0000

You can access the full course here: Bite-Sized jQuery

Part 1

In this course, we’re going to learn how to use jQuery to build interactive websites.

jQuery Introduction

When it comes to jQuery, there are two methods in how to add it to your website. The first method is simply going to the jQuery website and downloading the full jQuery file. By including this file in your webhost folder, you have access to the jQuery library. The second method is to use a jQuery CDN, or Content Delivery Network, to dynamically load in the jQuery file from elsewhere. This second method has the benefit of making your website faster if the user has already encountered the CDN before and downloaded necessary files in the background. To learn how to use a jQuery CDN in your own projects, you can go to https://code.jquery.com/ for instructions.

For our project, we’re going to use the first method and download the jQuery file. Head over to the main jQuery website (https://jquery.com/), hit Download jQuery, and download the uncompressed, development file (this version will be the easiest for us to read).

Project Structure Setup

We will now set up our project folder. First, right click and create a New Folder named jQueryCourse wherever you’d like to save the project. Within this folder, we’re going to create three more folders:

assets
css
js

In the js folder, we’re going to add the jQuery file we just downloaded by cutting and pasting it from where it downloaded onto the computer.

For our next steps, you need to make sure you download and install Atom so that we can write and edit our code. You can find Atom via its website: https://atom.io/

Once you’ve downloaded Atom, open the the program. We’re going to create three New Files (Control N or Command N for the shortcuts). First, we’ll create index.html and save this in the main jQueryCourse folder. Next, create main.js for our javascript and save this in the js folder. Last, creates a file called style.css for our CSS and add this into the css folder.

Project Base Code Setup

Now we’ll start setting up the basic code for our project. In index.html, we will first add in our boilerplate HTML to start off the page. Once in, you can verify that it works by opening index.html in your web browser.


  
    
    
    
  
  
    Hello world!

In order for us to have access to the other files we created, we need to link them in index.html. In the head section, we will add the code below. By sourcing and linking our javascript, jQuery, and CSS files, we now have access to them.

Let’s test that our main.js file is linked. Remove “Hello world!” From index.html and move over to main.js. In this file, add the following line so that the javascript writes “Hello world!” instead.

console.log('Hello world!');

In order to see this in our browser properly, you need to view it in the Inspector. If you’re using Chrome, you can right click and select Inspect from the menu.

On our new interface we can select Console, and there you should see our message.

That’s it for our project setup. In our next lesson, we’re going to begin learning how to use jQuery to dynamically add the “Hello world!” message to our body.

Part 2

In this lesson, we’re going to learn necessary concepts about using jQuery to dynamically write “Hello world!” to the body.

About Document Ready

Unlike executable applications which come as is with the entire code ready to go, websites and web applications rely on constant downloading and execution of the code line by line. As such, we need to be careful and often wait for the document to be ready to use before we inject any jQuery. In order to add in “Hello world!” to our body, for instance, we need to make sure our body tags are loaded before our jQuery executes.

Fortunately, there is a common jQuery call we can use to make sure the document is ready. In main.js, we will delete our previous code and add the following:

$(document).ready(function(){
    console.log('We are ready!');
});

(Note: You can write jQuery instead of the dollar sign to call jQuery functions, but the dollar sign gives a cleaner look).

With this code, we target the document and make sure it is ready before we call the function that writes to our console. If you test index.html, you should see the new message in the Console.

In the next lesson, we’ll continue working with adding “Hello world!” now that we know how to wait for the document to be ready.

Transcript 1

Hello everyone, my name is Laghu Pieris, and welcome to the jQuery course. jQuery is the most used java script library in the world because, it does operations that are very very basic.

We do things like searching for elements, changing element values and adding classes so, things that are used whenever you are performing web development work that are not included by the full in Javascript. With jQuery you can also perform rich interactions. You can perform click events, you can listen for whenever you change values in a forum, in a drop down menu.

And, we’re also going to be able to work with data. Whenever you’re working with jQuery and whenever you’re working with web development in general, you need to keep in mind something called DOM. This is D-O-M. Document Object Model. It’s kind of the base object whenever you’re working with the web.

So, we have a DOM for this image. For this text here. For this style. For this paragraph. So, there are objects everywhere in the web page and, we need to be able to know how to manipulate all of these objects. There’s some requirements to learn this course, even though something, this is going to be a very light introduction. You need to know how to work with HTML.

Something very basic, very introductory. You also need to know how to work with CSS. Javascript is essential because well, we’re going to work with Javascript to be able to communicate with jQuery. And, you also need two, at this point, two different pieces of software. You need to have Google Chrome installed and, you’re also going to need a code editor.

We’re going to use an open source one, okay, a free one to use, which is Atom. Another very important link for you to have open at all times, whenever you’re developing with jQuery, is api.jquery.com. So, now that we have gone through this introductory lesson, We’re now going to move to the next video where we’re going to set up our entire environment and work with jQuery. See you soon.

Transcript 2

The first thing we need to know right in the beginning of this project is how to use jQuery. So, I’m going to need click on this big download jQuery button. There you go, you have it. Using jQuery with a CDN. And to use CDNs, you can can go here to code.jquery.com.

If you click here on uncompressed, for example. You’re going to have instructions on how to use it. You just copy this tag and paste into your HTML file. So back to jQuery here I’m going to download the uncompressed development version. Download link file, or just download file. I’m going to copy it, okay. And now that we have this file here we need to create our project. For making projects I like to have a projects’ folder under my home folder. We have the zenva folder here. And now, I’m going to right click, choose new folder. And I’m going to name this jQueryCourse.

Inside this folder we’re going to make a few other folders. So I’m going to create a new folder. This one is going to be called js. We’re going to have CSS and I’m also going to make an assets folder. And the first step here is to go to the JavaScript folder and paste our jQuery file. Now, we’re going to Atom. Okay, assuming you already have downloaded Atom. And I’m going to create some files.

So we go to file, new file. I’m going to save this new file here in projects, zenva, jQueryCourse and I’m going to name it as index.html. But we also need a file for JavaScript and CSS. Control N, or Command N. Save it and in js this is going to be main.js. You save it here in CSS. And this is going to be named style.css. So first of all let’s add the html tags. Like this, I’m going to add the head tag, the body tag. In the head tag we’re going to include our scripts in our style sheet.

So this should be pretty simple. We add a script tag and the source on this script tag is going to be js/jquery-3.3.1.js. We’re going to add another script tag with the source, js.main.js, style sheet. The type is going to be text/CSS. And the href, well that going to be CSS/style.css. And, what we need to know now is how to work with jQuery. How can I use, how can I add dynamically the text hello world to the body? We’re going to work with this in the next video.

Transcript 3

So we’re going to do something really common and necessary in every jQuery application. First of all, we want to call jQuery, and we do this by typing either jQuery, which is quite lengthy, or typing the dollar sign, which is much cleaner.

So dollar sign, we open and close parentheses, and between parentheses I’m going to type document. So we’re going to work with the document object as a jQuery object. Okay? Then dot ready. This is going to be a function call.

We’re going to write what’s going to be the ready call back here. So, let’s open and close parentheses and add a semicolon. And here I’m going to type a function, open and close parentheses and open and close curly braces. So whenever the document is ready, this function is going to be executed.

And here I’m just going to type console.log and the message, “We are ready!” Like this. So we’re going to save this script. And here in Google Chrome, I’m going to refresh the page, and we have the message we are ready. Okay, so that’s perfect.

Since we are now ready to work, and we have this ready function, then that means our path is clear into changing the body tags and adding whatever content we want here.

Interested in continuing? Check out the full Bite-Sized jQuery course, which is part of our Bite-Sized Coding Academy.

Exploring Semantic UI and Setup

Zenva — Fri, 15 Mar 2019 04:00:43 +0000

You can access the full course here: Responsive Admin Pages with Semantic UI

Part 1

An important part of using Semantic UI is getting familiar with the website. It’s a copy-and-paste framework so learning how to navigate the website to find the widgets and frames that we want will save us time in the long run. Here we will take a look at the Semantic UI documentation, examine a few elements to see what the source code looks like, and then see how to add the element to our webpages. For now, we will spend most of our time in the documentation:

In the documentation, we can find the layout and frame elements under the tab “Layout” and the widgets and other components are spread over multiple different tabs. There are different kinds of elements or groups of elements under the tabs: “Elements”, “Collections”, “Views”, and “Modules”.

Let’s quickly check out a few of the components to get a feel for how Semantic UI code works. Each component page gives an overview of what the element is used for and provides various examples with the source code and the output. We will examine Buttons, Cards, and Forms.

Buttons

Buttons are used to trigger some action when pressed; almost every webpage will use buttons at some point. You can find these under the “Elements” tab in the Semantic UI documentation. Some examples of colored buttons with the source code look like this:

In order to display the source code, simply click on the “<>” button shown above. Note how each of the elements is of the type “button”. However, by assigning the class of “ui button”, each button will adopt the basic Semantic UI styling. Adding in the color will choose from one of the predefined colors available.

Cards

Cards are used to display a picture with some information and can be found under the “Views” tab in the Semantic UI documentation. These elements are perfect for displaying some profile information similar to how a playing card may be formatted. A basic example looks like this:

And the source code to generate this is:


  
    
  
  
    Kristy
    
      Joined in 2013
    
    
      Kristy is an art director living in New York.
    
  
  
    
      
      22 Friends

Note how this one is a set of elements enclosed in the “ui card” class. The separate classes of “image”, “content”, “header”, “meta”, “data”, “description”, “extra content”, and “user icon” all apply various predefined styles that help make the card look complete.

Forms

Forms provide a way to take in user input, validate the input, and perform some action. A prime example of form usage would be a login system in which users have to enter a username and password and can only proceed to their account page if the input is valid. Forms can be found under the “Collections” tab but rather than explore the element itself, we will focus more on Semantic UI form validation for now. That can be found at the bottom under the “Behaviours” tab. A form setup might look like this:

With the short-form validation rules and criteria looking something like this:

$('.ui.form')
  .form({
    fields: {
      name     : 'empty',
      gender   : 'empty',
      username : 'empty',
      password : ['minLength[6]', 'empty'],
      skills   : ['minCount[2]', 'empty'],
      terms    : 'checked'
    }
  })
;

Note how each of the fields has a distinct name and a rule beside it in a dictionary format. Each rule describes a behaviour that must not occur in order to be a valid input. In this example, none of the text fields may be empty, the password must be at least 6 characters long, there must be at least 2 skills selected, and the terms box must be checked in order for the form to be valid and submit to work properly.

So now you have an idea of how Semantic UI builds and styles the elements, let’s take a look at how to add the Semantic UI library to an HTML file. It might be worth checking out some of the completed examples under “Layouts” in the “Usage” tab. There are examples of full page layouts, content, themes, and even a completed login form.

Part 2

Before we can use Semantic UI, we have to install the package and start a new npm project. You’ll have to make sure you have Node.js installed and start up terminal (command prompt for Windows users). Next we’ll run the command:

You may need to add sudo in front of the command or if you’re using windows, run the command prompt as an administrator. Next create a new project folder (I’ve named mine practice_project) and navigate to it:

Next, start a new npm project by running:

It will prompt you to enter some info to create a package.json file. Just hit enter through each of the items and it will fill in the defaults. It should look something like this:

Now add the Semantic UI dependencies by running:

Note the double dash before “save”. It will prompt you to enter some info. For now, just use the automatic setup. Navigate to “automatic” and press enter:

Make sure that the project folder is correct or select “No, let me specify” and enter the correct path:

Save the semantic UI components in the folder “semantic” so just hit enter:

Navigate to the semantic folder and display all items. You should see a gulpfile.js.

Now build the gulpfile.js by running:

That will have created a semantic.json file as well. Now our project is set up and ready to use! We still need to create an HTML file with the correct headers in it. Create a file called index.html with the basic HTML page setup and copy the headers from the Semantic UI “Getting Started” page into the “head” tag.

Your code should look like this:



  
    
    
    Semantic UI Pratice

You’re now all set up and ready to begin adding Semantic UI components to your webpage! Don’t be afraid to use your project for your portfolio, as it will be an eye-catching addition as you pursue your hobbies or newfound career skills!

Transcript 1

What is up, everyone? And welcome to our course on an Intro to Semantic UI. My name is Nimish, and I’ll be guiding you through these tutorials, in which we’ll learn about the popular framework Semantic UI, and how to use it to create beautiful, and appealing websites with ease.

So, in this course we’re going to first go into an Intro into Semantic UI itself, discussing what is it, and how we use it. And then we’ll explore the Semantic UI website. Using the website to copy and paste elements is a massive part of Semantic UI and especially in this course. So, it’s good that we get to learn how to use the website properly. Then we’ll move to installing Semantic UI. Then we’ll learn about how to properly structure our pages with the Semantic UI grid.

For those of you who have use bootstrap before you’ll see Semantic UI is similar to that, especially when it comes to the grid layout system. After this we’ll go into some individual Semantic UI widgets and components. We’ll show you how to examine them, select the options you want, choose them, and then copy and paste them into your code, and customize them further. And then we’ll wrap this section up with the final project. And I think that final project is going to take the majority of the time. And we’ll put everything that we’ve learned in these intro sections to the test.

Now for starters, what is Semantic UI? Well, Semantic UI is simply a Front-end framework very similar to bootstrap. If you guys have ever used bootstrap before, this course should be a breeze. And I personally found Semantic UI even more enjoyable to work with than bootstrap. For those of you who’ve never used bootstrap before don’t worry about it, bootstrap is not necessarily a requirement here. We’ll show you how to do things without it.

Semantic UI is powered by LESS and jQuery. And this means that it’s a free, open source copy-and-paste framework. That means that everything on the website is open source. You can literally copy and paste the code and you’re not gonna face any repercussions, in fact, it’s almost encouraged that you do so. And we can use Semantic UI to create web apps, and websites with ease.

So, I mentioned that this is a Front-End Framework, this applies to most of you who’ve never used bootstrap before. A Front-End Framework is simply a library that contains templates for HTML elements with CSS styling. So, that means that, let’s say we were to select a button, where we don’t just get that boring unformatted HTML button. That means the button that we select, with a Front-End Framework like Semantic UI will automatically have a bunch of styling already applied to it. This way the items we choose already look really good, before we personally do anything to add any CSS.

Now we use these Front-End Frameworks to very quickly and easily develop appealing interfaces. They generally contain intuitive and easy to understand syntax, especially Semantic UI and sometimes they even provide some basic behavior as well. So, why use Semantic UI in particular?

Well, Semantic UI makes developing web apps, and websites easier, and faster than if you had to do it from scratch. In fact, it can cut down the time by half, if not more. There’s easy to understand syntax, and it’s lightweight, yet, very, very flexible. This means there are lots of different widgets, and customizations to choose from. And you end up with these beautiful and modern-design looking webpages. Again, the main emphasis on this is the fact that it makes things really, really fast and easy.

We’ll see that we can build up a really good looking webpage in probably less than an hour, maybe like 40 minutes or so. Finally, how do we use Semantic UI? Well, I mentioned that it’s a copy-and-paste framework. So, this means we essentially search through the website util we find the elements we want. We can then choose from a variety of different element themes.

The documentation is very clear, and provides you a bunch of different options for each of the widgets and elements. We can then copy and paste the element with the themes we want into our code, and we can customize a bit further with CSS. Okay, so that is it for our intro. What we’ll do is we’ll launch right into exploring the website. As like I said, a lot of this is gonna be copy and paste, and examining the elements we want. So, let’s get to know how to use our website properly, and that’s gonna be crucial for the rest of the course. So, I really hope you guys enjoy this. I really enjoyed making this course, and I love working with Semantic UI.

It’s a fantastic framework that, like I said, has made building web apps and websites so, so much easier. Okay, cool! Well, thanks for signing up, we’ll see you guys in the next tutorial.

Transcript 2

Hello guys, and welcome back. We’ve got a really easy tutorial here for you, all we’ll be doing is exploring the Semantic UI Website. It’s important that we get familiar with he website structure, as a lot of the next tutorials are gonna be kind of copy and paste from that website into our web pages.

So, what are we going to do here? Well, we’re simply going to head on over to semantic-ui.com. We’re going to explore the website layout, get to know where to find the things that we need. We’ll then examine just a couple of elements really quickly, so that you can get the idea of what the source code might look like and how to grab it and put it in our pages. And then we’ll examine some finished page examples by inspecting the source code there. So, let’s head on over to the browser. I’ve got this one open, this is just Chrome. Opening a new tab, and I’m just gonna search for Semantic UI. So let’s just do a quick Google search, or something. We’ll head to this first link, semantic-ui.com. Okay, so this is the home page.

As you can see, it tells you a little bit about Semantic UI, gives you some code examples. What we’re gonna do is actually jump right in to get started. And don’t worry about the installation, we’ll actually cover that in the next section. I just want to get us used to the website itself. So, if you see on the left-hand side, there may actually just be like a little menu open button. So, if that’s the case, go ahead and click that until you see this menu bar on the left-hand side. So, this gives us access to all of the different components of Semantic UI.

First some Introduction, we’ve got some basic examples under Usage, some global stuff under Globals. We’ve got various Elements that we can use here, so you can see Button, Icon, Image, et cetera. We’ve got some Collections. These will be used to group together different elements. We’ve got various Views. These provide some pre-formatted templates for containing, well, kind of putting a few different views together into one. So we’ve got stuff like Feeds, Card, which we’ll be exploring later on. We’ve got some other Modules. These are just gonna be more interactive elements, like above. Okay, and finally, we’ve got some Behaviors such as Form Validation, Visibility, et cetera.

Okay. So, we can basically just pick and choose what we want to look at in this web page. You don’t look at it all, we’ll be exploring different components as we go. I would recommend that after this tutorial you take a few minutes to get to familiarize yourselves with the website. Otherwise, let’s just take a quick look at some of these Elements. Maybe we’ll go with the Button. That’s a pretty classic one. We’ll need lots of buttons in the tutorials to come.

Okay, so most of the web pages are kind of laid out in this format. We’ll have the Element name, or the feed name, et cetera. And then just a bit of a description. This is just a general button, it’s a possible user action. We’ve all seen buttons before, no doubt you’ve used buttons to get here in the first place. And so here we have the kind of basic description. In this case, it’s just a basic button here. We’ve got an example of what it will actually look like. And if we open up these brackets here, we get the source code that generates that. So it has the example and then the actual source code.

So, no doubt at some point we have all added buttons to some kind of an HTML page. You can use a button tag, just like before. Here you can provide a custom class and then use some CSS to style it, but no doubt, unless you’ve used a framework, like Bootstrap or Semantic UI, it doesn’t look like this right off the bat. Typically, to be honest, it’s kind of ugly right off the bat. We have to do a bit of CSS styling to format it. This is the benefit of using stuff like Semantic UI, is that we can actually just use the pre-built-in classes.

A lot of the Semantic UI classes do begin with ui, and then something, in this case ui button is the class name. And it automatically applies all the styling attached to this class into this button. So, this button might not look like much but there’s actually quite a lot already done for us. For example, we get a nice gray background, we have these rounded edges, a better font than before.

We get this nice on-hover behavior, okay. And we can click it, it says Follow or Following. That’s actually a bit of JavaScript behavior. All right, so if we want to copy and paste the code, we can simply select it here, or we can just do copy code. It will copy it to the clipboard. And again, this is this whole theme of this course is gonna be this kind of copying and pasting items that we want, into our web pages and then a bit of further customizing them.

Let’s say we wanted to customize this button further. You could actually customize the entire ui button class, or you could maybe attach an ID to it and customize things that way. So that’s a very basic button. There’s lots of different variations on buttons that you can see as you scroll up or down. We’re not gonna cover them in great detail here, as we’ll be kind of going into the greater details later on. It’s just that any of the source codes are, I think, hidden by default. So you just need to open and close them by doing that, and then you can kind of see all the different behaviors.

Moving to a different item, maybe let’s check out a Card or something. This is a pre-built view. A card will look something like this. This is the default card, okay. And a card just displays some site content in a manner similar to, let’s say, like a playing card. So we’ve got the picture. We’ve got maybe the name of something, a bit of information about them. Maybe there’ll be like a button, or something that has some extra behaviors. If we want to examine this source code, again we simply open it up.

Okay, and as you can see, there’s this collection with a bunch of different stuff within it. So this is a ui card. Like I said, we’ll be taking a look at these in greater detail later, but as you can see, it’s got a /div, that’s an image. It’s got some content. It’s got some extra content here. And this is just gonna be the stuff down at the bottom.

Okay, so as you can see from the source code, we’re still building up our pages, websites, web apps, whatever, with the HTML source code, but instead of having to type this all out by hand and having to think about exactly what components go where, how it’s all gonna come together and how it’s gonna look, we can simply take a look at this, say okay, this is what I want. We’re gonna copy and paste this code in here, using the Semantic UI classes, such as card or content, et cetera, to add that pre-formatting in. Okay, and then we’re basically just good to go.

Now, the last thing I want to take a really quick look at before we move to the final examples, is gonna be way down at the bottom into Behaviors. So, let’s take a quick look at Form Validation, because we’re definitely gonna use Forms later on, so it’s a good idea to get somewhat familiar right now. But I’m sure most of you, if not at least some of you, have used forms at some point. Well, all of us will have used forms, but some of you will have created them yourselves. It’s basically just a way to enter some input and validate that input.

So we use forms for things like logins, for example, maybe if you were creating an account, we’ll use a form. If you’re creating an order, like you’re maybe ordering something off of Amazon, they’ll be using probably some kind of a form. And so, there needs to be some behavior attached to the form, as well as some kind of validation. Well, Semantic UI has actually provided more than just the front-end, it’s provided a bit of actual behavior here. So, by using Semantic UI’s form JavaScript here, we can actually provide some real validation.

For example, let’s say within our form we have, let’s see if there’s the actual example here. And yes, so the actual example looks a bit like this. We have a First and a Last Name, or First Name and a Username, a Gender, Password and a Skills set, we have this agree, and a Submit. So, there’s gonna be a few rules.

Likely we’ll need none of these to be empty. Perhaps our Password has to be a certain length, or something, and we need a certain number of skills. Well, we can use Semantic UI’s Form Validation to do so. So, we have a type of rule, which is make sure it’s not empty. We need at least two skills. Again, gender, it can’t be empty. Username can’t be empty. Password has to be at least six characters. And we need to make sure that this is checked. Okay? So this is just to quickly demonstrate that Semantic UI goes beyond just providing style themes, it actually provides a bit of behavior, as well. However, we will be taking a look at this in greater detail later. I just wanted to quickly introduce it to you. The last thing we’ll do here is take a look at the Usage.

We’re gonna take a look at some of these Layouts. Okay, and I’m actually gonna leave this rest of the part up to you guys. So, there’s some Pages, for example, a Homepage, Fixed Menu. There’s actually a pre-built login form. There’s some items up here. And these are all just ways to demonstrate some of the Semantic UI widgets, as well as some of the layouts.

So for example, let’s say we want to take a really quick look at this Login Form. We can open it up. And if we want to see the Semantic UI code that generates this, we can do two things: we can do the View Page Source that actually opens up the entire source code on the next page, in another tab. I simply right clicked, by the way, View Page Source; or we can do Inspect, in which case we can actually examine the source code right in the same tab here. Okay. So I’ll leave the rest of that up to you.

Again, these are, actually, I’ll just get rid of that. These are all found under our Usage tab. If you go to Layouts, then there’s a few examples. I encourage you to look at a couple of those examples, view some of the source code to get an idea, explore the web page a bit more.

And once you’re done, head on over to the next tutorial, in which we’ll be actually setting our files up to use Semantic UI. So, thanks for watching. We’ll see you guys in the next one.

Transcript 3

What’s up, everyone? Welcome back. Here we’ve got a fairly straightforward tutorial.

We’re just going to install Semantic UI and we’re gonna get our project set up and ready for us to use, because in the next section we want to jump right into exploring some individual components. So our steps here are going to be to first install Node.js. If you’ve already installed that, that’s great, you can basically skip a step there. After this we’re going to install gulp, that’s only gonna take a minute or so, and then we’ll start a new npm project, we’ll run that npm in it to get ourselves set up and once we have that project ready to go, we’ll install Semantic UI into that project.

We may as well start up an indexed html file and install the necessary headers as well, just so that next section we can launch right into the actual development. So let’s head on over to the Semantic UI website, again this is just semanticui.com, and I’ve clicked on Getting Started, that’s gonna be this link at the top left here. So this actually gives you most of the installation instructions, it doesn’t actually say anything about starting an npm project, so I’ll guide you through the entire process. You can follow this or follow along with me.

So that first step again is gonna be getting your hands on Node.js. If you don’t have Node.js then you can search for it under download Node.js or something like this, and go to that Downloads page and just download the correct installer, Windows or Mac, 32 or 64 bit, depends on which system you’re using.

Once that installer comes up then simply open up the package, install Node.js, and when you’re ready to move on we’ll go to the next part of this, which is going to be installing gulp. So let’s get Terminal up and running. For you Windows users this will be Command Prompt. You want to make sure that you’re running Command Prompt as an administrator or some of these commands may not work. For those of you who are using Macs, just type in sudo before any command to give those administrator privileges. So we’ll install gulp, we’ll do sudo npm install -g gulp, so make sure you have the dash and gulp. Windows users, just enter your password, Windows users, you can do this command without, or npm install without sudo, okay?

So if you’re using Windows, you’re running this on an administrator Command Prompt, don’t include the sudo portion. Okay, so it’s updated one package, that’s good. If you’ve never installed it before it will say success, installation success, or something like that. Assuming that you have no problems there, let’s move to the next portion. So at this stage you do need to have npm ready to use. So we’ll now start up a new project folder. You can do so in the Command Prompt. I find it a little easier to do so in Finder, especially easier for you guys to see.

So I have this Semantic UI project that’s just under Desktop, Zenva, Bootstrap Semantic UI. Just find a good place for your project, we’re gonna create a new folder, I’m just gonna call this something like practice. Ah, maybe that’s, yeah, we’ll do it like practice_project, something like that is fine. All right, and then we’re gonna need to navigate to that practice_project in our Terminal now.

So just take a second to do that. Just going to navigate to where that is now. Okay, and ls we’re gonna to go to, we’re gonna go right into that practice_project folder, or whatever you’ve called yours. There shouldn’t be anything in there right now. We’re going to initialize npm, so I’m gonna do npm init right here, okay? And we can have this package named practice_project, that’s fine, version I don’t care about, or description, entry point is fine, test command doesn’t matter, git repo doesn’t matter, keywords and author, they also don’t matter, license, that’s fine. Is this OK? We’ll just go with yes.

This is just modifying our JSON file, by the way, so if you do wanna specify stuff in there, like a specific author, specific description, please feel free to go ahead and do so, but for me this is just practice, so I’m not gonna bother filling it in. So if we do an ls we should now see this package.json file, so we’re on the right track. Now what we’ll do is we’ll actually install the Semantic UI into this project, so we’re gonna go, actually I’ll make sure we’re doing sudo.

For those of you who are Windows users, don’t bother with sudo, we’ll do sudo npm install semantic-ui –save, like so. All right, and now this is gonna take a few seconds and then it’s going to prompt us to kinda do a similar thing to up here, so it’s going to ask us to use either a custom installation, an express installation, or the default automatic installation, okay? So whichever one is more convenient, which is probably gonna be the automatic one, unless you really know what you’re doing. You can do the custom one if you’d like, but I’d recommend just going automatic for now.

So you see it pops up this, there’s a few options to choose from, you can scroll through them with the arrow keys and then press Enter to select. So I’ll just go with automatic, that’s fine. So yep, you’re using npm, is this your project folder? So do make sure that that project folder is correct. This should be the path to wherever we just created that practice_project, okay? So we’re going to go ahead and select yes if that’s right, or no let me specify and then parse in that complete project path. So semantic should be in semantic/, that’s fine, yes, okay and we’re just gonna go ahead and let that happen.

Okay, so as long as there aren’t many warnings here, this is fine. What we’re gonna do next is install gulp, or rather build gulp, and that will download all of the necessary packages. So if we do an ls now we should see that we’ll have a directory semantic, we’re gonna cd to that directory and we should see this gulp file .js, so now we’ll just do gulp build, okay? And this is just going to download and install all the components, so as you can see it’s downloading stuff like site, form, checkbox, dimmer et cetera and this is basically just installing all of these guys that you’ll see on the left hand side, so it’s giving us access to all of the different components there.

So it should just take a few seconds, maybe 15 to 20 or so, and once that’s done then we basically have everything set up and ready to go. Okay, good stuff. Cool, so let’s do an ls again, actually we’ll do, we’ll null navigate up, so in our project directory we should have node_modules, we should have package-lock, package.json, semantic and then semantic.json here.

All right, just gonna do a little bit of basic html page setup, so we’re gonna do the DOCTYPE html, like so, and actually I think that’s a bit small, so let me make that font a bit bigger, okay, I’ll start with html here and we’ll start with the head. And not loving that four-tab space, we’ll just do two tabs, okay? Good stuff, okay.

So we’ve got html, now we’ll need head and body tags, so we’ll do head, okay, and we’ll need the body tags as well, good stuff. So in our head file we’ll just do the classic, little bit of classic setup, we’ll do meta charset=”utf-8″ is good. We’ll do meta name, so we’ll change charset to name and we’re gonna do viewport, okay, content is going to be width=device-width, like so, and why don’t we go ahead and give this guy a title, whoops, not time, we want title, like so, and this is just gonna be our practice, Semantic UI Practice.

So we can go ahead and clear this and we’re actually done with the Terminal stuff for now. All right, so what we’ll do next is head on over to a text editor of our choice, I’m gonna use Sublime Text, I just really like how it works, how it’s laid out, but it really comes down to personal preference, so feel free to use whichever text editor you want.

What we’re gonna do is we’re gonna start a new file, okay, this one is gonna be simply index.js, so let’s go ahead and save that as, or not index.js, this is gonna be index.html rather, okay? And I’m gonna make sure that it’s in my practice_project root directory. This is, again, that project I just created. So you go into Semantic UI, practice_project, gonna make sure it’s in there. Okay, this will automatically make it an html file. Again, it doesn’t really matter too much which kind of file you’re using or which kind of text editor you’re using, as long as you have one available.

All right, so this isn’t gonna be our final project, we can actually create a different project and really get set up there, but for now this is just gonna be a way to practice using Semantic UI. So the next step is gonna be to copy and paste some of the get started code in here, as kinda typing it out by hand’s a bit of a pain. So we’re gonna go back to Chrome, or whichever browser we have this guy open in, and we’re gonna scroll all the way down to Include in Your HTML, okay? We’re going to just take this, gonna copy it and we’re gonna put it in the file’s header.

So let’s go back to our editor, okay? And we’ll just paste it right in there. Just gonna fix the indentation. Let’s give this guy a save and if we wanna make sure that we are actually using Semantic UI properly and we do have access to everything, let’s just grab one single element and then we’ll include it in that page, so back to Chrome. I’m just gonna grab, let’s say, like a button or something.

And when you’re ready to move on let’s learn about proper layout techniques. All right, so thanks for watching. We’ll see you guys soon.

Interested in continuing? Check out the full Responsive Admin Pages with Semantic UI course, which is part of our Full-Stack Web Development Mini-Degree.

Full-Stack Web Development Mini-Degree

Pablo Farias — Sat, 17 Nov 2018 00:30:58 +0000

Go from Zero to Full-Stack Engineer as you build web apps with HTML5, JavaScript, NodeJS, MongoDB, React, GraphQL, Angular, Git, AWS, and Azure.

This project-oriented curriculum begins by covering the foundations of programming and web development. You’ll learn to create responsive and interactive websites as you get familiar with the basics. We’ll then move on to the server-side and introduce Node.js, Express, Mongo and other frameworks. You’ll be building webapps, REST API’s and scripts.

Following the server-side, we’ll delve further into front-end, this time covering modern frameworks for creating robust applications such as React and Angular. You’ll learn how to integrate these projects with Node.js back-ends and API’s. Finally, you’ll be shown how to use important tools such as Git and Github, and the deployment process to popular platforms such as AWS, Azure and Heroku.

Access this Mini-Degree on Zenva Academy

Source Code – jQuery Course

Pablo Farias — Wed, 26 Oct 2016 06:42:13 +0000

Download the source code here.

BUILD GAMES

FINAL DAYS: Unlock 250+ coding courses, guided learning paths, help from expert mentors, and more.

ACCESS NOW

The Complete Web Development Course – Build 15 Projects

Zenva — Sat, 27 Aug 2016 12:36:25 +0000

Go from novice to a fully qualified web developer in just a few short weeks. This is a 100% comprehensive web development course that takes you from learning the basics to mastering the most advanced web development techniques. You can be ready to build highly professional, powerful and responsive websites using today’s most advanced technologies in just a few weeks from now.

This course is divided up into 10 perfectly structured Chapters. Each chapter covers one of the major web technologies and will take you from the basics to advanced skills. You will learn HTML, JavaScript, CSS, jQuery, jQuery UI, Bootstrap, Google Maps API’s, JSON and much more.

Access this course on Zenva Academy

The Ultimate Web Development Course

tammyag — Mon, 27 Apr 2015 04:47:48 +0000

“This has been one of the best web courses ever. It should be used as a model by almost anyone thinking of teaching on the web. It has cleared out nearly a decade of web programming cobwebs. The fact you have made a course which is complete end-to-end is impressive. The fact that code examples all work puts nearly every programming book and most web courses to shame.”

Paul Wolfson, Principal Investigator, Dallas Legal Technology

Taught by freelance developer and experienced online educator Dr. Richard Stibbard, this course takes you in easy steps through the entire process of building an up-to-date web interface which updates its database and HTML on the fly without the need for page refreshes, rather like the ‘Add to Favourites’ function on Youtube or Trivago’s hotel search.

Along the way you will learn how to:

structure a website using HTML5
apply styling with cascading stylesheets (CSS)
convert a static site to a dynamic one using PHP
remove inefficient duplicate code
use PHP functions to isolate variables
use MySQLi and prepared statements for secure database queries
manipulate page content immediately with jQuery
update the database silently with AJAX
upload the project to a web host and deal with important security considerations.
PDF version of the course allows full-text search

The course is equally suitable for beginners or more advanced students. For beginners there are step-by-step instructions which take you through every step of the project until all the principles have been covered, and then hand over to assignments which allow you to put into practice what you have learned before you see the solutions.

For learners already familiar with some aspects of web design and development who want to move onto specific points more quickly, incremental working filesand clear guidance are provided at every stage, allowing you to skip lessons you do not need and rejoin the course at any point without losing track of the necessary code.

With studio quality audio, widescreen HD video, and incremental versions of the source code, this efficiently organized course teaches up-to-date coding techniques and gives comprehensive coverage of an important aspect of modern web development.

[button link=”https://academy.zenva.com/product/the-ultimate-web-development-course/?zva_src=gamedevacademy” target=”_blank” style=”none, small, large, biglarge” title=”ACCESS THE COURSE”][/button]

Web Development: Complete Training to Become a Professional Web Developer

tammyag — Wed, 03 Dec 2014 11:02:22 +0000

We call this Become a Professional Web Developer not because we think we’re great, but because this is hands down the most in depth course on web development in town.

With over 24 hours of content, the design and structure of this course follows elite college curriculum. You will be learning the basics of each programming language and technology web developers use, and you will be able to create your own projects for both personal and commercial purposes.

Who Should Take This Course

You should take this course if web development as a profession sounds good to you, or if you’re looking to brush up on your web development skills in any area. There is so much content in this course that even experienced developers will benefit from it.

What is Covered in This Course

HTML/HTML5
CSS/CSS3
JavaScript
Ajax
jQuery
JSON
PHP
MySQL

Source codes are included for the entire course so you can learn by running the actual code and modifying it as needed.

[button link=”https://academy.zenva.com/course/become-a-professional-web-developer/?zva_src=gamedevacademy” target=”_blank” style=”none, small, large, biglarge” title=”ACCESS THE COURSE AND BECOME A PRO”][/button]

jQuery GUI Manipulation

Zenva — Tue, 13 May 2014 13:53:54 +0000

Requirements:

Basic knowledge of HTML5 and CSS3.

Some exposure to JavaScript and jQuery is recommended but not required.

Source Code:

You can download the tutorial source code here.

Introduction

In this tutorial, we will build a simple price calculator with HTML5 and CSS3. Then we will use jQuery to streamline the interface by the allowing the calculator’s only button to perform a simple calculation and reset the text fields. We will also use jQuery for the program logic that performs the calculation.

Here is a screenshot of the program we’ll be creating:

What you will need to complete this tutorial

To complete this tutorial, you will need a text editor. For beginning web developers I highly recommend Notepad++, which you can download for free from http://notepad-plus-plus.org/download/v6.5.5.html.

For simplicity’s sake I recommend creating a simple folder structure for the project. You do not have to follow this structure precisely but it does make things a little easier. Here is the recommended folder structure we will be using throughout this tutorial:

To create this structure, do the following:

Create a new folder on your desktop called Price Calculator.

Inside the Price Calculator folder, create a new folder called css. This is where the Cascading Style Sheet for the project will go.

Inside the Price Calculator folder, create another new folder called scripts. Our jQuery code will go here.

Getting Started

Let’s create the basic HTML5 document structure and the css file for the project.

Open Notepad++. A new file is automatically created for you when the program loads. Save this file in the Price Calculator folder as price_calculator.html.

Create another new file by clicking on the New File icon in the upper left corner of the Notepad++ window (it looks like a white sheet of paper next to a green circle and a white + symbol inside the circle). This will create a new blank file and will appear as a new tab at the top of the Notepad++ window. This tab is automatically named new 2.

Save the new 2 file in the css folder and name this file styles.css.

Now we’re ready to start writing our HTML5 page. Click the price_calculator.html tab at the top of the Notepad++ window and type the following code into the editor window:

This code defines the basic HTML5 document structure for our project and also links the HTML page to our css file by using the tag.

The calculator is made up of a very simple HTML form. Type the following code between the opening and closing tags:

- Quantity:

- Price:

- Total:

We now have the calculator laid out in its basic form. Here we have wrapped the label, input, and button elements within list items which are wrapped in an unordered list while wrapping them all within a

that has a class name of “form”. If you save and view the code we’ve written so far, the calculator should look similar to this:

It looks pretty rough and we’ll fix that with some css in a moment. At the outset I said that we will have only one button on our form performing two different functions. We definitely will have the appearance of one button in our program so don’t be concerned that two buttons are showing up on the form right now.

If you already haven’t done so, save the price_calculator.html file and open the styles.css file you created earlier. The css file is quite lengthy and I’ll break it down into sections, explaining what is happening in each one. To keep the tutorial at a reasonable length,

I won’t be explaining each css property that styles the form. There are many great resources online that will give you more information on css properties. If you’re just beginning with css I recommend experimenting with this code by changing values or removing some values completely and then viewing the result of your changes within your web browser. Experimenting with css in this way is one of the best ways to get a handle on what is happening behind the scenes. All of the source code for this tutorial can be downloaded from this site as well if you choose not to type in all of the code. Type (or copy and paste) the following code into Notepad++:

/* Remove the blue border that appears on input elements when they are focused. */
*:focus {
    outline: none;
}
body {
    font: 14px/21px "Segoe UI Light", Arial, sans-serif;
}
.form ul {
    width: 140px;
    list-style-type: none;
    margin: 0 45% 0 45%;
    padding: 0px;
}
.form li { padding: 12px; border-bottom: 1px solid #eee; position: relative; }

.form li:first-child, .form li:last-child {
    border-bottom: 1px solid #777;
}
.form label {
    width: 150px;
    margin-top: 3px;
    display: inline-block; /*align the labels and the text boxes*/
    float: left;
    padding: 3px;
}
.form input {
    height: 20px;      
    width: 100px;
    padding: 5px 8px;
}
.form input {
    border: 1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius: 10px;
   -moz-transition: padding .25s;
   -webkit-transition: padding .25s;  
   -o-transition: padding .25s;   
    transition: padding .25s;
}
.form input:focus  {  
    background: #fff;
    border: 1px solid #555;
    box-shadow: 0 0 3px #aaa;
    padding-right: 70px;
}

This section of our css file focus on the textboxes where the user types in the quantity and price as well as the box that displays our total.

Now let’s style the buttons. Type the following into Notepad++:

button.calculate {
     background-color: #68b12f;
     background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(     #50911e));
     background: -webkit-linear-gradient(top, #68b12f, #50911e);
     background: -moz-linear-gradient(top, #68b12f, #50911e);
     background: -ms-linear-gradient(top, #68b12f, #50911e);
     background: -o-linear-gradient(top, #68b12f, #50911e);
     background: linear-gradient(top, #68b12f, #50911e);
     border: 1px solid #509111;
     border-bottom: 1px solid #5b992b;
     border-radius: 3px;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     -ms-border-radius: 3px;
     -o-border-radius: 3px;
     box-shadow: inset 0 1px 0 0 #9fd574;
     -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
     -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
     -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
     -o-box-shadow: 0 1px 0 0 #9fd574 inset;
     color: white;
     font-family: "Segoe UI Light", Arial, sans-serif;
     font-size: 15px;
     padding: 6px 20px;
     text-align: center;
     text-shadow: 0 -1px 0 #396715;
     margin-left: 5px;
     width: 100px;
     height: 41px;
}
button.calculate:hover {
     opacity: .85;
     cursor: pointer;
}
button.calculate:active {
     border: 1px solid #20911e;
     box-shadow: 0 0 10px 5px #356b0b inset; 
     -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
     -moz-box-shadow: 0 0 10px 5px #356b0b inset;
     -ms-box-shadow: 0 0 10px 5px #356b0b inset;
     -o-box-shadow: 0 0 10px 5px #356b0b inset;
 
}
button.calculate {
     background-color: #68b12f;
     background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(     #50911e));
     background: -webkit-linear-gradient(top, #68b12f, #50911e);
     background: -moz-linear-gradient(top, #68b12f, #50911e);
     background: -ms-linear-gradient(top, #68b12f, #50911e);
     background: -o-linear-gradient(top, #68b12f, #50911e);
     background: linear-gradient(top, #68b12f, #50911e);
     border: 1px solid #509111;
     border-bottom: 1px solid #5b992b;
     border-radius: 3px;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     -ms-border-radius: 3px;
     -o-border-radius: 3px;
     box-shadow: inset 0 1px 0 0 #9fd574;
     -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
     -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
     -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
     -o-box-shadow: 0 1px 0 0 #9fd574 inset;
     color: white;
     font-family: "Segoe UI Light", Arial, sans-serif;
     font-size: 15px;
     padding: 6px 20px;
     text-align: center;
     text-shadow: 0 -1px 0 #396715;
     margin-left: 5px;
     width: 100px;
     height: 41px;
}
button.calculate:hover {
     opacity: .85;
     cursor: pointer;
}
button.calculate:active {
     border: 1px solid #20911e;
     box-shadow: 0 0 10px 5px #356b0b inset; 
     -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
     -moz-box-shadow: 0 0 10px 5px #356b0b inset;
     -ms-box-shadow: 0 0 10px 5px #356b0b inset;
     -o-box-shadow: 0 0 10px 5px #356b0b inset;
 
}
button.reset {
     background-color: #68b12f;
     background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(     #50911e));
     background: -webkit-linear-gradient(top, #68b12f, #50911e);
     background: -moz-linear-gradient(top, #68b12f, #50911e);
     background: -ms-linear-gradient(top, #68b12f, #50911e);
     background: -o-linear-gradient(top, #68b12f, #50911e);
     background: linear-gradient(top, #68b12f, #50911e);
     border: 1px solid #509111;
     border-bottom: 1px solid #5b992b;
     border-radius: 3px;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     -ms-border-radius: 3px;
     -o-border-radius: 3px;
     box-shadow: inset 0 1px 0 0 #9fd574;
     -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
     -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
     -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
     -o-box-shadow: 0 1px 0 0 #9fd574 inset;
     color: white;
     font-family: "Segoe UI Light", Arial, sans-serif;
     font-size: 15px;
     padding: 6px 20px;
     text-align: center;
     text-shadow: 0 -1px 0 #396715;
     margin-left: 5px;
     width: 100px;
     height: 41px;
}
button.reset:hover {
     opacity: .85;
     cursor: pointer;
}
button.reset:active {
     border: 1px solid #20911e;
     box-shadow: 0 0 10px 5px #356b0b inset; 
     -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
     -moz-box-shadow: 0 0 10px 5px #356b0b inset;
     -ms-box-shadow: 0 0 10px 5px #356b0b inset;
     -o-box-shadow: 0 0 10px 5px #356b0b inset;
}

Here we have set various properties of the calculate and reset buttons from color, gradient color, button size, font size, and font family. We have made our cursor change into a pointer when the mouse cursor is hovered over the buttons as a little added visual feedback to the user. There is a lot going on here and if you’re new to css all of this may seem strange and confusing but it becomes easier to understand when each section of code is broken down into individual parts. Since this is mainly a tutorial on jQuery, the specifics of the css above is outside the scope of this article but I encourage you to play around with this code and modify it in order to better grasp what we’ve done to achieve the visual effects within our program.

Save the file styles.css. The following screenshot shows our program (web page) in its current state:

Now we are going to get to the heart of this program and modify it using jQuery. jQuery is a JavaScript library that makes adding useful functionality to web pages much easier versus creating the same functionality in JavaScript itself. This is an over-simplified definition of jQuery and it would be well worth your time to study jQuery outside of this tutorial.

Before we can begin using jQuery, we need to download it. Go to http://jquery.com/ and click the Download jQuery button on the homepage. As of this writing, the current version of jQuery is 1.11.0. For our purposes, we’ll download the compressed, production version.

Click on the download link that says Download the compressed, production jQuery 1.11.0. A page will open in your browser with the jQuery source code.

Select all of the source code in the browser window (for Windows users, the keyboard shortcut for this is CTRL-A).

Once all of the source code has been selected, right-click and choose copy.

Go back into Notepad++ (which should still be open) and create a new file.

Paste the jQuery source code into the new file in Notepad++.

Save the file in the scripts folder (not in the css folder) and name it jquery.js. You can name the jQuery file anything you want (as long as it has the .js extension after the filename).

We can close the jquery.js tab in Notepad++ since we won’t be editing this file.

Now we need to tell our HTML5 page where to find our jquery.js file.

Click the price_calculator.html tab at the top of the Notepad++ window.

In thesection of the page directly under

type the following code:

Add one more reference directly below the one you just wrote:

This is a reference to a file we will be writing soon.

Now that our references have been added, we can start writing our jQuery code. In Notepad++, create a new file, name it calculate.js and save it in the scripts folder.

Type the following code into the file calculate.js:

var CALC = {

};

This code is the beginning of an object literal. An object literal is a way to group related code into distinct pieces, essentially dividing the code into units of functionality. Writing the code this way makes it easier to understand and maintain down the road. Object literals go into the discussion of encapsulation and object-orientation which is beyond the scope of this tutorial but you can find more information on the ups and downs of object literals here: http://learn.jquery.com/code-organization/concepts/

Okay, the code we just wrote has created an object using literal notation. Now we’ll write our functions that give our program its functionality. Place your cursor in the empty space between the two curly brackets { }; and type the following code:

 onReady: function() {
     $('#quantity').focus();
     $('button.reset').hide();
     $('button.calculate').click(CALC.calculate);
     $('button.reset').click(CALC.reset);
 },

Here we have created a function called onReady that will run when our program (web page) initially loads. Inside this function, we have done the following:

Made the mouse cursor appear inside the quantity textbox (input field).
Hidden the reset button from view.
Enabled the Calculate button (when clicked) to run a function called calculate(which we will be writing in the next section).
In the calculatefunction, the button is changed to Reset. When the reset button is clicked, run the resetfunction(which we’ll also be writing next).

Under the code you just wrote, type the following:

calculate: function(event) {
 // Get the quantity from the user.
    var quantity = $('#quantity').val();
    // Get the price from the user.
    var cost = $('#price').val();

// Initialize the variables, perform the calculation, store the values in the 
variables, and make the total cost appear as a dollar amount with 2 places past
the decimal point. 
    var totalCost = quantity * cost;
    totalCost=totalCost.toFixed(2);
    
    // Set the total cost by placing the value in the total cost input field.
 $('#total').val(totalCost);
 
// Hide the calculate button. 
 $('button.calculate').hide();
 
// Show the reset button.
 $('button.reset').show();
 
 },

We have done a lot with a relatively small amount of code. The calculatefunction has been created which takes the quantity and price values that the user enters, multiplies them, and displays a final dollar amount in the total input field. This function gets fired when we click the Calculate button.

Whenever you see a name with a hash # mark in front of it, we are referencing one of the input elements. For instance, this line of code:

var cost = $(‘#price’).val();

creates a variable named cost and assigns it the value of the price input field. jQuery uses css selectors to work with HTML elements. Our price element has an id of price and we reference it in our jQuery code with the hash # mark.

The magic (so to speak) comes into play with the hide() and show() functions.

// Hide the calculate button.
    $(‘button.calculate’).hide();
// Show the reset button.
    $(‘button.reset’).show();

When the Calculate button is clicked, we immediately hide the Calculate button and show the Reset button. So essentially we have two buttons on the form but we’re showing and hiding them so fast that they appear as one.

The onReady function that we wrote at the beginning of this section will call the reset function once the Reset button has been placed onto the form.

Now it’s time to write the code that will clear the input fields and return the form to its original state so the user can enter another calculation. Directly below the code you just wrote, type the following:

reset: function(event) {
     $('#quantity').val('');
     $('#price').val('');
     $('#total').val('');
     $('#quantity').focus();
     $('button.calculate').show();
     $('button.reset').hide();
 }

This code clears all of the input fields by setting their values to an empty value, returns the mouse cursor (focus) the quantity input field, shows the Calculate button again, and hides the Reset button. Our form is now back in the state is was in when it was first opened and is ready for another calculation.

Directly below the code you just wrote, you should have a right curly bracket with a semi-colon }; already in place. If not, add that now. Below this curly bracket, type this last line of code:

$(document).ready(CALC.onReady);

This last line uses our object CALC and calls its onReady function. This is how you call an object’s function which goes into the discussion of object oriented programming. Object oriented programming is a powerful paradigm of many languages, JavaScript and jQuery included. It would be well worth your time to learn about object oriented programming as you continue your studies of JavaScript and jQuery.

Go ahead and save the calculate.js file if you haven’t already and run price_calculator.html in your web browser. It should look like this:

I hope this small example program gets you thinking about the power of jQuery and object oriented programming. You can take this example and use it as a springboard for your own projects, especially where a streamlined interface is required.

Source Code:

You can download the tutorial source code here.

Creating Interactive Tables with jQuery

Zenva — Mon, 21 Apr 2014 12:00:09 +0000

Requirements

Basic knowledge of HTML5, CSS3, and HTML tables.

Some exposure to JavaScript and jQuery is recommended.

You can download the tutorial source code files here.

BUILD GAMES

FINAL DAYS: Unlock 250+ coding courses, guided learning paths, help from expert mentors, and more.

ACCESS NOW

Introduction

In this tutorial, we will build a table with HTML5 and CSS3. Then we’ll use the jQuery library to hide the table’s data rows when the page loads and allow the user to expand and hide select rows.

Here is a screenshot of the table we will create:

What you will need to complete this tutorial

Create a new folder on your desktop called Table Project.
Inside the Table Project folder, create a new folder called css. This is where the Cascading Style Sheet for the project will go.
Inside the Table Project folder, create another new folder called scripts. Our jQuery code will go here.

Getting Started

Let’s create the basic HTML5 document structure and the css file for the project.

Open Notepad++. A new blank file is automatically created for you when the program loads. Save this file in the Table Project folder as table_project.html.
Create another new file by clicking on the New icon in the upper left corner of the Notepad++ window(it looks like a white sheet of paper next to a green circle with a white + symbol inside the circle). This will create a new blank file and will appear as a new tab at the top of the Notepad++ window directly above the editor window. The name of the tab should appear as new 2.
Save this file in the css folder which is inside of the Table Project folder and name this new file styles.css.
Click the tab labeled table_project.html at the top of the Notepad++ window.

Now we’re ready to start writing our HTML5 page. Type the following code into Notepad++:

 
 
 
    Table Project

This code defines the basic HTML5 document structure for our project and links the HTML page to our .css file by using the link tag.

Now we’ll create our table. Add the following code between the opening and closing body tags:

December 2013	Title	Speaker

December 1, 2013

Today's Message Title

John Smith

December 5, 2013

Today's Message Title

Jane Jones

December 12, 2013

Today's Message Title

John Smith

December 25, 2013

Today's Message Title

Santa Claus

We now have a table with a heading, four rows, and three columns. Viewed in a browser, your table should look like the following screenshot: (Don’t worry about the class names in this code yet. I will explain these when we begin writing the code for our style sheet).

The table doesn’t look very pretty now but it will after we style it with css which we’ll be doing soon.

Let’s finish up the table by adding the remaining table headers and rows. Add the following code directly below the code you just wrote:

January 2014

Title

Speaker

January 1, 2014

Today's Message Title

Joey Walker

January 4, 2014

Today's Message Title

Sandy Williams

January 15, 2014

Today's Message Title

Mason Green

January 29, 2014

Today's Message Title

Fred Granger

February 2014

Title

Speaker

February 2, 2014

Today's Message Title

Joey Walker

February 9, 2014

Today's Message Title

Jane Jones

February 17, 2014

Today's Message Title

Herbie Mattson

February 26, 2014

Today's Message Title

Dean Franklin

March 2014

Title

Speaker

March 7, 2014

Today's Message Title

Emily Smith

March 16, 2014

Today's Message Title

Leon Sheplar

March 25, 2014

Today's Message Title

Fred Granger

March 28, 2014

Today's Message Title

Jane Thompson

Here is our completed, un-styled table:

Now we’ll spruce this up with a little css.

Save the table_project.html file and open the styles.css file that you created earlier. Type the following into the Notepad++ code editor:

.table {
    font-family: Arial, sans-serif;
    width: 55%;
    border-collapse: collapse;
    margin-top: 55px;
    margin-left: 300px;
}

.table td, th {
    font-size: 1em;
    padding: 7px 7px 2px 3px;
}

.table th {
    font-size: 1.1em;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #007cd9;
    color: #ffffff;
}

.table tr.alt td {
    background-color: #e4e4eb;
    color: #000000;
}

With this css code, we’ve changed the font style and size, added some basic margin and padding, and also added a little color to the table headers. One thing I do want you to notice is that we added the grayish background color to every other row of the table with the last style in the css file. Adding a light background color to table rows in this manner is a common practice to make the information a little easier to read.

At this point, our table looks like this:

Now we’re going to use jQuery to perform our row hiding. jQuery is a JavaScript library that makes adding useful functionality to web pages much easier versus creating the same or similar functionality in JavaScript itself. This is an over-simplified definition of jQuery and it would be well worth your time to study jQuery outside of this tutorial.

Click on the download link labeled Download the compressed, production jQuery 1.11.0. A page will open in your browser with the jQuery source code.

Select all of the source code in the browser window (for Microsoft Windows users, the keyboard shortcut for this is CTRL-A).

Once all of the source code has been selected, right-click and choose copy.

Go back into Notepad++ (which should still be open) and create a new file and paste the jQuery code into this new file.

Save the file in the scripts folder that is within the Table Project folder and name the file jquery.js. You can name the jQuery file anything you want just as long at it has the .js extension after the filename.

Since we won’t be editing this file go ahead and close the jquery.js tab in Notepad++ by clicking on the small x on the right side of the tab.

Now we need to add a reference to jquery.js in our HTML page.

Open the table_project.html in Notepad++. Directly below the link to the stylesheet, add the following code:

Add one more reference directly below the one you just wrote:

This is a reference to a file we will be writing soon.

Now that our references have been set up, we can start writing some code. In Notepad++, create a new file, name it rowtoggle.js and save it in the scripts folder.

Type the following code into the file rowtoggle.js:

$(document).ready(function() {
    $('.toggle, .toggle2, .toggle3, .toggle4').hide();
});

If you save the file and view the webpage in your browser, you’ll notice that all of the table’s data rows have been hidden and only the headers remain.

Let’s examine the code that accomplished this.

$(document).ready(function() {
    $('.toggle, .toggle2, .toggle3, .toggle4').hide();
});

The first line of code is the start of jQuery’s document.ready function. This function waits for the entire HTML page to load before running the code inside it. Waiting for the page to load completely ensures our script(s) run the way that we expect them to.

The heart of this function hides the table’s data rows when the page loads.

$('.toggle, .toggle2, .toggle3, .toggle4').hide();

This code hides all of the table elements with the class names toggle, toggle2, toggle3, and toggle4 when the page loads. While this is nice, it’s not very functional because we have no way of expanding the rows that we have hidden. We’ll fix that now.

Look back at the HTML we wrote to create the table. Each of the table headers that represent the month and year (December 2013, January 2014, February 2014, March 2014) are attached to classes like so:

December 2013

January 2014

February 2014

March 2014

Using jQuery, we are going to attach these headers to a click event and toggle (show and hide) each row that is associated with a specific header by allowing the user to click on the text of the month and year.

Below the code we previously wrote:

$(document).ready(function() {
    $('.toggle, .toggle2, .toggle3, .toggle4').hide();
});

Add the following code after the semi-colon:

$(document).ready(function() {
    $('.clickable1').click(function() {
        $('.toggle').toggle(250);
    });
});

$(document).ready(function() {
    $('.clickable2').click(function() {
        $('.toggl2').toggle(250);
    });
});

$(document).ready(function() {
    $('.clickable3').click(function() {
        $('.toggle3').toggle(250);
    });
});

$(document).ready(function() {
    $('.clickable4').click(function() {
        $('.toggle4').toggle(250);
    });
});

Here is what we have done:

We have created four document.ready functions that will not run until our HTML page has completely loaded.

Inside of these functions, we have created another function that attaches a click event to our table headers that have the class names clickable, clickable2, clickable3, and clickable4 attached to them.

Inside of each .click function (or click event), we are using jQuery’s toggle method to show or hide the table rows based on which header the user clicks on. In this example, we are passing the .toggle method a parameter of 250 between the parentheses. This parameter controls how fast the toggle effect is, which in this case is 250 milliseconds. You can alter the speed by changing the parameter. If we were to change the number to 500 milliseconds, the toggle effect would be slightly slower.

Now if you save the HTML file and view it in your browser, you can click on a month or year and expand or show the table rows below them. Clicking on the month or the year again hides the rows. But we’re not done yet. You and I know that we can achieve this functionality by clicking on the month or the year but a user would have no way of knowing this. We need to let the user know that the month and year are clickable. You may be thinking that we could just turn the headings into links and we are essentially going to do that but we’re going to go about it a little differently.

If we turn the headings into traditional links, we really aren’t linking to anything in the traditional sense (a separate HTML page or even a portion of our page itself). We could turn the headings into links with additional HTML but I have an easier way.

Go back to Notepad++ and open the styles.css file.

Add the following code to the bottom of the file:

 .clickable1, .clickable2, .clickable3, .clickable4 {
    cursor: pointer;
    text-decoration: underline;
}

Save the css file and view the updated HTML file in your browser. Our month and year heading text is now underlined and the cursor changes when we hover over the underlined text, just like a traditional link.

You can customize this table in an infinite number of ways but I hope the techniques presented here will get you started. What I really wanted to convey in this tutorial is that we can achieve some very nice effects with only a few lines of jQuery code, which is especially encourage to beginning developers. The techniques I’ve discussed here are by no means the best and only way to achieve the functionality presented but I hope that this tutorial will give you a good start.

Tutorial source code

You can download the tutorial source code files here.

jQuery AJAX Beginners Video Tutorial

Pablo Farias — Thu, 27 Mar 2014 11:00:51 +0000

At the HTML5 Hive we’ve published a jQuery AJAX intro tutorial, which is part of the online course Programming for Entrepreneurs jQuery:

Check it out!