Created
November 8, 2022 04:52
-
-
Save gonzalez-aj/4644876a297165ce40abb4c188030602 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//repos | |
const pinnedRepos = [ | |
{ | |
id: 1, | |
type: 'Overview', | |
name: "gatsby-workshop", | |
description: "This workshop covers the fundamentals of developing fast, accesible sites with Gatsby, a React framework, and dive deep into the building blocks you'll need to build your own custom Gatsby sites." | |
}, | |
{ | |
id: 2, | |
type: 'Overview', | |
name: "gatsby-workshop", | |
description: "This workshop covers the fundamentals of developing fast, accesible sites with Gatsby, a React framework, and dive deep into the building blocks you'll need to build your own custom Gatsby sites." | |
}, | |
{ | |
id: 3, | |
type: 'Overview', | |
name: "gatsby-workshop", | |
description: "This workshop covers the fundamentals of developing fast, accesible sites with Gatsby, a React framework, and dive deep into the building blocks you'll need to build your own custom Gatsby sites." | |
}, | |
{ | |
id: 4, | |
type: 'Overview', | |
name: "gatsby-workshop", | |
description: "This workshop covers the fundamentals of developing fast, accesible sites with Gatsby, a React framework, and dive deep into the building blocks you'll need to build your own custom Gatsby sites." | |
}, | |
{ | |
id: 5, | |
type: 'Overview', | |
name: "gatsby-workshop", | |
description: "This workshop covers the fundamentals of developing fast, accesible sites with Gatsby, a React framework, and dive deep into the building blocks you'll need to build your own custom Gatsby sites." | |
}, | |
{ | |
id: 6, | |
type: 'Overview', | |
name: "gatsby-workshop", | |
description: "This workshop covers the fundamentals of developing fast, accesible sites with Gatsby, a React framework, and dive deep into the building blocks you'll need to build your own custom Gatsby sites." | |
} | |
]; | |
const repoArray = [ | |
{ | |
id: 1, | |
name: "cards-on-mom", | |
description: "This app randomly generates Mother's Day cards for the engineer too busy coding to buy one at Dollar General. Just input her name then a few facts and VOILA! Parental love achieved." | |
}, | |
{ | |
id: 2, | |
name: "nss-adventure", | |
description: "This app is a text-based RPG that takes you on a quest down the halls of the legendary Nashville Software School. Evern since the pandemic, the NSS doors have been closed and a mysterious entity has been growing in the shadows..." | |
}, | |
{ | |
id: 3, | |
name: "home-repo", | |
description: "This app directs you to the nearest home improvement store based on GPS, time of day, and current mood." | |
}, | |
{ | |
id: 4, | |
name: "object-of-your-affection", | |
description: "This app is a dating game that sets you up with your true love based on a set of data in an object within an array." | |
}, | |
{ | |
id: 5, | |
name: "unbreak-my-code", | |
description: "This app only fixes the code of websites dedicated to the appreciation of Toni Braxton." | |
}, | |
{ | |
id: 6, | |
name: "angelfire-filter", | |
description: "This app makes your website look like an angelfire website from circa 2003.." | |
} | |
]; | |
const projArray = [ | |
{ | |
id: 1, | |
name: "Example 1", | |
description: " Example description." | |
}, | |
{ | |
id: 2, | |
name: "my-goals", | |
description: "My goals description." | |
}, | |
{ | |
id: 3, | |
name: "Sample My Goals", | |
description: "Goals for the NSS Bootcamp." | |
}, | |
{ | |
id: 4, | |
name: "Project Example 4", | |
description: "Lorem ipsum dolor sit amet." | |
}, | |
{ | |
id: 5, | |
name: "Project Example 5", | |
description: "Work in progress." | |
} | |
]; | |
const packages = [ | |
{ | |
id: 1, | |
name: "docker", | |
description: "a software platform used for building apps", | |
}, | |
{ | |
id: 2, | |
name: "apache maven", | |
description: "a default package manager", | |
}, | |
{ | |
id: 3, | |
name: "nuget", | |
description: "a software platform used for building apps", | |
}, | |
{ | |
id: 4, | |
name: "ruby gems", | |
description: "a standard format for apps", | |
}, | |
{ | |
id: 5, | |
name: "containers", | |
description: "a single place for your team", | |
}, | |
{ | |
id: 6, | |
name: "npm", | |
description: "a single place for your team", | |
}, | |
]; | |
const randomAdj = [ | |
'arrogant', 'blithering', 'constipated', 'frisky', 'maniacal', 'quixotic', 'sexy', 'territorial', 'vengeful', 'zippy', 'existential', 'universal', 'nervous', 'toxic', 'fleek', 'sarcastic', 'pliable', 'whimsical', 'loyal', 'youthful', 'trustworthy' | |
] | |
const randomNoun = [ | |
'chariot', 'pleonasm', 'wizard', 'spigot', 'aglet', 'guitar', 'hermit', 'bicycle', 'internship', 'honeysuckle', 'cornucopia', 'loudspeaker', 'zebra', 'malaise', 'xylophone', 'limosuine', 'toothbrush', 'explosion', 'taco', 'grandmother', 'process' | |
] | |
// Main Render to DOM Function called by other functions | |
const renderToDom = (divId, htmlToRender) => { | |
const selectedDiv = document.querySelector(divId); | |
selectedDiv.innerHTML = htmlToRender; | |
}; | |
//**************** QUERY SELECTOR **************** // | |
const navDiv = document.querySelector("#navBar"); // Creates nav variable for event listeners | |
// *************** NAV BAR *************** // | |
// Renders navbar dynamically ************* // | |
// *************** NAV BAR *************** // | |
const renderedNavbar = () => { | |
const navString = | |
` | |
<nav class="navbar navbar-expand-lg bg-light"> | |
<div> | |
<button class="navbar-brand" id="overviewButton">Overview</button> | |
<button class="navbar-brand" id="repoButton">Repositories</button> | |
<button class="navbar-brand" id="projectsButton">Projects</button> | |
<button class="navbar-brand" id="packagesButton">Packages</button> | |
</div> | |
</nav> | |
`; | |
renderToDom("#navBar", navString) | |
}; | |
// ************ PLEASE WRITE OVER ME *************** // | |
// ************ SIDEBAR GOES HERE *************** // | |
// ************ REPLACE HTML PLS *************** // | |
const rederedSidebar = () => { | |
const sideString = ` | |
<div class="card text-bg-dark mb-3" style="max-width: 18rem;"> | |
<div class="card-header">Header</div> | |
<div class="card-body"> | |
<h5 class="card-title">Dark card title</h5> | |
<p class="card-text">SIDE BAR PLEASE REPLACE ME.</p> | |
</div> | |
</div> | |
`; | |
renderToDom("#sideBar", sideString) | |
}; | |
//**************** QUERY SELECTOR **************** // | |
const formHolderDiv = document.querySelector("#formHolder"); | |
// ***************** REPO ARRAY ****************** // | |
// ***************** REPO ARRAY ****************** // | |
// ***************** REPO ARRAY ****************** // | |
// Puts repo search on DOM | |
const repoSearch = document.querySelector("#repoButton"); | |
navDiv.addEventListener('click', (garbage) => { | |
if (garbage.target.id === "repoButton") { | |
const renderedSearch = | |
` | |
<input id="ihatethis" class="form-control" type="text" placeholder="Find a repository" aria-label="default input example"> | |
`; | |
renderToDom("#searchForm", renderedSearch);} | |
}) | |
const repoOnDom = (array) => { | |
let domString = ""; // Starts function with empty string | |
// Takes material from object and puts it into an HTML card after you click 'repo' button | |
for (const repo of array) { | |
domString += ` | |
<div class="card" style="width: 18rem;"> | |
<div class="card-body"> | |
<h5 class="card-title repo-name">${repo.name}</h5> | |
<p class="card-text repo-description">${repo.description}</p> | |
</div> | |
</div> | |
`; | |
} | |
// Renders HTML cards onto the DOM | |
renderToDom("#newDataDiv", domString); | |
} | |
// Dynamically renders form that lets you create a repo | |
navDiv.addEventListener('click', (mypersonalhell) => { | |
if (mypersonalhell.target.id === "repoButton") { | |
const adj = Math.floor(Math.random()*randomAdj.length); | |
const noun = Math.floor(Math.random()*randomNoun.length); | |
const renderedAddRepo = | |
` | |
<form id="i-hate-this-form"> | |
<div>Create a Repository</div> | |
<label class="form-label">Repository Name</label> | |
<input class="form-control" id="new-repo-name"> | |
<div class="form-text"> | |
Great repository names are short and memorable. Need inspiration? How about <strong>${randomAdj[adj]}-${randomNoun[noun]}</strong>? | |
</div> | |
<div><label class="form-label">Description (optional)</label> | |
<input id="new-repo-descrip" class="form-control"> | |
</div> | |
<button id="make-repo" type="submit" class="btn btn-success">Create a Repository</button> | |
</form> | |
`; | |
renderToDom("#formHolder", renderedAddRepo)} | |
}) | |
// ************** OVERVIEW BUTTON / PINNED REPOS ************** // | |
// ************** OVERVIEW BUTTON / PINNED REPOS ************** // | |
// ************** OVERVIEW BUTTON / PINNED REPOS ************** // | |
//cardsOnDom Function for Pinned Repos Array | |
const cardsOnDom = (array) => { | |
let domString = ""; | |
for (const card of array) { | |
domString += `<div class="card" style="width: 18rem;"> | |
<div class="card-body"> | |
<h5 class="card-title">${card.name}</h5> | |
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> | |
<p class="card-text">${card.description}</p> | |
<a href="#" class="card-link">Card link</a> | |
<a href="#" class="card-link">Another link</a> | |
</div> | |
</div>`; | |
} | |
renderToDom("#newDataDiv", domString); | |
} | |
// filter for navbar | |
const filter = (array, overViewCardsString) => { | |
const overViewArray = []; | |
for (const card of array) { | |
if (card.type === overViewCardsString) { | |
overViewArray.push(card); | |
} | |
} | |
return overViewArray; | |
} | |
//event for clicking and displaying pinnedRepos | |
navDiv.addEventListener('click', taco => { | |
if (taco.target.id === 'overviewButton') { | |
cardsOnDom(pinnedRepos); | |
} | |
}); | |
const pinnedRepoForm = | |
` | |
<form id="form"> | |
<div class="mb-3"> | |
<label class="form-label">Create a pinned repository</label> | |
<input type="text" class="form-control" id="name" aria-describedby="Repository Name" placeholder="Pinned repository name" required> | |
</div> | |
<div class="mb-3"> | |
<label for="exampleFormControlTextarea1" class="form-label">Description</label> | |
<div class="form-text">(optional)</div> | |
<textarea class="form-control" id="description" rows="3"></textarea> | |
</div> | |
<button type="submit" class="btn btn-success" id="createPackagesBtn">Create Repository</button> | |
</form> | |
`; | |
renderToDom("#formHolder", pinnedRepoForm); | |
const overviewForm = document.querySelector('#form'); | |
const createPinnedRepo = (e) => { | |
e.preventDefault(); // EVERY TIME YOU CREATE A FORM | |
const newPinnedObj = { | |
id: pinnedRepos.length + 1, | |
type: 'Overview', | |
name: document.querySelector("#name").value, | |
description: document.querySelector("#description").value | |
} | |
pinnedRepos.push(newPinnedObj); | |
cardsOnDom(pinnedRepos); | |
form.reset(); | |
} | |
form.addEventListener('submit', createPinnedRepo); | |
// to create unique ID. ticket explained: https://github.com/orgs/nss-evening-web-development/discussions/126 | |
const createId = (array) => { | |
if (array.length) { | |
const idArray = []; | |
for (const el of array) { | |
idArray.push(el.id); | |
} | |
return Math.max(...idArray) + 1; | |
} else { | |
return 0; | |
} | |
}; | |
// ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** // | |
// ****** ****** CLICK EVENT FOR BUTTON IN FORM DIV aka #formHolder below our "cardsOnDom" ****** ****** // | |
// ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** ****** // | |
formHolderDiv.addEventListener('click', (pleaseholdmyhand) => { | |
pleaseholdmyhand.preventDefault(); | |
// ************** A PART OF REPOSITORIES BUTTON ************ // | |
if (pleaseholdmyhand.target.id === "make-repo") { | |
const object = { | |
id: repoArray.length+1, | |
name: document.querySelector("#new-repo-name").value, | |
description: document.querySelector("#new-repo-descrip").value | |
} | |
repoArray.push(object); | |
// defines form as an HTML element so it can be reset | |
const form = document.querySelector("#i-hate-this-form"); | |
// resets form this project is my greatest failure | |
form.reset(); | |
repoOnDom(repoArray); | |
// ********** A PART OF PROJECTS BUTTON ************* // | |
// ****** CREATES NEW PROJECT BUTTON ****** // | |
} else if (pleaseholdmyhand.target.id === "projectsubmit") { | |
const newProjObj = { | |
id: createId(projArray), //students.length + 1, | |
name: document.querySelector("#projname").value, | |
description: document.querySelector("#projectdescription").value, | |
}; | |
projArray.push(newProjObj); | |
// const form = document.querySelector("#projform"); | |
// form.reset(); | |
projectsOnDom("#newDataDiv", projArray); | |
// you can't add an event listener, to something that hasn't been rendered | |
//Add an event listener for the form submit and pass it the function (callback) | |
} | |
} | |
); | |
// ****** ****** ****** ****** ****** ****** ****** ****** // | |
// ****** ****** projectsButton IN navBar ****** ****** // | |
// ****** ****** ****** ****** ****** ****** ****** ****** // | |
//Projects Button in Navbar | |
const projectsTopSection = () => { | |
const searchProjects = | |
` | |
<input class="form-control" type="text" placeholder="Search all projects" aria-label="default input example"> | |
`; | |
let navString = `<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> | |
<div class="container-fluid"> | |
<a class="navbar-brand" href="#">Open Closed</a> | |
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown"> | |
<ul class="navbar-nav"> | |
<li class="nav-item dropdown"> | |
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> | |
Sort | |
</a> | |
<ul class="dropdown-menu dropdown-menu-dark"> | |
<li><a class="dropdown-item" href="#">Action</a></li> | |
<li><a class="dropdown-item" href="#">Another action</a></li> | |
<li><a class="dropdown-item" href="#">Something else here</a></li> | |
</ul> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</nav>`; | |
const upperString = searchProjects + navString; | |
renderToDom("#searchForm", upperString); | |
}; | |
const projectsOnDom = (aDiv, array) => { | |
let projString = ""; | |
for (const proj of array) { | |
projString += ` | |
<ul class="list-group list-group"> | |
<li class="list-group-item d-flex justify-content-between align-items-start"> | |
<div class="ms-2 me-auto"> | |
<div class="fw-bold">${proj.name}</div> | |
<div class="form-text">Updated some future property ago</div> | |
${proj.description} | |
</div> | |
<span class="bg rounded-pill">•••</span> | |
</li> | |
</ul> | |
`; | |
}; | |
renderToDom(aDiv, projString); | |
}; | |
const projectsBottomSection = () => { | |
const projForm = | |
` | |
<form id="projform"> | |
<div class="mb-3"> | |
<label class="form-label">Create a new project</label> | |
<input type="text" class="form-control" id="projname" aria-describedby="Project Name" placeholder="Example 2" required> | |
</input> | |
</div> | |
<div class="mb-3"> | |
<label for="exampleFormControlTextarea1" class="form-label">Description</label> | |
<div class="form-text">(optional)</div> | |
<input type="text" class="form-control" id="projectdescription" rows="3"></input> | |
</div> | |
<button type="submit" class="btn btn-success" id="projectsubmit">Create project</button> | |
</form> | |
`; | |
renderToDom("#formHolder", projForm); | |
}; | |
//click event to show Projects | |
navDiv.addEventListener('click', event => { | |
if (event.target.id === 'projectsButton') { | |
projectsTopSection(); | |
projectsOnDom('#newDataDiv', projArray); | |
projectsBottomSection(); | |
} | |
}); | |
// **************** PACKAGES ******************* // | |
// **************** PACKAGES ******************* // | |
// **************** PACKAGES ******************* // | |
//adds pkgs on Dom | |
const packagesOnDom = (array) => { | |
let domString = ""; | |
for (const packages of array) { | |
domString += `<div class="card flex-wrap" style="width: 18rem;"> | |
<div class="card-body"> | |
<h5 class="card-title">${packages.name}</h5> | |
<p class="card-text">${packages.description}</p> | |
<button class="btn btn-primary" >Learn More</button> | |
</div> | |
</div>`; | |
} | |
renderToDom("#newDataDiv", domString); | |
}; | |
const pkgsForm = | |
` | |
<form id="pkgsform"> | |
<div class="mb-3"> | |
<label class="form-label">Create new package</label> | |
<input type="text" class="form-control" aria-describedby="Package Name" placeholder="package name" required> | |
</div> | |
<div class="mb-3"> | |
<label for="exampleFormControlTextarea1" class="form-label">Description</label> | |
<div class="form-text">(optional)</div> | |
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> | |
</div> | |
<button type="submit" class="btn btn-success" id="createPackagesBtn">Create packages</button> | |
</form> | |
`; | |
renderToDom("#formHolder", pkgsForm); | |
//deletes pkg | |
//if (e.target.id.includes("delete")) { | |
//const [, id] = e.target.id.split("--"); | |
//const index = packages.findIndex(e => e.id === Number(id)); | |
//const removed = packages.splice(index, 1); | |
//packages.push(removed[0]); | |
//packagesOnDom(packages); | |
navDiv.addEventListener('click', event => { | |
if (event.target.id === 'packagesButton') { | |
packagesOnDom(packages); | |
} | |
}); | |
//Creates package | |
// *************** FOOTER ************** // | |
// ***** Dynamically render footer ******// | |
// *************** FOOTER ************* // | |
const footDiv = document.querySelector("#footer"); | |
const renderedFooter = () => { | |
const footString = | |
` | |
<nav class="navbar navbar-expand-lg bg-light"> | |
<div id="copyright"> | |
<em>© 2022 FakeBook, Inc. </em> | |
<a href="#">Terms</a> | |
<a href="#">Privacy</a> | |
<a href="#">Security</a> | |
<a href="#">Status</a> | |
<a href="#">Help</a> | |
<a href="#">Contact FakeBook</a> | |
<a href="#">Pricing</a> | |
<a href="#">API</a> | |
<a href="#">Training</a> | |
<a href="#">Blog</a> | |
<a href="#">About</a> | |
</div> | |
</nav> | |
`; | |
renderToDom("#footer", footString) | |
}; | |
// start app function | |
const startApp = () => { | |
renderedNavbar(); | |
rederedSidebar(); | |
renderedFooter(); | |
} | |
startApp(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment