diff --git a/.cspell.json b/.cspell.json index 2c47b1f..dd95800 100644 --- a/.cspell.json +++ b/.cspell.json @@ -23,6 +23,7 @@ "eslint", "flashword", "husky", + "lightpink", "keyup", "linkcheck", "lintstaged", diff --git a/web-projects/first-website/images/fd2-logo-orange.png b/web-projects/first-website/images/fd2-logo-orange.png new file mode 100644 index 0000000..12cc257 Binary files /dev/null and b/web-projects/first-website/images/fd2-logo-orange.png differ diff --git a/web-projects/first-website/images/fd2-logo.png b/web-projects/first-website/images/fd2-logo.png new file mode 100644 index 0000000..a9ff671 Binary files /dev/null and b/web-projects/first-website/images/fd2-logo.png differ diff --git a/web-projects/first-website/index.html b/web-projects/first-website/index.html new file mode 100644 index 0000000..4fe7a96 --- /dev/null +++ b/web-projects/first-website/index.html @@ -0,0 +1,46 @@ + + + + + + + + + + + The FarmData2 Project + + +

The FarmData2 Project

+ + The FarmData2 Logo showing a carrot on a mobile phone screen. + +

+ FarmData2 aims to + extend farmOS by adding data input forms, reporting, and analytics that + support the day-to-day operation of diversified vegetable farms, while + also facilitating the keeping of records necessary for organic + certification and for the study of sustainable farming practices. +

+ +

+ FarmData2 contains features for recording the following activities that + are likely to occur on a small diversified vegetable farm. +

+ + + + + diff --git a/web-projects/first-website/scripts/main.js b/web-projects/first-website/scripts/main.js new file mode 100644 index 0000000..dcf5051 --- /dev/null +++ b/web-projects/first-website/scripts/main.js @@ -0,0 +1,34 @@ +const myImage = document.querySelector('img') + +myImage.addEventListener('click', () => { + const mySrc = myImage.getAttribute('src') + if (mySrc === 'images/fd2-logo.png') { + myImage.setAttribute('src', 'images/fd2-logo-orange.png') + } else { + myImage.setAttribute('src', 'images/fd2-logo.png') + } +}) + +let myButton = document.querySelector('button') +let myHeading = document.querySelector('h1') + +function setUserName() { + const myName = prompt('Please enter your name.') + if (!myName) { + setUserName() + } else { + localStorage.setItem('name', myName) + myHeading.textContent = `Mozilla is cool, ${myName}` + } +} + +if (!localStorage.getItem('name')) { + setUserName() +} else { + const storedName = localStorage.getItem('name') + myHeading.textContent = `FarmData2 is cool, ${storedName}` +} + +myButton.addEventListener('click', () => { + setUserName() +}) diff --git a/web-projects/first-website/styles/style.css b/web-projects/first-website/styles/style.css new file mode 100644 index 0000000..9872f0f --- /dev/null +++ b/web-projects/first-website/styles/style.css @@ -0,0 +1,37 @@ +html { + /* px means "pixels". The base font size is now 10 pixels high */ + font-size: 10px; + /* Replace PLACEHOLDER with the font-family property value you got from Google Fonts */ + font-family: 'Roboto', sans-serif; + background-color: #b8fdb1; +} + +h1 { + font-size: 60px; + text-align: center; + margin: 0; + padding: 20px 0; + color: #12601b; + text-shadow: 3px 3px 1px #b8fdb1; +} + +p, +li { + font-size: 16px; + line-height: 2; + letter-spacing: 1px; +} + +body { + width: 600px; + margin: 0 auto; + background-color: #ff9500; + padding: 0 20px 20px 20px; + border: 5px solid black; +} + +img { + display: block; + margin: 0 auto; + max-width: 100%; +} diff --git a/web-projects/flashword/app.js b/web-projects/flashword/app.js new file mode 100644 index 0000000..43fc0af --- /dev/null +++ b/web-projects/flashword/app.js @@ -0,0 +1,85 @@ +const Flashword = { + data() { + return { + wordA: 'hola', + wordB: 'hello', + answer: '', + correct: null, + showFeedback: false, + image: null, + imageAlt: null, + hasError: false, + inputBackgroundColor: 'white', + showHint: false, + level: 'easy', + sentence: '', + lastName: '', + firstName: '', + firstNameAndLastName: '', + + // Array example + spanishWords: ['hola', 'adios', 'uno', 'dos'], + + // Object example + word: { a: 'hola', b: 'hello' }, + + // Array of objects example + words: [ + { wordA: 'hola', wordB: 'hello' }, + { wordA: 'adios', wordB: 'goodbye' }, + { wordA: 'uno', wordB: 'one' }, + { wordA: 'dos', wordB: 'two' }, + ], + } + }, + computed: { + fullName() { + return this.firstName + ' ' + this.lastName + }, + shortSpanishWords() { + return this.spanishWords.filter((word) => word.length <= 3) + }, + }, + watch: { + firstName() { + this.firstNameAndLastName = this.firstName + ' ' + this.lastName + }, + lastName() { + this.firstNameAndLastName = this.firstName + ' ' + this.lastName + }, + }, + methods: { + getFullName() { + return this.firstName + ' ' + this.lastName + }, + checkAnswer() { + if (this.answer == '') { + this.hasError = true + this.inputBackgroundColor = 'lightpink' + return + } + + this.hasError = false + this.inputBackgroundColor = 'white' + + this.correct = this.wordB == this.answer + + if (this.correct) { + this.image = 'correct' + this.imageAlt = 'Green check mark.' + } else { + this.image = 'incorrect' + this.imageAlt = 'Red X.' + } + + this.showFeedback = true + }, + reset() { + this.answer = '' + this.showFeedback = false + }, + }, +} + +// eslint-disable-next-line no-unused-vars, no-undef +const app = Vue.createApp(Flashword).mount('#app') diff --git a/web-projects/flashword/index.html b/web-projects/flashword/index.html new file mode 100644 index 0000000..b952f36 --- /dev/null +++ b/web-projects/flashword/index.html @@ -0,0 +1,119 @@ + + + + FlashWord + + + + + + + + + +

FlashWord

+ +
+ What is the English translation of the word {{ wordA }}? + + + + + + +
A hint would appear here.
+ +

You must enter an answer.

+ +

You answered: {{ answer }}

+ + + + + +

Difficulty level radios:

+ + + + + + + + + +

Difficulty level select dropdown:

+ + +

Use the word in a sentence

+ + +

{{ sentence }}

+ +

First name:

+

Last name:

+ +

Hello {{ fullName }}

+

Hello {{ getFullName() }}

+

Hello {{ firstNameAndLastName }}

+ + +
+ +