"Web development learning thread(Javascript, HTML, CSS, angular, vue.js)."

Post #303034550 by RavinderSingh13 on Monday 29th of April 2019 05:54:39 AM

Originally Posted by Neo
Hey Ravinder,
Here is a more "2019'ish tutorial" Javascript / HTML tutorial which is easy to follow and is more in line with how developers do things in 2019:
Quick Autocomplete App With JS & JSON
I recommended you code this tutorial using the same tools and technique as Brad.
Thanks a TON Neo for letting me/us know this great video. I have gone through it, I understood the concept of it but syntax vice it will take sometime Smilie

Let me put my learning from the video in points here.

1- Create a folder structure where we can keep fake json data, html file, JS file and CSS file.

2- Now copy json data from respective site into the file in your local system OR create it directly from VSC.

3- Get icons link mentioned by tutor in video(font awesome).

4- Get respective css file from site mentioned by tutor(or we could ours too Smilie ).

5- Create HTML file with all necessary tags, important thing is to mention CSS file link into <head> tag then create <div> tags for having components in them. Have a <div> tag for containing HTML code which will be generated by JS after reading JSON file(NOTE: We always create HTML components by their id or class names so that we can later access them in JS file and we create a place for html(which is coming from JS) too, to show it on page.)

6- Create JS file(where we will create 2 main functions, 1st is to fetch json values from JSON file and keep it into an array. We will also put regex in it to make sure any character is matching from array's value should come in output. 2nd function is for creating HTML file from array which we got from 1st function, later we will pass this newly created HTML output into tag which we created in HTML file to hold these values.

I have followed tutorial and created it, will try to do some more experiments with UI by adding few of my thoughts and share with everyone here.

@Neo, also I could try this for forum's user's search functionality too(which we discussed sometime back) Smilie May be when get some more hands on.

R. Singh

Last edited by RavinderSingh13; 04-29-2019 at 07:02 AM..
This User Gave Thanks to RavinderSingh13 For This Post:
Related Linux and UNIX Technical Support
Learning HTML
I have tried to create a web page browser window. An example, I copied what the book pretty much wanted but get only the header. What should I change? Also Anyone know any good books for this? Many thanks. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Translation/EN" ...... Web Development
Web Development
HTML down, CSS help, ahhhh
I am having some problems. I have been able to learn HTML, but when I try and encode CSS, nothing happens, what is the major issue here. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>MY CSS</title> <style...... Web Development
Web Development
Simple Vue.js Component to Redirect to External Web Page Using Vue Router
Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library. After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far): Component Example: ...... Web Development
Web Development
Google Trends: react.js angular.js vue.js
While I'm on the subject of Google trends, here is a global trend since 2004 comparing react.js, angular.js, vue.js It's no secret I'm a vue.js fan and coder, but not because of the trend line (which I just saw for the first time a few minutes ago) My experience is that vue.js, a late arrival...... Web Development
Web Development
wml::std::tags(3)						     EN Tools							 wml::std::tags(3)

wml::std::tags - Standard Support Tags
#use wml::std::tags # Pass 2: advanced if constructs <ifdef varname thenval elseval> # Pass 3: support tag <perl> ... </perl> <say> ... </say> # Pass 4: support tag <m4> ... </m4> # Pass 4: symbols <symbol name value> <symbol name undef> # Pass 5: diversions <dump NAME> <enter NAME> ... <leave> <divert NAME> ... </divert> # Pass 6: support tag <asubst ...> ... </asubst> # Client-Side JavaScript: support tag <javascript [version=..] [language=..] [type=..] [src=...] [defer] [nohead] [nolang]> ... </javascript> # Resynchronize line numbers for more accurate pass 3 warnings <sync-lines>
This include file defines some standard support tags one needs all the time. All tags are self-explanatory and briefly mentioned in wml_intro(1), except the last two which are described below. "<javascript>": This tag was primarily a shorthand for "<script type="text/javascript" language="JavaScript">" but it has evolved. If the "<head>" tag is defined and is a complex macro, e.g. when calling "wml::std::page", then Javascript code is automatically passed to this macro and should be diverted to the HEAD section of HTML documents. This diversion preserve lang slices in multi-lingual documents. Those features may be disabled by the ``nohead'' and ``nolang'' attributes. "<sync-lines>": WML tries to print information on input file and line numbers when warnings or errors are reported in passes 2 and 3. Some special sentences containing file names and line numbers are inserted during pass 1. So pass 2 have an accurate knowledge of where warnings appear in input file. But it also filters it without preserving lines, so after pass 2 information is almost unusable. By putting "<sync-lines>" in input file, it forces pass 2 to resynchronize information on line numbers. So for debugging pass 3, it could be of some help to insert "<sync-lines>" before ePerl code.
Ralf S. Engelschall rse@engelschall.com www.engelschall.com Denis Barbier barbier@engelschall.com
Internal: P1, P2, P3, P4, P6 External: --
wml(1) EN Tools 2014-04-16 wml::std::tags(3)

Featured Tech Videos