Scribd
Upload
26 views

HTML CSS JS Examples

This document provides examples of creating basic HTML, CSS, and JavaScript elements and components. It includes examples for creating a basic HTML page structure, adding CSS styling, and JavaScript alerts. Further examples demonstrate creating a navigation bar with CSS, dropdown menu with CSS and JavaScript, and adding images and forms. The document serves as a reference for beginners to learn HTML, CSS, and JavaScript through examples.

Uploaded by

Asha Nagesh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

HTML CSS JS Examples

This document provides examples of creating basic HTML, CSS, and JavaScript elements and components. It includes examples for creating a basic HTML page structure, adding CSS styling, and JavaScript alerts. Further examples demonstrate creating a navigation bar with CSS, dropdown menu with CSS and JavaScript, and adding images and forms. The document serves as a reference for beginners to learn HTML, CSS, and JavaScript through examples.

Uploaded by

Asha Nagesh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 58

1

HTML CSS JS Examples

Creating a basic HTML document 3

Creating a stylesheet with CSS 4

Adding an image with HTML 5

Creating a navigation bar with CSS 5

Creating a dropdown menu with CSS and JavaScript 7

Simple HTML Page: 10

CSS Styling: 11

JavaScript Alert Box: 12

JavaScript Event Handling: 13

CSS Box Model: 13

HTML: Creating a basic web page 14

CSS: Styling a web page 15

JavaScript: Displaying a message 16

Laurence Svekis https://basescripts.com/


2

HTML: Adding an image 16

CSS: Creating a navigation bar 17

JavaScript: Getting user input 18

HTML Example - Creating a simple web page structure: 18

CSS Example - Changing font color: 19

JavaScript Example - Creating an alert box: 19

HTML Example - Creating a link: 19

CSS Example - Changing background color: 20

JavaScript Example - Creating a variable: 20

HTML Example - Adding an image: 21

CSS Example - Changing font size: 21

JavaScript Example - Using an if statement: 21

Example of HTML code: 22

Example of CSS code: 23

Example of JavaScript code: 23

Example of an HTML form: 23

Example of CSS grid layout: 24

Example of JavaScript function: 25

HTML: Creating a basic webpage structure 25

CSS: Styling a webpage 26

JavaScript: Displaying an alert message 27

HTML: Adding an image to a webpage 27

CSS: Adding a border to an element 28

JavaScript: Changing the text of an element 28

HTML/CSS: Creating a responsive navigation bar 29

CSS: Creating a card layout 32

Laurence Svekis https://basescripts.com/


3

JavaScript: Creating a countdown timer 34

HTML/CSS: Creating a responsive navigation bar 38

HTML/CSS: Creating a responsive navigation bar 41

HTML/CSS/JavaScript: Creating a slideshow 44

HTML/CSS: Creating a pricing table 48

HTML/CSS/JavaScript: Creating a simple game of "Simon" 52

Creating a basic HTML document

<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is my first webpage.</p>
</body>
</html>

This is a basic HTML document that includes a title, heading, and


paragraph. The <!DOCTYPE html> declaration tells the browser
that this is an HTML5 document. The <html> element is the root
element of the document and contains all other elements. The
<head> element contains metadata about the document, such as
the title, and is not displayed in the browser. The <body>
element contains the visible content of the document.

Laurence Svekis https://basescripts.com/


4

Creating a stylesheet with CSS

<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
<style>
h1 {
color: red;
font-size: 36px;
}
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is my first webpage.</p>
</body>
</html>

This example adds a stylesheet to the previous HTML document.


The <style> element is used to define CSS rules for the
document. In this example, the h1 element is styled with red text
and a font size of 36 pixels, while the p element is styled with
blue text and a font size of 18 pixels.

Laurence Svekis https://basescripts.com/


5

Adding an image with HTML

<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is my first webpage.</p>
<img src="myimage.jpg" alt="My Image">
</body>
</html>

This example adds an image to the HTML document using the


<img> element. The src attribute specifies the URL of the image
file, while the alt attribute provides alternative text for the image,
which is displayed if the image cannot be loaded.

Creating a navigation bar with CSS

<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
<style>
nav {
background-color: #333;
overflow: hidden;
}

Laurence Svekis https://basescripts.com/


6

nav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<h1>Welcome to my website!</h1>
<p>This is my first webpage.</p>
</body>
</html>

This example creates a navigation bar using CSS. The <nav>


element is used to contain the navigation links. The
background-color property sets the background color of the
navigation bar, while the overflow property is used to clear any
floats inside the <nav> element. The <a> element is used to
define the links, and the float property is used to align the links
horizontally. The padding property sets the space around the link

Laurence Svekis https://basescripts.com/


7

text, while the text-decoration property removes the underline


from the links.

Creating a dropdown menu with CSS and


JavaScript

<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
<style>
nav {
background-color: #333;
overflow: hidden;
}
nav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
.dropdown {
float: left;
overflow: hidden;
}

Laurence Svekis https://basescripts.com/


8

.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px
rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;

Laurence Svekis https://basescripts.com/


9

}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<h1>Welcome to my website!</h1>
<p>This is my first webpage.</p>
<script>
// JavaScript code to toggle the dropdown menu
let dropdown =
document.getElementsByClassName("dropdown");
let i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click",
function() {
this.classList.toggle("active");
let dropdownContent =
this.nextElementSibling;
if (dropdownContent.style.display ===
"block") {

Laurence Svekis https://basescripts.com/


10

dropdownContent.style.display =
"none";
} else {
dropdownContent.style.display =
"block";
}
});
}
</script>
</body>
</html>

This example adds a dropdown menu to the navigation bar using


CSS and JavaScript. The dropdown class is used to define the
dropdown container, while the dropbtn class is used for the
dropdown button. The dropdown-content class is used for the
dropdown menu items. The JavaScript code adds an event
listener to toggle the display of the dropdown menu when the
dropdown button is clicked.

Simple HTML Page:

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello World!</h1>

Laurence Svekis https://basescripts.com/


11

<p>This is my first web page.</p>


</body>
</html>
This is a simple HTML page that displays a heading and a
paragraph of text. The <!DOCTYPE html> declaration specifies
that the document is an HTML5 document, and the <html>
element is the root element of the document. The <head>
element contains information about the document, such as the
title of the page, and the <body> element contains the content of
the page.

CSS Styling:

<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>
h1 {
color: red;
font-size: 24px;
}
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>

Laurence Svekis https://basescripts.com/


12

<p>This is my first web page.</p>


</body>
</html>

This is an HTML page with CSS styling applied to the heading and
paragraph elements. The CSS is defined in the <style> element
in the <head> section of the document. The h1 selector targets
the heading element and sets its color to red and font size to 24
pixels. The p selector targets the paragraph element and sets its
color to blue and font size to 16 pixels.

JavaScript Alert Box:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script>
alert("Hello World!");
</script>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first web page.</p>
</body>
</html>

This is an HTML page with a JavaScript alert box that displays a


message when the page loads. The alert() function is called in a
<script> element in the <head> section of the document. When

Laurence Svekis https://basescripts.com/


13

the page is loaded, the alert box displays the message "Hello
World!".

JavaScript Event Handling:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script>
function showMessage() {
alert("Button clicked!");
}
</script>
</head>
<body>
<h1>Hello World!</h1>
<button onclick="showMessage()">Click me</button>
</body>
</html>

This is an HTML page with a button element that triggers a


JavaScript function when clicked. The showMessage() function is
defined in a <script> element in the <head> section of the
document. When the button is clicked, the function is called and
an alert box is displayed with the message "Button clicked!".

CSS Box Model:

Laurence Svekis https://basescripts.com/


14

<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>
div {
border: 1px solid black;
padding: 10px;
margin: 10px;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>This is a box</div>
</body>
</html>

This is an HTML page with a div element styled using CSS box
model properties. The div selector sets a black border around the
div element with a thickness of 1 pixel, adds 10 pixels of padding
inside the border, and 10 pixels of margin outside the border.

HTML: Creating a basic web page

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>

Laurence Svekis https://basescripts.com/


15

</head>
<body>
<h1>Welcome to my website</h1>
<p>This is my first web page.</p>
</body>
</html>

This is a basic HTML code for creating a web page. The


<!DOCTYPE html> declaration indicates that this is an HTML5
document. The <html> element encloses the entire web page
content, while the <head> element contains meta information
about the page, including the title which appears in the browser
tab. The <body> element contains the actual content of the web
page, in this case, a header (<h1>) and a paragraph (<p>).

CSS: Styling a web page

body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}

h1 {
color: #333;
font-size: 2em;
text-align: center;
}

p {
color: #666;

Laurence Svekis https://basescripts.com/


16

font-size: 1.2em;
}

This CSS code adds some styling to the previous HTML example.
It sets the background color of the page to light gray (#f0f0f0)
and the font family to Arial or sans-serif. It also styles the header
(<h1>) to be centered, with a font size of 2em and a color of
dark gray (#333), while the paragraph (<p>) has a font size of
1.2em and a color of gray (#666).

JavaScript: Displaying a message

alert("Hello, World!");

This JavaScript code displays an alert box with the message


"Hello, World!". When the user clicks the OK button, the alert box
will disappear.

HTML: Adding an image

<img src="https://www.example.com/image.jpg"
alt="Example Image">

This HTML code adds an image to the web page. The src attribute
specifies the URL of the image file, while the alt attribute provides
alternative text for the image in case it cannot be displayed.

Laurence Svekis https://basescripts.com/


17

CSS: Creating a navigation bar

nav {
background-color: #333;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
}

nav li {
float: left;
}

nav a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

This CSS code creates a simple navigation bar. The background


color of the navigation bar is set to dark gray (#333). The ul and
li elements are used to create an unordered list of links. The a
elements are styled to be block-level elements with white text,
centered, and with some padding.

Laurence Svekis https://basescripts.com/


18

JavaScript: Getting user input

let name = prompt("What is your name?");


alert("Hello, " + name + "!");

This JavaScript code prompts the user to enter their name and
stores the result in a variable called name. It then displays an
alert box with a personalized greeting that includes the user's
name.

HTML Example - Creating a simple web page


structure:

<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>Here's some content for my page.</p>
</body>
</html>

This example demonstrates the basic structure of an HTML


document. The <!DOCTYPE html> declaration tells the browser
that this is an HTML5 document. The <html> element contains
the entire document, while the <head> element contains
information about the document, such as the page title. The

Laurence Svekis https://basescripts.com/


19

<body> element contains the visible content of the page, such as


headings and paragraphs.

CSS Example - Changing font color:

p {
color: red;
}

This example demonstrates how to change the color of text using


CSS. In this case, we're targeting all <p> elements and setting
their color to red. The color property is a CSS property that
specifies the color of the text.

JavaScript Example - Creating an alert box:

alert("Hello, world!");

This example demonstrates how to create an alert box using


JavaScript. When this code is executed, it will display an alert box
with the message "Hello, world!".

HTML Example - Creating a link:

<a href="https://www.example.com">Visit Example.com</a>

Laurence Svekis https://basescripts.com/


20

This example demonstrates how to create a hyperlink using


HTML. The <a> element is used to create a link, and the href
attribute specifies the URL that the link should point to. The text
between the opening and closing <a> tags is what the user sees
as the link text.

CSS Example - Changing background color:

body {
background-color: #f0f0f0;
}

This example demonstrates how to change the background color


of a web page using CSS. In this case, we're targeting the
<body> element and setting its background color to a light gray
color.

JavaScript Example - Creating a variable:

let x = 5;

This example demonstrates how to create a variable using


JavaScript. The let keyword is used to declare a variable, and the
variable name (x) is followed by an equals sign and the variable's
initial value (5 in this case).

Laurence Svekis https://basescripts.com/


21

HTML Example - Adding an image:

<img src="example.jpg" alt="Example image">

This example demonstrates how to add an image to a web page


using HTML. The <img> element is used to add an image, and
the src attribute specifies the URL of the image file. The alt
attribute provides alternative text for the image, which is
displayed if the image cannot be loaded.

CSS Example - Changing font size:

p {
font-size: 18px;
}
This example demonstrates how to change the font size of text
using CSS. In this case, we're targeting all <p> elements and
setting their font size to 18px.

JavaScript Example - Using an if statement:

let x = 5;
if (x > 10) {
alert("x is greater than 10");
} else {
alert("x is less than or equal to 10");
}

Laurence Svekis https://basescripts.com/


22

This example demonstrates how to use an if statement in


JavaScript. The code checks the value of the variable x, and if it's
greater than 10, an alert box displays the message "x is greater
than 10". If x is less than or equal

Example of HTML code:

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is my first website. I hope you enjoy
it!</p>
</body>
</html>

This is a simple HTML document that displays a heading and


paragraph. The <!DOCTYPE html> tag specifies the version of
HTML that is being used, and the <html> tag encloses the entire
document. The <head> tag contains metadata about the page,
such as the title of the page. The <body> tag contains the visible
content of the page, which in this case includes a heading and a
paragraph.

Laurence Svekis https://basescripts.com/


23

Example of CSS code:

h1 {
color: blue;
font-size: 36px;
}

This is a CSS style rule that targets all <h1> elements and sets
their color to blue and font size to 36 pixels. The color property
sets the color of the text, while the font-size property sets the
size of the font.

Example of JavaScript code:

let myVariable = "Hello, world!";


console.log(myVariable);

This is a simple JavaScript program that creates a variable called


myVariable and assigns it the value "Hello, world!". The
console.log() function is used to print the value of myVariable to
the browser console.

Example of an HTML form:

<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>

Laurence Svekis https://basescripts.com/


24

<input type="email" id="email" name="email"><br>


<label for="message">Message:</label>
<textarea id="message"
name="message"></textarea><br>
<input type="submit" value="Submit">
</form>

This is an HTML form that allows users to submit their name,


email, and a message. The label tags provide labels for each
input field, and the input and textarea tags create the fields
themselves. The type attribute of the input tag specifies the type
of field (text or email), and the id and name attributes are used
to identify each field. The submit input type creates a button that
submits the form when clicked.

Example of CSS grid layout:

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}

This is a CSS style rule that creates a grid layout with three
columns that are each one-third of the available width, and a gap
of 10 pixels between each cell. The display: grid property
specifies that this element should use the grid layout.

Laurence Svekis https://basescripts.com/


25

Example of JavaScript function:

function addNumbers(a, b) {
return a + b;
}

let result = addNumbers(5, 7);


console.log(result);

This is a JavaScript function that takes two parameters (a and b)


and returns their sum. The let keyword is used to declare a
variable called result, which is assigned the result of calling the
addNumbers function with arguments 5 and 7. The console.log()
function is used to print the value of result to the browser
console.

HTML: Creating a basic webpage structure

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is my first webpage using HTML.</p>
</body>
</html>

Laurence Svekis https://basescripts.com/


26

Explanation: This code creates a basic webpage structure with a


title, a heading, and a paragraph.

CSS: Styling a webpage

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is my first webpage using HTML and CSS.</p>
</body>
</html>

Explanation: This code adds CSS styles to the webpage, setting


the background color of the body to light blue and the color of the
heading to white, and centering the text of the heading.

Laurence Svekis https://basescripts.com/


27

JavaScript: Displaying an alert message

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is my first webpage using HTML, CSS, and
JavaScript.</p>
<button onclick="alert('Hello World!')">Click
me</button>
</body>
</html>
Explanation: This code creates a button that, when clicked,
displays an alert message with the text "Hello World!"

HTML: Adding an image to a webpage

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<img src="image.jpg" alt="A beautiful image">
</body>

Laurence Svekis https://basescripts.com/


28

</html>

Explanation: This code adds an image to the webpage with the


source file "image.jpg" and an alternative text description "A
beautiful image".

CSS: Adding a border to an element

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
img {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Welcome to my website!</h1>
<img src="image.jpg" alt="A beautiful image">
</body>
</html>

Explanation: This code adds a 1 pixel black border around the


image on the webpage.

JavaScript: Changing the text of an element

Laurence Svekis https://basescripts.com/


29

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script>
function changeText() {
document.getElementById("text").innerHTML =
"New text!";
}
</script>
</head>
<body>
<h1>Welcome to my website!</h1>
<p id="text">This is the original text.</p>
<button onclick="changeText()">Change text</button>
</body>
</html>

Explanation: This code creates a button that, when clicked,


changes the text of the paragraph element with the ID "text" to
"New text!".

HTML/CSS: Creating a responsive navigation


bar

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>

Laurence Svekis https://basescripts.com/


30

/* CSS for navigation bar */


.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, sans-serif;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #4CAF50;
color: white;
}
/* CSS for responsive navigation bar */
.navbar.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;

Laurence Svekis https://basescripts.com/


31

}
</style>
<script>
// JavaScript for responsive navigation bar
function toggleNavbar() {
let navbar = document.getElementById("navbar");
if (navbar.className === "navbar") {
navbar.className += " responsive";
} else {
navbar.className = "navbar";
}
}
</script>
</head>
<body>
<!-- HTML for navigation bar -->
<div class="navbar" id="navbar">
<a href="#" class="active">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="javascript:void(0);" class="icon"
onclick="toggleNavbar()">
&#9776;
</a>
</div>
<h1>Welcome to my website!</h1>
<p>This is a responsive navigation bar using HTML,
CSS, and JavaScript.</p>
</body>
</html>

Laurence Svekis https://basescripts.com/


32

Explanation: This code creates a responsive navigation bar using


HTML, CSS, and JavaScript. The navigation bar has links to
different pages and a toggle icon for smaller screens. When the
toggle icon is clicked, the navigation bar becomes responsive and
can be expanded or collapsed.

CSS: Creating a card layout

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
/* CSS for card layout */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 300px;
margin: 20px;
display: inline-block;
border-radius: 5px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.card img {
width: 100%;
border-radius: 5px 5px 0 0;
}
.card-container {

Laurence Svekis https://basescripts.com/


33

padding: 2px 16px;


}
</style>
</head>
<body>
<!-- HTML for card layout -->
<div class="card">
<img src="image1.jpg" alt="Image 1">
<div class="card-container">
<h4><b>Image 1</b></h4>
<p>Description of Image 1.</p>
</div>
</div>
<div class="card">
<img src="image2.jpg" alt="Image 2">
<div class="card-container">
<h4><b>Image 2</b></h4>
<p>Description of Image 2.</p>
</div>
</div>
<div class="card">
<img src="image3.jpg" alt="Image 3">
<div class="card-container">
<h4><b>Image 3</b></h4>
<p>Description of Image 3.</p>
</div>
</div>
</body>
</html>

Explanation: This code creates a card layout using CSS. The


layout displays multiple cards with images and descriptions. The

Laurence Svekis https://basescripts.com/


34

cards have a box-shadow effect on hover and a transition effect.


The cards are displayed inline and have a width of 300 pixels. The
images have a border-radius of 5 pixels on the top corners, while
the card container has padding.

JavaScript: Creating a countdown timer

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
/* CSS for countdown timer */
#timer {
font-size: 48px;
font-weight: bold;
}
</style>
<script>
// JavaScript for countdown timer
let countDownDate = new Date("Mar 1, 2023
00:00:00").getTime();
let x = setInterval(function() {
let now = new Date().getTime();
let distance = countDownDate - now;
let days = Math.floor(distance / (1000 * 60 *
60 * 24));
let hours = Math.floor((distance % (1000 * 60 *
60 * 24)) / (1000 * 60 * 60));

Laurence Svekis https://basescripts.com/


35

let minutes = Math.floor((distance % (1000 * 60


* 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 *
60)) / 1000);
document.getElementById("timer").innerHTML =
days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML =
"EXPIRED";
}
}, 1000);
</script>
</head>
<body>
<!-- HTML for countdown timer -->
<div id="timer"></div>
<p>Countdown to March 1, 2023.</p>
</body>
</html>

Explanation: This code creates a countdown timer using


JavaScript. The countdown timer displays the time remaining until
March 1, 2023. The timer is updated every second using the
setInterval() method. The timer displays the remaining days,
hours, minutes, and seconds. Once the countdown timer reaches
zero, the timer displays "EXPIRED".

HTML/CSS/JavaScript: Creating a modal window

<!DOCTYPE html>

Laurence Svekis https://basescripts.com/


36

<html>
<head>
<title>My Website</title>
<style>
/* CSS for modal window */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 600px;
border-radius: 5px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,

Laurence Svekis https://basescripts.com/


37

.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
<script>
// JavaScript for modal window
let modal = document.getElementById("myModal");
let btn = document.getElementById("myBtn");
let span =
document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</head>
<body>
<!-- HTML for modal window -->
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>Modal Header</h2>

Laurence Svekis https://basescripts.com/


38

<p>Modal content goes here.</p>


</div>
</div>
</body>
</html>

Explanation: This code creates a modal window using HTML, CSS,


and JavaScript. The modal window is hidden by default and is
displayed when the user clicks on the "Open Modal" button. The
modal window has a close button that can be used to hide the
modal window. The JavaScript code handles the opening and
closing of the modal window. The modal window has a fixed
position and a transparent black background. The modal content
is centered on the screen and has a maximum width of 600
pixels.

HTML/CSS: Creating a responsive navigation


bar

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
/* CSS for modal window */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;

Laurence Svekis https://basescripts.com/


39

top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 600px;
border-radius: 5px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
<script>
// JavaScript for modal window
let modal = document.getElementById("myModal");
let btn = document.getElementById("myBtn");

Laurence Svekis https://basescripts.com/


40

let span =
document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</head>
<body>
<!-- HTML for modal window -->
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>Modal Header</h2>
<p>Modal content goes here.</p>
</div>
</div>
</body>
</html>

Explanation: This code creates a modal window using HTML, CSS,


and JavaScript. The modal window is hidden by default and is
displayed when the user clicks on the "Open Modal" button. The
modal window has a close button that can be used to hide the

Laurence Svekis https://basescripts.com/


41

modal window. The JavaScript code handles the opening and


closing of the modal window. The modal window has a fixed
position and a transparent black background. The modal content
is centered on the screen and has a maximum width of 600
pixels.

HTML/CSS: Creating a responsive navigation


bar

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
/* CSS for navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;

Laurence Svekis https://basescripts.com/


42

color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>

Laurence Svekis https://basescripts.com/


43

<!-- HTML for navigation bar -->


<div class="topnav" id="myTopnav">
<a href="#" class="active">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
// JavaScript for responsive navigation bar
function myFunction() {
let x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>

Explanation: This code creates a responsive navigation bar using


HTML and CSS. The navigation bar has links to different pages on
the website, and it also includes a "hamburger" menu icon. When
the screen size is less than 600 pixels, the links in the navigation
bar are hidden, and the hamburger icon is displayed. When the
user clicks on the icon, the links are displayed in a dropdown
menu. The JavaScript code handles the opening and closing of the
dropdown menu when the icon is clicked. The navigation bar has
a fixed position at the top of the screen, and it has a dark

Laurence Svekis https://basescripts.com/


44

background color. The active link is highlighted with a different


background color, and the links change color when the user
hovers over them.

HTML/CSS/JavaScript: Creating a slideshow

<!DOCTYPE html>
<html>
<head>
<title>My Slideshow</title>
<style>
/* CSS for slideshow */
.slideshow {
width: 100%;
height: 400px;
position: relative;
}
.slideshow img {
width: 100%;
height: 400px;
object-fit: cover;
}
.slideshow .prev, .slideshow .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
font-weight: bold;
padding: 10px;
background-color: rgba(255, 255, 255, 0.5);

Laurence Svekis https://basescripts.com/


45

color: black;
cursor: pointer;
transition: background-color 0.3s ease;
}
.slideshow .prev:hover, .slideshow .next:hover {
background-color: rgba(0, 0, 0, 0.5);
color: white;
}
.slideshow .prev {
left: 0;
}
.slideshow .next {
right: 0;
}
/* CSS for slideshow indicators */
.slideshow-indicators {
text-align: center;
}
.slideshow-indicators button {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: none;
margin: 0 5px;
background-color: #bbb;
cursor: pointer;
transition: background-color 0.3s ease;
}
.slideshow-indicators button.active {
background-color: #555;
}

Laurence Svekis https://basescripts.com/


46

</style>
</head>
<body>
<!-- HTML for slideshow -->
<div class="slideshow">
<img src="slide1.jpg" alt="Slide 1">
<img src="slide2.jpg" alt="Slide 2">
<img src="slide3.jpg" alt="Slide 3">
<img src="slide4.jpg" alt="Slide 4">
<div class="prev"
onclick="plusSlides(-1)">&#10094;</div>
<div class="next"
onclick="plusSlides(1)">&#10095;</div>
<div class="slideshow-indicators">
<button class="active"
onclick="currentSlide(1)"></button>
<button onclick="currentSlide(2)"></button>
<button onclick="currentSlide(3)"></button>
<button onclick="currentSlide(4)"></button>
</div>
</div>
<script>
// JavaScript for slideshow
let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);

Laurence Svekis https://basescripts.com/


47

function showSlides(n) {
let i;
let slides =
document.getElementsByClassName("slideshow")[0].getElem
entsByTagName("img");
let dots =
document.getElementsByClassName("slideshow-indicators")
[0].getElementsByTagName("button");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace("
active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>

</body>
</html>

Laurence Svekis https://basescripts.com/


48

This example demonstrates how to create a responsive slideshow


using HTML, CSS, and JavaScript. The slideshow consists of
several images that automatically change after a certain period of
time. It also has navigation arrows and indicators that allow the
user to manually switch between images.

HTML/CSS: Creating a pricing table

<!DOCTYPE html>
<html>
<head>
<title>My Pricing Table</title>
<style>
/* CSS for pricing table */
.pricing-table {
width: 100%;
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.pricing-table .column {
width: 100%;
max-width: 300px;
margin: 0 20px;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
text-align: center;
transition: box-shadow 0.3s ease;

Laurence Svekis https://basescripts.com/


49

}
.pricing-table .column:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.pricing-table .header {
background-color: #333;
color: #fff;
font-size: 24px;
font-weight: bold;
padding: 20px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.pricing-table .price {
font-size: 48px;
font-weight: bold;
margin: 20px 0;
}
.pricing-table .description {
font-size: 16px;
color: #888;
margin-bottom: 20px;
}
.pricing-table .features {
list-style: none;
padding: 0;
margin: 20px 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.pricing-table .features li {
font-size: 16px;

Laurence Svekis https://basescripts.com/


50

padding: 10px;
border-bottom: 1px solid #ccc;
transition: background-color 0.3s ease;
}
.pricing-table .features li:last-child {
border-bottom: none;
}
.pricing-table .features li:hover {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<!-- HTML for pricing table -->
<div class="pricing-table">
<div class="column">
<div class="header">Basic</div>
<div class="price">$9.99/month</div>
<div class="description">Lorem ipsum dolor sit
amet, consectetur adipiscing elit.</div>
<ul class="features">
<li>10 GB storage</li>
<li>50 GB bandwidth</li>
<li>5 email accounts</li>
<li>24/7 support</li>
</ul>
</div>
<div class="column">
<div class="header">Pro</div>
<div class="price">$19.99/month</div>
<div class="description">Lorem ipsum dolor sit
amet consectetur adipiscing elit.</div>

Laurence Svekis https://basescripts.com/


51

<ul class="features">
<li>50 GB storage</li>
<li>200 GB bandwidth</li>
<li>20 email accounts</li>
<li>24/7 support</li>
</ul>
</div>
<div class="column">
<div class="header">Premium</div>
<div class="price">$49.99/month</div>
<div class="description">Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</div>
<ul class="features">
<li>100 GB storage</li>
<li>500 GB bandwidth</li>
<li>50 email accounts</li>
<li>24/7 support</li>
</ul>
</div>
</div>

</body>
</html>

This example demonstrates how to create a simple pricing table


using HTML and CSS. The pricing table consists of three columns,
each with a header, price, description, and list of features. The
CSS is used to style the pricing table and make it responsive.

Laurence Svekis https://basescripts.com/


52

HTML/CSS/JavaScript: Creating a simple


game of "Simon"

<!DOCTYPE html>
<html>
<head>
<title>Simon Game</title>
<style>
/* CSS for Simon game */
#simon-board {
width: 100%;
max-width: 500px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.simon-button {
width: 100%;
max-width: 150px;
height: 150px;
margin: 10px;
background-color: #eee;
border: 5px solid #333;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
cursor: pointer;
transition: transform 0.3s ease;
}
.simon-button:hover {

Laurence Svekis https://basescripts.com/


53

transform: scale(1.1);
}
.simon-button.green {
background-color: #6ab04c;
border-color: #4e8b39;
}
.simon-button.red {
background-color: #e74c3c;
border-color: #c0392b;
}
.simon-button.yellow {
background-color: #f1c40f;
border-color: #d4ac0d;
}
.simon-button.blue {
background-color: #3498db;
border-color: #2980b9;
}
.simon-button.disabled {
opacity: 0.5;
cursor: default;
}
#simon-message {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-top: 20px;
}
#simon-score {
text-align: center;
font-size: 16px;
margin-top: 10px;

Laurence Svekis https://basescripts.com/


54

}
</style>
</head>
<body>
<!-- HTML for Simon game -->
<div id="simon-board">
<div class="simon-button green"></div>
<div class="simon-button red"></div>
<div class="simon-button yellow"></div>
<div class="simon-button blue"></div>
</div>
<div id="simon-message"></div>
<div id="simon-score">Score: <span
id="score">0</span></div>

scss
Copy code
<script>
// JavaScript for Simon game
const buttons =
document.querySelectorAll(".simon-button");
const message =
document.getElementById("simon-message");
const score = document.getElementById("score");

let pattern = [];


let playerPattern = [];
let level = 1;

// Generates random pattern


function generatePattern() {
pattern = [];

Laurence Svekis https://basescripts.com/


55

for (let i = 0; i < level; i++) {


pattern.push(Math.floor(Math.random() * 4));
}
}

// Highlights buttons in pattern


function playPattern() {
message.textContent = "Watch carefully!";
let i = 0;
const intervalId = setInterval(() => {
highlightButton(buttons[pattern[i]]);
i++;
if (i >= pattern.length) {
clearInterval(intervalId);
message.textContent = "Your turn!";
}
}, 1000);
}

// Highlights button
function highlightButton(button) {
button.classList.add("active");
setTimeout(() => {
button.classList.remove("active");
}, 500);
}

// Checks if player's pattern matches computer's


pattern
function checkPattern() {
for (let i = 0; i < playerPattern.length; i++) {
if (playerPattern[i] !== pattern[i]) {

Laurence Svekis https://basescripts.com/


56

return false;
}
}
return true;
}

// Resets game
function resetGame() {
pattern = [];
playerPattern = [];
level = 1;
score.textContent = "0";
}

// Main game function


function playGame() {
generatePattern();
playPattern();

buttons.forEach((button) => {
button.addEventListener("click", () => {
if (message.textContent === "Your turn!") {

playerPattern.push(Array.from(buttons).indexOf(button))
;
highlightButton(button);
if (playerPattern.length === pattern.length)
{
if (checkPattern()) {
level++;
score.textContent = level - 1;
playerPattern = [];

Laurence Svekis https://basescripts.com/


57

playGame();
} else {
message.textContent = "Game over! Click
any button to start again.";
buttons.forEach((button) => {
button.classList.add("disabled");
});
setTimeout(() => {
resetGame();
buttons.forEach((button) => {
button.classList.remove("disabled");
});
playGame();
}, 3000);
}
}
}
});
});
}

// Start game
playGame();
</script>
</body>
</html>

This example demonstrates how to create a simple game of


"Simon" using HTML, CSS, and JavaScript. The game consists of
four colored buttons and a message and score display. The
JavaScript is used to generate a random pattern of button
presses, play back the pattern, and check the player's pattern

Laurence Svekis https://basescripts.com/


58

against the computer's pattern. The game continues until the


player makes an error, at which point the game is reset and the
player can try again.

Laurence Svekis https://basescripts.com/

You might also like