KevinWorkman · jmmayes012 · Jan 20, 2022 · Jan 21, 2022 · Jan 21, 2022 · Jan 21, 2022
diff --git a/index.html b/index.html
@@ -4,8 +4,8 @@
     <title>Intro to Web Development</title>
   </head>
   <body>
-    <h1>Intro to Web Development</h1>
-    <p>This site contains homework projects for Intro to Web Development.</p>
+    <h1>Intro to Web Development!!!</h1>
+    <p>This site contains Jon's homework projects for Intro to Web Development.</p>
     <ul>
       <li><a href="week-01-html/index.html">Week 01: HTML</a></li>
       <li><a href="week-02-css/index.html">Week 02: CSS</a></li>
@@ -22,4 +22,4 @@ <h1>Intro to Web Development</h1>
       <li><a href="week-zz-scratch/index.html">Week ZZ: Scratch Directory</a></li>
     </ul>
   </body>
-</html>
+</html>
diff --git a/week-01-html/img1.jpg b/week-01-html/img1.jpg
diff --git a/week-01-html/index.html b/week-01-html/index.html
@@ -1,10 +1,25 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Hello World</title>
+    <title>Hello World?</title>
   </head>
   <body>
-    <h1>Hello World</h1>
+    <h1>Hello World!</h1>
     <p>Welcome to my webpage!</p>
+    <a href="https://en.wikipedia.org/wiki/Doughnut">Hey, check out my favorite Wiki article!</a>
+<p> And here is a list of random items I just thought of</p>
+    <ul>
+      <li>Cast Iron Pan</li>
+      <li>Scented Candle</li>
+      <li>Screwdriver</li>
+    </ul>
+    <h2>And check out this picture of this cool bird!</h2>
+    <img src="img1.jpg" />
+<article>
+  <h3>Super Important Stuff!</h3>
+  <p>This is really important stuff that needs to be read
+    this instant, its definitely not that I ran out of ideas
+    and cannot really think of aything else to write</p>
+</article>
   </body>
-</html>
+</html>
diff --git a/week-02-css/index.html b/week-02-css/index.html
@@ -1,19 +1,23 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Styled Text</title>
+    <title>My Super Cool Recipe</title>
     <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
   <body>
-    <p><span class="big">Space</span>: the final frontier.</p>
-    <p>
-      These are the voyages of the starship <span class="big">Enterprise</span>.
-     </p>
-    <p>
-      Its continuing mission: to explore <span class="big">strange</span> new
-      worlds.
-    </p>
-    <p>To seek out <span class="big">new life</span>, and new civilizations.</p>
-    <p><span id="boldly">To boldly go</span> where no one has gone before!</p>
+<h1>Poppy Seed Chicken</h1>
+<h2>Ingredients:</h2>
+<ul>
+  <li>4 cooked chicken breast (or 1 chicken breast per pan)</li>
+  <li>Noodles (flat short noodles)</li>
+  <li>1 cup sour cream</li>
+  <li>1 can of cream of celery soup</li>
+  <li>¼ of a stick of butter OR 4 tbsp of butter w/ ¼ cup of oil</li>
+  <li>1 stack of <span id="tasty">Ritz crackers</span></li>
+  <li>1 tbsp poppy seed</li>
+</ul>
+<p class="purple">Cook chicken, cook noodles. Place chicken in pan.</p>
+<p class="color2"> Combine sour cream and mushroom, spread all over the chicken.</p>
+<p class="purple">Cover with noodles. Combine butter, Ritz crackers, and poppy seeds.</p>
+<p class="color2">Put on top of the mix. Bake at 350 for 45 to 60 minutes.</p>
   </body>
-</html>
diff --git a/week-02-css/styles.css b/week-02-css/styles.css
@@ -1,15 +1,23 @@
-/* Element selector that gives every p element a monospace font. */
+
 p {
-  font-family: monospace;
+  font: italic small-caps bold 16px/2 cursive;
+font-size: large
+color: blue;
+}
+
+li {
+font: 1.2em "Fira Sans", serif;
 }
 
-/* Class selector that gives elements with this class a big bold style. */
-.big {
-  font-size: large;
-  font-weight: bold;
+.purple {
+ color: rebeccapurple;
 }
 
-/* ID selector that gives the element with this ID a red style. */
-#boldly {
-  color: red;
-}
+#tasty {
+  background-color: orange;
+  border: solid;
+}
+
+.color2 {
+color: rgb(214, 122, 127);
+}
diff --git a/week-03-layout/Product1.jpg b/week-03-layout/Product1.jpg
diff --git a/week-03-layout/index.html b/week-03-layout/index.html
@@ -1,20 +1,39 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <title>Home</title>
+    <title>The Donut Shop: The #1 place for looking at donuts</title>
     <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
   <body>
-    <nav>
-      <a href="index.html">Home</a>
-      <a href="#about">About</a>
-      <a href="#products">Products</a>
-    </nav>
-    <div>
-      Replace the content in this file to create your business's homepage.
+    <h1 id="title"> The Donut Shop </h1>
+    <div class="Biggrid">
+      <div>
+        <p>Welcome to The Donut Shop</p>
+      <p>Here at the donut shop you can buy donuts,</p>
+      <p>But! you can only experience them with your eyes</p>
+      </div>
+
+      <div>
+        <p style="font-size:40px">Here, check out one of our three options to the right</p>
+        <span style='font-size:100px;'>&#8594;</span>
+      </div>
+      <div>
+        <img src="Product1.jpg" alt="" class="product" >
+      </div>
     </div>
-    <footer>
-      Thanks for visiting my business!
-    </footer>
+
+
+    <div  class="MidFlex Phonesize" style="font-size:25px">
+      <div class="Left">
+<p>Most Payment methods are currently pending</p>
+</div>
+<div class="Right">
+<p>But! We are currently accepting payment by pigeon or you can just tape $5 to a watermelon and roll it out your front door.</p>
+</div>
+</div>
+<h2>Finally, these are our last two products. And always remember, why taste, when you can see</h2>
+<div class="Bottom">
+  <div> <img src="https://cdn.pixabay.com/photo/2017/07/27/07/16/donut-2544153_960_720.png" class="product" alt=""> </div>
+  <div> <img src="https://cdn.pixabay.com/photo/2021/08/28/19/49/donut-6581822_960_720.png" class="product" alt=""> <div>
   </body>
-</html>
+</html>
diff --git a/week-03-layout/product2.jpg b/week-03-layout/product2.jpg
diff --git a/week-03-layout/product3.jpg b/week-03-layout/product3.jpg
diff --git a/week-03-layout/styles.css b/week-03-layout/styles.css
@@ -1,12 +1,60 @@
-nav {
+div {
+  padding: 10px;
   border: thin solid black;
 }
 
-div {
-  border: thin solid black;
-  margin: 25px 0;
+.Biggrid {
+  display: grid;
+  grid-template-columns: 200px 3.85fr 250px;
+  grid-template-rows: 350px
+  gap: 10px;
+  Border: thin solid rebeccapurple;
 }
 
-footer {
-  border: thin solid black;
-}
+.MidFlex {
+  grid-template-columns: auto auto;
+  display: flex;
+  gap: 10px;
+  border: thick solid black;
+}
+
+.Bottom {
+  display:grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+
+.Left{
+  flex-grow: 1
+display:block;
+}
+
+
+
+.Right{
+  flex-grow: 2;
+  height: 100px
+}
+
+#title {
+  font-size: 48;
+  font-style: oblique;
+}
+
+@media screen and (max-width: 800px) {
+  .Phonesize {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+}
+
+.product{
+
+  object-fit: cover;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+
+}
diff --git a/week-04-dom-manipulation/index.html b/week-04-dom-manipulation/index.html
@@ -8,10 +8,21 @@
   <body>
     <div id="inputs">
       <div>Give me an adjective: <input id="adjective-one-input" /></div>
-      <button onclick="fillOutputs();">Done</button>
+      <div>Give me a noun: <input id="noun-one-input" /></div>
+      <div>Give me a verb that ends in -ing: <input id="verb-one-input" /></div>
+      <div>Give me a noun: <input id="noun-two-input" /></div>
+      <div>Lastly, I just need and adverb that ends in -ly: <input id="adverb-one-input" /></div>
+    </div>
+
+
+<button onclick="fillOutputs();">Done</button>
     </div>
     <div id="output">
-      The <span id="adjective-one-output"></span> fox jumped over the lazy dog.
+      <p>The <span id="noun-one-output"></span> was destroying the city while throwing buildings and breathing fire. </P>
+        <p>As this </span> <span id="adjective-one-output"></span> mass of destruction was wreaking havok,</p>
+        <p>you suddenly saw something <span id="verb-one-output"></span> through the sky, it was a(n) <span id="noun-two-output"></span>!</p>
+        <p>You watch, as it <span id="adverb-one-output"></span> crashes into the monstrosity, exploding in the process</p>
+        <p>Wow, that was a wierd dream.</p>
     </div>
   </body>
-</html>
+</html>
diff --git a/week-04-dom-manipulation/script.js b/week-04-dom-manipulation/script.js
@@ -13,8 +13,60 @@ function fillOutputs() {
   // Set the text of the input element
   adjectiveOneOutput.innerText = adjectiveOne;
 
+  const nounOneInput = document.getElementById('noun-one-input');
+  // Get the text from the input element
+  const nounOne = nounOneInput.value;
+
+  // Get the adjective output element
+  const nounOneOutput = document.getElementById('noun-one-output');
+  // Set the text of the input element
+  nounOneOutput.innerText = nounOne;
+
+  const verbOneInput = document.getElementById('verb-one-input');
+  // Get the text from the input element
+  const verbOne = verbOneInput.value;
+
+  // Get the adjective output element
+  const verbOneOutput = document.getElementById('verb-one-output');
+  // Set the text of the input element
+  verbOneOutput.innerText = verbOne;
+
+  const nounTwoInput = document.getElementById('noun-two-input');
+  // Get the text from the input element
+  const nounTwo = nounTwoInput.value;
+
+  // Get the adjective output element
+  const nounTwoOutput = document.getElementById('noun-two-output');
+  // Set the text of the input element
+  nounTwoOutput.innerText = nounTwo;
+
+  const adverbOneInput = document.getElementById('adverb-one-input');
+  // Get the text from the input element
+  const adverbOne = adverbOneInput.value;
+
+  // Get the adjective output element
+  const adverbOneOutput = document.getElementById('adverb-one-output');
+  // Set the text of the input element
+  adverbOneOutput.innerText = adverbOne;
+
+
+
+
+
   // Get the output container element
   const outputDiv = document.getElementById('output');
   // Make the output container element visible
   outputDiv.style.display = 'block';
-}
+
+
+
+
+
+
+
+
+
+
+
+
+}
diff --git a/week-04-dom-manipulation/styles.css b/week-04-dom-manipulation/styles.css
@@ -3,6 +3,14 @@
   display: none;
 }
 
-#adjective-one-output {
+#adjective-One-Output {
   font-weight: bold;
-}
+}
+#noun-one-output {font-weight: bold;
+}
+#noun-two-output {font-weight: bold;
+}
+#verb-one-output {font-weight: bold;
+}
+#adverb-one-output {font-weight: bold;
+}