udemy/corso-vue.git

parent: c56b01f7 | patch | commit | ignore whitespace

Cristiano Magro

2024-12-27 b63e90472953ef518a15defbedd1198ccd2c476c

lesson 06 all steps

9 files added

	06 - introducing components/cmp-intro-01-starting-setup/app.js	patch \| view \| raw \| blame \| history
	06 - introducing components/cmp-intro-01-starting-setup/index.html	40 ●●●●● patch \| view \| raw \| blame \| history
	06 - introducing components/cmp-intro-01-starting-setup/styles.css	63 ●●●●● patch \| view \| raw \| blame \| history
	06 - introducing components/cmp-intro-02-understanding-the-problem/app.js	28 ●●●●● patch \| view \| raw \| blame \| history
	06 - introducing components/cmp-intro-02-understanding-the-problem/index.html	34 ●●●●● patch \| view \| raw \| blame \| history
	06 - introducing components/cmp-intro-02-understanding-the-problem/styles.css	63 ●●●●● patch \| view \| raw \| blame \| history
	06 - introducing components/cmp-intro-03-introducing-components/app.js	53 ●●●●● patch \| view \| raw \| blame \| history
	06 - introducing components/cmp-intro-03-introducing-components/index.html	27 ●●●●● patch \| view \| raw \| blame \| history
	06 - introducing components/cmp-intro-03-introducing-components/styles.css	63 ●●●●● patch \| view \| raw \| blame \| history

 06 - introducing components/cmp-intro-01-starting-setup/app.js


 06 - introducing components/cmp-intro-01-starting-setup/index.html

New file
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Basics</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@next" defer></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <header>
      <h1>FriendList</h1>
    </header>
    <section id="app">
      <ul>
        <li>
          <h2>Manuel Lorenz</h2>
          <button>Show Details</button>
          <ul>
            <li><strong>Phone:</strong> 01234 5678 991</li>
            <li><strong>Email:</strong> manuel@localhost.com</li>
          </ul>
        </li>
        <li>
          <h2>Julie Jones</h2>
          <button>Show Details</button>
          <ul>
            <li><strong>Phone:</strong> 09876 543 221</li>
            <li><strong>Email:</strong> julie@localhost.com</li>
          </ul>
        </li>
      </ul>
    </section>
  </body>
</html>

 06 - introducing components/cmp-intro-01-starting-setup/styles.css

New file
@@ -0,0 +1,63 @@
* {
  box-sizing: border-box;
}

html {
  font-family: 'Jost', sans-serif;
}

body {
  margin: 0;
}

header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 3rem auto;
  border-radius: 10px;
  padding: 1rem;
  background-color: #58004d;
  color: white;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}

#app ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#app li {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 1rem auto;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}

#app h2 {
  font-size: 2rem;
  border-bottom: 4px solid #ccc;
  color: #58004d;
  margin: 0 0 1rem 0;
}

#app button {
  font: inherit;
  cursor: pointer;
  border: 1px solid #ff0077;
  background-color: #ff0077;
  color: white;
  padding: 0.05rem 1rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
}

#app button:hover,
#app button:active {
  background-color: #ec3169;
  border-color: #ec3169;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}

 06 - introducing components/cmp-intro-02-understanding-the-problem/app.js

New file
@@ -0,0 +1,28 @@
const app = Vue.createApp({
  data() {
    return {
      detailsAreVisible: false,
      friends: [
        {
          id: 'manuel',
          name: 'Manuel Lorenz',
          phone: '01234 5678 991',
          email: 'manuel@localhost.com',
        },
        {
          id: 'julie',
          name: 'Julie Jones',
          phone: '09876 543 221',
          email: 'julie@localhost.com',
        },
      ],
    };
  },
  methods: {
    toggleDetails() {
      this.detailsAreVisible = !this.detailsAreVisible;
    }
  }
});

app.mount('#app');

 06 - introducing components/cmp-intro-02-understanding-the-problem/index.html

New file
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Basics</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@next" defer></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <header>
      <h1>FriendList</h1>
    </header>
    <section id="app">
      <ul>
        <li v-for="friend in friends" :key="friend.id">
          <h2>{{ friend.name }}</h2>
          <button @click="toggleDetails()">
            {{ detailsAreVisible ? 'Hide' : 'Show' }} Details
          </button>
          <ul v-if="detailsAreVisible">
            <li><strong>Phone:</strong> {{ friend.phone }}</li>
            <li><strong>Email:</strong> {{ friend.email }}</li>
          </ul>
        </li>
      </ul>
    </section>
  </body>
</html>

 06 - introducing components/cmp-intro-02-understanding-the-problem/styles.css

New file
@@ -0,0 +1,63 @@
* {
  box-sizing: border-box;
}

html {
  font-family: 'Jost', sans-serif;
}

body {
  margin: 0;
}

header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 3rem auto;
  border-radius: 10px;
  padding: 1rem;
  background-color: #58004d;
  color: white;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}

#app ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#app li {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 1rem auto;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}

#app h2 {
  font-size: 2rem;
  border-bottom: 4px solid #ccc;
  color: #58004d;
  margin: 0 0 1rem 0;
}

#app button {
  font: inherit;
  cursor: pointer;
  border: 1px solid #ff0077;
  background-color: #ff0077;
  color: white;
  padding: 0.05rem 1rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
}

#app button:hover,
#app button:active {
  background-color: #ec3169;
  border-color: #ec3169;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}

 06 - introducing components/cmp-intro-03-introducing-components/app.js

New file
@@ -0,0 +1,53 @@
const app = Vue.createApp({
  data() {
    return {
      friends: [
        {
          id: 'manuel',
          name: 'Manuel Lorenz',
          phone: '01234 5678 991',
          email: 'manuel@localhost.com',
        },
        {
          id: 'julie',
          name: 'Julie Jones',
          phone: '09876 543 221',
          email: 'julie@localhost.com',
        },
      ],
    };
  },
});

app.component('friend-contact', {
  template: `
  <li>
    <h2>{{ friend.name }}</h2>
    <button @click="toggleDetails()">
      {{ detailsAreVisible ? 'Hide' : 'Show' }} Details
    </button>
    <ul v-if="detailsAreVisible">
      <li><strong>Phone:</strong> {{ friend.phone }}</li>
      <li><strong>Email:</strong> {{ friend.email }}</li>
    </ul>
  </li>
  `,
  data() {
    return {
      detailsAreVisible: false,
      friend: {
        id: 'manuel',
        name: 'Manuel Lorenzo',
        phone: '01234 5678 991',
        email: 'manuel@localhost.com',
      },
    };
  },
  methods: {
    toggleDetails() {
      this.detailsAreVisible = !this.detailsAreVisible;
    },
  },
});

app.mount('#app');

 06 - introducing components/cmp-intro-03-introducing-components/index.html

New file
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Basics</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@next" defer></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <header>
      <h1>FriendList</h1>
    </header>
    <friend-contact></friend-contact>
    <section id="app">
      <ul>
        <friend-contact></friend-contact>
        <friend-contact></friend-contact>
      </ul>
    </section>
  </body>
</html>

 06 - introducing components/cmp-intro-03-introducing-components/styles.css

New file
@@ -0,0 +1,63 @@
* {
  box-sizing: border-box;
}

html {
  font-family: 'Jost', sans-serif;
}

body {
  margin: 0;
}

header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 3rem auto;
  border-radius: 10px;
  padding: 1rem;
  background-color: #58004d;
  color: white;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}

#app ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#app li {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 1rem auto;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}

#app h2 {
  font-size: 2rem;
  border-bottom: 4px solid #ccc;
  color: #58004d;
  margin: 0 0 1rem 0;
}

#app button {
  font: inherit;
  cursor: pointer;
  border: 1px solid #ff0077;
  background-color: #ff0077;
  color: white;
  padding: 0.05rem 1rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
}

#app button:hover,
#app button:active {
  background-color: #ec3169;
  border-color: #ec3169;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}

New file
			@@ -0,0 +1,40 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="UTF-8" />
			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
			<title>Vue Basics</title>
			<link
			href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
			rel="stylesheet"
			/>
			<link rel="stylesheet" href="styles.css" />
			<script src="https://unpkg.com/vue@next" defer></script>
			<script src="app.js" defer></script>
			</head>
			<body>
			<header>
			<h1>FriendList</h1>
			</header>
			<section id="app">
			<ul>
			<li>
			<h2>Manuel Lorenz</h2>
			<button>Show Details</button>
			<ul>
			<li><strong>Phone:</strong> 01234 5678 991</li>
			<li><strong>Email:</strong> manuel@localhost.com</li>
			</ul>
			</li>
			<li>
			<h2>Julie Jones</h2>
			<button>Show Details</button>
			<ul>
			<li><strong>Phone:</strong> 09876 543 221</li>
			<li><strong>Email:</strong> julie@localhost.com</li>
			</ul>
			</li>
			</ul>
			</section>
			</body>
			</html>

New file
			@@ -0,0 +1,63 @@
			* {
			box-sizing: border-box;
			}

			html {
			font-family: 'Jost', sans-serif;
			}

			body {
			margin: 0;
			}

			header {
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
			margin: 3rem auto;
			border-radius: 10px;
			padding: 1rem;
			background-color: #58004d;
			color: white;
			text-align: center;
			width: 90%;
			max-width: 40rem;
			}

			#app ul {
			margin: 0;
			padding: 0;
			list-style: none;
			}

			#app li {
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
			margin: 1rem auto;
			border-radius: 10px;
			padding: 1rem;
			text-align: center;
			width: 90%;
			max-width: 40rem;
			}

			#app h2 {
			font-size: 2rem;
			border-bottom: 4px solid #ccc;
			color: #58004d;
			margin: 0 0 1rem 0;
			}

			#app button {
			font: inherit;
			cursor: pointer;
			border: 1px solid #ff0077;
			background-color: #ff0077;
			color: white;
			padding: 0.05rem 1rem;
			box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
			}

			#app button:hover,
			#app button:active {
			background-color: #ec3169;
			border-color: #ec3169;
			box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
			}

New file
			@@ -0,0 +1,28 @@
			const app = Vue.createApp({
			data() {
			return {
			detailsAreVisible: false,
			friends: [
			{
			id: 'manuel',
			name: 'Manuel Lorenz',
			phone: '01234 5678 991',
			email: 'manuel@localhost.com',
			},
			{
			id: 'julie',
			name: 'Julie Jones',
			phone: '09876 543 221',
			email: 'julie@localhost.com',
			},
			],
			};
			},
			methods: {
			toggleDetails() {
			this.detailsAreVisible = !this.detailsAreVisible;
			}
			}
			});

			app.mount('#app');

New file
			@@ -0,0 +1,34 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="UTF-8" />
			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
			<title>Vue Basics</title>
			<link
			href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
			rel="stylesheet"
			/>
			<link rel="stylesheet" href="styles.css" />
			<script src="https://unpkg.com/vue@next" defer></script>
			<script src="app.js" defer></script>
			</head>
			<body>
			<header>
			<h1>FriendList</h1>
			</header>
			<section id="app">
			<ul>
			<li v-for="friend in friends" :key="friend.id">
			<h2>{{ friend.name }}</h2>
			<button @click="toggleDetails()">
			{{ detailsAreVisible ? 'Hide' : 'Show' }} Details
			</button>
			<ul v-if="detailsAreVisible">
			<li><strong>Phone:</strong> {{ friend.phone }}</li>
			<li><strong>Email:</strong> {{ friend.email }}</li>
			</ul>
			</li>
			</ul>
			</section>
			</body>
			</html>

New file
			@@ -0,0 +1,53 @@
			const app = Vue.createApp({
			data() {
			return {
			friends: [
			{
			id: 'manuel',
			name: 'Manuel Lorenz',
			phone: '01234 5678 991',
			email: 'manuel@localhost.com',
			},
			{
			id: 'julie',
			name: 'Julie Jones',
			phone: '09876 543 221',
			email: 'julie@localhost.com',
			},
			],
			};
			},
			});

			app.component('friend-contact', {
			template: `
			<li>
			<h2>{{ friend.name }}</h2>
			<button @click="toggleDetails()">
			{{ detailsAreVisible ? 'Hide' : 'Show' }} Details
			</button>
			<ul v-if="detailsAreVisible">
			<li><strong>Phone:</strong> {{ friend.phone }}</li>
			<li><strong>Email:</strong> {{ friend.email }}</li>
			</ul>
			</li>
			`,
			data() {
			return {
			detailsAreVisible: false,
			friend: {
			id: 'manuel',
			name: 'Manuel Lorenzo',
			phone: '01234 5678 991',
			email: 'manuel@localhost.com',
			},
			};
			},
			methods: {
			toggleDetails() {
			this.detailsAreVisible = !this.detailsAreVisible;
			},
			},
			});

			app.mount('#app');

New file
			@@ -0,0 +1,27 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="UTF-8" />
			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
			<title>Vue Basics</title>
			<link
			href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
			rel="stylesheet"
			/>
			<link rel="stylesheet" href="styles.css" />
			<script src="https://unpkg.com/vue@next" defer></script>
			<script src="app.js" defer></script>
			</head>
			<body>
			<header>
			<h1>FriendList</h1>
			</header>
			<friend-contact></friend-contact>
			<section id="app">
			<ul>
			<friend-contact></friend-contact>
			<friend-contact></friend-contact>
			</ul>
			</section>
			</body>
			</html>