Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	ExerJournal™ V1 by LeaferStudios
ID	4829416582201344
Created	8 months ago, 1715378043015
Updated	8 months ago, 1715378042437
Code	<!DOCTYPE html> <!-- ExerJournal™ Version 1.0 by LeaferStudios (https://www.khanacademy.org/profile/kaid_553656479258879622339276/) Released 10 May 2024 at around 5:30 PM. Don't settle for mediocre workouts. Take your fitness journey to new heights! Leveraging JavaScript, the application was coded from the ground up in just one hour. Submission for the Primavera 2024 competition hosted on Khan Academy. First released for the Khan Academy Computer Programming Community. Feedback and questions are really appreciated. Thank you! You can also subscribe to LeaferStudios on Khan Academy to get notified when another great project is finished (and possibly the next version of this workout application): https://www.khanacademy.org/profile/kaid_553656479258879622339276/ --> <!-- (c) 2024-Present by LeaferStudios@LeaferStudios (https://www.khanacademy.org/profile/kaid_553656479258879622339276/) --> <html> <head> <meta charset="utf-8"> <title>ExerJournal™ V1 by LeaferStudios </title> <!-- Reset default browser styles This ensures consistent rendering across different browsers --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@250;300;400;500;700;900&family=Google+Sans+Text:ital,wght@0,300..800;1,300..800&family=Roboto+Serif:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> <!-- Program CSS --> <style> /* Reset CSS / :root { / Dark Theme Colors / --primary-color-dark: #4e8dff; --secondary-color-dark: #6c757d; --success-color-dark: #28a745; --danger-color-dark: #dc3545; --warning-color-dark: #ffc107; --info-color-dark: #17a2b8; --light-color-dark: rgb(15, 15, 15); --dark-color-dark: #343a40; --text-color-dark: #ffffff; --bg-color-dark: #2d2d2d; / Light Theme Colors / --primary-color-light: #007bff; --secondary-color-light: #6c757d; --success-color-light: #28a745; --danger-color-light: #dc3545; --warning-color-light: #ffc107; --info-color-light: #17a2b8; --light-color-light: #f8f9fa; --dark-color-light: #343a40; --text-color-light: #333; --bg-color-light: #ffffff; } body.light-theme { --primary-color: var(--primary-color-light); --secondary-color: var(--secondary-color-light); --success-color: var(--success-color-light); --danger-color: var(--danger-color-light); --warning-color: var(--warning-color-light); --info-color: var(--info-color-light); --light-color: var(--light-color-light); --dark-color: var(--dark-color-light); --text-color: var(--text-color-light); --bg-color: var(--bg-color-light); --navbar-bg-color: var(--light-color); --navbar-text-color: var(--text-color); --navbar-hover-bg-color: rgba(0, 0, 0, 0.1); --navbar-position: static; } body.dark-theme { --primary-color: var(--primary-color-dark); --secondary-color: var(--secondary-color-dark); --success-color: var(--success-color-dark); --danger-color: var(--danger-color-dark); --warning-color: var(--warning-color-dark); --info-color: var(--info-color-dark); --light-color: var(--light-color-dark); --dark-color: var(--dark-color-dark); --text-color: var(--text-color-dark); --bg-color: var(--bg-color-dark); --navbar-bg-color: var(--dark-color); --navbar-text-color: var(--text-color); --navbar-hover-bg-color: rgba(255, 255, 255, 0.1); --navbar-position: static; } html, body { box-sizing: border-box; font-family: 'Roboto', Arial, sans-serif; font-size: 16px; color: var(--text-color); background-color: var(--bg-color); color: var(--text-color); } .container { margin: 0 auto; padding: 1rem; background-color: var(--bg-color); border-radius: 5px; } .section { margin-bottom: 2rem; } , ::before, ::after { box-sizing: inherit; margin: 0; padding: 0; } /* Typography / h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem; font-weight: bold; color: var(--text-color); } p { margin-bottom: 1.5rem; color: var(--text-color); } a { color: var(--primary-color); text-decoration: none; } .text-left { text-align: left; } .text-right { text-align: right; } / Buttons / .btn { display: inline-block; padding: 0.5rem 1rem; border: none; border-radius: 0.25rem; cursor: pointer; transition: all 0.3s ease; } .btn-primary { background-color: var(--primary-color); color: #fff; } .btn-secondary { background-color: var(--secondary-color); color: #fff; } .btn-success { background-color: var(--success-color); color: #fff; } .btn-danger { background-color: var(--danger-color); color: #fff; } .btn-warning { background-color: var(--warning-color); color: var(--text-color); } .btn-info { background-color: var(--info-color); color: #fff; } .btn-light { background-color: var(--light-color); color: var(--text-color); } .btn-dark { background-color: var(--dark-color); color: #fff; } .btn:hover { opacity: 0.8; } / Forms / input, textarea { width: 100%; padding: 0.5rem; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 0.25rem; box-sizing: border-box; color: var(--text-color); background-color: var(--bg-color); } input[type="submit"] { background-color: var(--primary-color); color: #fff; border: none; border-radius: 0.25rem; padding: 0.5rem 1rem; cursor: pointer; } / Navbar / .navbar { background-color: var(--navbar-bg-color); color: var(--navbar-text-color); padding: 1rem 0; display: flex; justify-content: space-between; align-items: center; position: var(--navbar-position); / Use custom position / top: 0; width: 100%; z-index: 1000; } .navbar ul { list-style: none; padding: 0; margin: 0; display: flex; } .navbar li { margin-right: 0.5rem; margin-left: 0.5rem; } .navbar a { color: var(--navbar-text-color); text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.25rem; transition: background-color 0.3s ease; } .navbar a:hover { background-color: var(--navbar-hover-bg-color); } / Fixed Navbar / .navbar.fixed { position: fixed; } / Utilities / .text-center { text-align: center; } / Margin & Padding Utilities / .p-t-0 { padding-top: 0; } .p-t-1 { padding-top: 0.25rem; } .p-t-2 { padding-top: 0.5rem; } .p-t-3 { padding-top: 1rem; } .p-t-4 { padding-top: 1.5rem; } .p-t-5 { padding-top: 3rem; } .p-b-0 { padding-bottom: 0; } .p-b-1 { padding-bottom: 0.25rem; } .p-b-2 { padding-bottom: 0.5rem; } .p-b-3 { padding-bottom: 1rem; } .p-b-4 { padding-bottom: 1.5rem; } .p-b-5 { padding-bottom: 3rem; } .p-l-0 { padding-left: 0; } .p-l-1 { padding-left: 0.25rem; } .p-l-2 { padding-left: 0.5rem; } .p-l-3 { padding-left: 1rem; } .p-l-4 { padding-left: 1.5rem; } .p-l-5 { padding-left: 3rem; } .p-r-0 { padding-right: 0; } .p-r-1 { padding-right: 0.25rem; } .p-r-2 { padding-right: 0.5rem; } .p-r-3 { padding-right: 1rem; } .p-r-4 { padding-right: 1.5rem; } .p-r-5 { padding-right: 3rem; } [class="m-1"] { margin: 0.25rem; } [class="m-2"] { margin: 0.5rem; } [class="m-3"] { margin: 1rem; } [class="m-4"] { margin: 1.5rem; } [class="m-5"] { margin: 3rem; } .m-t-0 { margin-top: 0; } .m-t-1 { margin-top: 0.25rem; } .m-t-2 { margin-top: 0.5rem; } .m-t-3 { margin-top: 1rem; } .m-t-4 { margin-top: 1.5rem; } .m-t-5 { margin-top: 3rem; } .m-b-0 { margin-bottom: 0; } .m-b-1 { margin-bottom: 0.25rem; } .m-b-2 { margin-bottom: 0.5rem; } .m-b-3 { margin-bottom: 1rem; } .m-b-4 { margin-bottom: 1.5rem; } .m-b-5 { margin-bottom: 3rem; } .m-l-0 { margin-left: 0; } .m-l-1 { margin-left: 0.25rem; } .m-l-2 { margin-left: 0.5rem; } .m-l-3 { margin-left: 1rem; } .m-l-4 { margin-left: 1.5rem; } .m-l-5 { margin-left: 3rem; } .m-r-0 { margin-right: 0; } .m-r-1 { margin-right: 0.25rem; } .m-r-2 { margin-right: 0.5rem; } .m-r-3 { margin-right: 1rem; } .m-r-4 { margin-right: 1.5rem; } .m-r-5 { margin-right: 3rem; } [class="p-1"] { padding: 0.25rem; } [class="p-2"] { padding: 0.5rem; } [class="p-3"] { padding: 1rem; } [class="p-4"] { padding: 1.5rem; } [class="p-5"] { padding: 3rem; } / Responsive Grid System / .row { display: flex; flex-wrap: wrap; margin: 0 -0.75rem; } .col { flex: 1 1 0; padding: 0 0.75rem; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @media (min-width: 576px) { .col-sm-1 { flex: 0 0 8.33333333%; } .col-sm-2 { flex: 0 0 16.66666667%; } .col-sm-3 { flex: 0 0 25%; } .col-sm-4 { flex: 0 0 33.33333333%; } .col-sm-5 { flex: 0 0 41.66666667%; } .col-sm-6 { flex: 0 0 50%; } .col-sm-7 { flex: 0 0 58.33333333%; } .col-sm-8 { flex: 0 0 66.66666667%; } .col-sm-9 { flex: 0 0 75%; } .col-sm-10 { flex: 0 0 83.33333333%; } .col-sm-11 { flex: 0 0 91.66666667%; } .col-sm-12 { flex: 0 0 100%; } } @media (min-width: 768px) { .col-md-1 { flex: 0 0 8.33333333%; } .col-md-2 { flex: 0 0 16.66666667%; } .col-md-3 { flex: 0 0 25%; } .col-md-4 { flex: 0 0 33.33333333%; } .col-md-5 { flex: 0 0 41.66666667%; } .col-md-6 { flex: 0 0 50%; } .col-md-7 { flex: 0 0 58.33333333%; } .col-md-8 { flex: 0 0 66.66666667%; } .col-md-9 { flex: 0 0 75%; } .col-md-10 { flex: 0 0 83.33333333%; } .col-md-11 { flex: 0 0 91.66666667%; } .col-md-12 { flex: 0 0 100%; } } @media (min-width: 992px) { .col-lg-1 { flex: 0 0 8.33333333%; } .col-lg-2 { flex: 0 0 16.66666667%; } .col-lg-3 { flex: 0 0 25%; } .col-lg-4 { flex: 0 0 33.33333333%; } .col-lg-5 { flex: 0 0 41.66666667%; } .col-lg-6 { flex: 0 0 50%; } .col-lg-7 { flex: 0 0 58.33333333%; } .col-lg-8 { flex: 0 0 66.66666667%; } .col-lg-9 { flex: 0 0 75%; } .col-lg-10 { flex: 0 0 83.33333333%; } .col-lg-11 { flex: 0 0 91.66666667%; } .col-lg-12 { flex: 0 0 100%; } } @media (min-width: 1200px) { .col-xl-1 { flex: 0 0 8.33333333%; } .col-xl-2 { flex: 0 0 16.66666667%; } .col-xl-3 { flex: 0 0 25%; } .col-xl-4 { flex: 0 0 33.33333333%; } .col-xl-5 { flex: 0 0 41.66666667%; } .col-xl-6 { flex: 0 0 50%; } .col-xl-7 { flex: 0 0 58.33333333%; } .col-xl-8 { flex: 0 0 66.66666667%; } .col-xl-9 { flex: 0 0 75%; } .col-xl-10 { flex: 0 0 83.33333333%; } .col-xl-11 { flex: 0 0 91.66666667%; } .col-xl-12 { flex: 0 0 100%; } } .fadeIn { animation: fadeIn 1s ease-in-out; } .footer {} .footer .container { border-top: 1px solid; border-radius: 0; margin: 0 auto; padding: 1rem 1rem; } .footer ul li { margin-bottom: 0.5rem; } .footer ul { list-style: none; padding: 0; } / Utility classes for background color / .bg-primary { background-color: var(--primary-color); } .bg-secondary { background-color: var(--secondary-color); } .bg-success { background-color: var(--success-color); } .bg-danger { background-color: var(--danger-color); } .bg-warning { background-color: var(--warning-color); } .bg-info { background-color: var(--info-color); } / Utility classes for text color / .text-primary { color: var(--primary-color); } .text-secondary { color: var(--secondary-color); } .text-success { color: var(--success-color); } .text-danger { color: var(--danger-color); } .text-warning { color: var(--warning-color); } .text-info { color: var(--info-color); } .text-white { color: #FFF; } nav.text-white a { color: #FFF !important; } .text-black { color: #000; } nav.text-black a { color: #000 !important; } .dark-theme { --primary-color: var(--primary-color-dark); --secondary-color: var(--secondary-color-dark); --success-color: var(--success-color-dark); --danger-color: var(--danger-color-dark); --warning-color: var(--warning-color-dark); --info-color: var(--info-color-dark); --light-color: var(--light-color-dark); --dark-color: var(--dark-color-dark); --text-color: var(--text-color-dark); --bg-color: var(--bg-color-dark); } / Special Backgrounds / .bg-polka { background-color: #dff1ff; background-image: radial-gradient(rgb(136, 200, 232) 1.7000000000000002px, transparent 1.7000000000000002px), radial-gradient(rgb(161, 255, 185) 1.7000000000000002px, rgb(196, 239, 255) 1.7000000000000002px); background-size: 28px 28px; background-position: -10px -0px; background-attachment: fixed; } body.dark-theme .bg-polka { background-image: radial-gradient(rgb(10, 75, 107) 1.7000000000000002px, transparent 1.7000000000000002px), radial-gradient(rgb(161, 255, 185) 1.7000000000000002px, rgb(8, 97, 130) 1.7000000000000002px); } / Custom elements / table { width: 100%; border-collapse: collapse; } th, td { padding: 10px; border: 1px solid #ccc; } td { cursor: pointer; } .workout-entry { border: 1.5px solid var(--success-color); border-radius: 4px; margin-bottom: 15px; padding: 15px; } a.icon:hover { background-color: transparent; } i.material-symbols-outlined { vertical-align: middle; } .about-section { padding: 50px; border-radius: 10px; } .decorative-element { width: 100%; height: 20px; background-image: linear-gradient(to right, #4e8dff, #dc3545); border-radius: 10px; margin-top: 20px; } .container { background-color: var(--bg-color); } .section-title { color: var(--text-color); } .section-description { color: var(--text-color); } .category-title { color: var(--primary-color); } .exercise-list { list-style: none; padding-left: 20px; margin-bottom: 2rem; } .exercise-list li { color: var(--text-color); } .exercise-list li:before { content: "\2022"; / Add bullet point / color: var(--primary-color); / Set bullet point color / font-weight: var(--font-weight-bold); / Make bullet point bold / display: inline-block; width: 1em; margin-left: -1em; } </style> </head> <body class='light-theme'> <nav class="navbar fixed"> <ul> <li><a href="javascript:changePage(0);">Home</a></li> <li><a href="javascript:changePage(1);">About</a></li> <li><a href="javascript:changePage(2);">Samples</a></li> <li><a href="javascript:changePage(3);">Support</a></li> </ul> <ul> <li><a href="javascript:toggleTheme();" class='icon'> <i class='material-symbols-outlined' id='themeIcon'>dark_mode</i> </a></li> </ul> </nav> <div style='height:50px;'></div> <div class='page'> <div class="container"> <h1 class="text-center">ExerJournal™ </h1> <p class='text-center'>V1.0 by <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/' target='_blank'>LeaferStudios</a></p> <h2 class='text-center'>Workout Tracker</h2> <form id="workoutForm" class="section"> <div class="row p-b-1"> <div class="col"> <label for="exercise">Exercise:</label> <input type="text" id="exercise" class="form-control m-t-2" required> </div> <div class="col"> <label for="duration">Duration (minutes):</label> <input type="number" id="duration" class="form-control m-t-2" required> </div> </div> <div class="row p-t-1"> <div class="col"> <label for="sets">Sets:</label> <input type="number" id="sets" class="form-control m-t-2" required> </div> <div class="col"> <label for="reps">Reps:</label> <input type="number" id="reps" class="form-control m-t-2" required> </div> </div> <button type="submit" class="btn btn-primary mt-3">Save Workout</button> </form> </div> <div class="container"> <h2 class="text-center">Calendar</h2> <div id="calendar" class="text-center"></div> </div> <div class='container'> <h2 class='text-center'>Workout Log</h2> <p id="workoutData" class="text-center"></p> <button id="clearLocalStorageBtn" class="btn btn-danger">Clear Local Storage</button> </div> </div> <div class='page'> <section class="container about-section"> <div class=""> <h1>About ExerJournal™</h1> <p style='line-height:22px'>From exercises and durations to sets and reps, my app tracks every aspect of your workout with precision. No more guesswork - just accurate data at your fingertips. With automatic local storage saving, access your workout data anytime!</p> <p style='line-height:22px'>Useful app to track workouts created by <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/' target='_blank'>LeaferStudios</a>. Leveraging JavaScript, the application was coded from the ground up in just one hour. Submission for the Primavera 2024 competition hosted on Khan Academy.</p> </div> <div class="decorative-element"></div> <div class="m-t-4"> <p style='line-height:22px'>You can also subscribe to <a href='https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016' target='_blank'>LeaferStudios on Khan Academy</a> to get notified when another great project is finished.<br><br>Released 10 May 2024 at around 5:30 PM.</p> </div> </section> </div> <div class='page'> <div class='container about-section'> <h1 class="section-title">Sample Exercises</h1> <p class="section-description" style='line-height:22px'>Can't think of an exercise? Here is a list of exercise ideas for you to incorporate into your workout.</p> <div class="exercise-category"> <h3 class="category-title">Weights</h3> <ul class="exercise-list" style='line-height:22px'> <li>Squats</li> <li>Deadlifts</li> <li>Bench press</li> <li>Overhead press</li> <li>Rows</li> <li>Lunges</li> <li>Bicep curls</li> <li>Tricep extensions</li> <li>Leg press</li> <li>Chest fly</li> <li>Shoulder lateral raises</li> </ul> </div> <div class="exercise-category"> <h3 class="category-title">Aerobic</h3> <ul class="exercise-list" style='line-height:22px'> <li>Running</li> <li>Cycling</li> <li>Jumping jacks</li> <li>Mountain climbers</li> <li>Burpees</li> <li>High knees</li> <li>Box jumps</li> <li>Swimming</li> <li>Rowing</li> <li>Stair climbing</li> <li>Skipping</li> </ul> </div> <div class="exercise-category"> <h3 class="category-title">Bodyweight</h3> <ul class="exercise-list" style='line-height:22px'> <li>Push-ups</li> <li>Pull-ups</li> <li>Planks</li> <li>Lunges</li> <li>Jump rope</li> <li>Sit-ups</li> <li>Crunches</li> <li>Burpees</li> <li>Mountain climbers</li> <li>Squats</li> <li>Leg raises</li> </ul> </div> <div class="exercise-category"> <h3 class="category-title">Stretching</h3> <ul class="exercise-list" style='line-height:22px'> <li>Hamstring stretch</li> <li>Quad stretch</li> <li>Calf stretch</li> <li>Chest stretch</li> <li>Shoulder stretch</li> <li>Tricep stretch</li> <li>Neck stretch</li> <li>Spinal twist</li> <li>Butterfly stretch</li> <li>Downward dog</li> <li>Child's pose</li> <li>Cobra stretch</li> <li>Pigeon pose</li> <li>Seated forward bend</li> <li>Standing forward bend</li> <li>Standing quadriceps stretch</li> <li>Standing hamstring stretch</li> <li>Triceps stretch</li> <li>Shoulder shrugs</li> </ul> </div> <div class="exercise-category"> <h3 class="category-title">Cooldown</h3> <ul class="exercise-list" style='line-height:22px'> <li>Walking</li> <li>Deep breathing</li> <li>Yoga poses</li> <li>Foam rolling</li> <li>Static stretching</li> <li>Leg swings</li> <li>Arm circles</li> <li>Hamstring stretch</li> <li>Quad stretch</li> <li>Calf stretch</li> <li>Chest stretch</li> <li>Shoulder stretch</li> <li>Tricep stretch</li> <li>Neck stretch</li> <li>Butterfly stretch</li> <li>Downward dog</li> </ul> </div> </div> </div> <div class='page'> <div class='container about-section'> <h1>Support</h1> <p style='line-height:22px;'>ExerJournal™ Version 1.0 by <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/' target='_blank'>LeaferStudios</a></p> <p style='line-height:22px;'>If you have any questions about this program, you can tell me in the Questions sections of <a href='' target='_blank'>this program </a>on Khan Academy.</p> <p style='line-height:22px;'>You can leave your feedback in the Tips & Thanks section of <a href='' target='_blank'>this program</a> on Khan Academy.<br><br>Feedback and questions are really appreciated. Thank you!</p> </div> </div> <footer class="footer"> <div class="container"> <div class="row"> <div class="col"> <h3>ExerJournal™</h3> <p style='line-height: 22px;'>Don't settle for mediocre workouts. Take your fitness journey to new heights!</p> </div> <div class="col"> <h3>Quick Links</h3> <ul> <li><a href="javascript:changePage(0);">Home</a></li> <li><a href="javascript:changePage(1);">About</a></li> <li><a href="javascript:changePage(2);">Samples</a></li> <li><a href="javascript:changePage(3);">Support</a></li> </ul> </div> <div class="col"> <h3>Contact</h3> <p>Author: <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/' target='_blank'>LeaferStudios</a></p> <p>Author's <a href='https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016' target='_blank'>KA Website</a></p> </div> </div> <div class='row'> <div class='col text-left'> <p>© 2024 <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/'>LeaferStudios</a></p> </div> <div class='col text-right'> <p><a href='#' onclick='window.scroll(0,0);'>Back to Top</a></p> </div> </div> </div> </footer> <!-- Program JavaScript --> <script type> // Function to handle S.P.A. scene changes function changePage(id) { // get page elements var pages = document.getElementsByClassName("page"); // loop through page elements for (var i = 0; i < pages.length; i++) { // hide all pages pages[i].style.display = "none"; } // display only [id] page, starting from page 0 document.getElementsByClassName("page")[id].style.display = "block"; } // change to page 0 changePage(0); function toggleTheme() { if (document.getElementById('themeIcon').innerHTML === 'light_mode') { document.body.className = 'light-theme'; document.getElementById('themeIcon').innerHTML = 'dark_mode'; } else { document.getElementById('themeIcon').innerHTML = 'light_mode'; document.body.className = 'dark-theme'; } }; // Function to handle form submission function saveWorkout(event) { event.preventDefault(); // Get form values const exercise = document.getElementById('exercise').value; const duration = document.getElementById('duration').value; const sets = document.getElementById('sets').value; const reps = document.getElementById('reps').value; // Create workout object const workout = { exercise, duration, sets, reps, date: new Date().toISOString().split('T')[0] // Add current date }; // Check if localStorage is available if (typeof(Storage) !== "undefined") { // Retrieve existing workouts from localStorage let workouts = JSON.parse(localStorage.getItem('workouts')) \|\| []; // Add new workout to the array workouts.push(workout); // Save updated workouts to localStorage localStorage.setItem('workouts', JSON.stringify(workouts)); // Reset form document.getElementById('workoutForm').reset(); // Display saved workout data and update calendar displayWorkouts(workouts); updateCalendar(); } else { // Local storage is not available alert('Sorry, your browser does not support localStorage. Your workout data cannot be saved.'); } } // Function to display saved workout data and statistics function displayWorkouts(workouts) { const workoutDataContainer = document.getElementById('workoutData'); const totalWorkouts = workouts.length; let totalMinutes = 0; let totalSets = 0; let totalReps = 0; workoutDataContainer.innerHTML = ''; // Clear previous data workouts.forEach(workout => { // Calculate total minutes, sets, and reps totalMinutes += parseInt(workout.duration); totalSets += parseInt(workout.sets); totalReps += parseInt(workout.reps); const workoutEntry = document.createElement('div'); workoutEntry.className = 'workout-entry'; const workoutDate = new Date(workout.date); const month = workoutDate.toLocaleString('default', { month: 'long' }); const year = workoutDate.getFullYear(); const day = workoutDate.getDate() + 1; workoutEntry.textContent = `Date: ${month} ${day}, ${year} \| Exercise: ${workout.exercise}, Duration: ${workout.duration} minutes, Sets: ${workout.sets}, Reps: ${workout.reps}`; workoutDataContainer.appendChild(workoutEntry); }); // Check if there are any workouts before calculating averages if (totalWorkouts > 0) { // Calculate averages const averageMinutes = totalMinutes / totalWorkouts; const averageSets = totalSets / totalWorkouts; const averageReps = totalReps / totalWorkouts; // Display statistics workoutDataContainer.innerHTML += `<div class="statistics"> <h3>Statistics</h3> <p>Total Workouts: ${totalWorkouts}</p> <p>Average Minutes per Workout: ${averageMinutes.toFixed(2)}</p> <p>Average Sets per Workout: ${averageSets.toFixed(2)}</p> <p>Average Reps per Workout: ${averageReps.toFixed(2)}</p> </div>`; } else { workoutDataContainer.innerHTML += `<div class="statistics"> <h3>Statistics</h3> <p>No workouts recorded yet.</p> </div>`; } } // Function to update calendar function updateCalendar() { const calendarContainer = document.getElementById('calendar'); calendarContainer.innerHTML = ''; // Clear previous calendar const currentDate = new Date(); const currentYear = currentDate.getFullYear(); const currentMonth = currentDate.getMonth(); const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate(); const firstDayOfWeek = new Date(currentYear, currentMonth, 1).getDay(); const calendarTable = document.createElement('table'); const headerRow = document.createElement('tr'); // Create header cells for days of the week const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; daysOfWeek.forEach(day => { const headerCell = document.createElement('th'); headerCell.textContent = day; headerRow.appendChild(headerCell); }); calendarTable.appendChild(headerRow); // Create calendar cells for each day in the month let dayCount = 1; for (let i = 0; i < 6; i++) { const row = document.createElement('tr'); for (let j = 0; j < 7; j++) { const cell = document.createElement('td'); if ((i === 0 && j < firstDayOfWeek) \|\| dayCount > daysInMonth) { // Fill empty cells before the first day of the month and after the last day of the month cell.textContent = ''; } else { // Fill cells with the day number cell.textContent = dayCount; dayCount++; // Check if the current day has a workout const workoutDates = JSON.parse(localStorage.getItem('workouts')) \|\| []; const currentDate = new Date(currentYear, currentMonth, parseInt(cell.textContent)); const currentDateISO = currentDate.toISOString().split('T')[0]; const hasWorkout = workoutDates.some(workout => workout.date === currentDateISO); if (hasWorkout) { cell.style.backgroundColor = 'lightgreen'; // Highlight days with workouts } } row.appendChild(cell); } calendarTable.appendChild(row); } calendarContainer.appendChild(calendarTable); } // Function to clear localStorage function clearLocalStorage() { localStorage.removeItem('workouts'); displayWorkouts([]); updateCalendar(); } // Event listener for form submission document.getElementById('workoutForm').addEventListener('submit', saveWorkout); // Event listener for clear localStorage button document.getElementById('clearLocalStorageBtn').addEventListener('click', function() { var checkDelete = confirm("Are you sure you want to clear local storage? All of your saved data will be deleted."); if (checkDelete === true) { alert("Cleared local storage successfully."); clearLocalStorage(); } else { alert("Your data was not cleared."); } }); // Load saved workout data on page load window.addEventListener('load', () => { displayWorkouts(JSON.parse(localStorage.getItem('workouts')) \|\| []); updateCalendar(); }); </script> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script type> /* * Why is this needed? Due to Khan Academy's program thumbnail not being super clear, this makes it extra clear in HTML programs. */ // credit to Bluebird@kaid_157624541333313939750668 for this Khan Academy thumbnail resolution fix var r=600,s=document.documentElement.clientWidth;window.parent.html2canvas=t=>{try{html2canvas(document.body,{width:s,height:s,useCORS:!0}).then(t=>{var e=document.createElement("canvas");e.width=r,e.height=r,e.getContext("2d").drawImage(t,0,0,t.width,t.height,0,0,r,r),window.top.postMessage(e.toDataURL(),"")}).catch(t=>{alert("Thumbnail Script Error: "+t)})}catch{window.top.postMessage(document.createElement("canvas").toDataURL(),"*")}}; </script> </body> </html> <!-- (c) 2024-Present Programmed by LeaferStudios@LeaferStudios (https://www.khanacademy.org/profile/kaid_553656479258879622339276/) You CANNOT COPY this program unless you create a Spin-Off of this program on Khan Academy. You will get flagged otherwise. However, I am willing to answer any question you have to help you achieve your web development goals! Ask below in the Questions tab. -->
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOveworKCAw
Votes	6
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	LeaferStudios
Author Name	LeaferStudios
Author ID	kaid_553656479258879622339276
Author Profile Access	PUBLIC

Archive Data

Added	8 months ago, 1715381258628
Updated	8 months ago, 1715381258628
Source Deleted	unknown