diff --git a/index.html b/index.html index 6628cee..ffff050 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,8 @@ Intro to Web Development -

Intro to Web Development

-

This site contains homework projects for Intro to Web Development.

+

Intro to Web Development!!!

+

This site contains Jon's homework projects for Intro to Web Development.

- \ No newline at end of file + diff --git a/week-01-html/img1.jpg b/week-01-html/img1.jpg new file mode 100644 index 0000000..9e4fbdc Binary files /dev/null and b/week-01-html/img1.jpg differ diff --git a/week-01-html/index.html b/week-01-html/index.html index 8e7e353..d72f928 100644 --- a/week-01-html/index.html +++ b/week-01-html/index.html @@ -1,10 +1,25 @@ - Hello World + Hello World? -

Hello World

+

Hello World!

Welcome to my webpage!

+ Hey, check out my favorite Wiki article! +

And here is a list of random items I just thought of

+ +

And check out this picture of this cool bird!

+ +
+

Super Important Stuff!

+

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

+
- \ No newline at end of file + diff --git a/week-02-css/index.html b/week-02-css/index.html index dc2769b..cafe8bf 100644 --- a/week-02-css/index.html +++ b/week-02-css/index.html @@ -1,19 +1,23 @@ - Styled Text + My Super Cool Recipe -

Space: the final frontier.

-

- These are the voyages of the starship Enterprise. -

-

- Its continuing mission: to explore strange new - worlds. -

-

To seek out new life, and new civilizations.

-

To boldly go where no one has gone before!

+

Poppy Seed Chicken

+

Ingredients:

+ +

Cook chicken, cook noodles. Place chicken in pan.

+

Combine sour cream and mushroom, spread all over the chicken.

+

Cover with noodles. Combine butter, Ritz crackers, and poppy seeds.

+

Put on top of the mix. Bake at 350 for 45 to 60 minutes.

- \ No newline at end of file diff --git a/week-02-css/styles.css b/week-02-css/styles.css index 6f8cb4b..7dae4bf 100644 --- 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; -} \ No newline at end of file +#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 new file mode 100644 index 0000000..0c15eaf Binary files /dev/null and b/week-03-layout/Product1.jpg differ diff --git a/week-03-layout/index.html b/week-03-layout/index.html index 63caa29..c8d515e 100644 --- a/week-03-layout/index.html +++ b/week-03-layout/index.html @@ -1,20 +1,39 @@ - + - Home + The Donut Shop: The #1 place for looking at donuts - -
- Replace the content in this file to create your business's homepage. +

The Donut Shop

+
+
+

Welcome to The Donut Shop

+

Here at the donut shop you can buy donuts,

+

But! you can only experience them with your eyes

+
+ +
+

Here, check out one of our three options to the right

+ → +
+
+ +
- + + +
+
+

Most Payment methods are currently pending

+
+
+

But! We are currently accepting payment by pigeon or you can just tape $5 to a watermelon and roll it out your front door.

+
+
+

Finally, these are our last two products. And always remember, why taste, when you can see

+
+
+
- \ No newline at end of file + diff --git a/week-03-layout/product2.jpg b/week-03-layout/product2.jpg new file mode 100644 index 0000000..f00fbea Binary files /dev/null and b/week-03-layout/product2.jpg differ diff --git a/week-03-layout/product3.jpg b/week-03-layout/product3.jpg new file mode 100644 index 0000000..8e9de6c Binary files /dev/null and b/week-03-layout/product3.jpg differ diff --git a/week-03-layout/styles.css b/week-03-layout/styles.css index ffc8169..5e23f61 100644 --- 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; -} \ No newline at end of file +.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 index 08c12ae..94e2155 100644 --- a/week-04-dom-manipulation/index.html +++ b/week-04-dom-manipulation/index.html @@ -8,10 +8,21 @@
Give me an adjective:
- +
Give me a noun:
+
Give me a verb that ends in -ing:
+
Give me a noun:
+
Lastly, I just need and adverb that ends in -ly:
+
+ + +
- The fox jumped over the lazy dog. +

The was destroying the city while throwing buildings and breathing fire.

+

As this mass of destruction was wreaking havok,

+

you suddenly saw something through the sky, it was a(n) !

+

You watch, as it crashes into the monstrosity, exploding in the process

+

Wow, that was a wierd dream.

- \ No newline at end of file + diff --git a/week-04-dom-manipulation/script.js b/week-04-dom-manipulation/script.js index f5a2d64..018f8fb 100644 --- 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'; -} \ No newline at end of file + + + + + + + + + + + + +} diff --git a/week-04-dom-manipulation/styles.css b/week-04-dom-manipulation/styles.css index d8fda46..980cd75 100644 --- 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; -} \ No newline at end of file +} +#noun-one-output {font-weight: bold; +} +#noun-two-output {font-weight: bold; +} +#verb-one-output {font-weight: bold; +} +#adverb-one-output {font-weight: bold; +} diff --git a/week-05-if-statements/index.html b/week-05-if-statements/index.html index 7dcd8e1..c06a259 100644 --- a/week-05-if-statements/index.html +++ b/week-05-if-statements/index.html @@ -1,28 +1,52 @@ - + Quiz +

Quiz

-

What's my favorite animal?

- +

What is the longest mountain range in Pennsylvania?

+ +
-

What's the answer to life, the universe, and everything?

- +

Whats 2+2?

+
+
+

All you have to do is ask.

+ + +
+ +
+

What is the smallest planet?

+ + +
+ +
+

What was the answer to question 2?

+ + +
+ + + + +

Thank you for taking my quiz!

- \ No newline at end of file + diff --git a/week-05-if-statements/script.js b/week-05-if-statements/script.js index bad3c60..1eab8cd 100644 --- a/week-05-if-statements/script.js +++ b/week-05-if-statements/script.js @@ -6,14 +6,14 @@ function submitAnswerOne() { // Get the text from answer one's input element const answerOne = answerOneInput.value; - if(answerOne == 'cat') { + if(answerOne == 'Appalachian Mountains', 'Appalachian', 'appalachian mountains', 'appalachian', 'Appalachians', 'appalachians') { alert("That's right!"); hide('question-one'); show('question-two'); - } else if(answerOne == 'dog') { - alert('Close, but my favorite animal runs away from dogs.'); + } else if(answerOne == 'Apalachian Mountains', 'Apalachian', 'apalachian mountains', 'apalachian', 'Apalachians', 'apalachians') { + alert('You missed a p'); } else { - alert('Wrong! Hint: My favorite animal meows.') + alert('It is not only in Pennsylvania') } } @@ -25,16 +25,75 @@ function submitAnswerTwo() { // Get the number from answer two's input element const answerTwo = answerTwoInput.value; - if(answerTwo == 42) { + if(answerTwo == 4) { alert("That's right!"); hide('question-two'); - show('done'); - } else if(answerTwo < 42) { - alert('The answer is higher.'); + show('question-three'); + } else if(answerTwo < 4) { + alert('Umm, you should know this'); } else { - alert('The answer is lower.') + alert('Do not expect a hint, you probably made a typo') } } +function submitAnswerThree() { + // Get answer two's input element + const answerThreeInput = document.getElementById('answer-three-input'); + // Get the number from answer two's input element + const answerThree = answerThreeInput.value; +if(answerThree == 'seven') { + alert("That's right!"); + hide('question-three'); + show('question-four'); +} else if(answerThree == 'what is the answer?', 'What is the answer?') { + alert('Its seven'); +} else { + alert('Try asking "what is the answer?"') +} +} +function submitAnswerFour() { + // Get answer two's input element + const answerFourInput = document.getElementById('answer-four-input'); + // Get the number from answer two's input element + const answerFour = answerFourInput.value; +if(answerFour == 'Mercury', 'mercury') { + alert("That's right!"); + hide('question-four'); + show('question-five'); +} else if(answerFour == 'Pluto') { + alert('Sorry, he has demoted ages ago'); +} else { + alert('Its not Mars') +} +} +function submitAnswerFive() { + // Get answer two's input element + const answerFiveInput = document.getElementById('answer-five-input'); + // Get the number from answer two's input element + const answerFive = answerFiveInput.value; +if(answerFive == 4) { + alert("That's right!"); + hide('question-five'); + show('done'); +} else if(answerFive == 7) { + alert('Close, it was the question before that one.'); +} else { + alert('It was a number') +} +} + +var input = document.getElementById("myInput"); +input.addEventListener("keyup", function(event) { + if (event.keyCode === 13) { + event.preventDefault(); + document.getElementById("myBtn").click(); + } +}); + + + + + + // Helper function that takes an ID and shows the element with that ID. function show(id) { @@ -46,4 +105,4 @@ function show(id) { function hide(id) { const element = document.getElementById(id); element.style.display = 'none'; -} \ No newline at end of file +} diff --git a/week-05-if-statements/styles.css b/week-05-if-statements/styles.css index 414888e..3c5a960 100644 --- a/week-05-if-statements/styles.css +++ b/week-05-if-statements/styles.css @@ -1,7 +1,16 @@ #question-two { display: none; } +#question-three { + display: none; +} +#question-four { + display: none; +} +#question-five { + display: none; +} #done { display: none; -} \ No newline at end of file +} diff --git a/week-06-for-loops/index.html b/week-06-for-loops/index.html index a1bf83d..f1655af 100644 --- a/week-06-for-loops/index.html +++ b/week-06-for-loops/index.html @@ -15,5 +15,27 @@

Long Words

+

Short Words

+
    +
+ +

The Longest Word

+
    +
+ +

The Shortest Word

+
    +
+ +

All D Words

+
    +
+ +

Uncommon Words

+
+ +

Every Third Word

+
+ - \ No newline at end of file + diff --git a/week-06-for-loops/script.js b/week-06-for-loops/script.js index 4470604..bb99f60 100644 --- a/week-06-for-loops/script.js +++ b/week-06-for-loops/script.js @@ -1,12 +1,9 @@ // Replace this speeh with your own. // Notice the `` backticks, which let you split your string into multiple lines. -const speech = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea - commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id - est laborum.`; +const speech = `A doughnut or donut is a type of food made from leavened fried dough It is popular in many countries and is prepared in various forms as a sweet snack that can be homemade or purchased in bakeries, supermarkets, food stalls, and franchised specialty vendors. Doughnut is the traditional spelling, while donut is the simplified version; the terms are often used interchangeably. +Doughnuts are usually deep fried from a flour dough, but other types of batters can also be used. Various toppings and flavorings are used for different types, such as sugar, chocolate or maple glazing. Doughnuts may also include water, leavening, eggs, milk, sugar, oil, shortening, and natural or artificial flavors. +The two most common types are the ring doughnut and the filled doughnut, which is injected with fruit preserves (the jelly doughnut), cream, custard, or other sweet fillings. Small pieces of dough are sometimes cooked as doughnut holes. Once fried, doughnuts may be glazed with a sugar icing, spread with icing or chocolate, or topped with powdered sugar, cinnamon, sprinkles or fruit. Other shapes include balls, flattened spheres, twists, and other forms. Doughnut varieties are also divided into cake (including the old-fashioned) and yeast-risen type doughnuts. Doughnuts are often accompanied by coffee or milk. They are sold at doughnut shops, convenience stores, petrol/gas stations, cafes or fast food restaurants. +`; // Remove punctuation from the speech. You might have to modify this if your // speech contains other punctuation. @@ -33,12 +30,94 @@ function displayLongWords() { } } + +function displayShortWords() { + const shortWordsElement = document.getElementById('short-words'); + + // Loop over every word in the array. + for(let i = 0; i < wordsArray.length; i++) { + const word = wordsArray[i]; + // If the word has more than 5 characters, display it in the page. + if(word.length < 5) { + const wordElement = document.createElement('li'); + wordElement.innerText = word; + shortWordsElement.appendChild(wordElement); + } + } +} + +function displayLetterDWords(){ + const letterWordsElement = document.getElementById('letter-words'); + + for(let word of wordsArray){ + if(word.startsWith('d')){ + const wordElement = document.createElement('li'); + wordElement.innerText = word; + letterWordsElement.appendChild(wordElement); + } + } +} + +function displayLongestWord(){ + const longestWordElement = document.getElementById('longest-word'); + let longestWord = wordsArray[0]; + for(let i = 1; i < wordsArray.length; i++){ + if(wordsArray[i].length > longestWord.length){ + longestWord = wordsArray[i]; + } + } + const wordElement = document.createElement('li'); + wordElement.innerText = longestWord; + longestWordElement.appendChild(wordElement); +} + + +function displayShortestWord() { + const shortestWordElement = document.getElementById('shortest-word'); + let shortestWord = wordsArray[0]; + for (let i = 1; i < wordsArray.length; i++) { + if(wordsArray[i].length < shortestWord.length) { + shortestWord = wordsArray[i]; + } + } + const wordElement = document.createElement('li'); + wordElement.innerText = shortestWord; + shortestWordElement.appendChild(wordElement); + } + + + function displayEveryThirdWord() { + let everyThirdWordElement = document.getElementById('third-words'); + for(let i = 0; i < wordsArray.length; i +=3){ + const word = wordsArray[i]; + const wordElement = document.createElement('li'); + wordElement.innerText = word; + everyThirdWordElement.appendChild(wordElement); + } + } + + function displayLeastCommonWords() { + let leastCommonWordsElement = document.getElementById('least-common-words'); + let commonWords = ['Doughnut', 'doughnuts', 'a', 'is', 'dough', 'are', 'sweet', 'as', 'sugar', 'icing', '-']; + for(let word of wordsArray){ + if(!commonWords.includes(word)){ + const wordElement = document.createElement('li'); + wordElement.innerText = word; + leastCommonWordsElement.appendChild(wordElement); + } + } + } // TODO: Define your own functions here! function displaySpeechStats() { document.getElementById('speech').innerText = speech; displayLongWords(); - + displayShortWords(); + displayLongestWord(); + displayShortestWord(); + displayEveryThirdWord(); + displayLetterDWords(); + displayLeastCommonWords(); // TODO: Call your functions here! -} \ No newline at end of file +} diff --git a/week-07-p5js/index.html b/week-07-p5js/index.html index 5b03c93..02cdb6b 100644 --- a/week-07-p5js/index.html +++ b/week-07-p5js/index.html @@ -1,8 +1,10 @@ - + + My Simple Digital Art using P5.js + diff --git a/week-07-p5js/sketch.js b/week-07-p5js/sketch.js index 84f73fc..ec4aacf 100644 --- a/week-07-p5js/sketch.js +++ b/week-07-p5js/sketch.js @@ -1,7 +1,76 @@ + +let droplets = []; + + + function setup() { createCanvas(400, 400); + + } function draw() { background(220); -} \ No newline at end of file + + let c = color('hsb(160, 100%, 50%)'); + noStroke(); + fill(c); + rect(0, 0, 150, 400); + c = color('hsb(160, 100%, 50%)'); + fill(c); + rect(250, 0, 150, 400); + + d = color('skyblue'); + fill(d); + rect(150, 0, 100, 400); + + + + + + + let t = frameCount / 60; + + + for (let i = 0; i < random(5); i++) { + droplets.push(new droplet()); + } + + + for (let drop of droplets) { + drop.update(t); + drop.display(); + } +} + +function droplet() { + c = color(50, 55, 100) + // initialize coordinates + this.posX = 0; + this.posY = random(-50, 0); + this.initialangle = random(0, 2 * PI); + this.size = random(2, 5); + + + this.radius = sqrt(random(pow(200 / 2, 2))); + + this.update = function(time) { + + let w = 0.6; + let angle = w * time + this.initialangle; + this.posX = width / 2 + this.radius * sin(angle); + + + this.posY += pow(this.size, 0.5); + + + if (this.posY > height) { + let index = droplets.indexOf(this); + droplets.splice(index, 1); + } + }; + + this.display = function() { + ellipse(this.posX, this.posY, this.size); + }; +} diff --git a/week-08-objects/index.html b/week-08-objects/index.html index 916ce2f..8c2d225 100644 --- a/week-08-objects/index.html +++ b/week-08-objects/index.html @@ -1,23 +1,28 @@ - Task List + My Favorite Food List -

Task List

+

My Favorite Food List

-

Shortest task:

+

Least Greasy:

+

Average Greasiness:

-

New Task

- Label: +

New Food

+ Food:

- Time: + Greasiness (0-5):

- + Sweetness (0-5): +

+ Saltiness (0-5): +

+
- \ No newline at end of file + diff --git a/week-08-objects/script.js b/week-08-objects/script.js index c658f28..aba5b6d 100644 --- a/week-08-objects/script.js +++ b/week-08-objects/script.js @@ -1,27 +1,38 @@ // Array of objects representing a todo list. // Modify this array to contain your own list. -const taskArray = [ - {label: 'Water plants', time: 3}, - {label: 'Homework', time: 2}, - {label: 'Laundry', time: 1}, +const FoodArray = [ + {label: 'Pizza', Greasy: 4, Sweetness: 1,Saltiness:3 }, + {label: 'Cucumber', Greasy: 0, Sweetness: 1,Saltiness:0}, + {label: 'Chicken wings', Greasy: 2, Sweetness: 2,Saltiness:3}, + {label: 'Italian Sausage', Greasy: 5, Sweetness: 3,Saltiness:2}, + {label: 'Stir Fry', Greasy: 2, Sweetness: 4,Saltiness:4}, + {label: 'Cheeseburger', Greasy: 3, Sweetness: 1,Saltiness:3}, + {label: 'Cereal', Greasy: 0, Sweetness: 5,Saltiness:2}, + {label: 'French Fries', Greasy: 1, Sweetness: 1,Saltiness:5}, + {label: 'Shrimp', Greasy: 1, Sweetness: 1,Saltiness:0}, + {label: 'Fish', Greasy: 1, Sweetness: 1,Saltiness:2}, ]; // Loads the content into the page. function loadContent() { // This line of code sorts the array alphabetically by the task labels. // Modify this to sort your data by a different field, or just delete it. - taskArray.sort((a, b) => compare(a.label, b.label)); + FoodArray.sort((a, b) => compare(a.label, b.label)); loadTable(); - loadShortestTask(); + loadLeastGreasy(); + loadAverageGreasy(); } // Adds a task to the array and reloads the page content. -function addNewTask() { - const newTaskLabel = document.getElementById('label-input').value; - const newTaskTime = document.getElementById('time-input').value; - const newTask = {label: newTaskLabel, time: newTaskTime }; - taskArray.push(newTask); +function addNewFood() { + const newFoodLabel = document.getElementById('label-input').value; + const newFoodGreasy = document.getElementById('Greasy-input').value; + const newFoodSweetness = document.getElementById('Sweetness-input').value; + const newFoodSaltiness = document.getElementById('Saltiness-input').value; + const newFood = {label: newFoodLabel, Greasy: newFoodGreasy, + Sweetness: newFoodSweetness, Saltiness: newFoodSaltiness}; + FoodArray.push(newFood); loadContent(); } @@ -33,17 +44,21 @@ function loadTable() { // Create a header row. const headerRowElement = document.createElement('tr'); headerRowElement.appendChild(createElement('th', 'Index')); - headerRowElement.appendChild(createElement('th', 'Label')); - headerRowElement.appendChild(createElement('th', 'Time')); + headerRowElement.appendChild(createElement('th', 'Food')); + headerRowElement.appendChild(createElement('th', 'Greasiness (0-5)')); + headerRowElement.appendChild(createElement('th', 'Sweetness (0-5)')); + headerRowElement.appendChild(createElement('th', 'Saltiness (0-5)')); tableElement.appendChild(headerRowElement); // Iterate over the array and create a table row for each object. - for (let i = 0; i < taskArray.length; i++) { - const task = taskArray[i]; + for (let i = 0; i < FoodArray.length; i++) { + const Food = FoodArray[i]; const rowElement = document.createElement('tr'); rowElement.appendChild(createElement('td', i)); - rowElement.appendChild(createElement('td', task.label)); - rowElement.appendChild(createElement('td', task.time)); + rowElement.appendChild(createElement('td', Food.label)); + rowElement.appendChild(createElement('td', Food.Greasy)); + rowElement.appendChild(createElement('td', Food.Sweetness)); + rowElement.appendChild(createElement('td', Food.Saltiness)); tableElement.appendChild(rowElement); } @@ -53,21 +68,37 @@ function loadTable() { } // Displays the name of the shortest task. -function loadShortestTask(){ +function loadLeastGreasy(){ // Assume the first task is shortest - let shortestTask = taskArray[0]; + let Leastgreasy = FoodArray[0]; // Starting with the second task, look for a shorter task - for (let i = 1; i < taskArray.length; i++) { - const task = taskArray[i]; + for (let i = 1; i < FoodArray.Greasy; i++) { + const Food = FoodArray[i]; // If this task is shorter than the previous shortest, it's now the shortest - if(task.time < shortestTask.time) { - shortestTask = task; + if(food.greasy < LeastGreasy.greasy) { + LeastGreasy = food; } } - document.getElementById('shortest-task').innerText = shortestTask.label; + document.getElementById('Least-Greasy').innerText = Leastgreasy.label; } +function loadAverageGreasy (){ + let total = 0; + for(let i = 0; i -

Cat

+

Doughnut

Images

-

Links

- +
+
+
    +
      +
      + + - \ No newline at end of file + diff --git a/week-09-fetch/script.js b/week-09-fetch/script.js index 066c918..9782bfe 100644 --- a/week-09-fetch/script.js +++ b/week-09-fetch/script.js @@ -1,6 +1,6 @@ // Loads content for a Wikipedia article and displays it in the page. async function loadContent() { - const pageId = 'Cat'; + const pageId = 'Doughnut'; const response = await fetch( 'https://en.wikipedia.org/w/api.php?' + 'action=parse&formatversion=2&format=json&origin=*&page=' @@ -22,14 +22,19 @@ async function loadContent() { } loadImages(article.images); + loadExternal(article.externallinks) + loadLanguages(article.langlinks) + } + + // Takes an array of image file names, uses the Wikipedia API to get the full // URL for each one, and then displays them in the page. async function loadImages(images) { const imagesContainer = document.getElementById('images'); for (const image of images) { - // image is a local filename (e.g. Cat.jpg), so call the Wikipedia API to + // image is a local filename (e.g. doughnut.jpg), so call the Wikipedia API to // get the full URL for the image. const response = await fetch( 'https://en.wikipedia.org/w/api.php' @@ -51,4 +56,49 @@ async function loadImages(images) { imageElement.src = imageUrl; imagesContainer.appendChild(imageElement); } -} \ No newline at end of file +} + + + +async function loadLanguages(langLinks){ + + const linksElement = document.getElementById('languages'); + + for (const lang of langLinks) { + + const linkElement = document.createElement('p'); + + linkElement.innerText = lang.langname; + + const liElement = document.createElement('li'); + liElement.appendChild(linkElement); + + linksElement.appendChild(liElement); + + } + + +} + +async function loadExternal(externallinks){ + + const linksElement = document.getElementById('external'); + + for (const links of externallinks) { + + const linkElement = document.createElement('p'); + + + + linkElement.href = 'https://en.wikipedia.org/wiki/' + externallinks; + linkElement.innerText = externallinks; + + const liElement = document.createElement('li'); + liElement.appendChild(linkElement); + + linksElement.appendChild(liElement); + break; + } + + +} diff --git a/week-09-fetch/styles.css b/week-09-fetch/styles.css index 3bfc3cc..d130562 100644 --- a/week-09-fetch/styles.css +++ b/week-09-fetch/styles.css @@ -1,3 +1,8 @@ +Body{ + background-color: gold; +} + + #images { width: 500px; border: thin solid black; @@ -5,4 +10,28 @@ #images img { width: 100px; -} \ No newline at end of file +} + +#languages { +background-color:rgba(255,0,0,0.3); + +} +#external { +background-color:rgba(0,0,255,0.3) + +} + +#links { +background-color:rgba(0,255,0,0.3); + +} + +.flex-container { + display: flex; + background-color: aliceblue; +} + +h1 { + text-align: center; + color: indigo; +} diff --git a/week-12-accessibility/Background.jpg b/week-12-accessibility/Background.jpg new file mode 100644 index 0000000..e4e02af Binary files /dev/null and b/week-12-accessibility/Background.jpg differ diff --git a/week-12-accessibility/In-Blue-96.png b/week-12-accessibility/In-Blue-96.png new file mode 100644 index 0000000..ed281fb Binary files /dev/null and b/week-12-accessibility/In-Blue-96.png differ diff --git a/week-12-accessibility/MyFace.jpg b/week-12-accessibility/MyFace.jpg new file mode 100644 index 0000000..3427e9e Binary files /dev/null and b/week-12-accessibility/MyFace.jpg differ diff --git a/week-12-accessibility/README.md b/week-12-accessibility/README.md deleted file mode 100644 index 0308c38..0000000 --- a/week-12-accessibility/README.md +++ /dev/null @@ -1,31 +0,0 @@ -# Week 12: Accessibility - -This week, you're auditing your previous projects for accessibility issues. - -There are a few ways to audit your previous projects: - -- Manually test them. Does tab ordering work? -- Test them with your browser's developer tools, e.g. Lighthouse in Chrome. What - issues are automatically detected? -- Try them using a screen reader or other assistive devices. What's hard about - using your page? - -When you're done, you should have fixed at least 3 different accessibility -issues. Here are a few examples: - -- Do all of your images have `alt` attributes? -- Does all of your text have enough contrast? -- Do all of your input elements have labels? -- Are you using semantic HTML, e.g `

      ` tags instead of `

      ` tags styled to - look like headings? -- Are all of your links actionable, e.g. "click here to view the thing" instead - of "here"? - -It's up to you which issues you fix, and on what pages. Fixing the same issue -multiple times doesn't count! So it's great if you want to add `alt` attributes -to every image, but that only counts as fixing one issue. - -Optional bonus challenge: if you finish all of the above and want some more -practice, check out this GitHub search for open source projects with -accessibility issues: -https://github.com/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22+accessibility \ No newline at end of file diff --git a/week-12-accessibility/index.html b/week-12-accessibility/index.html new file mode 100644 index 0000000..0ba10d1 --- /dev/null +++ b/week-12-accessibility/index.html @@ -0,0 +1,43 @@ + + + + My Personal Webpage + + + + + + +

      + +

      Hey, my name is Jon and I'm a really cool guy!

      +

      I know I usually don't post anything, but you can check out some of my social media outlets below.

      + +
      + +
      + + +
      + +
      +
      + +
      +
      + +
      +

      And here is a picture of me with a smile on my face.

      +

      This would usually mean that I am happy, as opposed to melancholy or angry

      + +
      + + +
      + + + + + + + diff --git a/week-12-accessibility/script.js b/week-12-accessibility/script.js new file mode 100644 index 0000000..2c326cb --- /dev/null +++ b/week-12-accessibility/script.js @@ -0,0 +1,18 @@ +function load() { + console.log('Hello world!'); + + + + + + let hour = new Date().getHours(); + let greeting; +if (hour < 12) { + greeting = "Good Morning"; +} else if (hour < 17) { + greeting = "Good Afternoon"; +} else { + greeting = "Good Evening"; +} +document.getElementById("Hello").innerHTML = greeting; +} diff --git a/week-12-accessibility/styles.css b/week-12-accessibility/styles.css new file mode 100644 index 0000000..af47699 --- /dev/null +++ b/week-12-accessibility/styles.css @@ -0,0 +1,38 @@ +p { + font-size: large; + font-family: cursive; +} + +.MediaBox { + display: grid; + grid-template-columns: 109px 109px 109px; + grid-template-rows: 109px; + justify-content: space-evenly; + justify-items: center; + align-content: space-evenly; + align-items: center; +} + +.Left { +Border: thick solid black; + + +} + +.Middle { +Border: thick solid black; + + +} + +.Right { +Border: thick solid black; + +} + +.ProfilePic { + border: 12px solid #555; +} +Body { + background-image: url('Background.jpg'); +}