tomdeeterink1 / connect-your-tribe-profile-card Goto Github PK

This project forked from fdnd-task/connect-your-tribe-profile-card

0.0 0.0 0.0 86 KB

Redesign je visitekaartje op basis van een bestaande API.

Home Page: https://long-erin-salamander-wrap.cyclic.app/new

License: MIT License

JavaScript 15.32% CSS 48.25% EJS 36.43%

connect-your-tribe-profile-card'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

Kenmerken

Installatie

Gebruik

Bronnen

Licentie

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

connect-your-tribe-profile-card's People

Contributors

connect-your-tribe-profile-card's Issues

Default styling voor a knoppen of buttons

Vertel over je issue
Je knopjes zijn niet hetzelfde. Dit is heel fijn als de meeste knoppen op elkaar lijken zodat ze niet anders eruit zien. Bij de repo buttons. Ene color is wit en de andere zwart. Probeer dit hetzelfde te houden

Locatie:

connect-your-tribe-profile-card/public/style.css

Line 37 in 6ccbf36

color: var(--midnight);

Bronnen:

freecodecamp.org/css-button-style-hover-color-and-background/

Javascript in index.ejs

Vertel over je issue
Probeer de script tag in een script.js bestand te doen, bijvoorbeeld in public/scripts/script.js

Locatie:

connect-your-tribe-profile-card/views/new.ejs

Lines 22 to 60 in 6ccbf36

    
           <script> 
        
               // Function to make buttons move in the right way 
        
               function toggleButtonVisibility() { 
        
               // Define the elements that are used in the html 
        
               let selectElement = document.querySelector('.repo-select'); 
        
               let selectedValue = selectElement.value; 
        
               // Connect html buttons to const 
        
               const button = document.getElementById('triple'); 
        
               const button2 = document.getElementById('portfolio'); 
        
               const button3 = document.getElementById('berain'); 
        
               if (selectedValue === 'default') { 
        
                   button.style.marginLeft = '-300px'; 
        
                   button2.style.marginLeft = '-300px'; 
        
                   button3.style.marginLeft = '-300px'; 
        
               } else { 
        
                   if (selectedValue === 'Triple') { 
        
                   button2.style.marginLeft = '-300px'; 
        
                   button3.style.marginLeft = '-300px'; 
        
                   button.style.marginLeft = '0px'; 
        
               } else { 
        
                   if (selectedValue === 'Portfolio') { 
        
                       button.style.marginLeft = '-300px'; 
        
                       button2.style.marginLeft = '0px'; 
        
                       button3.style.marginLeft = '-300px'; 
        
                   } else { 
        
                       if (selectedValue === 'B-Rain') { 
        
                       button.style.marginLeft = '-300px'; 
        
                       button2.style.marginLeft = '-300px'; 
        
                       button3.style.marginLeft = '0px'; 
        
                   } 
        
                   } 
        
               } 
        
               } 
        
           } 
        
               </script>

Bronnen:

Heb ik niet

tip leesbare code

connect-your-tribe-profile-card/views/new.ejs

Lines 3 to 20 in 6ccbf36

    
           <section class="card"> 
        
               <h1> <%= data.name %> </h1> 
        
               <h2> <%= data.surname %> </h2> 
        
               <p> <%= data.bio %> </p> 
        
               <a class="link" href=" <%= data.website %> "> Mijn Website</a> 
        
               <a class="link secondary" href=" <%= data.github_handle%> "> Mijn Github</a> 
        
               <!-- Choose a repo with the select element--> 
        
               <select class="repo-select"  onchange="toggleButtonVisibility()"> 
        
                   <option class="option" value="default">Select a reposatory</option> 
        
                   <option class="option" value="Portfolio">Portfolio</option> 
        
                   <option class="option" value="Triple">Triple page</option> 
        
                   <option class="option" value="B-Rain">B-Rain</option> 
        
               </select> 
        
               <!-- These buttons are used for the javascript function, they are not visible in the website at frist sight --> 
        
               <a id="portfolio" class="link" href=" https://github.com/TomDeeterink1/portfolio-site "> Portfolio</a> 
        
               <a id="triple" class="link" href=" https://github.com/TomDeeterink1/the-startup-responsive-interactieve-website "> Triple webpage</a> 
        
               <a id="berain" class="link" href=" https://github.com/TomDeeterink1/fix-the-flow-interactive-website "> B-rain Webpage</a> 
        
           </section>

er mag wel een enter komen na : Mijn Github zodat er meer ruimte is tussen de html elementen

dit heb je wel mooi gedaan bij je javascript code die eronder zit

je visitekaartje vind ik er mooi uitzien

Mooie kleuren gebruikt

Je hebt in je profile card mooie kleuren gebruikt die elkaar goed complimenteren.

Aparte file voor JS

Je schrijft nu nog JS in je HTML file, je kunt daar een aparte file voor gebruiken.

connect-your-tribe-profile-card/views/new.ejs

Line 22 in 6ccbf36

Je gebruikt data. , hoeft niet perse als je een kleine aanpassing maakt in je code

Je gebruik nu nog data. maar als je een kleine aanpassing maakt, dan hoeft dat niet

Als je naar de file server.js gaat, op lijn 8 waar const data staat, verandert naar const { data }, dan kun je direct <=% name => opschrijven

const { data } = await fetchJson('https://fdnd.directus.app/items/person/19')

connect-your-tribe-profile-card/views/new.ejs

Lines 4 to 6 in 6ccbf36

    
           <h1> <%= data.name %> </h1> 
        
           <h2> <%= data.surname %> </h2> 
        
           <p> <%= data.bio %> </p>

	<script>

	// Function to make buttons move in the right way
	function toggleButtonVisibility() {
	// Define the elements that are used in the html
	let selectElement = document.querySelector('.repo-select');
	let selectedValue = selectElement.value;
	// Connect html buttons to const
	const button = document.getElementById('triple');
	const button2 = document.getElementById('portfolio');
	const button3 = document.getElementById('berain');

	if (selectedValue === 'default') {
	button.style.marginLeft = '-300px';
	button2.style.marginLeft = '-300px';
	button3.style.marginLeft = '-300px';

	} else {
	if (selectedValue === 'Triple') {
	button2.style.marginLeft = '-300px';
	button3.style.marginLeft = '-300px';
	button.style.marginLeft = '0px';
	} else {
	if (selectedValue === 'Portfolio') {
	button.style.marginLeft = '-300px';
	button2.style.marginLeft = '0px';
	button3.style.marginLeft = '-300px';
	} else {
	if (selectedValue === 'B-Rain') {
	button.style.marginLeft = '-300px';
	button2.style.marginLeft = '-300px';
	button3.style.marginLeft = '0px';
	}
	}
	}
	}

	}
	</script>

	<section class="card">
	<h1> <%= data.name %> </h1>
	<h2> <%= data.surname %> </h2>
	<p> <%= data.bio %> </p>
	<a class="link" href=" <%= data.website %> "> Mijn Website</a>
	<a class="link secondary" href=" <%= data.github_handle%> "> Mijn Github</a>
	<!-- Choose a repo with the select element-->
	<select class="repo-select" onchange="toggleButtonVisibility()">
	<option class="option" value="default">Select a reposatory</option>
	<option class="option" value="Portfolio">Portfolio</option>
	<option class="option" value="Triple">Triple page</option>
	<option class="option" value="B-Rain">B-Rain</option>
	</select>
	<!-- These buttons are used for the javascript function, they are not visible in the website at frist sight -->
	<a id="portfolio" class="link" href=" https://github.com/TomDeeterink1/portfolio-site "> Portfolio</a>
	<a id="triple" class="link" href=" https://github.com/TomDeeterink1/the-startup-responsive-interactieve-website "> Triple webpage</a>
	<a id="berain" class="link" href=" https://github.com/TomDeeterink1/fix-the-flow-interactive-website "> B-rain Webpage</a>
	</section>

tomdeeterink1 / connect-your-tribe-profile-card Goto Github PK

connect-your-tribe-profile-card's Introduction

Titel

Inhoudsopgave

Beschrijving

Kenmerken

Installatie

Gebruik

Bronnen

Licentie

connect-your-tribe-profile-card's People

Contributors

connect-your-tribe-profile-card's Issues

Recommend Projects

Recommend Topics

Recommend Org