simpleviewinc · raqcasti · Jun 10, 2022 · Jun 10, 2022 · Jun 17, 2022 · Jun 20, 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
@@ -7,7 +7,14 @@
 </head>
 <body>
 
-	<!-- Add your code here -->
+	<form action="/login/" method="post">
+		<label>Email: </label>
+		<input type="email" placeholder="email" alt="Email Address Entry">
+		<label>Password: </label>
+		<input type="password" placeholder="password" alt="Password Entry">
+
+		<button type="submit" alt="Submit">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
@@ -24,7 +24,12 @@
 </head>
 <body>
 
-	<!-- Add your code here -->
+	<img src="https://via.placeholder.com/400x180" alt="image" 
+	srcset="https://via.placeholder.com/2000x900 1800w,
+	https://via.placeholder.com/1600x720 1440w,
+	https://via.placeholder.com/1200x540 1024w,
+	https://via.placeholder.com/800x360 640w"
+	>
 
 </body>
 </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
@@ -24,7 +24,12 @@
 </head>
 <body>
 
-	<!-- Add your code here -->
+	<img src="https://via.placeholder.com/540x800" alt="image"
+	srcset="https://via.placeholder.com/1600x720 1024w,
+	https://via.placeholder.com/1200x900 640w"
+
+	sizes="(max-width: 1024px) 640px, 1024px"
+	>
 
 </body>
 </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
@@ -6,8 +6,33 @@
 	<title>Mock Up a Design</title>
 </head>
 <body>
-
-	<!-- Add your code here -->
+
+	<header>
+		<h1><strong>Phase 4</strong></h1>
+		<h2>Destination Thrive</h2>
+		<h3>Objective: Create omni-channel synergy</h3>
+	</header>
+
+	<p>
+		Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat recusandae, odit quasi harum cum ab sunt blanditiis delectus assumenda dolore eius doloribus, molestias, deleniti quisquam nostrum vel ullam impedit nisi illo? Perferendis minima doloremque asperiores quisquam itaque corporis blanditiis ducimus assumenda, in quam quaerat provident placeat iste vel animi sunt beatae deleniti et velit enim, distinctio, consequatur excepturi. Explicabo facere tempore numquam dolorum labore reprehenderit similique ut nesciunt facilis distinctio perferendis adipisci eum dolores voluptate voluptatum ab blanditiis iusto delectus quasi, cupiditate alias reiciendis. Ducimus ratione aspernatur iste quaerat, veniam nulla culpa suscipit eius. Ex labore modi quos ut quia odio dolores odit consequatur repudiandae id? Odio minima atque consequuntur recusandae, nobis rerum quia illo aperiam architecto eaque. Voluptatum voluptate architecto debitis excepturi, incidunt id, commodi odio cum nihil unde possimus molestias consequatur doloremque ducimus minus. Laudantium distinctio cupiditate quaerat quibusdam incidunt nam consequuntur, sit obcaecati accusantium sint sunt neque. Aliquid ad incidunt, nesciunt nihil tempora, sed, distinctio ea unde dignissimos corporis voluptates. Explicabo ullam voluptatem sint maiores voluptas nesciunt natus aliquam nulla amet quam? Esse natus tempora ea expedita!
+	</p>
+
+	<hr>
+
+	<h3><strong>Key Focus</strong></h3>
+	<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>
+
+	<h3><strong>Time</strong></h3>
+	<svg></svg>
+	<p>approx. 24 months and beyond</p>
+
 
 </body>
 </html>
diff --git a/Week 1.2 - CSS/1. Selectors - Attributes/index.html b/Week 1.2 - CSS/1. Selectors - Attributes/index.html
@@ -10,6 +10,7 @@
 	<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" />

diff --git a/Week 1.2 - CSS/2. Selectors - Children/index.html b/Week 1.2 - CSS/2. Selectors - Children/index.html
@@ -10,6 +10,7 @@
 	<style>
 		/* Update the following line of CSS to only style the immediate `.item` children of `.container` */
 		.container .item { border: 2px solid rebeccapurple; }
+		.item > .container {border: 2px solid rebeccapurple;}
 	</style>
 
 	<ul class="container">
@@ -29,6 +30,7 @@
 		</li>
 		<li class="item">
 			<ul>
+
 				<li class="item">Descendant 1</li>
 				<li class="item">Descendant 2</li>
 				<li class="item">Descendant 3</li>

diff --git a/Week 1.2 - CSS/3. Selectors - Siblings/index.html b/Week 1.2 - CSS/3. Selectors - Siblings/index.html
@@ -16,11 +16,14 @@
 
 	<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;
 		}
+
+
+
 	</style>
 
 	<section>

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,34 @@
 <body>
 
 	<style>
-		/* Add your CSS here */
+		button {
+			border-radius: 4px;
+			padding: 12px 32px;
+			color: black;
+		}
+
+		.default {
+			background-color: #f5f5f5;
+		}
+
+		.primary {
+			background-color: #90cdf4;
+		}
+
+		.link {
+			background-color: transparent;
+		}
+
+		.danger {
+			background-color: #feb2b2;
+		}
 	</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="default">Default</button>
+	<button class="primary">Primary</button>
+	<button class="Link">Link</button>
+	<button class="danger">Danger</button>
 
 </body>
 </html>
diff --git a/Week 1.2 - CSS/5. Transitions/index.html b/Week 1.2 - CSS/5. Transitions/index.html
@@ -22,6 +22,13 @@
 			width: 100px;
 			height: 100px;
 			background-color: rebeccapurple;
+			transform: scale(.5);
+			transition: 160ms;
+		}
+
+		.box:hover {
+			transform: scale(1);
+			transition: 200ms;
 		}
 	</style>
 

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>
 

diff --git a/Week 1.3 - JavaScript/1. Filter/index.html b/Week 1.3 - JavaScript/1. Filter/index.html
@@ -9,12 +9,12 @@
 
 	<script>
 		const startingArray = [1,2,3,4,5,6,7,8,9,10];
+
+		const endingArray = startingArray.filter(num => { return num % 2 === 0});
 
 		// 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;
-
 		// Custom Code END
 
 		console.log(endingArray);

diff --git a/Week 1.3 - JavaScript/2. Map/index.html b/Week 1.3 - JavaScript/2. Map/index.html
@@ -10,11 +10,11 @@
 	<script>
 		const startingArray = ['Sergio', 'Keve', 'Kam', 'Bree', 'Blake'];
 
+		const endingArray = startingArray.map(names => `name: ${names}`)
+
 		// 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;
-
 		// Custom Code END
 
 		console.log(endingArray);

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,20 +13,19 @@
 
 		// 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...';
-			}
-
+
+			const rtnMap = {
+				date: 'October 6, 1986',
+				time: '21:13 PM',
+				mood: 'Powerful, spirited...',
+				error: 'Error: Invalid option selected...',
+			};
+			rtn = rtnMap[key];
+
 			return rtn;
 		}
+
+
 	</script>
 
 </body>

diff --git a/Week 1.3 - JavaScript/4. Event Listeners/index.html b/Week 1.3 - JavaScript/4. Event Listeners/index.html
@@ -19,6 +19,8 @@ <h1 data-counter>0</h1>
 			counterEl.innerText = counter;
 		}
 
+		addEventListener('click', increment);
+
 		// Add your code here to make clicking the button run the increment function
 	</script>
 

diff --git a/Week 1.3 - JavaScript/5. DOM Manipulation/index.html b/Week 1.3 - JavaScript/5. DOM Manipulation/index.html
@@ -24,6 +24,10 @@ <h2>More Jeff Goldblum</h2>
 
 	<script>
 		// Add you code here
+		const sectionEl = document.querySelector('script[type="text/template"]');
+		const containerEl = document.querySelector('.container')
+
+		containerEl.insertAdjacentHTML('beforeend', sectionEl.innerHTML)
 	</script>
 
 </body>

diff --git a/Week 1.3 - JavaScript/Data Fetching/index.html b/Week 1.3 - JavaScript/Data Fetching/index.html
@@ -11,6 +11,29 @@
 
 	<script>
 		// Add your code here
+		const ghibliAPI = 'https://ghibliapi.herokuapp.com/films';
+		const movieEl = document.querySelector('.movies');
+
+		async function fetchTitles() {
+			const response = await fetch(ghibliAPI)
+			const data = await response.json();
+			displayTitles(data);
+		}
+
+		function displayTitles(data) {
+			data.forEach(movie => {
+				const liEl = document.createElement('li');
+				liEl.innerHTML = movie.title;
+				movieEl.appendChild(liEl);
+			});
+		}
+
+		function handleError(err) {
+			console.log('U MESSED UP DAWG!');
+		}
+
+		fetchTitles().catch(handleError);
+
 	</script>
 
 </body>

diff --git a/Week 2.1 - CSS Grid/1. Responsive Grids/index.html b/Week 2.1 - CSS Grid/1. Responsive Grids/index.html
@@ -28,7 +28,8 @@
 
 	<style>
 		.cards {
-			/* Add your code here */
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) ;
 		}
 	</style>
 

diff --git a/Week 2.1 - CSS Grid/2. Placing Items/index.html b/Week 2.1 - CSS Grid/2. Placing Items/index.html
@@ -18,7 +18,10 @@
 <body>
 
 	<style>
-		/* Add your code here */
+		.channel {
+			grid-column: 1;
+			grid-row: 1;
+		}
 	</style>
 
 	<div class="photo">