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

solution #665

Closed
wants to merge 9 commits into from
Closed

solution #665

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2a3f3c7
solution
Taras0506 Apr 10, 2023
09af41e
solution
Taras0506 Apr 15, 2023
b1b443a
solution
Taras0506 Apr 22, 2023
0a6d9d3
solution
Taras0506 Apr 22, 2023
ad00a0d
develop
Taras0506 Apr 22, 2023
3dcef15
solution
Taras0506 Apr 23, 2023
e9acd01
solution
Taras0506 Apr 25, 2023
42e070a
solution
Taras0506 Apr 25, 2023
b07d2c2
solution
Taras0506 Apr 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
48 changes: 47 additions & 1 deletion .linthtmlrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,49 @@
{
"extends": "@mate-academy/linthtml-config"
"attr-bans": [
"align",
"background",
"bgcolor",
"border",
"frameborder",
"style"
],
"attr-name-ignore-regex": "viewBox",
"attr-no-dup": true,
"attr-quote-style": "double",
"attr-req-value": true,
"class-no-dup": true,
"doctype-first": true,
"doctype-html5": true,
"fig-req-figcaption": true,
"head-req-title": true,
"html-req-lang": true,
"id-class-style": false,
"id-no-dup": true,
"img-req-src": true,
"img-req-alt": "allownull",
"indent-width": 2,
"indent-style": "spaces",
"indent-width-cont": true,
"input-radio-req-name": true,
"spec-char-escape": true,
"tag-bans": [
"b",
"i",
"u",
"center",
"style",
"marquee",
"font",
"s"
],
"tag-name-lowercase": true,
"tag-name-match": true,
"tag-self-close": "never",
"tag-close": true,
"text-ignore-regex": "&",
"title-no-dup": true,
"line-end-style": "lf",
"attr-new-line": 2,
"attr-name-style": "dash",
"attr-no-unsafe-char": true
}
84 changes: 84 additions & 0 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,89 @@
<body>
<h1>HTML Form</h1>
<script type="text/javascript" src="./main.js"></script>
<form
action="http://localhost:3000/api"
method="post"
autocomplete="off"
>
Taras0506 marked this conversation as resolved.
Show resolved Hide resolved
<label class="form-field">
<input type="text" name="username">
</label>
<label class="form-field">
Email:
<input
type="email"
name="email"
value="[email protected]"
>
</label>
<label class="form-field">
Password:
<input
type="password"
name="password"
placeholder="x value"
required
minlength="5"
maxlength="32"
>
</label>
<div class="form-field">
<input
type="checkbox"
name="terms"
id="terms-and-conditions"
required
>
<label for="terms-and-conditions">
I agree terms and conditions
</label>
</div>
<div>
<label class="form-field">
<input
type="checkbox"
name="remember"
value="123"
checked
required
>
Remember me
</label>
</div>
<div class="form-field">
Choose your sex:
<label>
<input
type="radio"
name="sex"
value="f"
>
- woman
</label>
<label>
<input
type="radio"
name="sex"
value="m"
>
Copy link

Choose a reason for hiding this comment

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

The 'name' attribute is missing for the How do you rate your work range input

- man
</label>
</div>
<label class="form-field">
Choose your favorite color

<select name="color">
<option value="#f00">Red</option>
<option value="#0f0" required>Green</option>
</select>
</label>
<button type="submit">Search</button>
</form>
</body>
</html>





20 changes: 20 additions & 0 deletions src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,21 @@
/* styles go here */
.form-field {
display: block;
margin: 10px 0;
}

.field::placeholder {
color: green;
}
Copy link

Choose a reason for hiding this comment

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

Suggested change
.field::placeholder {
color: green;
}

redundant


.field:invalid {
border: 1px solid red;
}

.field:focus {
background-color: azure;
}

.field:checked ~ .form__label {
color: grey;
}
Copy link

Choose a reason for hiding this comment

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

Suggested change
.field:invalid {
border: 1px solid red;
}
.field:focus {
background-color: azure;
}
.field:checked ~ .form__label {
color: grey;
}

looks like redundant styles for this task