dinner is served

ahmedsauce7 · Nov 23, 2019 · 5da8997 · 5da8997
1 parent cd176d2
commit 5da8997
Show file tree

Hide file tree

Showing 14 changed files with 200 additions and 30 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/dinnerIsServed.mp3 b/dinnerIsServed.mp3
diff --git a/images/2brusselSprouts.jpg b/images/2brusselSprouts.jpg
diff --git a/images/brusselSprouts.jpg b/images/brusselSprouts.jpg
diff --git a/images/download-1.jpg b/images/download-1.jpg
diff --git a/images/download-1.png b/images/download-1.png
diff --git a/images/mashPotatoes.jpg b/images/mashPotatoes.jpg
diff --git a/images/realsteak.jpg b/images/realsteak.jpg
diff --git a/images/steak.jpg b/images/steak.jpg
diff --git a/images/steak.webp b/images/steak.webp
diff --git a/index.html b/index.html
@@ -9,32 +9,37 @@
         <title></title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="stylesheet" href="">
+        <link rel="stylesheet" href="style.css">
     </head>
     <body>
+        <div id="table"></div>
         <hr>
-        <p>eggs</p>
-        <ul id="eggs">
+        <div class="steps">
+            <ol id="steak">
+                <label>Steak</label>
 
-        </ul>
-
-        <hr>
-        <p>bacon</p>
+            </ol>
+
+            <hr>
 
-        <ul id="bacon">
+            <ol id="mashPotatoes">
+                    <label>Mash Potatotes</label>
 
-        </ul>
-        <hr>
-        <p>orangeJuice</p>
 
-        <ul id="orangeJuice">
+            </ol>
+            <hr>
+
+            <ol id="brusselSprouts">
+                    <label>Brussels Sprouts</label>
+
+            </ol>
 
-        </ul>
+        </div>
         <!--[if lt IE 7]>
             <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
         <![endif]-->
-
-        <!-- <script src="index.js" async defer></script> -->
+        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
+        <script src="index.js" async defer></script> -->
         <script src="script.js" async defer></script>
 
     </body>

diff --git a/index.js b/index.js
@@ -9,7 +9,6 @@ function printString(str){
     printString("B");
     printString("C");
   }
-
 
 //printAll();
 
@@ -29,14 +28,18 @@ function printString(str){
     setTimeout(() => {
       console.log(str);
       callback();
-    }, Math.floor(Math.random() * 100));
+    }, Math.floor(Math.random() * 2000));
   }
-  function printAllWithCallbacks(){
-    printStringWithCallbacks("A", () => {
-      printStringWithCallbacks("B", () => {
-        printStringWithCallbacks("C", () => {
+  function printAllWithCallbacks(){ //callbacks 
+
+    printStringWithCallbacks("A", function(){
+
+      printStringWithCallbacks("B", function(){
+
+        printStringWithCallbacks("C", function(){
           console.log("hello");
         })
+
       })
     })
   }
@@ -52,14 +55,16 @@ function printString(str){
       setTimeout(() => {
         console.log(str);
         resolve();
-      }, Math.floor(Math.random() * 100));
+      }, Math.floor(Math.random() * 2000));
     });
   }
 
   function printAllWithPromises(){
     printStringWithPromises("A")
+    .then(()=>console.log('get'))
     .then(() => printStringWithPromises("B"))
     .then(() => printStringWithPromises("C"))
+    .then(() => console.log('almost there'))
     .catch(() => console.log("Something bad happened!"));
   }
   //printAllWithPromises()
@@ -80,7 +85,30 @@ function printString(str){
     await printStringWithPromises("C");
   }
 
-  printAllWithAsync()
+
+  async function useAxios() {
+    let vitalii = await axios.get('https://ironrest.herokuapp.com/vitalii')
+    let pradeepa = await axios.get('https://ironrest.herokuapp.com/pradeepa')
+    let everybody = await axios.get('https://ironrest.herokuapp.com')
+    let promise = new Promise((resolve, reject)=>{
+      setTimeout(()=>{
+        resolve('horrayyyYY!')
+      },5000)
+    })
+
+    Promise.all([vitalii, pradeepa, everybody, promise]).then(data=>{
+      console.log('in here',data)
+    })
+  }
+
+  //useAxios()
+
+
+  axios.get('https://ironrest.herokuapp.com/vitalii').then(data=>{
+    console.log(data)
+  })
+
+  //printAllWithAsync()
 
   // The printString function doesn’t return anything and is independent, all we cared about was the order. 
   // Take the output of the first function, do Something with it in the second function, and then pass it to the third function.
@@ -134,6 +162,6 @@ function printString(str){
     toPrint = await addStringWithPromises(toPrint, 'C');
     console.log(toPrint); // Prints out " A B C"
   }
-  addAllWithPromise();
+  //addAllWithPromise();
 
 // Additional read: https://medium.com/javascript-in-plain-english/a-guide-to-javascript-promises-da50eff327d7
diff --git a/script.js b/script.js
@@ -35,6 +35,37 @@ const eggs = [
     'Peel eggs',
 ]
 
+const steak = [
+  'season steak generously with salt, pepper and garlic powder',
+  'place in ziplock bag',
+  'cook in sous vide at 120 F for 1-2 hours',
+  'remove from bag and pat dry',
+  'heat pan with grapeseed oil and a quarter stick of butter',
+  'cook steak for 30-60 seconds per side using a spoon to baste with butter',
+  'rest for 10 mintutes',
+  'enjoy the best steak of your life'
+]
+
+const brusselSprouts = [
+  'wash burussel srouts',
+  'cut off base and chop in half',
+  'toss in bowl with olive oil, balsamic vinger and salt',
+  'preheat oven to 500 F',
+  'coat baking sheet with olive oil',
+  'place in flat side down',
+  'cook for 20 minutes',
+  'place back in bowl and add salt and pepper',
+  'enjoy'
+]
+
+const mashPotatoes = [
+  'boil water',
+  'tear open bag of of instant potato mix and pour into bowl',
+  'pour in water',
+  'mix',
+  'enojoy'
+]
+
 const bacon = [
     'Get bacon from fridge', 
     'Space out the bacon strips on a cool frying pan or griddle',
@@ -54,20 +85,58 @@ const orangeJuice = [
 ]
 
 /** DO NOT ALTER **/
-function makeFood(steps, id){
-    steps.forEach(step => {
+
+function addFood(step, id){
+  return new Promise((resolve, reject)=>{
     setTimeout(() => {
       console.log(step);
       document.querySelector(id).innerHTML += (`<li>${step}</li`)
-    }, Math.floor(Math.random() * 5000));
+      resolve(step)
+    }, Math.floor(Math.random() * 1000));
   })
 }
+
+
+// function makeFood(steps, id){
+//   for(const step of steps){
+//     addFood(step,id)
+//   }
+//   document.querySelector('#table').innerHTML += (`<img src="images/${id.replace('#','')}.jpg" />`)
+//   //document.body.innerHTML += `<button onclick="new Audio('dinnerIsServed.mp3').play()">Dinner is Served!</button>`
+
+// }
+
+// makeFood(steak, '#steak')
+// makeFood(mashPotatoes, '#mashPotatoes')
+// makeFood(brusselSprouts, '#brusselSprouts')
+
+
+async function makeFood(steps, id){
+  let promises = []
+  for(const step of steps){
+    console.log(step)
+    promises.push( 
+      await addFood(step, id)
+    )
+    //console.log(p)
+  }
+  console.log('here?', id)
+  document.querySelector('#table').innerHTML += (`<img src="images/${id.replace('#','')}.jpg" />`)
+  return promises
+}
+
+
+
+
+
+Promise.all([makeFood(steak, '#steak'), makeFood(mashPotatoes, '#mashPotatoes'), makeFood(brusselSprouts, '#brusselSprouts')]).then(res=>{
+  console.log('breakfast is made!!',res)
+  //prompt('Congrats!' +String(res));
+  document.body.innerHTML += `<button onclick="new Audio('dinnerIsServed.mp3').play()">Dinner is served.</button>`
+})
 
 
 
-makeFood(eggs, '#eggs')
-makeFood(bacon, '#bacon')
-makeFood(orangeJuice, '#orangeJuice')
 
 
 

diff --git a/style.css b/style.css
@@ -0,0 +1,68 @@
+img {
+    width: 200px;
+}
+
+li    {
+    font-size: 16px;
+    line-height: 1.5rem;
+    color: #545454;
+    /* text-transform: capitalize; */
+}
+
+.steps {
+    display: flex;
+}
+
+
+#table {
+    height: 200px;
+    display: flex;
+    justify-content: space-evenly;
+}
+ol {
+    width:33%;
+    position:relative;
+    list-style: none; 
+    counter-reset: li;
+    margin: 0;
+    padding: 0;
+}
+li::before {
+    content: counter(li); color: white;
+    display: inline-block; width: 1em;
+    margin-left: -.5em;
+    background:#93b874;
+    padding-left: .5em;
+    margin: .2em;
+}
+
+    li {counter-increment: li}
+
+p{
+
+}
+
+button {
+    animation: enter 2s forwards;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    font-size:3rem;
+    padding:1rem;
+    background: #eeeeee;
+    color:black;
+    transition: all.2s;
+}
+button:hover{
+
+    color:white;
+    background:#333;
+}
+@keyframes enter {
+    from {
+        transform: rotateX(3000deg) translate(-50%, -50%) scale(0);
+    }
+    to {
+        transform: rotateX(0deg) translate(-50%, -50%) scale(1);
+    }
+}