Skip to content

Html #1

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

Open
jaguerra2017 wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Html #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d953f9b
Change readme
jaguerra2017 Jan 15, 2018
c5f82fd
Adding some code
jaguerra2017 Jan 16, 2018
5f4fb2c
Adding some code
jaguerra2017 Jan 16, 2018
4a8ffc5
Adding some code
jaguerra2017 Jan 16, 2018
01213a9
Adding some code
jaguerra2017 Jan 16, 2018
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
1 change: 1 addition & 0 deletions Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
AngularJS Training
166 changes: 166 additions & 0 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
body{
font-family: Calibri;
Copy link
Copy Markdown

@acecochez acecochez Dec 13, 2024

Choose a reason for hiding this comment

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

I would add a fallback font of "Arial"
E.g. font-family: Calibri, Arial;

}

u{
padding-bottom: 30px;
}

header {
color: forestgreen;
font-size: 2em;
font-weight: bold;
display: flex;
flex-flow: row wrap;
}

section {
border: solid 0.5px #95c9bc;
}

section > header {
background-color: #95c9bc;
width: 100%;
}

section > footer {
background-color: lightgray;
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
}

article{
padding: 8px;
}

button {
margin: 5px;
background-color: #95c9bc;
color: #ffffff;
padding: 5px;
display: inline-block;
font-weight: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
font-size: 14px;
}

header > h1 {
margin: 5px;
color: black;
font-size: 24px;
}

form{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}

.form-side{
margin-top: 20px;
}

.form-item{
display: flex;
vertical-align: middle;
width: 100%;
margin-bottom: 25px;
margin-top: 10px;
}

label{
font-weight: bold;
display: inline-block;
width: 200px;
float:left;
position: relative;
align-self: center;
}

label > span{
color: red;
}
Comment on lines +86 to +88
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Dec 11, 2024

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Enhance accessibility for required field indicators

The red asterisk should be more accessible with proper ARIA attributes and screen reader text.

label > span {
  color: red;
+  position: relative;
}

+label > span::after {
+  content: " (required)";
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
label > span{
color: red;
}
label > span{
color: red;
position: relative;
}
label > span::after {
content: " (required)";
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}



input, textarea, select {
width : 350px;
margin: 0;

-webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
-moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
box-sizing: border-box;
}

input[type='checkbox']{
width: 30px;
}

textarea{
height: 90px;
resize: none;
}

.checkboxes{
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}

.checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}

.mainmenubtn {
color: black;
border: none;
cursor: pointer;
}

.mainmenubtn:hover {
font-weight: bold;
}

.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: #abe1d4;
min-width: 110px;
}
.dropdown-child a {
color: black;
font-size: 13px;
padding: 10px;
padding-top: 5px;
text-decoration: none;
display: block;
}

.dropdown-child a:hover {
font-weight: bold;
cursor: pointer;
background-color: #95c9bc;
}

.dropdown:hover .dropdown-child {
display: block;
z-index: 9999;
position: absolute;
}

@media (max-width: 768px) {
input, textarea, select {
width : 100%;
}
}
149 changes: 149 additions & 0 deletions html/formulario.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="AngularJS Training">
<meta name="author" content="JAG">
<title>AngularJS Training</title>
<link rel="stylesheet" href="../css/styles.css">
Comment on lines +4 to +8
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Dec 11, 2024

Choose a reason for hiding this comment

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

⚠️ Potential issue

Add viewport meta tag for proper mobile rendering

The page lacks proper mobile viewport configuration, which is essential for responsive design.

<head>
  <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="AngularJS Training">
  <meta name="author" content="JAG">
  <title>AngularJS Training</title>
  <link rel="stylesheet" href="../css/styles.css">
</head>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<meta charset="UTF-8">
<meta name="description" content="AngularJS Training">
<meta name="author" content="JAG">
<title>AngularJS Training</title>
<link rel="stylesheet" href="../css/styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="AngularJS Training">
<meta name="author" content="JAG">
<title>AngularJS Training</title>
<link rel="stylesheet" href="../css/styles.css">

</head>
<body>
<header>
Formulario
</header>
<section>
<header>
<h1>Workshop Registration</h1>
<div class="dropdown">
<button class="mainmenubtn">More Actions <span>&#65516;</span></button>
<div class="dropdown-child">
<a >English</a>
<a >Español</a>
</div>
</div>
</header>
<article>
<u>Register now while seats are available!</u>
<form>
<div class="form-side">
Comment on lines +27 to +28
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Dec 11, 2024

Choose a reason for hiding this comment

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

⚠️ Potential issue

Add form submission handling and validation

The form lacks proper submission handling, method specification, and client-side validation.

- <form>
+ <form action="/submit-registration" method="POST" novalidate onsubmit="return validateForm(event)">

Committable suggestion skipped: line range outside the PR's diff.

<div class="form-item">
<label>
First name <span>*</span>
</label>
<input type="text" title="First name" name="first_name">
</div>
<div class="form-item">
<label>
Last name <span>*</span>
</label>
<input type="text" title="Last name" name="last_name">
</div>
<div class="form-item">
<label>
Company Institution <span>*</span>
</label>
<input type="text" title="Company Institution" name="company">
</div>
<div class="form-item">
<label>
Addres <span>*</span>
Copy link
Copy Markdown

@acecochez acecochez Dec 13, 2024

Choose a reason for hiding this comment

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

Typo "Addres"

</label>
<textarea title="Addres" name="address"></textarea>
Comment on lines +49 to +51
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Dec 11, 2024

Choose a reason for hiding this comment

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

⚠️ Potential issue

Fix typo in address label

There's a spelling error in the address label.

- Addres <span>*</span>
+ Address <span>*</span>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
Addres <span>*</span>
</label>
<textarea title="Addres" name="address"></textarea>
Address <span>*</span>
</label>
<textarea title="Addres" name="address"></textarea>

</div>
<div class="form-item">
<label>
City
</label>
<input type="text" title="City" name="city">
</div>
<div class="form-item">
<label>
State /Province /Region
</label>
<select name="state">
<option value="">-Select-</option>
</select>
</div>
Comment on lines +63 to +66
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Dec 11, 2024

Choose a reason for hiding this comment

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

⚠️ Potential issue

Populate state and country dropdowns

The state and country dropdowns are empty except for the default option.

Consider adding a comprehensive list of countries and states, or implementing dynamic population based on selection.

Would you like me to provide a complete list of countries and states for these dropdowns?

Also applies to: 71-74

<div class="form-item">
<label>
Country
</label>
<select name="country">
<option value="">-Select-</option>
</select>
</div>
<div class="form-item">
<label>
Email <span>*</span>
</label>
<input type="email" title="E-mail" name="email">
</div>
<div class="form-item">
<label>
Phone number <span>*</span>
</label>
<input type="number" title="Phone number" name="phone">
Copy link
Copy Markdown

@acecochez acecochez Dec 13, 2024

Choose a reason for hiding this comment

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

type="number" will remove any 0 from the beginning. https://www.w3schools.com/tags/att_input_type_tel.asp

</div>
Comment on lines +85 to +86
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Dec 11, 2024

Choose a reason for hiding this comment

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

⚠️ Potential issue

Improve phone number input field

Using type="number" for phone numbers is incorrect as it allows scientific notation and removes leading zeros.

- <input type="number" title="Phone number" name="phone">
+ <input type="tel" pattern="[0-9\-\+\s()]+" title="Phone number" name="phone" placeholder="e.g., +1 (555) 123-4567">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<input type="number" title="Phone number" name="phone">
</div>
<input type="tel" pattern="[0-9\-\+\s()]+" title="Phone number" name="phone" placeholder="e.g., +1 (555) 123-4567">
</div>

</div>
<div class="form-side">
<u>Lunch</u>
<div class="form-item">
<label>
Meal preference
</label>
<select name="meal">
Copy link
Copy Markdown

@acecochez acecochez Dec 13, 2024

Choose a reason for hiding this comment

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

Could add other options such as "vegan" or "no preference"

<option value="">Vegetarian</option>
Copy link
Copy Markdown

@acecochez acecochez Dec 13, 2024

Choose a reason for hiding this comment

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

No value?

</select>
</div>

<u>Payment Details</u>
<div class="form-item">
<label>
Payment mode
</label>
<div class="checkboxes">
<div class="checkbox">
<span><input type="checkbox" name="payment">Cash</span>
</div>
<div class="checkbox">
<span><input type="checkbox" name="payment">Cheque</span>
</div>
<div class="checkbox">
<span><input type="checkbox" name="payment">Demand draft</span>
</div>
</div>
Comment on lines +104 to +114
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Dec 11, 2024

Choose a reason for hiding this comment

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

⚠️ Potential issue

Use radio buttons for mutually exclusive payment modes

Payment modes should be mutually exclusive - users shouldn't be able to select multiple payment methods simultaneously.

<div class="checkboxes">
  <div class="checkbox">
-   <span><input type="checkbox" name="payment">Cash</span>
+   <span><input type="radio" name="payment" value="cash" required>Cash</span>
  </div>
  <div class="checkbox">
-   <span><input type="checkbox" name="payment">Cheque</span>
+   <span><input type="radio" name="payment" value="cheque">Cheque</span>
  </div>
  <div class="checkbox">
-   <span><input type="checkbox" name="payment">Demand draft</span>
+   <span><input type="radio" name="payment" value="draft">Demand draft</span>
  </div>
</div>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div class="checkboxes">
<div class="checkbox">
<span><input type="checkbox" name="payment">Cash</span>
</div>
<div class="checkbox">
<span><input type="checkbox" name="payment">Cheque</span>
</div>
<div class="checkbox">
<span><input type="checkbox" name="payment">Demand draft</span>
</div>
</div>
<div class="checkboxes">
<div class="checkbox">
<span><input type="radio" name="payment" value="cash" required>Cash</span>
</div>
<div class="checkbox">
<span><input type="radio" name="payment" value="cheque">Cheque</span>
</div>
<div class="checkbox">
<span><input type="radio" name="payment" value="draft">Demand draft</span>
</div>
</div>


<!--<input type="checkbox" name="payment"><span>dsdhsdhsdh</span>-->
</div>
<div class="form-item">
<label>
DD/Cheque No.
</label>
<input type="text" title="DD/Cheque No." name="cheque_no">
</div>
<div class="form-item">
<label>
Drawn On (Bank Name)
</label>
<input type="text" title="Drawn On (Bank Name)" name="drawn">
</div>
<div class="form-item">
<label>
Payable at
</label>
<input type="text" title="Payable at" name="payable">
</div>
</div>

</form>
</article>
<footer>
<button type="submit" value="Sumbit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</footer>
Comment on lines +140 to +143
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Dec 11, 2024

Choose a reason for hiding this comment

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

⚠️ Potential issue

Move buttons inside form element and add proper attributes

The submit and reset buttons are currently outside the form element, which will prevent them from working properly.

- </form>
- </article>
- <footer>
-   <button type="submit" value="Sumbit">Submit</button>
-   <button type="reset" value="Reset">Reset</button>
- </footer>
+ <footer>
+   <button type="submit">Submit</button>
+   <button type="reset">Reset</button>
+ </footer>
+ </form>
+ </article>

Committable suggestion skipped: line range outside the PR's diff.

</section>
<footer>

</footer>
</body>
</html>