simpleviewinc · andrea-s21 · Jun 9, 2022 · Jun 10, 2022 · Jun 16, 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
@@ -8,6 +8,12 @@
 <body>
 
 	<!-- Add your code here -->
-
+	<form action="/login/" method="POST">
+		<label for="email">Email:</label>
+		<input type="email" name="email" placeholder="me@example.com" aria-required="true" required>
+		<label for="password" placeholder="me@example.com">Password:</label>
+		<input type="text" name="password" placeholder="password" aria-required="true" required>
+		<button type="submit">Submit</button>
+	</form>
 </body>
 </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,11 @@
 <body>
 
 	<!-- Add your code here -->
-
+	<img src="https://via.placeholder.com/400x180" alt="size placeholder image" width="400" height="180"
+		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
@@ -25,6 +25,17 @@
 <body>
 
 	<!-- Add your code here -->
+	<!-- <img src="https://via.placeholder.com/540x800" alt="image size placeholder image" style="max-width: 100%"
+		srcset="https://via.placeholder.com/1600x720 1024w,
+				https://via.placeholder.com/1200x900 640w"
+	> -->
+	<picture>
+		<source media="(min-width: 1024px)"
+		srcset="https://via.placeholder.com/1600x720">
+		<source media="(min-width: 640px)"
+		srcset="https://via.placeholder.com/1200x900 ">
+		<img src="https://via.placeholder.com/540x800" alt="size placeholder image" width="540" height="800">
+	</picture>
 
 </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
@@ -8,6 +8,20 @@
 <body>
 
 	<!-- Add your code here -->
+	<h2><strong>Phase 4:</strong></h2>
+	<h1>Destination Thrive</h1>
+	<h3>Objective: Create Omni-channel synergy</h3>
+	<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed voluptate dolorum quasi sapiente harum aspernatur ullam, earum ipsam architecto temporibus quam quo veritatis, fugit est quidem asperiores accusamus, sint aut.</p>
+	<hr>
+	<h4>KEY FOCUS:</h4>
+	<ul>
+		<li>This is point 1</li>
+		<li>This is point 2</li>
+		<li>This is point 3</li>
+		<li>This is point 4</li>
+	</ul>
+	<h4>TIME</h4>
+	<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
@@ -9,7 +9,7 @@
 
 	<style>
 		/* Update the following line of CSS to only style the inputs of type `text` */
-		* { border: 2px solid rebeccapurple; }
+		[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
@@ -9,7 +9,7 @@
 
 	<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">

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;

diff --git a/Week 1.2 - CSS/4. Inheritance and Systems/index.html b/Week 1.2 - CSS/4. Inheritance and Systems/index.html
@@ -9,13 +9,23 @@
 
 	<style>
 		/* Add your CSS here */
+		button {border-radius: 4px;
+					padding: 12px 32px;
+					color: black;
+					cursor: pointer;}
+
+		.btn-default {color: #f5f5f5;}
+		.btn-primary {background: #90CDF4;}
+		.btn-link {background: transparent;}
+		.btn-danger {background: #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="btn-defalut">Default</button>
+	<button class="btn-primary">Primary</button>
+	<button class="btn-link">Link</button>
+	<button class="btn-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,7 +22,14 @@
 			width: 100px;
 			height: 100px;
 			background-color: rebeccapurple;
+			transition: 160ms ease-in;
 		}
+
+		.box:hover {
+			transform: scale(2);
+			transition: 200ms ease-out;
+		}
+
 	</style>
 
 	<div class="box"></div>

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,7 +29,9 @@
 			width: 100%;
 			height: 100%;
 			background-image: linear-gradient(to bottom, transparent, black);
+			pointer-events: none;
 		}
+
 	</style>
 
 	<div class="container">

diff --git a/Week 1.3 - JavaScript/1. Filter/index.html b/Week 1.3 - JavaScript/1. Filter/index.html
@@ -13,7 +13,9 @@
 		// 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(function(n) {
+			return n % 2 === 0;
+		});
 
 		// Custom Code END
 

diff --git a/Week 1.3 - JavaScript/2. Map/index.html b/Week 1.3 - JavaScript/2. Map/index.html
@@ -13,7 +13,11 @@
 		// 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;
+
+		let endingArray = startingArray.map(function(str){
+			return({name: str})
+		});
 
 		// Custom Code END
 

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
@@ -1,33 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Objects as a Map</title>
 </head>
+
 <body>
-	
+
 	<script>
 		const information = getInformation('date');
 		console.log(information);
 
 		// 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...';
+		function getInformation(info) {
+			const data = {
+				date: 'October 6, 1986',
+				time: '21:13 PM',
+				mood: 'Powerful, spirited...',
+				__noSuchMethod__: 'Error: Invalid option selected...',
 			}
-
-			return rtn;
-		}
+			return data[info] || data.__noSuchMethod__;
+		};
 	</script>
 
 </body>
+
 </html>
diff --git a/Week 1.3 - JavaScript/4. Event Listeners/index.html b/Week 1.3 - JavaScript/4. Event Listeners/index.html
@@ -20,6 +20,11 @@ <h1 data-counter>0</h1>
 		}
 
 		// Add your code here to make clicking the button run the increment function
+
+		const button = document.querySelector('[data-action="increment-counter"]');
+
+		button.addEventListener('click', increment);
+
 	</script>
 
 </body>

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,13 @@ <h2>More Jeff Goldblum</h2>
 
 	<script>
 		// Add you code here
+
+		const scriptHTML = document.querySelector('script');
+		scriptHTML.setAttribute('id', 'script-html');
+
+		const main = document.querySelector('.container');
+		main.insertAdjacentHTML('beforeend', scriptHTML.innerText);
+
 	</script>
 
 </body>

diff --git a/Week 1.3 - JavaScript/Data Fetching/index.html b/Week 1.3 - JavaScript/Data Fetching/index.html
@@ -1,17 +1,45 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Data Fetching</title>
 </head>
+
 <body>
-	
+
 	<ul class="movies"></ul>
-	
+
 	<script>
 		// Add your code here
+		const baseEndpoint = 'https://ghibliapi.herokuapp.com';
+		const moviesEndpoint = `${baseEndpoint}`;
+		moviesEl = document.querySelector('.movies');
+
+		async function fetchMovies(films) {
+			const response = await fetch(`${moviesEndpoint}/films`);
+			const movies = await response.json();
+			let displayMovies = movies.map(function (movie) {
+				for (i = 0; i <= movies.length - 1; i++) {
+					const moviesList = document.createElement('li');
+					moviesList.innerHTML = movies[i];
+					moviesEl.appendChild(moviesList);
+					return moviesList.textContent = `${movie.title}`;
+				}
+			})
+		}
+
+		function handleError(err) {
+			console.log('Oh No!');
+			console.log(err);
+			moviesEl.textContent = `Something went wrong: ${err}`;
+		}
+
+		fetchMovies().catch(handleError);
+
 	</script>
 
 </body>
+
 </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>
 

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,10 @@
 
 	<style>
 		/* Add your code here */
+		.channel {
+			position: absolute;
+		}
+
 	</style>
 
 	<div class="photo">