script.js

// PRODUCTIVITY
let productivityEntries=[
    'Listening to ambient noises while working helps some people get things done faster.',
    'While multitasking may seem like a good idea, it can hurt effectiveness of the tasks you are doing.',
    'Move locations around your home if you need a change of location while working.',
    'If you tend to forget, write things down.',
    'Starting a task can sometimes be the hardest part.',
    'Try to minimize environmental distractions while working.',
    'Set intervals to take breaks, overworking can affect productivity.',
    'Some people work better if they have a set routine, or if they have time dedicated to work.',
    'Break down a larger task into multiple smaller tasks -- divide and conquer.',
    'Add important dates and deadlines to your calendar in advance.',
    '“Measure twice, cut once”',
    'Learn keyboard shortcuts to help become a power user.',
    'The Pomodoro Technique is a time management method, focused on working on a task for 25 minutes and then having a 5 minute break.',
    'If a task takes less than 5 minutes, try to get it out of the way.',
    'Tackle the hardest task first.',
    'Limit phone notifications.',
    'Recording yourself instead of initially typing something can be helpful.',
    'Work durings times of the day where you are productive, but keep it consistent.',
    'Unsubscribe from newsletters that you don’t read.',
    'Don’t overextend yourself.',
];

let productivityExp=[
  '<h1 class="exp-header">Planning ahead</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2904/2904859.svg" \
       ><ul class="exp-text"><li>Knowing what you need to to in advance is key to productivity</li><li>\
      You will be less stressed since you already have a plan</li> </ul>',
      '<h1 class="exp-header">Focus time</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/179/179979.svg" \
      ><ul class="exp-text"><li>Some people work better with no noises, but immersion in ambient music can help reduce anxiety by \
    allowing people to put aside what is on their mind and focus on their surroundings.</li> </ul>',
    '<h1 class="exp-header">One at a time.</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2934/2934539.svg" \
       ><ul class="exp-text"><li>It is unsustainable.</li><li>Switching between tasks makes it difficult to tune out distractions and can cause \
    mental blocks that can slow you down.</li><li>Ultimately, multitasking results in less effective and efficient \
    work with decreased mental organizational capabilities.</li> </ul>',
    '<h1 class="exp-header">Work area</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/3063/3063824.svg" \
       ><ul class="exp-text"><li>If you do not have room to move around, dedicate a specific area for work only.</li> </ul>',
       '<h1 class="exp-header">Write it down</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/3075/3075993.svg" \
       ><ul class="exp-text"><li>You can write on paper or on something like your phone.</li> </ul>',
       '<h1 class="exp-header">One > Nothing</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/862/862913.svg" \
       ><ul class="exp-text"><li>Doing one part is better than doing nothing.</li> </ul>',
       '<h1 class="exp-header">Keep it quiet</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2972/2972298.svg" \
       ><ul class="exp-text"><li>Noise-cancelling earphones are nice if you can afford them.</li> </ul>',
       '<h1 class="exp-header">Work enough, but not too much</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2750/2750315.svg" \
       ><ul class="exp-text"><li>Try not to overwork youself.</li> </ul>',
       '<h1 class="exp-header">Keep a calendar</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/3079/3079121.svg" \
       ><ul class="exp-text"><li>Write this down on your calendar.</li> </ul>',
       '<h1 class="exp-header">Change perspectives</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2919/2919722.svg" \
       ><ul class="exp-text"><li>A task can seem less daunting from this perspective.</li> </ul>',
       '<h1 class="exp-header">Get the dates in your head!</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/3064/3064565.svg" \
       ><ul class="exp-text"><li>Set notifications a week before a deadline.</li> </ul>',
       '<h1 class="exp-header">Efficiency is key</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2934/2934383.svg" \
       ><ul class="exp-text"><li>It is more time efficient if you make a mistake.</li> </ul>',
       '<h1 class="exp-header">Keyboard Shortcuts</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/915/915824.svg" \
       ><ul class="exp-text"><li>You do not have to memorize all of them, but adding a couple frequently used shortcuts to your repertoire can be beneficial.</li> </ul>',
       '<h1 class="exp-header">Pomodor Technique</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/42/42246.svg" \
       ><ul class="exp-text"><li>There are variations of this method, see which one works best for you.</li> </ul>',
    '<h1 class="exp-header">One at a time</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/3056/3056206.svg" \
       ><ul class="exp-text"><li>Completing any task, even a small one, is an accomplishment.</li> </ul>',
       '<h1 class="exp-header">Get it out of the way</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/3023/3023498.svg" \
       ><ul class="exp-text"><li>This does not apply to when taking tests/exams, get the easier questions out of the way first in that situation.</li> </ul>',
       '<h1 class="exp-header">Limit notifications!</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2634/2634254.svg" \
       ><ul class="exp-text"><li>Some people get phantom phone buzzes, where they feel notifications when there is not one.',
       '<h1 class="exp-header">Record yourself!</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/3064/3064565.svg" \
       ><ul class="exp-text"><li>Another option is text-to-speech.</li> </ul>',
       '<h1 class="exp-header">Keep it consistent</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2891/2891474.svg" \
       ><ul class="exp-text"><li>It can be hard for your mind to adjust to this.</li> </ul>',
    '<h1 class="exp-header">Unsubscribe!</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/561/561127.svg" \
       ><ul class="exp-text"><li>Most newsletter emails have an "unsubscribe" button at the button of the page.</li> </ul>',
    '<h1 class="exp-header">Do not burn out!</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/3043/3043608.svg" \
       ><ul class="exp-text"><li>Burning youself out is a real thing, and can have immediate consequences.</li> </ul>',
];

function displayProductivity() {
    let index=Math.floor(Math.random()*productivityEntries.length);
    let div=document.querySelector('#productivity');
    let productivity=`<div class='card'>
    <p>${productivityEntries[index]}</p>
    </div>`;
    div.innerHTML=productivity;
    return index;
}


function expandProductivity() {
    let div=document.querySelector('#expProductivity');
    let productivity=`<div class='explanation'>
    <p>${productivityExp[displayProductivity()]}</p>
    </div>`;
    div.innerHTML=productivity;
  }

// PHYSICAL HEALTH
let physicalEntries=[
    'Exercise with family.',
    'Stand up or walk around while you read and answer emails and other messages on your laptop or phone.',
    'Listen to music and dance.',
    'Try to do some exercise each day for at least 10 minutes.',
    'Do exercise while watching tv.',
    'Eat nutritious foods like fruits or vegetables.',
    'Stay hydrated, keep a refillable water bottle and drink it throughout the day.',
    'Take short active breaks during the day.',
    'Try to follow a video exercise routine or an online exercise class.',
    'Stand up as much as possible.',
    'Limit foods high in sodium, added sugar and saturated fat.',
    'Wash your hands thoroughly for at least 20 seconds.',
    'Maintain a low-carb, high-fat diet to sustain your energy throughout the day.',
];

let physicalExp=[
    '<h1 class="exp-header">Connect through physical activity.</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/194/194868.svg" alt="bicycle"><ul class="exp-text"><li>Exercising is a great way to improve energy levels</li><li>Doing so with family helps you stay motivated and connects you to each other</li> </ul>',
    '<h1 class="exp-header">Work while standing.</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2943/2943276.svg" alt="ribbon with thumbs up"><ul class="exp-text"><li>For many people, long days are spent sitting</li><li>Walking around while still doing work allows you to maximize your time and move around</li> </ul>',
    '<h1 class="exp-header">Dance it out.</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2563/2563214.svg" alt="dance party"><ul class="exp-text"><li>Express your emotions creatively</li><li>Dance to your favorite songs to get your blood flowing and take a break from your screen</li> </ul>',
    '<h1 class="exp-header">Short Exercise.</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2943/2943149.svg" alt="calendar with clock"><ul class="exp-text"><li>Watch some Youtube workout videos to learn which exercises you can do at home</li><li>Schedule times to video chat with friends to workout together</li> </ul>',
    '<h1 class="exp-header">TV Time.</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2916/2916349.svg" alt="tv set"><ul class="exp-text"><li>It can be difficult to find time to exercise</li><li>Running on the treadmill or stretching while watching TV helps you decompress after a long day while still staying active</li> </ul>',
    '<h1 class="exp-header">Brainpower.</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2562/2562483.svg" alt="plant"><ul class="exp-text"><li>Feed your brain the nutrients it needs</li><li>A diet rich in vegetables and fruits can lower blood pressure, reduce the risk of heart disease and stroke, and have a positive effect upon blood sugar, which can help keep appetite in check</li> </ul>',
    '<h1 class="exp-header">Hydrate or diedrate.</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2764/2764108.svg" alt="water pitcher and two glasses"><ul class="exp-text"><li>Water is essential to heightening your brain function and maintaining energy levels</li><li>Drinking 8 cups a day promotes healthy skin and helps maintain blood pressure</li> </ul>',
    '<h1 class="exp-header">Break time.</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2943/2943445.svg" alt="sunglasses"><ul class="exp-text"><li>Taking breaks will help you focus better</li><li>Taking frequent breaks helps reduce eye strain and other ergonomic problems</li> </ul>',
    '<h1 class="exp-header">Workout videos.</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2943/2943304.svg" alt="computer playing music"><ul class="exp-text"><li>If you\'re not sure what to do for exercise, following along with an instructional video from trained professionals will help you stay active and connect with other people</li><li>Exercise from the comfort of your own home</li> </ul>',
    '<h1 class="exp-header">Stand up.</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2943/2943302.svg" alt="omputer to notepad"><ul class="exp-text"><li>Opt in for a standing desk or move to a different location to work every once in a while</li><li>Take a break to spend time with those around you while limiting your screen time</li> </ul>',
    '<h1 class="exp-header">Food consciousness.</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2915/2915979.svg" alt="a slice of cake"><ul class="exp-text"><li>These foods stay in your bloodstream for longer periods of time and are harder to break down</li><li>Opt for protein instead</li> </ul>',
    '<h1 class="exp-header">Clean hands.</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2890/2890942.svg" alt="red soap bubbles"><ul class="exp-text"><li>Limit your risk of getting sick by making sure common points of contact are cleaned regularly</li><li>Songs you can sing to measure these 20 seconds include the choruses of Beyonce\'s "Love on Top" and Dolly Parton\'s "Jolene"</li> </ul>',
    '<h1 class="exp-header">Food portioning.</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2915/2915998.svg" alt="two donuts"><ul class="exp-text"><li>Carbohydrates are absorbed immediately while fats take longer to break down, thereby sustaining your energy for longer</li><li>Examples of fat-rich foods include nuts, seeds, avocado, eggs, and olives</li> </ul>',
];

function displayPhysical() {
    let index=Math.floor(Math.random()*physicalEntries.length);
    let div=document.querySelector('#physical');
    let physical=`<div class='card'>
    <p>${physicalEntries[index]}</p>
    </div>`;
    div.innerHTML=physical;
    return index;
}

function expandPhysical() {
  let div=document.querySelector('#expPhys');
  let physical=`<div class='explanation'>
  <p>${physicalExp[displayPhysical()]}</p>
  </div>`;
  div.innerHTML=physical;
}

//MENTAL Health

let mentalEntries = [
    'Write down your schedule for your day.',
    'Reach out to a friend you haven’t spoken to in a while (conversation starters: what you’ve been doing in quarantine, how you’ve (re)designed your workspace, what you’re looking forward to once quarantine is over, have you picked up any new hobbies, etc.)',
    'Take a nap.',
    'Log off of social media for the rest of the day (if your work permits).',
    'Schedule a movie night with friends or family.',
    'Write down your thoughts in a journal.',
    'Block news channels on your devices and ask your friends to give you a quick debriefing.',
    'Clean your work area.',
    'Leave the house (while staying socially distant).',
    'Write down what you want to achieve today.',
    'Say no. Set boundaries.',
    'Check in on friends and family.',
    'Take in the present.',
    'Stand up.',
    'Develop a work buddy system to keep yourselves accountable.',
];

let mentalExp = [
    '<h1 class="exp-header">It can reduce stress</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/179/179979.svg" \
         ><ul class="exp-text"><li>Knowing what you need to to in advance is key to productivity</li><li>\
        You will be less stressed since you already have a plan</li> </ul>',
    '<h1 class="exp-header">Reconnecting</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/179/179651.svg" \
         ><ul class="exp-text"><li>Connecting with people again can help your mental health.</li><li>\
        You can rekindle past friendships and talk to someone new</li> </ul>',
    '<h1 class="exp-header">Tired?</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/179/179983.svg"\
         ><ul class="exp-text"><li>20 minutes is the sweet spot for a power nap</li><li>Naps can leave you feeling more alert, energetic, and productive, however, napping 30-60 minutes can leave you even groggier.</li><li>For maximum efficiency, rest in a cool, dark room free from distractions.</li> </ul>',
    '<h1 class="exp-header">Social Media Detox</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/179/179634.svg"  ><ul class="exp-text"><li>Another option is to disable an app to prevent yourself from using it.</li><li>Turn off your phone or put it in another room to limit the urge to go check your phone.</li> </ul>',
    '<h1 class="exp-header">Quality Time</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/179/179616.svg"  ><ul class="exp-text"><li>Allows you to spend time with people you care about.</li><li>Sit back and relax for a couple of hours enjoying time with your friends and family, or even just by yourself.</li><li>You deserve a break.</li> </ul>',
    '<h1 class="exp-header">Journal</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/179/179647.svg"  ><ul class="exp-text"><li>It is important to be aware of your thoughts and acknowledging how you feel.</li><li>Journaling can calm your thoughts down a bit and ease your stress</li> </ul>',
    '<h1 class="exp-header">News Detox</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/179/179974.svg"  ><ul class="exp-text"><li>Seeing bad news can be detrimental to your mental health.</li><li>If you want to still be in the loop of current events, we would suggest limiting your time spent on the news, or talking to a friend about current events.</li><li>This can foster growth and you can learn new perspectives.</li> </ul>',
    '<h1 class="exp-header">Clean!</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/2966/2966174.svg"  ><ul class="exp-text"><li>It can be a change of activity and you get a result of a clean workspace.</li><li>Cleaning your work space can allow for deeper focus due to working in an uncluttered area + it will give you a sense of accomplishment.</li> </ul>',
    '<h1 class="exp-header">Step Outside!</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/179/179995.svg"  ><ul class="exp-text"><li>Go for a walk/run and enjoy the outdoors if you can.</li><li>Taking a breath of fresh air can be very relaxing and ease your stress a bit.</li><li>Since we are stuck in quarantine, it is super important to still be moving around.</li> </ul>',
    '<h1 class="exp-header">Plan</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/179/179657.svg"  ><ul class="exp-text"><li>Similar to planning out your day, writing down one goal make you excited about the day and make you more likely to work towards that goal.</li><li>Crossing off that goal at the end of the day will give you a huge sense of accomplishment.</li><li>Even if you do not complete it, you still worked towards a goal!</li> </ul>',
    '<h1 class="exp-header">No!</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/179/179633.svg"  ><ul class="exp-text"><li>Don\'t be afraid to say no!</li><li>It\'s important to be able to set boundaries, whether its social or work related.</li> </ul>',
    '<h1 class="exp-header">Check In</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/179/179665.svg"  ><ul class="exp-text"><li>Reach out to friends and family.</li><li>It will be super nice to catch up with them and see how they\'re doing.</li><li>Many of us are stuck in isolation and would definitely appreciate you reaching out to them.</li> </ul>',
    '<h1 class="exp-header">The Present</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/179/179662.svg"  ><ul class="exp-text"><li>It may be hard to see right now, but there will be a time where the problems you\'re facing will subside.</li><li>It\'s important to be able to stay in the present rather than worrying about the past or future.</li><li>It\'s way easier said than done, but focus on the present by pushing out negative thoughts and trying to immerse yourself in your work or activity you enjoy.</li> </ul>',
    '<h1 class="exp-header">Stand Up!</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/179/179963.svg"  ><ul class="exp-text"><li>It sounds, and is super simple.</li><li>Stand up and do some stretches or walk around your room.</li><li>A professor at Waterloo says individuals should be standing up for 30 mins per hour to get health benefits.</li><li>Sitting for long periods of time is detrimental to health.</li><li>Your quads can become tight and posture can worsen.</ul>',
    '<h1 class="exp-header">Accountability</h1> <img class="exp-img" src="https://image.flaticon.com/icons/svg/179/179971.svg"  ><ul class="exp-text"><li>Having a study buddy or friend to keep you accountable can help you be motivated to do work.</li><li>You can be each other\'s cheerleaders and encourage them to be more productive.</li> </ul>',
];

function displayMental() {
    let index=Math.floor(Math.random()*mentalEntries.length);
    let div=document.querySelector('#mental');
    let mental=`<div class='card'>
    <p>${mentalEntries[index]}</p>
    </div>`;
    div.innerHTML=mental;
    return index;
}

function expandMental() {
  let div=document.querySelector('#exp');
  let mental=`<div class='explanation'>
  <p>${mentalExp[displayMental()]}</p>
  </div>`;
  div.innerHTML=mental;
}