Q:

What JS codes should I add to do the following?

kinda new to this JS stuff so I want someone to please help me to do the following

I want to add appropriate JavaScript event handlers so that when the user clicks on any of the A’s in the “fontControl”, the font size for all of the article adjusts to 0.8em, 1.0em and 1.3em. 
In addition the color of the selected A should be set to blue and the color for the other two A’s grey.
when the mouse cursor hovers over any A, the background color for that A should turn white.

I would appreciate it if anyone would help me out. 
Thank you, cheers.

<script>
function init()
{

    document.getElementById('small').onclick = function()
    {
        document.getElementById('content').style.fontSize = "0.8em";

    }
    document.getElementById('medium').onclick = function()
    {
        document.getElementById('content').style.fontSize = "1.0em"
        
    }
    document.getElementById('large').onclick = function()
    {
        document.getElementById('content').style.fontSize = "1.3em"
        
    }
    
}

window.onload=init;
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Articles</title>

<style>
* {
    margin: 0;
 box-sizing: border-box;
}
body {
    font: 1em Verdana, sans-serif;
    background-color: antiquewhite;
}
h2, h4 {
    text-align: center;
}

#header {
    border-bottom: 2px solid black;
    font-size: 2.5em;
    padding: 0.5em 0;
    height: 100px;
}
#footer {
    border-top: 2px solid black;
    padding: 1em 0;
}
#header, #footer {
    text-align: center;
    background-color: #CCC;
}
#leftnav, #rightnav {
    position: absolute;
    top: 100px;
    width: 20%;
    padding-top: 3em;
}

#rightnav{ 
    left: 80%;
}
#wrapper {
    background-color: dodgerblue;    overflow: hidden;
}
#content div {
    border: 1px solid black;
    border-radius: 10px;
    padding: 0.5em;
    margin-bottom: 10px;
    background-color: #ccc;
}
#content div:last-child {
    margin-bottom: 0px;
}
    
#content div:hover {
    border-color: dodgerblue;
    background-color: white;
}
    
#content {
    padding: 0.5em;
    margin: 0 20%;
 border-left: 2px solid black;
    border-right: 2px solid black;
    background-color: white;
}

/* ---------------------------------------------------------*/
span {
    color: #777;
    padding: 0px 5px;
    font-weight: bold;
}

#small {
    font-size: 0.8em;
}
#medium {
    font-size: 1em;
    color: dodgerblue;
}
#large {
    font-size: 1.5em;
}

#fontControl {
    float: right;
    background-color: lightblue;
}

    
    
</style>
<body>
<div id="header">
    The Header
</div>

<div id="wrapper"> <!-- Can be used to apply bg colour -->

<div id="leftnav">
    <h4> Left</h4>
</div>
<div id="rightnav">
    <h4> Right</h4>
</div>
    
<div id="fontControl" >
    <span id="small">A</span>
    <span id="medium">A</span>
    <span id="large">A</span>
</div>    
    
<div id="content">
    <div>
        <h2> Article 1 </h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Suspendisse ultricies condimentum velit vel scelerisque.
        </p>
    </div>
    <div>
        <h2> Article 2 </h2>
        <p>
            Mauris sagittis aliquam odio vitae pulvinar.
            Suspendisse id dolor nibh, sed consectetur sem.
            Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
            Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
            Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
        </p>
    </div>
    <div>
        <h2> Article 3 </h2>
        <p>
            Proin ultrices lectus vel orci lacinia a iaculis nibh hendrerit.
            Mauris sagittis aliquam odio vitae pulvinar.
            Suspendisse id dolor nibh, sed consectetur sem.
            Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
            Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
            Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
        </p>
    </div>
</div> <!-- end of content -->
    
</div> <!-- end of wrapper -->
    
<div id="footer">
<h3>
    The End
</h3>
</div>

</body>

A:

What I would do, is use event delegation to attach a single event handler to #fontControl to handle all font size changes. This makes it easy to add new sizes and means if you need to change anything you have just one handler to edit instead of several.
Also, instead of directly altering the color of the indicators, I would add and remove a 'selected' class to them.

let elContent = document.getElementById('content');
let elFontControl = document.getElementById('fontControl');

elFontControl.addEventListener('click', function (event) {
  // target is the element that was clicked on, either one of the spans
  // inside of #fontControl, or #fontControl itself
  let target = event.target;

  // we want to ignore clicks on #fontControl, so only proceed if
  // a span was clicked on
  if (target.tagName === 'SPAN') {
    // remove the selected class from the previously selected item
    elFontControl.querySelector('.selected').classList.remove('selected');

    // add the selected class to the item that was clicked
    target.classList.add('selected');
    // set the fontSize to the computed fontSize of the clicked item
    elContent.style.fontSize = window.getComputedStyle(target).fontSize;
  }
});
#small {
    font-size: 0.8em;
}
#medium {
    font-size: 1em;
}
#large {
    font-size: 1.5em;
}
#extra-large {
    font-size: 2em;
}
#extra-small {
    font-size: .5em;
}
#fontControl {
    color: grey;
    background-color: lightblue;
}

#fontControl .selected {
    color: dodgerblue;
}
<div id="fontControl" >
    <span id="extra-small">A</span>
    <span id="small">A</span>
    <span id="medium" class="selected">A</span>
    <span id="large">A</span>
    <span id="extra-large">A</span>
</div>    
    
<div id="content">
    <div>
        <h2> Article 1 </h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Suspendisse ultricies condimentum velit vel scelerisque.
        </p>
    </div>
    <div>
        <h2> Article 2 </h2>
        <p>
            Mauris sagittis aliquam odio vitae pulvinar.
            Suspendisse id dolor nibh, sed consectetur sem.
            Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
            Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
            Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
        </p>
    </div>
    <div>
        <h2> Article 3 </h2>
        <p>
            Proin ultrices lectus vel orci lacinia a iaculis nibh hendrerit.
            Mauris sagittis aliquam odio vitae pulvinar.
            Suspendisse id dolor nibh, sed consectetur sem.
            Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
            Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
            Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
        </p>
    </div>
</div> <!-- end of content -->

This code assumes that the size indicators that you click on have the actual fontSize that you will change to. getComputedStyle gets the effective size of the font. You can't just use .style.fontSize since the size was set via class, not directly on the element with the style attribute.
If the size of the indicator was not exactly the same, you could instead store the size info in a data- attribute and then access it via dataset

let elContent = document.getElementById('content');
let elFontControl = document.getElementById('fontControl');

elFontControl.addEventListener('click', function (event) {
  // target is the element that was clicked on, either one of the spans
  // inside of #fontControl, or #fontControl itself
  let target = event.target;

  // we want to ignore clicks on #fontControl, so only proceed if
  // a span was clicked on
  if (target.tagName === 'SPAN') {
    // remove the selected class from the previously selected item
    elFontControl.querySelector('.selected').classList.remove('selected');

    // add the selected class to the item that was clicked
    target.classList.add('selected');
    // set the fontSize to the computed fontSize of the cliked item
    elContent.style.fontSize = target.dataset.fontSize;
  }
});
#small {
    font-size: 0.8em;
}
#medium {
    font-size: 1em;
}
#large {
    font-size: 1.5em;
}
#extra-large {
    font-size: 2em;
}
#extra-small {
    font-size: .7em;
}
#fontControl {
    color: grey;
    background-color: lightblue;
}

#fontControl .selected {
    color: dodgerblue;
}
<div id="fontControl" >
    <span id="extra-small" data-font-size=".25em">A</span>
    <span id="small" data-font-size=".8em">A</span>
    <span id="medium" class="selected" data-font-size="1em">A</span>
    <span id="large" data-font-size="1.5em">A</span>
    <span id="extra-large" data-font-size="5em">A</span>
</div>    
    
<div id="content">
    <div>
        <h2> Article 1 </h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Suspendisse ultricies condimentum velit vel scelerisque.
        </p>
    </div>
    <div>
        <h2> Article 2 </h2>
        <p>
            Mauris sagittis aliquam odio vitae pulvinar.
            Suspendisse id dolor nibh, sed consectetur sem.
            Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
            Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
            Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
        </p>
    </div>
    <div>
        <h2> Article 3 </h2>
        <p>
            Proin ultrices lectus vel orci lacinia a iaculis nibh hendrerit.
            Mauris sagittis aliquam odio vitae pulvinar.
            Suspendisse id dolor nibh, sed consectetur sem.
            Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis.
            Morbi accumsan tempus neque, sed varius lectus molestie imperdiet.
            Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac.
        </p>
    </div>
</div> <!-- end of content -->

