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

Second week tasks #377

Closed
wants to merge 6 commits into from
Closed

Second week tasks #377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
544cb19
feat: resolve problem and create an object checker
MiguelDecode Nov 8, 2023
202a985
feat: create a object human and an array checker
MiguelDecode Nov 8, 2023
c7f6a51
feat: create a new webpage with semantical html
MiguelDecode Nov 8, 2023
dbf98f5
feat: create a contact form
MiguelDecode Nov 10, 2023
5982345
fix: add accent-color and change variable name
MiguelDecode Nov 11, 2023
a12f17f
fix: delete some empty links
MiguelDecode Nov 26, 2023
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
105 changes: 105 additions & 0 deletions student-cvs/MiguelDecode-0503/contact.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
min-height: 100vh;
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
background-color: #eee;
}

img,
svg,
video {
max-width: 100%;
display: block;
}

input,
button,
textarea,
select {
font: inherit;
}

.wrapper {
width: min(90%, 60rem);
margin-inline: auto;
}

.form {
border: 1px solid gray;
padding: 2rem;
border-radius: 0.5rem;
background-color: #fff;
accent-color: cornflowerblue;
}

.form__input:focus-visible,
textarea:focus-visible,
.form__select:focus-visible {
outline: 2px solid cornflowerblue;
border: none;
}

.form__group {
margin-block: 1.25rem;
display: flex;
gap: 0.5rem;
flex-direction: column;
}

.form__label,
.form__legend {
font-weight: bold;
}

textarea {
resize: vertical;
padding: 1rem;
border-radius: 0.25rem;
}

.form__input,
fieldset {
border-radius: 0.25rem;
border: 1px solid gray;
padding: 0.25rem 0.5rem;
}

.form__parragraph {
margin-top: 0;
}

.form__select {
border-radius: 0.25rem;
padding: 0.25rem 0.5rem;
}

.form__submit {
display: block;
margin-left: auto;
border-radius: 0.25rem;
border: 1px solid gray;
padding: 1rem 4rem;
font-weight: bold;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
cursor: pointer;
}

.form__submit:hover {
background-color: white;
}

.form__submit:active {
transform: scale(1.1);
}
101 changes: 101 additions & 0 deletions student-cvs/MiguelDecode-0503/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Form</title>

<!-- Stylesheet -->
<link rel="stylesheet" href="./contact.css" />
</head>

<body>
<main class="wrapper">
<h1>Contact Form</h1>

<form id="form" class="form" action="./server" method="get">
<div class="form__group">
<label class="form__label" for="name">Name</label>
<input
class="form__input"
type="text"
id="name"
name="name"
placeholder="Insert your full name"
required
/>
</div>

<div class="form__group">
<label class="form__label" for="email">Email</label>
<input
class="form__input"
type="email"
name="email"
id="email"
placeholder="Insert your email"
required
/>
</div>

<div class="form__group">
<fieldset>
<legend class="form__legend">Budget</legend>
<input
type="radio"
name="budget"
id="10000"
value="10000"
required
/>
<label for="10000">$10000</label>
<input type="radio" name="budget" id="5000" value="5000" required />
<label for="5000">$5000</label>
<input type="radio" name="budget" id="3000" value="3000" required />
<label for="3000">$3000</label>
</fieldset>
<p class="form__parragraph">
This budget is an approach, not the total amount.
</p>
</div>

<div class="form__group">
<label class="form__label" for="type">Type of project</label>
<select class="form__select" id="type" name="type" required>
<option value="Website" selected>Website</option>
<option value="WebApp">WebApp</option>
<option value="Mobile App">Mobile App</option>
<option value="Design">Design</option>
</select>
</div>

<div class="form__group">
<label class="form__label" for="description">Description</label>
<textarea
id="description"
name="comment"
placeholder="Write a description at least five hundred words about the project."
minlength="500"
rows="6"
required
></textarea>
</div>

<div class="form__group">
<label for="terms">
<input type="checkbox" name="terms" required id="terms" />
I accept the terms and conditions
</label>
</div>

<button class="form__submit" type="submit">Send</button>
</form>
</main>
</body>

<script>
const formElement = document.getElementById("form");

document.addEventListener("submit", (event) => event.preventDefault());
</script>
</html>
46 changes: 46 additions & 0 deletions student-cvs/MiguelDecode-0503/exercise-1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
// Hugo, Paco y Luis tienen una cantidad desconocida de monedas cada uno.

// Sabemos que Paco tiene el doble de monedas que Hugo y que Luis tiene 10 monedas más que Paco.

// Si los tres juntos tienen un total de 85 monedas.

// Cuántas monedas tiene cada uno?

let hugo;
let paco;
let luis;
let total = 85;

// Calculate the part of Hugo in function of the total amount of coins
const calculateHugo = (amount) => {
// Total = hugo + paco + luis;
// 85 = x + 2 * x + 2 * x + 10
// 85 = x + 2x + 2x + 10
// 85 - 10 = x + 2x + 2x
// 75 = 5x
// x = 75 / 5
// x = 15

hugo = (amount - 10) / 5;
paco = hugo * 2;
luis = paco + 10;

console.log("Hugo: " + hugo);
console.log("Paco: " + paco);
console.log("Luis: " + luis);
};

// calculateHugo(total);

// CHECK IF A VARIABLE IS AN OBJECT

const checkIfIsObject = (obj) => {
if (!(typeof obj === "object")) return false;
if (!(obj instanceof Object)) return false;
return true;
};

// console.log(checkIfIsObject(null));
// console.log(checkIfIsObject([1, 2, 3]));
// console.log(checkIfIsObject({ name: "Miguel", surname: "Decode" }));

21 changes: 21 additions & 0 deletions student-cvs/MiguelDecode-0503/exercise-2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
// Write and object human that represent you.

const me = {
name: "Miguel",
surname: "Decode",
country: "spain",
};

// CHECK IF A VARIABLE IS AN ARRAY

const checkIfIsArray = (arr) => {
if (!(arr instanceof Array)) return false;
return true;
};

console.log(checkIfIsArray(null));
console.log(checkIfIsArray("Miguel"));
console.log(checkIfIsArray(39));
console.log(checkIfIsArray({ name: "Miguel", surname: "Decode" }));

console.log(checkIfIsArray([1, 2, 3]));
118 changes: 118 additions & 0 deletions student-cvs/MiguelDecode-0503/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Miguel Decode | Frontend Student</title>

<!-- Stylesheet -->
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<header id="home" class="header wrapper">
<h1 class="header__logo">Miguel Decode</h1>

<nav class="header__nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About me</a></li>
<li><a href="#terminal">Terminal commands</a></li>
</ul>
</nav>
</header>

<main class="wrapper">
<section class="about" id="about">
<h2>About me</h2>

<p>
Hello!, I'm <span class="accent">Miguel</span> and I'd like to share a
little about myself.
</p>

<h2>Hobbies</h2>
<ul>
<li>
Read books, especially <span class="accent">fantasy</span> and
<span class="accent">science fiction</span>.
</li>
<li>
The Japanese world, <span class="accent">anime </span>and
<span class="accent">manga</span>.
</li>
<li>
Looking for new challenges that help me to continue learning every
day.
</li>
</ul>

<h2>Home</h2>
<p>
Living in the most beautifull place of the world and where the people
of the past think the
<span class="accent">earth finish</span>. In the northwest of Spain.
</p>

<h2>I work as</h2>
<ul>
<li>
<span class="accent">Electromechanical </span>in a car company.
</li>
<li>Student of <span class="accent">front-end </span>developer</li>
</ul>
</section>

<section class="terminal" id="terminal">
<h2>Terminal commands I use every day</h2>

<table>
<thead>
<tr>
<th>Command</th>
<th>Description</th>
</tr>
</thead>
<tr>
<td>cd</td>
<td>Change Directory</td>
</tr>
<tr>
<td>ls</td>
<td>List files</td>
</tr>
<tr>
<td>rm</td>
<td>Remove file or directory</td>
</tr>
<tr>
<td>mkdir</td>
<td>Create a directory</td>
</tr>
<tr>
<td>pwd</td>
<td>Show the path of the current directory</td>
</tr>
</table>

<h3>Alias you must know</h3>

<table>
<tr>
<td>alias l='ls -CF'</td>
<td>
alias mostused='history | awk '\''{print $2}'\'' | sort | uniq -c
|sort -nr | head -n 10'
</td>
</tr>
</table>
</section>
</main>

<footer class="footer wrapper">
<p>
&copy; Create with love by
<a href="https://github.com/MiguelDecode">Miguel Decode</a> 2023.
</p>
</footer>
</body>
</html>
Loading