Letters from Nelson Landing Page

Created and developed by Alex Morton

This is the landing page of an email newsletter campaign I conceptualized and launched to give parents and kids fun and unique ideas for activities to do at home during the March to May 2020 period of self-isolation and confinement due to COVID-19.

About

During this period of self-isolation, families with small children are facing unprecedented circumstances in which parents must now fill the roles of teachers and educators. With many years of experience with children, I've always enjoyed finding new and off-the-beaten-path experiences to share with my little charges - such as San Francisco nannying excursions to the Seward Street slides and Alcatraz Island.

Letters from Nelson is a weekly newsletter that includes ideas for fun activities and experiences for children all while staying home.

Here are some examples of past ideas:

• Having an indoor picnic
• Writing and sending a letter to a pen-pal
• Visiting a national park (virtually)
• Creating and going on a treasure hunt
• Creating a flower collage or sketch
• Visiting an exhibit at the Museum of Modern Art in Paris (virtually)
• Writing a poem whose lines begin with the letters in your name
• Writing and illustrating your own fairytale booklet
• Building a living room fort and having a movie night inside
• Visiting the Monterey Bay Aquarium (virutally) via live cams

How it works

From the landing page, the random idea generator in the main section of the page was created using vanilla JavaScript from an array of listed idea strings. The functionality of clicking the 'New idea' button deploys a function that randomly grabs an idea from the ideas array.

displayIdea: function(arr) {
    var index = Math.floor(Math.random() * arr.length);
    document.querySelector(DOMstrings.container).textContent = arr[index]
}

From an email sign-up perspective, users will enter their email address, click 'Subscribe,' and be redirected to a Mailchimp page to complete the signup process.

Once completed, they'll be set to receive the weekly Letters from Nelson newsletter.

Features

• Use of a module pattern within app.js file to control click events and displaying new idea from an array

    var setUpEventListeners = function() {
        document.querySelector(DOM.newIdeaBtn).addEventListener('click', ctrlDisplayNewIdea);
        document.querySelector('.button').addEventListener('click', subscribeClearInput);
    };
  
    var ctrlDisplayNewIdea = function() {
        // 3. Get ideas from dataCtrl
        var ideas = dataCtrl.getIdeas();
  
        // 4. Display one random idea from ideas array
        UICtrl.displayIdea(ideas);
  
        // 5. Arrow interaction
        UICtrl.transformArrowIcon();
       };
  
     var subscribeClearInput = function() {
        UIController.clearField();
       };
  

• Use of Font Awesome icons within 'New idea' button to rotate 180° upon click

    transformArrowIcon: function() {
        document.getElementById('arrow-icon').classList.toggle('rotated');
    };