CodeWith-Checklist/index.html at main · mapoitras/CodeWith-Checklist · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Code With Program Checklist</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 20px auto;
      padding: 20px;
      line-height: 1.6;
    }
    h1, h2 {
      color: #2c3e50;
    }
    .section {
      background: #f9f9f9;
      padding: 15px;
      margin-bottom: 20px;
      border-radius: 5px;
    }
    .checkbox-item {
      margin: 10px 0;
    }
    a {
      color: #0078d4;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    .completed {
      text-decoration: line-through;
      color: #888;
    }
  </style>
</head>
<body>
  <h1>Code With Program Checklist</h1>
  <p>Welcome to the Code With Program! Complete the tasks below to prepare for our coding session. Check off each item as you finish, and use the provided resources to upskill.</p>

  <div class="section">
    <h2>1. Skill Assessment</h2>
    <p>Complete the Developer Velocity Assessment (DVA) survey to help us tailor the session to your skills.</p>
    <div class="checkbox-item">
      <input type="checkbox" id="survey" onchange="toggleCompleted('survey')">
      <label for="survey">Complete the <a href="https://forms.office.com/r/example" target="_blank">DVA Skill Survey</a></label>
    </div>
  </div>

  <div class="section">
    <h2>2. Upskilling Resources</h2>
    <p>Based on your survey results, review the relevant resources below to build your coding and Azure skills.</p>
    <h3>Coding Skills</h3>
    <div class="checkbox-item">
      <input type="checkbox" id="python" onchange="toggleCompleted('python')">
      <label for="python">Learn Python basics: <a href="https://learn.microsoft.com/en-us/shows/intro-to-python-development/" target="_blank">Microsoft Learn: Python for Beginners</a></label>
    </div>
    <div class="checkbox-item">
      <input type="checkbox" id="git" onchange="toggleCompleted('git')">
      <label for="git">Understand Git: <a href="https://learn.microsoft.com/en-us/training/modules/intro-to-git/" target="_blank">Microsoft Learn: Git and GitHub</a></label>
    </div>
    <h3>Azure Services</h3>
    <div class="checkbox-item">
      <input type="checkbox" id="azure-functions" onchange="toggleCompleted('azure-functions')">
      <label for="azure-functions">Explore Azure Functions: <a href="hhttps://learn.microsoft.com/en-us/azure/azure-functions/functions-get-started" target="_blank">Azure Functions Documentation</a></label>
    </div>
    <div class="checkbox-item">
      <input type="checkbox" id="blob-storage" onchange="toggleCompleted('blob-storage')">
      <label for="blob-storage">Learn Azure Blob Storage: <a href="https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-overview" target="_blank">Azure Blob Storage Quickstart</a></label>
    </div>
  </div>

  <div class="section">
    <h2>3. Session Prerequisites</h2>
    <p>Ensure you have the following set up before the session.</p>
    <div class="checkbox-item">
      <input type="checkbox" id="ide" onchange="toggleCompleted('ide')">
      <label for="ide">Install an IDE (e.g., <a href="https://code.visualstudio.com/" target="_blank">VS Code</a>)</label>
    </div>
    <div class="checkbox-item">
      <input type="checkbox" id="azure-account" onchange="toggleCompleted('azure-account')">
      <label for="azure-account">Set up an Azure account: <a href="https://azure.microsoft.com/en-us/free/" target="_blank">Azure Free Account</a></label>
    </div>
    <div class="checkbox-item">
      <input type="checkbox" id="sample-code" onchange="toggleCompleted('sample-code')">
      <label for="sample-code">Download sample code: <a href="https://github.com/example/sample-code" target="_blank">GitHub Repository</a></label>
    </div>
  </div>

  <div class="section">
    <h2>4. Session Goals</h2>
    <p>Review the objectives for our session.</p>
    <div class="checkbox-item">
      <input type="checkbox" id="goals" onchange="toggleCompleted('goals')">
      <label for="goals">Understand session goals (e.g., build a feature, learn Azure deployment)</label>
    </div>
  </div>

  <div class="section">
    <h2>5. Post-Session Feedback</h2>
    <p>After the session, share your feedback to help us improve.</p>
    <div class="checkbox-item">
      <input type="checkbox" id="feedback" onchange="toggleCompleted('feedback')">
      <label for="feedback">Complete the <a href="https://forms.office.com/r/example-feedback" target="_blank">Feedback Form</a></label>
    </div>
  </div>

  <script>
    function toggleCompleted(id) {
      const checkbox = document.getElementById(id);
      const label = checkbox.nextElementSibling;
      if (checkbox.checked) {
        label.classList.add('completed');
      } else {
        label.classList.remove('completed');
      }
    }

    function loadProgress() {
      const progress = JSON.parse(localStorage.getItem('codeWithProgress'));
      if (progress) {
        for (const id in progress) {
          const checkbox = document.getElementById(id);
          if (checkbox) {
            checkbox.checked = progress[id];
            toggleCompleted(id); // Update UI
          }
        }
      }
    }

    //window.onload = loadProgress; // Load progress on startup
  </script>
</script>