<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>Profile Card</title>
  <link rel="stylesheet" href="styles.css">
  <div class="profile-card" id="profileCard">
    <img src="profile-pic.jpg" alt="Profile Picture">
    <h2>John Doe</h2>
    <p>Web Developer</p>
  <button onclick="changeBackgroundColor()">Change Background Color</button>
  <script src="script.js"></script>


body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  background-color: #f3f3f3;

.profile-card {
  text-align: center;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

.profile-card img {
  width: 150px;
  border-radius: 50%;
  margin-bottom: 10px;

button {
  padding: 10px 20px;
  margin-top: 20px;
  font-size: 16px;
  cursor: pointer;


function changeBackgroundColor() {
  var profileCard = document.getElementById('profileCard');
  var randomColor = getRandomColor(); = randomColor;

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  return color;

Try to answer about this code:

What does the JavaScript function getRandomColor() in the code snippet do?

It retrieves a random image.
It generates a random background color for the profile card.

It changes the font color of the profile card.
It selects a random profile picture from the web.

Which HTML tag is used to link an external stylesheet file in the HTML code?



What does the CSS property border-radius: 50%; in the code snippet do?

It sets the width and height of the profile picture.
It creates a circular border around the profile picture.

It applies a shadow effect around the profile picture.
It rounds the corners of the profile card.

In the JavaScript function changeBackgroundColor(), what method is used to change the background color of the profile card?