seijno / the-web-is-for-everyone-interactive-functionality Goto Github PK

This project forked from fdnd-task/the-web-is-for-everyone-interactive-functionality

0.0 0.0 0.0 81 KB

Ontwerp en maak voor een opdrachtgever een interactieve toepassing die voor iedereen toegankelijk is

Home Page: https://scary-bass-jumpsuit.cyclic.app

License: MIT License

JavaScript 29.25% CSS 25.30% EJS 45.45%

the-web-is-for-everyone-interactive-functionality's Introduction

Fork deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je in: docs/INSTRUCTIONS.md

Titel

Beschrijving

Gebruik

Kenmerken

Installatie

Bronnen

Licentie

This project is licensed under the terms of the MIT license.

the-web-is-for-everyone-interactive-functionality's People

Contributors

the-web-is-for-everyone-interactive-functionality's Issues

Javascript geselcteerde bericht uit als Javascript uit staat

Als mijn javascript uit staat zie ik nogsteeds dat er iets staat over hoeveel ik er heb geselecteerd maar dit doet niks. Waarom doe je dit niet uit? Deze tekst kan je in je javascript inwerken

Dit is inderdaad een enhancement.

the-web-is-for-everyone-interactive-functionality/views/index.ejs

Line 5 in 8f5d87b

<p>U heeft (<span id="selected">0</span>) SDG's geselecteerd</p>

MEER SERVER SIDE CODE

Ik loop nu achter met server side coding, hier moet ik meer mee doen.

Inspringers

let op dat de code netjes is. qua tabs en regellijnen

HTML (EJS)

the-web-is-for-everyone-interactive-functionality/views/index.ejs

Lines 6 to 20 in 5558c12

    
           <main> 
        
               <form action="/" method="POST"> 
        
                   <ul> 
        
                   <% sdgs.forEach(sdg => { %> 
        
                   <li> 
        
                       <label> 
        
                           <input class="choose" type="checkbox" name="<%= sdg.title %>" value="<%= sdg.id %>"> 
        
                           <img src="https://fdnd-agency.directus.app/assets/<%= sdg.icon %>" alt="<%= sdg.id %>. <%= sdg.title %>"> 
        
                       </label> 
        
                   </li> 
        
                   <% }); %> 
        
                   </ul> 
        
                   <input class="submitBtn" type="submit" value="Verder"> 
        
               </form> 
        
           </main>

In jouw project is niet veel HTML te vinden, maar de HTML die er is heeft mooie nesting.

Binnen je CSS staan de algemene selectoren mooi bovenaan in het bestand. Verder maak je beperkt gebruik van classes, maar als je ze gebruikt staan ze meer onderaan in de specifieke sectie van de code. Ziet er goed uit!

Variables bij elkaar

variables moeten bij mekaar

Node & Express

De volgorde van je routes zijn logisch gerangschikt en gegroepeerd. Je hebt eerst je GET-Route en daarna volgt je POST-Route.

console.log weghalen als iets af is

als een functie klaar is kunnen alle console.logs van die functie weg.

Images "avif" geen "avig"

Mijn browser support avif fotos maar deze werken niet op mijn website. Is dit misschien een error in jou code?

Ik zie dat je ?format=avig verkeert gebruikt want het is geen avig maar avif. Probeer dit te verbeteren door dit te gebruiken:

<picture> 
    <source srcset="https://fdnd-agency.directus.app/assets/<%= sdg.icon %>?format=avif" type="image/avif"> 
    <source srcset="https://fdnd-agency.directus.app/assets/<%= sdg.icon %>?format=webp" type="image/webp"> 
    <img src="https://fdnd-agency.directus.app/assets/<%= sdg.icon %>" height="112" width="112" value="<%= sdg.id %>" alt="<%= sdg.title %>"> 
</picture>

the-web-is-for-everyone-interactive-functionality/views/index.ejs

Lines 14 to 18 in 8f5d87b

    
                           <picture> 
        
                               <source srcset="https://fdnd-agency.directus.app/assets/<%= sdg.icon %>?format=avig" type="image/avig"> 
        
                               <source srcset="https://fdnd-agency.directus.app/assets/<%= sdg.icon %>?format=webp" type="image/webp"> 
        
                               <img src="https://fdnd-agency.directus.app/assets/<%= sdg.icon %>" height="112" width="112" value="<%= sdg.id %>" alt="<%= sdg.title %>"> 
        
                           </picture>

Er bestaat geen bron voor dit 😂

Meta tag has no description

Door een lighthouse test te doen kwam ik erachter dat je geen meta description had

<meta property="og:description" content="Home">

Locatie van issue

the-web-is-for-everyone-interactive-functionality/views/partials/head.ejs

Lines 3 to 9 in f60e453

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="./style.css">

<title>hand/foot print</title>

<script src="./script.js" defer></script>

</head>

Bron: https://developer.chrome.com/docs/lighthouse/seo/meta-description/?utm_source=lighthouse&utm_medium=devtools

	<main>
	<form action="/" method="POST">
	<ul>
	<% sdgs.forEach(sdg => { %>
	<li>
	<label>
	<input class="choose" type="checkbox" name="<%= sdg.title %>" value="<%= sdg.id %>">
	<img src="https://fdnd-agency.directus.app/assets/<%= sdg.icon %>" alt="<%= sdg.id %>. <%= sdg.title %>">
	</label>
	</li>
	<% }); %>
	</ul>
	<input class="submitBtn" type="submit" value="Verder">
	</form>
	</main>

	<picture>
	<source srcset="https://fdnd-agency.directus.app/assets/<%= sdg.icon %>?format=avig" type="image/avig">
	<source srcset="https://fdnd-agency.directus.app/assets/<%= sdg.icon %>?format=webp" type="image/webp">
	<img src="https://fdnd-agency.directus.app/assets/<%= sdg.icon %>" height="112" width="112" value="<%= sdg.id %>" alt="<%= sdg.title %>">
	</picture>

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="./style.css">
	<title>hand/foot print</title>
	<script src="./script.js" defer></script>
	</head>

seijno / the-web-is-for-everyone-interactive-functionality Goto Github PK

the-web-is-for-everyone-interactive-functionality's Introduction

Titel

Inhoudsopgave

Beschrijving

Gebruik

Kenmerken

Installatie

Bronnen

Licentie

the-web-is-for-everyone-interactive-functionality's People

Contributors

the-web-is-for-everyone-interactive-functionality's Issues

Recommend Projects

Recommend Topics

Recommend Org