Changing text color when pushing button - using HTML and Javascript

I barely started learning javascript today, and I'm trying to change the text "Date" color from white to pink with the Surprise button, but nothing seems to work. All the other buttons work fine. (I can set the text color to white w/CSS, dunno if that got in the way but still nothing happened with the pink).

document.getElementById("button1").addEventListener("click",
  function() {
    document.getElementById("box").style.height = "400px";
    document.getElementById("box").style.width = "400px";
  }
);

document.getElementById("button2").addEventListener("click",
  function() {
    document.getElementById("box").style.backgroundColor = "blue";
  }
);


document.getElementById("button3").addEventListener("click",
  function() {
    document.getElementById("box").style.opacity = ".5";
  }
);


document.getElementById("button4").addEventListener("click",
  function() {
    document.getElementById("box").style.height = "150px";
    document.getElementById("box").style.width = "150px";
    document.getElementById("box").style.backgroundColor = "orange";
    document.getElementById("box").style.opacity = "100";
  }
);

document.getElementById("button5").addEventListener("click",
  function() {
    document.getElementById("Date").style.fontcolor = "pink";
  }
);

<!DOCTYPE html>
<html>

<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">

<head>
  <title>Jiggle Into JavaScript</title>
  <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
</head>

<body>

  <p>Press the buttons to change the box!</p>

  <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

  <button id="button1">Grow</button>
  <button id="button2">Blue</button>
  <button id="button3">Fade</button>
  <button id="button4">Reset</button>
  <button id="button5">Surprise</button>

  <br>

  <p class="Date">Date</p>

</body>

</html>

Solution

Property to change font color is style.color and not style.fontcolor. And you are getting the date by using document.getElementById('Date') while in the p tag the class is Date and not the Id

document.getElementById("button1").addEventListener("click",
  function() {
    document.getElementById("box").style.height = "400px";
    document.getElementById("box").style.width = "400px";
  }
);

document.getElementById("button2").addEventListener("click",
  function() {
    document.getElementById("box").style.backgroundColor = "blue";
  }
);


document.getElementById("button3").addEventListener("click",
  function() {
    document.getElementById("box").style.opacity = ".5";
  }
);


document.getElementById("button4").addEventListener("click",
  function() {
    document.getElementById("box").style.height = "150px";
    document.getElementById("box").style.width = "150px";
    document.getElementById("box").style.backgroundColor = "orange";
    document.getElementById("box").style.opacity = "100";
  }
);

document.getElementById("button5").addEventListener("click",
  function() {
    document.getElementById("Date").style.color = "pink";
  }
);

<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">

<head>
  <title>Jiggle Into JavaScript</title>
  <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
</head>

<body>

  <p>Press the buttons to change the box!</p>

  <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

  <button id="button1">Grow</button>
  <button id="button2">Blue</button>
  <button id="button3">Fade</button>
  <button id="button4">Reset</button>
  <button id="button5">Surprise</button>

  <br>

  <p id="Date">Date</p>

</body>

</html>