3. Bouwen

Bouwen week 1

Login pagina

Tijdens de 1e week van sprint 12 heb ik na het schetsen een begin gemaakt met de login pagina voor het project, wat voorlopig een versiersel is. (In semester 3 wordt deze pas werkend gemaakt).

HTML

<main>
 
    <form class="login" action="/dashboard" method="get">
        <h2>Log hier in</h2>
    
      <label for="username">Naam:</label>
      <input type="email" id="username" name="username">
     
      <label for="password">Wachtwoord:</label>
      <input type="password" id="password" name="password">
      
      <input type="submit" value="Log in">
    </form>
    </main>

CSS

.login {
    background-color: var(--Sonic-silver);
    padding: 5em;
}


h2 {
    color: var(--orange-crayola);
}


input[type="email"], input[type="password"] {
    width: 100%;
    padding: 0.4em;
}


input[type="submit"] {
    width: 100%;
}

Bouwen week 2

Dashboard en andere pagina's

Tijdens de 2e week van sprint 12 heb ik een dashboard gemaakt en heb ik daarin meerdere ejs bestanden gebouwd. Ik heb deze week vooral gewerkt om de Google API aan de praat te krijgen en dat is gelukt.

/**
 * TODO(developer): Uncomment this variable and replace with your
 *   Google Analytics 4 property ID before running the sample.
 */
let propertyId = '301922918';


// Imports the Google Analytics Data API client library.
import {BetaAnalyticsDataClient} from '@google-analytics/data';


// Using a default constructor instructs the client to use the credentials
// specified in GOOGLE_APPLICATION_CREDENTIALS environment variable.
const analyticsDataClient = new BetaAnalyticsDataClient();


// Runs a simple report.
async function runReport() {
  const [response] = await analyticsDataClient.runReport({
    property: `properties/${propertyId}`,
    dateRanges: [
      {
        startDate: '2024-03-31',
        endDate: 'today',
      },
    ],
    dimensions: [
      {
        name: 'browser',
      },
    ],
    metrics: [
      {
        name: 'activeUsers',
      },
    ],
  });


  console.log('Report result:');
  response.rows.forEach(row => {
    console.log(row.dimensionValues[0], row.metricValues[0]);
  });
}


runReport();

Verder heb ik ook in google.ejs de library chart.js geintegreerd en dat ziet er als volgt uit:

  <div>
    <canvas id="myChart"></canvas>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  
  <script>
    const ctx = document.getElementById('myChart');
  
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], 
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>

Principes en conventies

De principes en conventies waar ik me aan heb gehouden zijn dat ik 1/2 tabjes gebruik voor indenting en dat ik minimaal 1 enter regelafstand hou tussen html-elementen en in de css. Daarnaast heb ik met comments aangegeven waar de stijling ergens begint in de css en waar het eindigt.

HTML

CSS