simpleviewinc · pfmooney1 · Jun 15, 2022 · Jun 15, 2022 · Jun 15, 2022 · Jun 15, 2022
diff --git a/Week 1.1 - HTML/1. Build a Form/index.html b/Week 1.1 - HTML/1. Build a Form/index.html
@@ -8,6 +8,17 @@
 <body>
 
 	<!-- Add your code here -->
-
+	<form action="/login/" method="post">
+		<h3>Patrick's Bootcamp Login</h3>
+		<label for="email">Your Email:</label> 
+		<br>
+		<input type="email" name="email" id="email" placeholder="you@example.com" tabindex="1" required>
+		<br>
+		<label for="password">Password:</label>
+		<br>
+		<input type="password" name="password" id="password" placeholder="password" tabindex="2" required>
+		<br>
+		<button type="submit" tabindex="3" aria-label="Click to submit your email and password.">Submit</button>
+	</form>
 </body>
-</html>
+</html>
diff --git a/Week 1.1 - HTML/2. Create a Responsive Image - Resolution/index.html b/Week 1.1 - HTML/2. Create a Responsive Image - Resolution/index.html
@@ -25,6 +25,13 @@
 <body>
 
 	<!-- Add your code here -->
-
+	<picture>
+		<source srcset="https://via.placeholder.com/2000x900" media="(min-width: 1800px)">
+		<source srcset="https://via.placeholder.com/1600x720" media="(min-width: 1440px)">
+		<source srcset="https://via.placeholder.com/1200x540" media="(min-width: 1024px)">
+		<source srcset="https://via.placeholder.com/800x360" media="(min-width: 640px)">
+		<img src="https://via.placeholder.com/400x180" 
+		alt="A grey rectangle that is responsive.">
+	</picture>
 </body>
-</html>
+</html>
diff --git a/Week 1.1 - HTML/3. Create a Reponsive Image - Aspect Ratio/index.html b/Week 1.1 - HTML/3. Create a Reponsive Image - Aspect Ratio/index.html
@@ -25,6 +25,10 @@
 <body>
 
 	<!-- Add your code here -->
-
+  	<picture>
+		<source srcset="https://via.placeholder.com/1600x720" media="(min-width: 1024px)">   
+	  	<source srcset="https://via.placeholder.com/1200x900" media="(min-width: 640px)">   
+		<img src="https://via.placeholder.com/540x800" alt="Another grey rectangle that is responsive.">
+	</picture>
 </body>
-</html>
+</html>
diff --git a/Week 1.1 - HTML/4. Mock Up a Design/index.html b/Week 1.1 - HTML/4. Mock Up a Design/index.html
@@ -8,6 +8,45 @@
 <body>
 
 	<!-- Add your code here -->
+    <nav class="vertical_nav_bar">
+        <ul class="vertical_nav_bar_ul">
+            <li><a href="page1.html"><img src="circle_icon.png" height="20" width="20" alt=""></img></a></li>
+            <li><a href="page2.html"><img src="circle_icon.png" height="20" width="20" alt=""></img></a></li>
+            <li><a href="page3.html"><img src="circle_icon.png" height="20" width="20" alt=""></img></a></li>
+            <li><a href="page4.html"><img src="circle_icon.png" height="20" width="20" alt=""></img></a></li>
+            <li><a href="page5.html"><img src="circle_icon.png" height="20" width="20" alt=""></img></a></li>
+            <li><a href="page6.html"><img src="circle_icon.png" height="20" width="20" alt=""></img></a></li>
+            <li><a href="page7.html"><img src="circle_icon.png" height="20" width="20" alt=""></img></a></li>
+            <li><a href="page8.html"><img src="circle_icon.png" height="20" width="20" alt=""></img></a></li>
+            <li><a href="page9.html"><img src="circle_icon.png" height="20" width="20" alt=""></img></a></li>
+            <li><a href="page10.html"><img src="circle_icon.png" height="20" width="20" alt=""></img></a></li>
+            <li><a href="page11.html"><img src="circle_icon.png" height="20" width="20" alt=""></img></a></li>
+            <li><a href="page12.html"><img src="circle_icon.png" height="20" width="20" alt=""></img></a></li>
+        </ul>
+    </nav>
+    <main>
+    	<h2>Phase 4:</h2>
+    	<h1>Destination Thrive</h1>
+    	<h3>Objective: Create omni-channel synergy</h3>
+        <p>
+            This is the time to fully leverage your hard work and thrive. During this phase, attention... Lorem Ipsum time. 
+            Si potes legere haec verba, tu es mirabilis. Ego scio nimis paucos populos, qui Latinam intellegere postest. etc etc.
+        </p>
+        <hr>
+        <section>
+            <h4>Key Focus</h4>
+            <ul>
+                <li>Harvesting the demand created by your content marketing efforts</li>
+                <li>Scale paid media and social efforts</li>
+                <li>Leverage your new audiences</li>
+                <li>Omni-channel synergy</li>
+            </ul>
+        </section>
+        <h4>Time</h4>
+        <img src="clock_icon" alt="Small icon of a clock" aria-label="" height="80" width="80">
+        <p>approx. 24 months and beyond</p>
+    </main>
 
+
 </body>
-</html>
+</html>
diff --git a/Week 1.2 - CSS/1. Selectors - Attributes/index.html b/Week 1.2 - CSS/1. Selectors - Attributes/index.html
@@ -8,8 +8,9 @@
 <body>
 
 	<style>
-		/* Update the following line of CSS to only style the inputs of type `text` */
-		* { border: 2px solid rebeccapurple; }
+		input[type="text"] { 
+     			border: 2px solid rebeccapurple; 
+    		}
 	</style>
 
 	<input type="text" />
@@ -23,4 +24,4 @@
 	<input type="color" />
 
 </body>
-</html>
+</html>
diff --git a/Week 1.2 - CSS/2. Selectors - Children/index.html b/Week 1.2 - CSS/2. Selectors - Children/index.html
@@ -9,7 +9,9 @@
 
 	<style>
 		/* Update the following line of CSS to only style the immediate `.item` children of `.container` */
-		.container .item { border: 2px solid rebeccapurple; }
+		.container > .item { 
+      			border: 2px solid rebeccapurple; 
+    		}
 	</style>
 
 	<ul class="container">
@@ -37,4 +39,4 @@
 	</ul>
 
 </body>
-</html>
+</html>
diff --git a/Week 1.2 - CSS/3. Selectors - Siblings/index.html b/Week 1.2 - CSS/3. Selectors - Siblings/index.html
@@ -16,7 +16,7 @@
 
 	<style>
 		/* Update the following line of CSS to only style `<p>` that follow an `<h2>` */
-		p {
+		h2 + p {
 			font-size: 22px;
 			line-height: 1.5;
 			color: rebeccapurple;
@@ -37,4 +37,4 @@ <h2>The Fly Does Too</h2>
 	</section>
 
 </body>
-</html>
+</html>
diff --git a/Week 1.2 - CSS/4. Inheritance and Systems/index.html b/Week 1.2 - CSS/4. Inheritance and Systems/index.html
@@ -8,14 +8,37 @@
 <body>
 
 	<style>
-		/* Add your CSS here */
+		button {
+			border-radius: 4px;
+			color: black;
+			cursor: pointer;
+			font-weight: 900;
+			padding: 12px 32px;
+		}
+		.button-danger {
+			background-color: #FEB2B2;
+		}
+		.button-default {
+			background-color: #f5f5f5;
+		}
+		.button-link {
+			background-color: rgba(0, 0, 0, 0);
+			border: 0px;
+			border-radius: 4px;
+			color: black;
+			display: inline;
+			text-decoration: underline;
+		}
+		.button-primary {
+			background-color: #90CDF4;
+		}
 	</style>
 
 	<!-- Add as many or as few classes as needed to accomplish the goal to the buttons below -->
-	<button>Default</button>
-	<button>Primary</button>
-	<button>Link</button>
-	<button>Danger</button>
+	<button class="button-default">Default</button>
+	<button class="button-primary">Primary</button>
+	<button class="button-link">Link</button>
+	<button class="button-danger">Danger</button>
 
 </body>
-</html>
+</html>
diff --git a/Week 1.2 - CSS/5. Transitions/index.html b/Week 1.2 - CSS/5. Transitions/index.html
@@ -22,10 +22,15 @@
 			width: 100px;
 			height: 100px;
 			background-color: rebeccapurple;
+			transition: 160ms;
+		}
+		.box:hover {
+			transform: scale(2);
+			transition: 200ms;
 		}
 	</style>
 
 	<div class="box"></div>
 
 </body>
-</html>
+</html>
diff --git a/Week 1.2 - CSS/6. Tricks - Click Passthrough/index.html b/Week 1.2 - CSS/6. Tricks - Click Passthrough/index.html
@@ -29,6 +29,7 @@
 			width: 100%;
 			height: 100%;
 			background-image: linear-gradient(to bottom, transparent, black);
+			pointer-events: none;
 		}
 	</style>
 
@@ -40,4 +41,4 @@
 	</div>
 
 </body>
-</html>
+</html>
diff --git a/Week 1.3 - JavaScript/1. Filter/index.html b/Week 1.3 - JavaScript/1. Filter/index.html
@@ -13,12 +13,12 @@
 		// Custom Code BEGIN 
 		// Modify the code in this block however you need to get the desired ending array.
 		// You must store your new array in the `endingArray` variable for it to log out properly.
-		let endingArray;
+		let endingArray = startingArray.filter(x => (x % 2 === 0));
 
 		// Custom Code END
 
 		console.log(endingArray);
 	</script>
 
 </body>
-</html>
+</html>
diff --git a/Week 1.3 - JavaScript/2. Map/index.html b/Week 1.3 - JavaScript/2. Map/index.html
@@ -13,12 +13,12 @@
 		// Custom Code BEGIN 
 		// Modify the code in this block however you need to get the desired ending array.
 		// You must store your new array in the `endingArray` variable for it to log out properly.
-		let endingArray;
+		let endingArray = startingArray.map(value => ({"name": value}));
 
 		// Custom Code END
 
 		console.log(endingArray);
 	</script>
 
 </body>
-</html>
+</html>
diff --git a/Week 1.3 - JavaScript/3. Objects as a Map/index.html b/Week 1.3 - JavaScript/3. Objects as a Map/index.html
@@ -13,21 +13,14 @@
 
 		// Rewrite this function to replace the if/else logic with a map lookup.
 		function getInformation(key) {
-			let rtn;
-
-			if (key === 'date') {
-				rtn = 'October 6, 1986';
-			} else if (key === 'time') {
-				rtn = '21:13 PM';
-			} else if (key === 'mood') {
-				rtn = 'Powerful, spirited...';
-			} else {
-				rtn = 'Error: Invalid option selected...';
-			}
-
-			return rtn;
+			const mapThing = new Map([
+				["date", 'October 6, 1986'],
+				["time", '21:13 PM'],
+				["mood", 'Powerful, spirited...']
+			]);
+			return (mapThing.has(key) ? mapThing.get(key) : "Error: Invalid option selected...");
 		}
 	</script>
 
 </body>
-</html>
+</html>
diff --git a/Week 1.3 - JavaScript/4. Event Listeners/index.html b/Week 1.3 - JavaScript/4. Event Listeners/index.html
@@ -20,7 +20,9 @@ <h1 data-counter>0</h1>
 		}
 
 		// Add your code here to make clicking the button run the increment function
+		const buttonToClick = document.querySelector('[data-action="increment-counter"]');
+		buttonToClick.addEventListener("click", increment);
 	</script>
 
 </body>
-</html>
+</html>
diff --git a/Week 1.3 - JavaScript/5. DOM Manipulation/index.html b/Week 1.3 - JavaScript/5. DOM Manipulation/index.html
@@ -24,7 +24,9 @@ <h2>More Jeff Goldblum</h2>
 
 	<script>
 		// Add you code here
+		const targetHTML = document.querySelector("[type='text/template']").innerHTML;
+		document.querySelector(".container").insertAdjacentHTML("beforeEnd", targetHTML);
 	</script>
 
 </body>
-</html>
+</html>
diff --git a/Week 1.3 - JavaScript/Data Fetching/index.html b/Week 1.3 - JavaScript/Data Fetching/index.html
@@ -10,8 +10,19 @@
 	<ul class="movies"></ul>
 
 	<script>
-		// Add your code here
+		const moviesListElement = document.querySelector(".movies");
+
+		let APIData = fetch('https://ghibliapi.herokuapp.com/films')
+			.then(response => response.json())
+			.then(data => writeToDOM(data));
+
+		function writeToDOM(data) {
+			let movieTitles = [];
+			data.forEach(value => movieTitles.push(value.title));
+			let arrayOfListItems = movieTitles.map((element) => `<li>${element}</li>`).join("");
+			moviesListElement.insertAdjacentHTML("beforeend", arrayOfListItems);
+		};  
 	</script>
 
 </body>
-</html>
+</html>
diff --git a/Week 2.1 - CSS Grid/1. Responsive Grids/index.html b/Week 2.1 - CSS Grid/1. Responsive Grids/index.html
@@ -29,6 +29,8 @@
 	<style>
 		.cards {
 			/* Add your code here */
+			display: grid;
+      			grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 		}
 	</style>
 
@@ -84,4 +86,4 @@ <h2>Lorem Ipsum Dolor</h2>
 	</section>
 
 </body>
-</html>
+</html>
diff --git a/Week 2.1 - CSS Grid/2. Placing Items/index.html b/Week 2.1 - CSS Grid/2. Placing Items/index.html
@@ -19,6 +19,9 @@
 
 	<style>
 		/* Add your code here */
+		.channel {
+		    grid-area: photograph;
+		}
 	</style>
 
 	<div class="photo">
@@ -29,4 +32,4 @@
 	</div>
 
 </body>
-</html>
+</html>