HTML Assignment 2

Assignment 2
8. Design a table with the following details. The Table should have
alternating row colors, and hover effects. Additionally, for smaller
screens (using a media query), it switches to a stacked layout, making
it more responsive for mobile devices.
Code:
<!doctype html>
<html>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width”>
<title>Responsive Tables</title>
<style>
/* styles for all devices */
table { border-collapse: collapse; }
/* styles for small devices */
@media (max-width:720px){
table { border: none; }
/* display the whole table as a block */
table, thead, tbody, th, td, tr { display: block; }
/* Hide the headers */
thead tr { position: absolute; top: -9999px; left: -9999px; }
tr { border: 1px solid #ccc; margin-bottom: 1em; }
tr:nth-of-type(odd) { background: #eee; }
td {
/* Behave like a “row” */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 20%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 1px;
left: 2px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/* Label the data */
td:nth-of-type(1):before{ content: "Name"; }
td:nth-of-type(2):before{ content: "URL"; }
td:nth-of-type(3):before{ content: "RWD" ;}
td:nth-of-type(4):before{ content: "Win"; }
td:nth-of-type(5):before{ content: "Mac"; }
}
/* styles for larger devices */
@media all and (min-width:721px) {
tr:nth-child(2n+1) { background-color: #80C5F5; }
table thead tr:nth-child(n) { background-color: #3d447e; color: #dfdfdf; }
}
</style>
</head>
<body>
<article>
<h1>Responsive Tables</h1>
<table style=“width:100%;” border=“1”>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Joining Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bikash</td>
<td>Developer</td>
<td>70,000</td>
<td>2022-01-15</td>
</tr>
<tr>
<td>2</td>
<td>Abhay</td>
<td>Designer</td>
<td>60,000</td>
<td>2023-01-20</td>
</tr>
<tr>
<td>3</td>
<td>Bipul</td>
<td>Designer</td>
<td>70,000</td>
<td>2022-06-25</td>
</tr>
<tr>
<td>4</td>
<td>Sumit</td>
<td>Tester</td>
<td>50,000</td>
<td>2022-02-21</td>
</tr>
</tbody>
</table>
</article>
</body>
</html>
Output:
9. Create an HTML file having a design of ludo. Create using the
different properties of border.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ludo</title>
<style>
*
{
margin:0;
padding: 0;
}
.outer
{
height: 750px;
width:750px;
margin:0px auto;
border:1px solid red;
}
.box_row
{
height: 300px;
width:750px;
//background: #fc8596;
}
.box
{
height: 200px;
width:200px;
float: left;
//background: #ccc;
}
.v_lad
{
height: 300px;
width:150px;
//background: #ed8541;
float: left;
}
.circle
{
height: 50px;
width:50px;
//background: #f07485;
margin:25px;
border-radius: 50%;
box-sizing: border-box;
float: left;
}
.border_red
{
border:5px solid red;
}
.border_green
{
border:5px solid green;
}
.border_blue
{
border:5px solid blue;
}
.border_yellow
{
border:5px solid yellow;
}
.v_lad_row
{
height: 50px;
width:150px;
//background: #dd7485;
}
.v_lad_cell
{
height: 50px;
width:50px;
border:1px solid #000;
float: left;
text-align: center;
}
.red
{
background: red;
}
.green
{
background: green;
}
.blue
{
background: blue;
}
.yellow
{
background: yellow;
}
.middle_row
{
height: 150px;
width:750px;
}
.h_lad
{
height: 150px;
width:300px;
//background: #ff4152;
float: left;
}
.h_lad_row
{
height: 50px;
width: 300px;
//background: #ffc857;
float: left;
}
.h_lad_cell
{
height: 50px;
width:50px;
border:1px solid #000;
float: left;
text-align: center;
}
.ludo_home
{
height: 0;
width: 0;
border-left:75px solid red;
border-right:75px solid yellow;
border-top:75px solid green;
border-bottom:75px solid blue;
float: left;
}
.star
{
font-size: 32px;
text-align: center;
}
</style>
</head>
<body>
<div class="outer">
<div class="box_row">
<div class="box" style="border:50px solid red;">
<div class="circle border_red"></div>
</div>
<div class="v_lad">
<div class="v_lad_row">
<div class="v_lad_cell"></div>
</div>
<div class="v_lad_cell green"></div>
<div class="v_lad_cell green"><span
class="star">★</span></div>
</div>
<div class="v_lad_cell green"><span
</div>
</div>
</div>
</div>
</div>
<div class="box" style="border:50px solid green;">
<div class="circle border_green"></div>
</div>
</div>
<div class="middle_row">
<div class="h_lad">
<div class="h_lad_row">
<div class="h_lad_cell"></div>
<div class="h_lad_cell red"><span
</div>
<div class="h_lad_cell red"></div>
</div>
<div class="h_lad_cell red"><span
</div>
</div>
<div class="ludo_home"></div>
<div class="h_lad">
<div class="h_lad_cell yellow"><span
</div>
<div class="h_lad_cell yellow"></div>
<div class="h_lad_cell "></div>
</div>
<div class="h_lad_cell yellow"><span
</div>
</div>
</div>
<div class="box_row">
<div class="box" style="border:50px solid blue;">
<div class="circle border_blue"></div>
</div>
<div class="v_lad">
<div class="v_lad_cell blue"></div>
</div>
<div class="v_lad_cell "></div>
</div>
</div>
<div class="v_lad_cell blue"><span
</div>
<div class="v_lad_cell blue "><span
</div>
</div>
</div>
<div class="box" style="border:50px solid yellow;">
<div class="circle border_yellow"></div>
</div>
</div>
</div>
</body>
</html>
Output:
10. Create an HTML file of an animation created using CSS.

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Animation Example</title>
<style>
@keyframes scale {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.animated-rectangle {
width: 350px;
height: 300px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: scale 3s ease-in-out infinite;
}
</style>
</head>
<body>
<div class="animated-rectangle"></div>
</body>
</html>
Output:
11. Create an HTML file diplaying all the basic elements of JavaScript
such as console-related fuction, print statement, conditions, etc
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Basics</title>
</head>
<body>
<h1>JavaScript Basics</h1>


<script>
// Console-related functions
console.log("Hello, this is a console log.");
console.warn("This is a warning message.");
console.error("This is an error message.");
// Variables and print statement

var greeting = "Hello, JavaScript!";
document.write("<p>" + greeting + "</p>");
// Conditions
var age = 25;
if (age >= 18) {

document.write("<p>You are an adult.</p>");
} else {
document.write("<p>You are a minor.</p>");
}
// Loop
document.write("<p>Counting from 1 to 5:</p>");
for (var i = 1; i <= 5; i++) {
document.write("<p>" + i + "</p>");
}
</script>
</body>
</html>
Output:
12. Create a Game of ROCK, PAPER, SCISSOR using loops and

multiple if-else statements. Ask the user for input and generate a
random output from computer and compare the results (take 1 as
ROCK 2 as PAPER , 3 as SCISSOR and generate 1 to 3 random no.
and compare) to display the winner in each round.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rock, Paper, Scissors Game</title>
<style>
body {
text-align: center;
font-family: 'Arial', sans-serif;
}
</style>
</head>
<body>
<h1>Rock, Paper, Scissors Game</h1>
<script>
// Function to convert user input to a meaningful string
function getChoiceString(choice) {
switch (choice) {
case 1:
return "Rock";
case 2:
return "Paper";
case 3:
return "Scissors";
default:
return "Invalid Choice";
}
}
// Function to determine the winner for each round

function determineWinner(userChoice, computerChoice) {
if (userChoice === computerChoice) {
return "It's a tie!";
} else if (
(userChoice === 1 && computerChoice === 3) ||
(userChoice === 2 && computerChoice === 1) ||
(userChoice === 3 && computerChoice === 2)
) {
return "You win!";
} else {
return "Computer wins!";
}
}
// Main game logic

while (true) {
// Get user input
var userInput = prompt("Enter your choice:\n1 for Rock, 2 for Paper, 3
for Scissors, or 'exit' to end the game");
// Check if the user wants to exit the game

if (userInput.toLowerCase() === 'exit') {
alert("Game Over. Thanks for playing!");
break;
}
// Parse user input to an integer

var userChoice = parseInt(userInput);
// Validate user input
if (userChoice < 1 || userChoice > 3 || isNaN(userChoice)) {
alert("Invalid input. Please enter a valid choice.");
continue;
}
// Generate random computer choice (1 to 3)

var computerChoice = Math.floor(Math.random() * 3) + 1;
// Display choices
var userChoiceString = getChoiceString(userChoice);
var computerChoiceString = getChoiceString(computerChoice);
alert("Your choice: " + userChoiceString + "\nComputer's choice: " +
computerChoiceString);
// Determine and display the winner

var result = determineWinner(userChoice, computerChoice);
alert(result);
}
</script>
</body>
</html>
Output:

HTML Assignment 2

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Assignment 2

Uploaded by

Copyright:

Available Formats

Assignment 2

10. Create an HTML file of an animation created using CSS.

// Variables and print statement

if (age >= 18) {

12. Create a Game of ROCK, PAPER, SCISSOR using loops and

<h1>Rock, Paper, Scissors Game</h1>

// Function to determine the winner for each round

// Main game logic

// Check if the user wants to exit the game

// Parse user input to an integer

// Generate random computer choice (1 to 3)

// Determine and display the winner

You might also like