Periode 1 - BibekMA/connect-your-tribe-profile-card GitHub Wiki
We hebben uitgelegd gekregen wat Node.JS is en zijn direct begonnen met het opzetten van Node.js op onze laptop
- Als eerst heb ik de instructies.md gescand en vervolgens de eerste paar stappen goed doornomen.
- Als volgt heb ik de leertaak geforked/cloned in mijn VS code
- Om de node.js installatie af te maken had ik in mijn Terminal de NPM geïnstalleerd
- Daarnaast had ik ook mijn visite kaartje in het mapje Public gezet
- Als laats was ik een beetje aan het experimenteren met de files die in vieuws stonden
Nu alls is opgezet kunnen we dinsdag verder met daadwerkelijk coderen. Als ik het goed heb begrepen krijgen we stap voor stap alles uitgelegd tijdens de les van morgen.
Als eerste heb ik een schets gemaakt voor de layout van de profile card.
![Schermafbeelding 2024-02-07 om 20 57 36](https://private-user-images.githubusercontent.com/144009662/303120069-a8f56e05-77c5-4275-8765-506395def47c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIwNDExOTgsIm5iZiI6MTcyMjA0MDg5OCwicGF0aCI6Ii8xNDQwMDk2NjIvMzAzMTIwMDY5LWE4ZjU2ZTA1LTc3YzUtNDI3NS04NzY1LTUwNjM5NWRlZjQ3Yy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyN1QwMDQxMzhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04NjJlMDhjZjE4YWQxNWM0MzhhMDk4NWFiMjljZmJjNDgwZGYyZWQ4NTllMGE0YmFhNzhlODQzNDViNTA3NjcwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.EKCeKA7FxRAps812uXMQBzSUmr_ML2keUiEDuOOF1no)
Hier staat de breakdown schets van de profile card. Onderin staat welke kleur voor wat staat.
Hier heb ik mijn nodeJS geschreven.
<img src= <%= avatar %> alt="">
<h1><%= name %></h1>
<h2><%= nickname %></h2>
<div></div>
<h3>Bio</h3>
<p><%= bio %></p>
"id": 19,
"name": "Bibek",
"prefix": "",
"surname": "Mainali",
"role": [
"member"
],
"nickname": "",
"github_handle": "",
"website": "",
"bio": "🫡",
"avatar": "",
"email": "",
"phone_number": "",
"squad_id": null,
"custom": ""
![Schermafbeelding 2024-02-09 om 09 41 12](https://private-user-images.githubusercontent.com/144009662/303596902-c4e0bdad-3fe2-488c-9952-79335bfffa74.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIwNDExOTgsIm5iZiI6MTcyMjA0MDg5OCwicGF0aCI6Ii8xNDQwMDk2NjIvMzAzNTk2OTAyLWM0ZTBiZGFkLTNmZTItNDg4Yy05OTUyLTc5MzM1YmZmZmE3NC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyN1QwMDQxMzhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lYjVmYjY3OTYwZTVjZTM4ZTcyNjI0ZTBjYTdkMjNkZmQ2MzNhZDc4NjdhMTAyYjc2NDlkOWRjOTk2NzIyMjI4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.cM1r5CbXrtclLUXhRjc2vW48KSUtQ4vAHEK5hDxvwow)
![Schermafbeelding 2024-02-09 om 09 40 43](https://private-user-images.githubusercontent.com/144009662/303596926-796d7aa2-2c92-4020-96b2-dec788e34d41.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIwNDExOTgsIm5iZiI6MTcyMjA0MDg5OCwicGF0aCI6Ii8xNDQwMDk2NjIvMzAzNTk2OTI2LTc5NmQ3YWEyLTJjOTItNDAyMC05NmIyLWRlYzc4OGUzNGQ0MS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyN1QwMDQxMzhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mZmE5ZjE3OWY3Mjg5NTkwMDY1MDJkNmEyNDU4MTE0NjZkNjM3YzRmNGMwMmNlZTdiNzhhM2ViZTZhMTZjZmU3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.CTEok8wNN0-FTVjnhSRgHlc3kc8XgQDknLcRaJjFL7g)
![Schermafbeelding 2024-02-09 om 09 42 37](https://private-user-images.githubusercontent.com/144009662/303597084-6ebe205d-07e8-430e-946e-dc81a6e3e888.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIwNDExOTgsIm5iZiI6MTcyMjA0MDg5OCwicGF0aCI6Ii8xNDQwMDk2NjIvMzAzNTk3MDg0LTZlYmUyMDVkLTA3ZTgtNDMwZS05NDZlLWRjODFhNmUzZTg4OC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyN1QwMDQxMzhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02YWJmMDhiZjJiZTZiMmQyYWIyOTI1YjcwZjc4YTE5MDE2Y2M0ZmI1MmFkNTYyMTg1OWM1OWRkZjcyZGYzM2MyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.wYs-8xNGZfrDf76Ag4smO00CDcUSTcffv8jY47VzqCA)
Om de terminal te openen heb je een schortcut in VS code. Control `
Als je vervolgens de terminal weer te sluiten doe je dit Control C
Ook kun je een voorbeeld van je visite kaartje openen: NPM start
Als die gestart is kun je vervolgens op de link klikken om naar het voorbeeld toe te gaan
![Schermafbeelding 2024-02-05 om 16 55 05](https://private-user-images.githubusercontent.com/144009662/302350127-f8fc9567-b08c-4007-a1a4-652bc53d4c6f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIwNDExOTgsIm5iZiI6MTcyMjA0MDg5OCwicGF0aCI6Ii8xNDQwMDk2NjIvMzAyMzUwMTI3LWY4ZmM5NTY3LWIwOGMtNDAwNy1hMWE0LTY1MmJjNTNkNGM2Zi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyN1QwMDQxMzhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03MmE3YjZlNzUzNzQwZTNhOWY2NDlkMGNkY2I4NTU0ZmYxYWNlNGY5ZmExOTgxNmExNThjNjAxMjhmYzMyZmFiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.w4Oyz5pMrlJJrYrmIyJppEd1LhA0Fa-pH3IZImqLb7k)
In onze code hebben we nodemon gedownload via de terminal. Met nademon hoef je niet elke keer je de terminal te stoppen en starten om je update te zien. Het werkt dus een beetje het zelfde als de live server, elke keer als je er iets veranderd in je code, verandert dat mee in je local host.
- als eerst heb ik nodemon geïnstalleerd via de terminal
- als volgt heb ik hem in mijn code gezet.
Toen ik de de site live wilden zetten kreeg ik een error over nodemon, blijkbaar werkt nodemon niet in cyclic. Zo heb ik het opgelost
"dev": "nodemon server.js"
![Schermafbeelding 2024-02-07 om 20 52 56](https://private-user-images.githubusercontent.com/144009662/303118795-93ea52e5-9cc5-40b5-96a3-0d22f5caf99f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIwNDExOTgsIm5iZiI6MTcyMjA0MDg5OCwicGF0aCI6Ii8xNDQwMDk2NjIvMzAzMTE4Nzk1LTkzZWE1MmU1LTljYzUtNDBiNS05NmEzLTBkMjJmNWNhZjk5Zi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyN1QwMDQxMzhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04MWM5YmQ0MjEzMmZjMjMyNWQ1OTVlOTk1YTM0YmJmMmJjMmQ3YjE1NWE3ODI2NzZmZDIxMzE5NzM5OWZkYjBlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.5Mleoj4ZkTQG3cRmKWRXR5CyO92nDYjqD1ZzjgIW1lY)
Ik heb de wesbite live gezet in cyclic https://clever-teal-slippers.cyclic.app
Vrijdag 9-02
https://github.com/TomDeeterink1/connect-your-tribe-profile-card/issues/4 https://github.com/TomDeeterink1/connect-your-tribe-profile-card/issues/3
https://github.com/yujing-student/connect-your-tribe-profile-card/issues/5 https://github.com/yujing-student/connect-your-tribe-profile-card/issues/3
We hebben heel wat informatie gekregen over Node.JS en het ziet er allemaal niet makkelijk uit, maar dit zelfde gevoel had ik ook aan het begin van het jaar toen ik HTML en CSS zag. Ik ben er daarom van overtuigd dat ik het uiteindelijk wel zal begrijpen, alleen zal dit vast niet makkelijk zijn 😣😄
https://github.com/yujing-student/connect-your-tribe-profile-card/issues/6
https://github.com/koeenm/connect-your-tribe-profile-card/issues/4
https://github.com/SamaraFellaDina/connect-your-tribe-profile-card/issues/8
https://github.com/TomDeeterink1/connect-your-tribe-profile-card/issues/6