Permalink
Browse files

Merge pull request #8 from ackalil/master

Submitting Homework 2
  • Loading branch information...
vodnik committed Dec 12, 2018
2 parents e7f6d72 + 87bd530 commit b014791772327f0b43d65230274f0c2732767bfa
Showing with 1,247 additions and 0 deletions.
  1. +87 −0 anna-ackalil/Homework-2/fizzbuzz/app.js
  2. +9 −0 anna-ackalil/Homework-2/fizzbuzz/index.html
  3. +90 −0 anna-ackalil/Homework-2/object-homework/app.js
  4. +12 −0 anna-ackalil/Homework-2/object-homework/index.html
  5. +54 −0 anna-ackalil/Homework-2/temp-converter/css/main.css
  6. +406 −0 anna-ackalil/Homework-2/temp-converter/css/normalize.css
  7. +48 −0 anna-ackalil/Homework-2/temp-converter/css/reset.css
  8. +24 −0 anna-ackalil/Homework-2/temp-converter/index.html
  9. +37 −0 anna-ackalil/Homework-2/temp-converter/js/main.js
  10. +55 −0 anna-ackalil/Homework-3/create-append-homework/blog.html
  11. +263 −0 anna-ackalil/Homework-3/create-append-homework/css/style.css
  12. BIN anna-ackalil/Homework-3/create-append-homework/images/about.jpg
  13. BIN anna-ackalil/Homework-3/create-append-homework/images/article_1.jpg
  14. BIN anna-ackalil/Homework-3/create-append-homework/images/article_2.jpg
  15. BIN anna-ackalil/Homework-3/create-append-homework/images/article_3.jpg
  16. BIN anna-ackalil/Homework-3/create-append-homework/images/blog_1.jpg
  17. BIN anna-ackalil/Homework-3/create-append-homework/images/blog_2.jpg
  18. BIN anna-ackalil/Homework-3/create-append-homework/images/blog_header_bg.jpg
  19. BIN anna-ackalil/Homework-3/create-append-homework/images/gallery_1.jpg
  20. BIN anna-ackalil/Homework-3/create-append-homework/images/gallery_2.jpg
  21. BIN anna-ackalil/Homework-3/create-append-homework/images/gallery_3.jpg
  22. BIN anna-ackalil/Homework-3/create-append-homework/images/gallery_4.jpg
  23. BIN anna-ackalil/Homework-3/create-append-homework/images/gallery_5.jpg
  24. BIN anna-ackalil/Homework-3/create-append-homework/images/gallery_6.jpg
  25. BIN anna-ackalil/Homework-3/create-append-homework/images/home_header_bg.jpg
  26. +103 −0 anna-ackalil/Homework-3/create-append-homework/js/app.js
  27. BIN anna-ackalil/Homework-3/create-append-homework/preview-bonus.png
  28. BIN anna-ackalil/Homework-3/create-append-homework/preview.png
  29. +8 −0 anna-ackalil/Homework-3/json-homework/json-hw.html
  30. +51 −0 anna-ackalil/Homework-3/json-homework/json-hw.js
@@ -0,0 +1,87 @@
"use strict";

// Relying on your newfound knowledge of loops, combine loops and if/else statements together and incrementally build the common fizzbuzz loop.

// - In the loop, every time a number is divisible by **3**, instead of logging the number itself, the word "fizz" should appear.
// - If the number is divisible by **5**, the word "buzz" should be logged.
// - If the number is divisible by both **3** and **5**, then the word "fizzbuzz" should be logged.

// Follow the steps below.

// ##### Step 1:
// Construct a for loop that iterates through, and `console.log()`'s out, numbers 1 - 100.

// for (let i = 1; i <= 100; i++) {
// console.log(i);
// }

// ##### Step 2:
// Add an `if/else` statement that logs the string `"fizz"` if the value being iterated over is divisible by `3`; otherwise, log out the value.

// for (let i = 1; i <= 100; i++) {
// if (i % 3 === 0) {
// console.log('fizz');
// } else {
// console.log(i);
// };
// };

// ##### Step 3:
// Add an `else if` clause that logs the string `"buzz"` if the value being iterated over is divisible by `5`.

// for (let i = 1; i <= 100; i++) {
// if ((i % 3 === 0)) {
// console.log('fizz');
// } else if ((i % 5 === 0)) {
// console.log('buzz');
// } else {
// console.log(i);
// };
// };

// ##### Step 4:
// Add an additional `else if` clause that logs the string `"fizzbuzz"` if the value being iterated over is divisible by both `3` and `5`.

// for (let i = 1; i < 101; i++) {
// if ((i % 15 === 0)) { // simpler than `(i % 3 === 0) && (i % 5 === 0)`; must come first AFAICT
// console.log('fizzbuzz');
// } else if ((i % 3 === 0)) {
// console.log('fizz');
// } else if ((i % 5 === 0)) {
// console.log('buzz');
// } else {
// console.log(i);
// };
// };

//##### BONUS:

// a. Make a copy of your existing code and comment out the original.
// b. In the new copy, instead of using console.log for the results, push the
// result of each loop to an array.
// c. After all iterations have completed, use the forEach array method to log
// each array element value to the console.
// Label your console output with the original number and a colon before each
// array value. (Hint: How can you shorten your code using a second forEach
// function parameter?)

const fizzBuzzArray = [];

for (let i = 1; i < 101; i++) {
if ((i % 15 === 0)) { // simpler than `(i % 3 === 0) && (i % 5 === 0)`; must come first AFAICT
fizzBuzzArray.push('fizzbuzz');
} else if ((i % 3 === 0)) {
fizzBuzzArray.push('fizz');
} else if ((i % 5 === 0)) {
fizzBuzzArray.push('buzz');
} else {
fizzBuzzArray.push(i);
};

function logArrayElements(element, index, array) {
return (i + ': ' + element);
}
fizzBuzzArray.forEach(logArrayElements);
};

console.log(fizzBuzzArray);
@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- js -->
<script src="app.js"></script>
</body>
</html>
@@ -0,0 +1,90 @@
/////////////////////////////////////////////////////////////

///////////////////////// Challenge /////////////////////////

/////////////////////////////////////////////////////////////

// Write your answers inside this file, at the places where it's indicated by the comments.


// 1. Suppose that we wanted to create a browser-based calendar program for keeping track of things. In comments, list at least three reasonable abstractions that you might use to build this program; for each abstraction, list out at least two properties and behaviors that it would make sense for that abstraction to have. Below is an example - please write your answer in the same format.
// 'Car'
// Description: Our app manages car sales.
// Every 'car' has
// - a make
// - a model
// - a year
// Every 'car' can
// - drive
// - brake
// - park

// Answer Starts Here

// 'Dating Log'
// Description: An app tracking the dates you've been on.
// Every 'date' has
// - a location
// - an activity
// - a partner
// Every 'date' can
// - begin
// - end
// - move

// Answer Ends Here


// 2. Create an Object literal that lines up with the following description. Store it in the variable 'pet_owner', below. Be sure to give it reasonable values for each of its properties.

// 'Owner'
// Description: We are making an app for a veterinary clinic - it manages pets' vaccinations.
// Every 'owner' has:
// - a name
// - an address

let pet_owner;

// Answer Starts Here

pet_owner = {
name: 'Anna Kalil',
address: '780 Bryant Street',
};

// Answer Ends Here


// 3. Create an Object literal that lines up with the following description. Store it in the variable `some_pet`, below.

// Pet
// Description: We are making an app for a veterinary clinic - it manages pets' vaccinations.
// Every 'pet' has:
// - a name
// - a species
// - a breed
// - a noise that it can make (e.g. 'bark', 'meow', etc.)
// Every pet can:
// - make noise (each pet makes its own unique noise, as specified by `noise`.

let some_pet;

// Answer Starts Here

some_pet = {
name: 'Charlie',
species: 'dog',
breed: 'mixed',
noise: 'bark',
makeANoise: function() {
console.log('Woof!');
},
};

// Answer Ends Here

/////////////////////////////////////////////////////////////

// You're done!

/////////////////////////////////////////////////////////////
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Output for pet objects challenge</h1>

<script src="app.js" type="text/javascript" charset="utf-8" async defer></script>

</body>
</html>
@@ -0,0 +1,54 @@
body {
padding: 20px;
text-align: center;
}

h1 {
font-family: Georgia, serif;
}

.converter-container {
width: 340px;
margin: 0 auto;
}

input {
margin-right: 10px;
padding: 10px;
border: 3px solid #dfdfdf;
border-radius: 4px;
}

input:focus {
border-color: #afafaf;
outline: none;
}

button {
font-size: 14px;
padding: 10px;
color: white;
border: none;
border-radius: 4px;
outline: none;
background: #f26629;
cursor: pointer;
}

/* Error styles
================================================================ */

/* This class shoud be added to the input if the user has not entered a value */
.error {
border-color: red;
}

/* This error message should fade in if the user has not entered a value */
.error-message {
color: white;
border: 3px solid red;
border-radius: 4px;
display: none; /*Hidden by default*/
background-color: rgba(255, 0, 0, .6);
padding: 10px;
}
Oops, something went wrong.

0 comments on commit b014791

Please sign in to comment.