curriculum/challenges/english/blocks/workshop-blog-page/67d1edfde28a4133ba64ad26.md
To improve user experience, you will want to enhance the phone number so that users tap on it and initiate a call.
Here is how you can make phone numbers clickable:
<a href="tel:2345678912">234-567-8912</a>
Wrap the text 555-555-5555 in an anchor element and use tel: to make it a clickable phone number.
You should wrap the text 555-555-5555 in an a element.
const firstPElement = document.querySelector('footer #contact address p:nth-of-type(1)');
const link = firstPElement.querySelector('a');
assert.exists(link);
assert.strictEqual(link.textContent.trim(), "555-555-5555");
Your a element should have an href attribute.
const firstPElement = document.querySelector('footer #contact address p:nth-of-type(1)');
const link = firstPElement.querySelector('a');
assert.exists(link.getAttribute('href'));
The href attribute for your new a element should be set to tel:5555555555.
const firstPElement = document.querySelector('footer #contact address p:nth-of-type(1)');
const link = firstPElement.querySelector('a');
assert.strictEqual(link.getAttribute('href'), "tel:5555555555");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mr. Whiskers' Blog</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>Welcome to Mr. Whiskers' Blog Page!</h1>
<figure>
<figcaption>Mr. Whiskers in the Garden</figcaption>
</figure>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About</h2>
<p>
Hi there! I'm Jane Doe, a passionate writer who finds endless inspiration in the antics of my beloved cat, Mr. Whiskers.
</p>
<p>
His playful nature and boundless energy keeps me on my toes. I love him so much.
</p>
</section>
<section id="posts">
<h2>Posts</h2>
<article>
<h3>Mr. Whiskers' First Day Home</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
</p>
</article>
<article>
<h3>Mr. Whiskers' First Bath</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
</p>
</article>
<article>
<h3>Mr. Whiskers' First Birthday Party</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
</p>
</article>
</section>
</main>
<footer>
<section id="contact">
<h2>Contact</h2>
<address>
--fcc-editable-region--
<p>Phone: 555-555-5555</p>
--fcc-editable-region--
<p>Email: [email protected]</p>
</address>
</section>
</footer>
</body>
</html>