Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cyntia zavala #3

Open
wants to merge 3 commits into
base: cyntia-zavala-review
Choose a base branch
from
Open

Cyntia zavala #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2a4b357
TS exercise cyntia
cyntiazp Jan 25, 2019
0b87f25
actualización de ejercicio, Cyntia
cyntiazp Jan 25, 2019
c163397
Merge conflicts with master
juanjoms Jan 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 34 additions & 14 deletions app/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,58 @@ class Greeter {
this.greeting = message;
}
greet() {
return "Hello, asd " + this.greeting;
return "Hello, asd" + this.greeting;
}
}

let greeter = new Greeter("from Typescript");

type Framework = {
name: string,
description: string,
url: string
}

let jsFrameworks: Framework[] = [
{
name: 'Angular',
description: 'Officia excepteur do dolor id ullamco magna qui ullamco.',
url: 'https://angular.io'
url: 'https://angular.io/'
},
{
name: 'Vue.js',
description: 'Ex do exercitation voluptate nisi Lorem non officia reprehenderit incididunt irure eiusmod.',
url: 'angular.io'
url: 'https://vuejs.org/'
},
{
name: 'React',
description: 'Nostrud Lorem excepteur tempor Lorem non ad occaecat commodo ut duis commodo consectetur proident.',
url: 'angular.io'
url: 'https://reactjs.org/'
},
{
name: 'Ember',
description: 'Cupidatat et id aliqua laboris esse irure eu incididunt veniam ea labore aute adipisicing.',
url: 'angular.io'
url: 'https://www.emberjs.com/'
}
];
const newName: HTMLInputElement = document.getElementById('newName') as HTMLInputElement;
const newDescription: HTMLInputElement = document.getElementById('newDescription') as HTMLInputElement;
const newUrl: HTMLInputElement = document.getElementById('newUrl') as HTMLInputElement;
const button: HTMLInputElement = document.getElementById("button") as HTMLInputElement;

const list: HTMLElement = document.getElementById('list-tab');

jsFrameworks.forEach((framework) => {
document.onkeypress = () => {
if(newName.value == "" || newDescription.value == "" || newUrl.value == "") {
button.disabled=true;
} else {
button.disabled = false;
}
}
let save = () => {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When a variable or method is not going to be reassigned, is a better practice to use const instead of let.

let newFramework: Framework = {
name: newName.value,
description: newDescription.value,
url: newUrl.value
};
agregar(newFramework);
}
let agregar = (framework) => {
Copy link
Owner

@juanjoms juanjoms Jan 31, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Parameters should always have a type, Typescript only infers a type when a variable is declared and assigned, so if we don't specify the type on parameters, the type will be any.

const link: HTMLAnchorElement = document.createElement('a');
link.className = 'list-group-item list-group-item-action';
link.href = 'javascript:void(0)';
Expand All @@ -55,7 +69,13 @@ jsFrameworks.forEach((framework) => {
frameworkSite.textContent = `Go to ${framework.name} site`;
}
list.appendChild(link);
newName.value = '';
newDescription.value = '';
newUrl.value = '';
button.disabled = false;
}
const list: HTMLElement = document.getElementById('list-tab');
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Although javascript uses Hoisting, it is a better practice to declare variables before using them (in this case list is used on line 71 but declared on line 77).

jsFrameworks.forEach((framework) => {
agregar(framework);
button.disabled = true;
});



31 changes: 18 additions & 13 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,20 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">

<title>Typescript Boilerplate</title>

<!-- Icons for this template -->
<link href="assets/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Stylesheet -->
<!-- build:css -->
<link href="assets/css/app.css" rel="stylesheet">
<!-- endbuild -->
</head>

<body class="bg-light">

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
Expand All @@ -45,7 +40,6 @@
</form>
</div>
</nav>

<main role="main" class="main text-center">
<div class="jumbotron">
<div class="container">
Expand All @@ -61,15 +55,30 @@ <h1 class="jumbotron-heading">Typescript Boilerplate</h1>
</p>
</div>
</div>

<div id="app text-center">
<div class="container">
<div class="container mb-5">
<form id="new-frameworkjs" class="row">
<div class="form-group col-3">
<label for="newName">Nombre</label>
<input type="text" class="form-control" id="newName" value="" placeholder="Nombre" required>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For ids and class names its a better practice to separate words by a hypen i.e. id="new-name"
https://google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_Delimiters

</div>
<div class="form-group col-3">
<label for="newDescription">Descripción</label>
<input type="text" class="form-control" id="newDescription" value="" placeholder="descripción" required>
</div>
<div class="form-group col-3">
<label for="newUrl">URL</label>
<input type="text" class="form-control" id="newUrl" placeholder="URL" value="" required>
</div>
<div class="col-1">
</div>
<input type="button" value="+" id="button" onclick="save()" class="form-group btn btn-primary"></input>
</form>
<div class="row">
<div class="col-6">
<div class="list-group" id="list-tab" role="tablist">
</div>
</div>

<div class="col-6">
<div class="card">
<div class="card-body">
Expand All @@ -79,16 +88,12 @@ <h5 class="card-title">Special title treatment</h5>
</div>
</div>
</div>

</div>
</div>
</div>

</main>

<!-- build:js -->
<script src="app/main.js"></script>
<!-- endbuild -->
</body>

</html>