I have created a very small UI to play with colors filling and clearing them.
What UI has:
It has 4 table cells named first, second, third, fourth cell etc.
It has 4 buttons below to it.
i- To color specific cell.
ii- To clear(remove color) for specific cell.
iii- To color all cells.
iv- To clear all cells.
Here comes code now.
HTML code:
JS code:
In case anyone wants to run it in their system, I recommend use Visual CODE studio(very very easy to deal with these kind of programs) and create a HTML file with mentioned code above, create a JS file with mentioned above(name should be "change_color_of_cell.js", since I have mentioned that in HTML code) and run it with LIVE server on 5500 default port and go to you browser with hitting link http://localhost:5500/change_color_of_cell.html you could play with UI then.
I am rushing to purchase things as of now, will add more CODE explanation and screen shots to this post in sometime too.
JAVA Script, HTML, CSS is really cool
NOTE: This time less googling and less references taken
Thanks,
R. Singh
This User Gave Thanks to RavinderSingh13 For This Post:
Good learning!
Keep learning Ravinder and soon you can dive into Vue.js and write new forum components with me, after you get the basic of CSS and JS down
I will create a JSON REST API for you and encourage you tp build a Vue app using live forum data
Thanks a TON Neo for encouragement here, fingers crossed, I pray to GOD to give me strength to learn more daily basis.
Hello All,
I created a simple side navigation bar, where all options(hyperlinks) are my own programs itself
UI's explanation:
On left side have 5 links where I can hit on them and go the specific program's UI, I thought I will maintain all my programs into this side bar itself.
On main page it is a sample text I have taken from net.
HTML code: HTML code uses very basic things like hre(for page simple redirection to another link), link rel TAG for mentioning CSS file name in it by which we are making page settings like coloring, spacing etc etc. <div>...</div> tag which specifies a specific section in code(AFAIK).
Now here I have first time tested how to import a CSS file into HTML codes. Have created file named "all_programs1.css" where all css code will be there for above html code.
CSS code:
A bit explanation on CSS portion is; .sidenav is a class name(for <div> TAG) and I am telling css to have this setting only for that class by using .. In case anyone wants to apply CSS settings for a specific component's ID then use like #sidenav as an example.
their properties are pretty much easy to understand. 1 great feature is hover which means we could set properties FOR ACTION when MOUSE/CURSOR is over some heading/text. In this example I am setting that its color should be GREEN, likewise we could set more things in it.
NOTE: Again few references were taken by googling.
Location: Asia Pacific, Cyberspace, in the Dark Dystopia
Posts: 19,118
Thanks Given: 2,351
Thanked 3,359 Times in 1,878 Posts
Ravinder,
In this line:
the type="text/javascript" attribute is obsolete for a script element (these days), so you can get rid of it.
You must be following an "older" tutorial since it uses obsolete attributes.
Also, since you are developing in Visual Studio Code, you should not use "test test test ... " for dummy data because VSC has emmet or shortcut based lorem ipsum for test data, I think it's builtin but in might be by extension now.
There are many "fun facts" like this to get familiar with and these "fun facts" will greatly speed up your web dev time in the future.
Ravinder,
In this line:
the type="text/javascript" attribute is obsolete for a script element (these days), so you can get rid of it.
You must be following an "older" tutorial since it uses obsolete attributes.
Also, since you are developing in Visual Studio Code, you should not use "test test test ... " for dummy data because VSC has emmet or shortcut based lorem ipsum for test data, I think it's builtin but in might be by extension now.
There are many "fun facts" like this to get familiar with and these "fun facts" will greatly speed up your web dev time in the future.
Thanks a TON Neo for letting know, yes you are right without <...type="text/javascript" too it is running, will try out options in VSC too thank you.
Here is my very FIRST LOGIN Page program(FAIR Warning: I am NOT dealing with server side as of now so, I had hard coded username and password for test user, learning purposes. Anyone who is following this post, should keep tat in mind that we should follow the BEST practices only and this is a learning thread).
Now comes the code part:
HTML code: JS code:
Will add code explanations shortly too.
NOTE: JS part is almost completely written by me and HTML part references from net were taken a bit.
Location: Asia Pacific, Cyberspace, in the Dark Dystopia
Posts: 19,118
Thanks Given: 2,351
Thanked 3,359 Times in 1,878 Posts
Hi Ravinder,
If you want to start learning to work with server side data, many beginners and expert alike use this site for "fake JSON data"
Quote:
JSONPlaceholder is a free online REST API that you can use whenever you need some fake data.
It's great for tutorials, testing new libraries, sharing code examples, ...
If you Google for fake JSON data, you will find other sites on the net that offer free APIs to use.
Also, you might also consider starting to use Google's FireStore or Firebase as a good place to store data (free for most users):
Quote:
Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Like Firebase Realtime Database, it keeps your data in sync across client apps through realtime listeners and offers offline support for mobile and web so you can build responsive apps that work regardless of network latency or Internet connectivity. Cloud Firestore also offers seamless integration with other Firebase and Google Cloud Platform products, including Cloud Functions.
Web development is quite advanced now and there are many amazing free tools to help you along the path to be a great web developer.
Hi Ravinder,
If you want to start learning to work with server side data, many beginners and expert alike use this site for "fake JSON data"
If you Google for fake JSON data, you will find other sites on the net that offer free APIs to use.
Also, you might also consider starting to use Google's FireStore or Firebase as a good place to store data (free for most users):
Web development is quite advanced now and there are many amazing free tools to help you along the path to be a great web developer.
Thanks a TON Neo for letting know, I went through "fake json data" site(seems like they have lot of types of call making to their sample data to get started), so it means I need to call APIs from php from back end(sorry if it is a DUMMY question)? If yes then please do let me know once I am done with HTML, CSS and JS basics then will start learning it too.
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)
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)
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)
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)
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)
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)
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)