|
|
Sponsored Content
Top Forums
Web Development
Web development learning thread(Javascript, HTML, CSS, angular, vue.js).
Post 303034550 by RavinderSingh13 on Monday 29th of April 2019 05:54:39 AM
04-29-2019
Moderator
Quote:
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.
Cheers.
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.
Cheers.
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
).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)
May be when get some more hands on.Thanks,
R. Singh
Last edited by RavinderSingh13; 04-29-2019 at 07:02 AM..
This User Gave Thanks to RavinderSingh13 For This Post:
|
|
7 More Discussions You Might Find Interesting
1. Web Development
Not sure if this is the right place to ask this but here goes. I am creating a cheat sheet for co-workers. The concept is that you pick wire size and conduit size and the amount of wires that will fit is displayed. I haven't used alot of drop downs and can't quite figure out the way the get id... (3 Replies)
Discussion started by: zero3ree
3 Replies
2. Shell Programming and Scripting
I have a internal wesbite set up and any visitor must enter username / passwd as defined in apache (I've set these up using htpasswd)
I use cgi scripts set up using ksh or javascript to populate pages / tables etc.
I want to be able to get the apache username that the used authorised... (3 Replies)
Discussion started by: frustrated1
3 Replies
3. Web Development
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"
... (4 Replies)
Discussion started by: N-Training
4 Replies
4. Programming
Hey All,
What I'm looking for is a way to rotate an image by non 90 degree angles (ie 90, 180, 270, 360). I am able to do it in PHP, but there are errors in the image, some pixels end up colored incorrectly and the image ends up resized and I lose transparency. I've done my share of searching on... (1 Reply)
Discussion started by: pmd006
1 Replies
5. Web Development
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... (7 Replies)
Discussion started by: N-Training
7 Replies
6. Web Development
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: ... (0 Replies)
Discussion started by: Neo
0 Replies
7. Web Development
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... (0 Replies)
Discussion started by: Neo
0 Replies