Scribd
Upload
8 views

HTML Assignment 2

The document provides code for creating a responsive table with the following features: 1) It uses CSS styles and media queries to make the table responsive for different screen sizes, switching to a stacked layout on smaller screens. 2) It adds alternating row colors and hover effects to the table. 3) For mobile screens, it displays each row vertically and uses pseudo-elements to label each column. This makes the table more readable on narrow screens.

Uploaded by

akanksha982003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

HTML Assignment 2

The document provides code for creating a responsive table with the following features: 1) It uses CSS styles and media queries to make the table responsive for different screen sizes, switching to a stacked layout on smaller screens. 2) It adds alternating row colors and hover effects to the table. 3) For mobile screens, it displays each row vertically and uses pseudo-elements to label each column. This makes the table more readable on narrow screens.

Uploaded by

akanksha982003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

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;
box-sizing: border-box;
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;
box-sizing: border-box;
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 class="circle border_red"></div>
<div class="circle border_red"></div>
<div class="circle border_red"></div>
</div>
<div class="v_lad">
<div class="v_lad_row">
<div class="v_lad_cell"></div>
<div class="v_lad_cell"></div>
<div class="v_lad_cell"></div>
</div>
<div class="v_lad_row">
<div class="v_lad_cell"></div>
<div class="v_lad_cell green"></div>
<div class="v_lad_cell green"><span
class="star">&#9733;</span></div>
</div>
<div class="v_lad_row">
<div class="v_lad_cell green"><span
class="star">&#9733;</span></div>
<div class="v_lad_cell green"></div>
<div class="v_lad_cell"></div>
</div>
<div class="v_lad_row">
<div class="v_lad_cell"></div>
<div class="v_lad_cell green"></div>
<div class="v_lad_cell"></div>
</div>
<div class="v_lad_row">
<div class="v_lad_cell"></div>
<div class="v_lad_cell green"></div>
<div class="v_lad_cell"></div>
</div>
<div class="v_lad_row">
<div class="v_lad_cell"></div>
<div class="v_lad_cell green"></div>
<div class="v_lad_cell"></div>
</div>
</div>
<div class="box" style="border:50px solid green;">
<div class="circle border_green"></div>
<div class="circle border_green"></div>
<div class="circle border_green"></div>
<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
class="star">&#9733;</span></div>
<div class="h_lad_cell"></div>
<div class="h_lad_cell"></div>
<div class="h_lad_cell"></div>
<div class="h_lad_cell"></div>
</div>
<div class="h_lad_row">
<div class="h_lad_cell"></div>
<div class="h_lad_cell red"></div>
<div class="h_lad_cell red"></div>
<div class="h_lad_cell red"></div>
<div class="h_lad_cell red"></div>
<div class="h_lad_cell red"></div>
</div>
<div class="h_lad_row">
<div class="h_lad_cell"></div>
<div class="h_lad_cell"></div>
<div class="h_lad_cell red"><span
class="star">&#9733;</span></div>
<div class="h_lad_cell"></div>
<div class="h_lad_cell"></div>
<div class="h_lad_cell"></div>
</div>
</div>
<div class="ludo_home"></div>
<div class="h_lad">
<div class="h_lad_row">
<div class="h_lad_cell"></div>
<div class="h_lad_cell"></div>
<div class="h_lad_cell"></div>
<div class="h_lad_cell yellow"><span
class="star">&#9733;</span></div>
<div class="h_lad_cell"></div>
<div class="h_lad_cell"></div>
</div>
<div class="h_lad_row">
<div class="h_lad_cell yellow"></div>
<div class="h_lad_cell yellow"></div>
<div class="h_lad_cell yellow"></div>
<div class="h_lad_cell yellow"></div>
<div class="h_lad_cell yellow"></div>
<div class="h_lad_cell "></div>
</div>
<div class="h_lad_row">
<div class="h_lad_cell"></div>
<div class="h_lad_cell"></div>
<div class="h_lad_cell"></div>
<div class="h_lad_cell"></div>
<div class="h_lad_cell yellow"><span
class="star">&#9733;</span></div>
<div class="h_lad_cell"></div>
</div>
</div>

</div>
<div class="box_row">
<div class="box" style="border:50px solid blue;">
<div class="circle border_blue"></div>
<div class="circle border_blue"></div>
<div class="circle border_blue"></div>
<div class="circle border_blue"></div>
</div>
<div class="v_lad">
<div class="v_lad_row">
<div class="v_lad_cell"></div>
<div class="v_lad_cell blue"></div>
<div class="v_lad_cell"></div>
</div>
<div class="v_lad_row">
<div class="v_lad_cell"></div>
<div class="v_lad_cell blue"></div>
<div class="v_lad_cell "></div>
</div>
<div class="v_lad_row">
<div class="v_lad_cell"></div>
<div class="v_lad_cell blue"></div>
<div class="v_lad_cell"></div>
</div>
<div class="v_lad_row">
<div class="v_lad_cell"></div>
<div class="v_lad_cell blue"></div>
<div class="v_lad_cell blue"><span
class="star">&#9733;</span></div>
</div>
<div class="v_lad_row">
<div class="v_lad_cell blue "><span
class="star">&#9733;</span></div>
<div class="v_lad_cell blue"></div>
<div class="v_lad_cell"></div>
</div>
<div class="v_lad_row">
<div class="v_lad_cell"></div>
<div class="v_lad_cell"></div>
<div class="v_lad_cell"></div>
</div>
</div>
<div class="box" style="border:50px solid yellow;">
<div class="circle border_yellow"></div>
<div class="circle border_yellow"></div>
<div class="circle border_yellow"></div>
<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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Basics</title>
</head>
<body>

<h1>JavaScript Basics</h1>

<!-- Script Section -->


<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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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:

You might also like