HTML CSS JavaScript

HTML, CSS, and JavaScript are the three standard programming languages that must be used by any web application to be accessed by a universal web browser.

HyperText Markup Language (HTML)

HTML is what is known as a markup language for content to be displayed in a web browser. Web browsers receive files coded in HTML from a web server and render the contents, in the form of web pages with text, images, video, and transaction data, in a layout, as programmed in the HTML code.

Markup Language
A markup language is a system for annotating a document in a way it provides instructions on what is to be done with the text or other content. The idea and terminology evolved from the "marking up" of paper manuscripts (the revision instructions by editors), which is traditionally written with a red or blue pencil on authors' manuscripts. In digital media, this "blue pencil instruction text" was replaced by tags, which indicate the parts of the document rather than specifying exactly how they should be displayed. It lets authors avoid formatting every instance of the same kind of thing redundantly (and possibly inconsistently). The reader (in this case, the web browser) is the one that decides how content between each tag should be interpreted and rendered. Of course, every browser must have the same interpretation and rendering mechanisms, and that's what standards are for.

HTML pages comprise multiple elements that are the building blocks of the UI for a web application. Elements can be text, images, video, audio, data input fields, buttons, checkboxes, radio buttons, and other such user interface elements. An element is defined by a tag with an opening and closing tag and the content of the tag in between. Every element has an identifier and can be individually selected and manipulated (for example, to conditionally show and hide elements).

One of the earliest and very widely used features of HTML is known as hyperlinks. Any part of the page (any element such as a word or a sentence or an image) can be tagged so that even if users click on the element, they will be redirected to another page.

HTML pages uses imperative programming and looks very different from declarative programs.

Cascading Style Sheets (CSS)

HTML is interpreted by browsers and displayed based on well-defined standards. However, HTML offers limited capabilities to design the UI for web pages or web applications. Cascading Style Sheets (CSS) is an add-on to HTML that allows UI-specific attributes to be defined for elements, such as font color, size, background colors, borders, and many others.

CSS also supports conditional rules, such that a particular style is applied under a specific condition. For example, you can write HTML and CSS code such that the color of the text changes depending on what the text says (the 'Success' status could be displayed in green while the status 'Failure' could be displayed in red).

The browser generally has some default rendering logic, which it falls back on if there is no CSS, but the browser's capability to take rendering decisions is now intentionally kept to a minimum to allow programmers complete flexibility in how their applications should be rendered. Thus, CSS is now almost mandatory for any web application.

JavaScript

JavaScript is a high-level, interpreted scripting language. JavaScript enables interactive web pages and is an essential part of web applications. Web applications generally have minimal processing logic, but any logic required to provide interactivity or to manage the elements on the web page is developed using JavaScript.

A Complete HTML-CSS-JavaScript Page

The HTML, CSS, and JavaScript code below works together to provide you a styled, functional, page that simulates a Rock-Paper-Scissors game. To try it out copy all three files in one folder and open the HTML file in your web browser.

HTML

<!-- 
	Using HTML and CSS you can present very well designed pages hyperlinked to each other 
	However, they do not provide any processing capability and that is where JavaScript comes in.
	In this program we will also introduce forms, which are a way to get input from a user.
	Using a combination of HTML, HTML forms, CSS, and JavaScript we will build a simple version 
	of a Rock, Paper, Scissors game, where a user can play against the computer. 
-->
<html>
<!-- Inside the head tag you include some information about the page. -->
<head>
  <!-- The title is what shows on your browser tab. -->
  <title>Play Rock-Paper-Scissors</title>
  <!-- Add a link to the CSS file that has the required styling. -->
	<link href="rps_complete.css" rel="stylesheet" type="text/css" />
  <!-- Add a link to the JavaScript file that has the required functions 
  to be executed for this page. -->
	<script src="rps_complete.js"></script>
</head>
<!-- Inside the body tags you include the actual page content to be displayed. -->
<body>
  <!-- The box-title and other style classes are from the .css file -->
  <p class="box-title">The Rock-Paper-Scissors Game</p>
  <p class="styled-para">
    This is the popular game between two players where each player chooses 
    one of three options and the winner is decided by a hierarchy rule that goes:
  </p>
  <ul class="styled-para">
    <li>Rock beats Scissors</li>
    <li>Paper beats Rock</li>
    <li>Scissors beats Paper</li>
  </ul>
  <!-- CSS styles can also be defined inline for an element as below. 
  Use only if required for some ad-hoc styling for a specific element, 
  not recommended otherwise, as it can lead to messy code
  -->
  <h2 style="font-family: Arial;color:green;">Let's Play!</h2>
  <p class="styled-para">
    Enter one of the three options:
  </p>
  <!-- A Form is a collection of elements that accept user inputs
       There are a few types of form elements, the commonly ones being
       a text input box where the user can input a value 
       and a button which the user can click on to initiate an action.
  -->
  <form>
    <!-- The form action is processed in the JavaScript code -->
    <!-- To be able to identify the text box to read the value from 
         the element is given an id. 
    -->
    <input type="text" id="user-call-input" />
    <p id="error-message" style="color:red"></p>
    <!-- All elements have what are known as events which refer to possible user actions. 
         Each type of element will have its own set of relevant events.
         For example, a button element will have an "onclick" event.
         A JavaScript function can be attached to the events that need to be "handled". 
         When the event occurs, such as the user clicking on a button, 
         the attached function is executed.
    -->
    <button type="button" onclick="playRound()">Play!</button>
  </form>
 
  <!-- We can create empty elements as placeholders that will be dynamically populated 
  with values by the Javacript function as it executes. 
  Each element must have an id so the function can identify it. -->
  <p class="styled-para">
    <strong>Your call: </strong><span id="your-call" class="big-number"></span>
  </p>
 
	<!-- So far we received an input from the user and displayed it 
  on the page using the JavaScript function -->
	<!-- Now we add the game logic where the computer generates a random call 
  and the winner is determined -->
	<!-- Create plaeholder elements for the values generated by the game logic -->
  <p class="styled-para">
    <strong>Computer call: </strong><span id="computer-call" class="big-number"></span>
  </p>
  <p class="styled-para">
    <span id="round-winner-call" class="big-number" style="font-family: Arial;color:green;"></span>
  </p>
  <p class="styled-para">
    Score after <span id="rounds">0</span> rounds:
  </p>
  <p class="styled-para">
    You: <span id="user-score" class="big-number">0</span>
    Computer: <span id="computer-score" class="big-number">0</span>
    Draws: <span id="no-score-count" class="big-number">0</span>
  </p>
</body>
</html>

CSS

/* 
	This is a Cascading StyleSheet file (.css file) that works on an HTML (.html) file 
	to provide better looking pages than basic HTML can provide. 
*/
 
/* 
	These are styles that apply to core HTML elements
	Since html and body are the highest level tags, the styling here
	applies to the page itself and all content on the page.
	Individual elements can be further styled to override this high level styling.
*/
html, body {
  height: 100%;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
}
 
/* A class starts with a . followed by the class name */
.box-title {
  width: 100%;
  text-align: center;
  background-color: lightgreen;
  font-size: 18px;
  font-weight: bold;
  padding: 8px;
}
 
.styled-para {
  font-size: 18px;
  line-height: 1.5;
}
 
.big-number {
  font-size: 24px;
  font-weight: bold;
}
 
/* You can style individual HTML elements directly, without needing a class */
/* This will affect all instances of the element type */
/* Use a class if you do not want style elements differently */
button, input {
  font-size: 18px;
  line-height: 1.5;
}

JavaScript

/* 
  We are now adding the RPS game logic
  We will create a second function playRound() for the game logic, 
  and call the getUserCall function within that.
  Now on the HTML page button click we need to call the playRound function
 
  Variables defined outside all functions are called global variables
  Which means they can be used by any function.
  Variables within a function are local variables restricted for use by that function only.
*/
 
const call_options = ["Rock","Paper","Scissors"];
 
const user_call = "";
 
let round_winner_call = "";
let user_score = 0;
let computer_score = 0;
 
let number_of_rounds = 0;
let no_score_count = 0;
 
function generateRandomNumber(min, max){
	let random_number = Math.floor(Math.random() * (max - min + 1) ) + min;
	return random_number;
}
 
function getUserCall() {
  /* 
    A function will often act upon values entered in the HTML form.
    To get these values you have to use a library function
    called getElementById which is called on the document.
    This returns the element on which you can get its value attribute.
  */
 
  /* 
    At the start of a function you often have to look ahead and reset or clear values 
    that the last run of the function may have set.
    Clear any previous calls and error messages
  */
  
  document.getElementById('your-call').innerHTML = "";
  document.getElementById('computer-call').innerHTML = "";
  document.getElementById('round-winner-call').innerHTML = "";
  document.getElementById('error-message').innerHTML = "";
  
  const user_call = document.getElementById('user-call-input').value;
  
  // The console.log is a useful option to debug your code.
  // All browsers allow you to view the console by opening Developer Tools
  console.log(user_call);
 
  /*
   We will add some checks to the input value to make sure it is one of the three options allowed. 
   For this we can use some very useful JavaScript functions of which there are many.
 
   Here we can test if the input value is one of the values in the call_options array 
   using the includes function called on the array.
   It returns true if the test value is contained in the array or false.
  */
 
  if(call_options.includes(user_call)){
    // You can also set the value of an element by using the innerHTML property of the element.
    // Set the your-call element to display to whatever was input in the text box and retrieved above.
    document.getElementById('your-call').innerHTML = user_call;  
    // And return the value for use by the playRound() function
    return user_call;
  } else {
    // The entered value is not one of the valid values from the array
    // Display an error message on teh HTML page and return a null value
    document.getElementById('error-message').innerHTML = "Enter one of Rock, Paper, or Scissors!";
 
    return null;
  }
}
 
function playRound(){
  // First call the getUserCall function to get the user input
  const user_call = getUserCall();
  
  // Before starting any processing check if user_call is null (incorrect value entered) and if so exit the script, nothing to process further.
  if(user_call === null) exit;
  
  // Increment the number of rounds
  number_of_rounds++;
  
 
  let index = 1;
  
	let computer_call_number = generateRandomNumber(1, 3);
	let computer_call_value = call_options[computer_call_number - 1];
 
  // Update the HTML element to display the value
  document.getElementById('computer-call').innerHTML = computer_call_value;
 
  // Update the HTML element to display the number of rounds
  document.getElementById('rounds').innerHTML = number_of_rounds;
 
	if(user_call === "Rock" && computer_call_value === "Paper"){
		computer_score++;
    round_winner_call = "Computer wins!";
	}
	else if(user_call === "Rock" && computer_call_value === "Scissors"){
		user_score++;
    round_winner_call = "You win!";
	}
	else if(user_call === "Paper" && computer_call_value === "Rock"){
		user_score++;
    round_winner_call = "You win!";
	}
	else if(user_call === "Paper" && computer_call_value === "Scissors"){
		computer_score++;
    round_winner_call = "Computer wins!";
	}
	else if(user_call === "Scissors" && computer_call_value === "Rock"){
		computer_score++;
    round_winner_call = "Computer wins!";
	}
	else if(user_call === "Scissors" && computer_call_value === "Paper"){
		user_score++;
    round_winner_call = "You win!";
	}
	else{
		no_score_count++;
    round_winner_call = "Draw!";
	}
 
  // Update the HTML element to display the outcome for the round
  document.getElementById('round-winner-call').innerHTML = round_winner_call;
 
  // Update the HTML element to display the total user score
  document.getElementById('user-score').innerHTML = user_score;
 
  // Update the HTML element to display the total computer score
  document.getElementById('computer-score').innerHTML = computer_score;
 
  // Update the HTML element to display the number of draws
  document.getElementById('no-score-count').innerHTML = no_score_count;

Technology Stacks Frameworks and Libraries