Currently, I am utilizing CodePen to assess my skills in creating a website. Specifically, I am focusing on the HTML component. My goal is to change the font color to blue for the phrase "Today is a beautiful sunny day!"
Here is the snippet of code that I have developed so far:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: red; }
#redText {color: red }
</style>
<title>your site</title>
</head>
<body>
<h1> Today's Weather Report</h1>
<div class="redText">
<p id="blueText"> Today is a beautiful sunny day!</p>
<button type="button">Push</button>
<script>
function changeColor(newColor){var elem = document.getElementById('blueText');
elem.style.color = newColor;}
<button onClick="changeColor(blue);">PUSH</button>
</script>
</body>
</html>
When looking at the current script I've written, it displays as follows:
Today's Weather Report (The font color should be red for this line and indeed it is.)
Today is a beautiful sunny day! (This sentence is expected to turn blue upon clicking the PUSH button, however, it remains black.)
At the bottom, you'll find a button labeled PUSH