pup-bsit / exercise-12-vrzn_webdev

exercise-12-vrzn_webdev created by GitHub Classroom

👋 WELCOME TO OUR REPOSITORY 👋

🚀 VRZN GROUP 🚀

Explore our website on:

Our group focused on practicing fundamental concepts essential for creating dynamic and interactive websites. We explored key aspects such as HTML for structuring web content, CSS for designing and styling web pages, and JavaScript for implementing dynamic and responsive features. Through collaborative efforts, we gained hands-on experience in creating user-friendly interfaces, optimizing web pages for various devices, and enhancing overall user experience.

---

exercise-12-vrzn_webdev's Issues

Fix logo path

Good Day! please refer to your HTML and fix your logo directory

Link to your HTML File:
Adrian Naoe
Mark Odrunia

<link rel="icon" href="../img/vrzn.png" type="img/x-icon">

I suggest that you make this change

add comment feature

please add the comment feature on your webpage, refer to this instructions.

also, make sure to adhere to the guidelines

Thank You!

recommended changes

@Naoe-Adrian

Upon code review, I have noticed lines in your code that do not adhere to the guidelines that are given to us.

Please fix these issues ASAP.

First issue

exercise-12-vrzn_webdev/naoe_adrian/naoe_adrian.html

Lines 253 to 265 in 9fceb9e

	<img id="slide-1"
	src="./img/naoe-pic.jpg"
	alt="Adrian naoe stolen picture" />
	<img id="slide-2"
	src="./img/group-pic-12jpg.jpg"
	alt="BSIT 3-1 Friends Group Picture" />
	<img id="slide-3"
	src="./img/group-pic-11.jpg"
	alt="Teknikal Team Group Picture" />
	<img id="slide-4"
	src="./img/group-pic-3.jpg"
	alt="Andronicus birthday celebartion" />
	<img id="slide-5"

ID names should be in snake case

Second Issue

exercise-12-vrzn_webdev/naoe_adrian/naoe_adrian.html

Line 25 in 9fceb9e

<i class="location-name"></i> Muntinlupa City

<i> tag seems to be not doing anything.

Please make the proper changes and make sure to still adhere to the proper guidelines that are given to us.

Thank You!

Refactor JS code

exercise-12-vrzn_webdev/dimasacat_andronicus/dimasacat_andronicus.js

Line 5 in 7678ae7

commentButton.disabled = !(name.length > 0 && comment.length > 0);

Refactor to:
commentButton.disabled = !(name.length && comment.length);

See here for your reference

use a different js selector

adhering to the guidelines that are given to us, please use a different JS selector.

@go-christianharrel : JS File

I would suggest that u use queryselector/queryselectorAll.

Thank You!

Exceeds 80-Character Line Limit & Anchor tag path

Jhean Galope:
Please review your line column length related to the comment section, which can be found on lines 86, 205 and 222 Thank you .

<div class="details">
                  <h4>Christian Harrel Go</h4>
                  <p>We have similar goals, let's build community together sooner!</p>
</div>

 
  <form action="#">
                 <input type="text" id="input_name" placeholder="enter name">
                  <textarea name="comment" id="input_comment" placeholder="Enter your comment right here..."></textarea>
                   <button type="button" class="comment-btn" disabled>Comment</button>
  </form>

Andronicus Dimasacat:
Fix your anchor tag and line column length as well you can scan your codes starts on line 82.

  <div class="works-style">
          <li>
            <a
              href="https://www.figma.com/file/r6KJwKWoKIqhE3EhaOHwe6/DIMASACAT_HCI_DESIGN?type=design&node-id=0%3A1&mode=design&t=oOBXIAebmb2Jyowx-1"
              target="blank"
              >Photo Editor Design in Figma</a
            >
          </li>

Refer to the anchor tags in your container-works div.

Below is a suggested change for your anchor tag:

<a href="#"></a>

@Odrunia-Mark-Ryan Please review your line column length related to your works container, which can be found on lines 110-146

<b><a id="work_id" href="#" alt="work" target="_blank">Work 1</a></b>
            <p></p>
        </div>
        <div class="card-work">
            <div class="align">
                <span class="red"></span>
                <span class="yellow"></span>
                <span class="green"></span>
            </div>
            <b><a id="work_id" href="#" alt="work" target="_blank">Work 2</a></b>
 <p></p>

@go-christianharrel Please review your line column length related to the goals container, which can be found on lines 256

 <p>
            I'm convinced that the program/course I've chosen will open doors to
            a new path, allowing me to chase my dreams and fulfill my deepest
            passions.
  </p>

recommended changes

@Odrunia-Mark-Ryan

Upon code review, I've noticed a couple of lines of codes that could be better.

Although these suggestions aren't mandatory, they could contribute to better
code quality and adherence to best practices. Feel free to implement these changes
if you find them beneficial.

FIRST SUGGESTED CHANGE

origin

exercise-12-vrzn_webdev/Odrunia_Mark_Ryan/Odrunia_Mark_Ryan.html

Line 8 in 9fceb9e

<link rel="stylesheet" href="./styles.css" />

suggested change

<link rel="stylesheet" href="styles.css" />

reason for suggestion: by using the suggested change version, you create more
concise and cleaner code, making it easier for others to understand and maintain
your code. Additionally, it helps avoid any confusion that might arise from specifying
the current directory unnecessarily.

SECOND SUGGESTED CHANGE

Avoid using <br>

exercise-12-vrzn_webdev/Odrunia_Mark_Ryan/Odrunia_Mark_Ryan.html

Line 48 in 9fceb9e

degree in Information Technology.</p><br>

exercise-12-vrzn_webdev/Odrunia_Mark_Ryan/Odrunia_Mark_Ryan.html

Line 116 in 9fceb9e

<b>Christian Harrel Go</b><br />

exercise-12-vrzn_webdev/Odrunia_Mark_Ryan/Odrunia_Mark_Ryan.html

Line 121 in 9fceb9e

<b>Jhean Khendrick Galope</b><br />

exercise-12-vrzn_webdev/Odrunia_Mark_Ryan/Odrunia_Mark_Ryan.html

Line 127 in 9fceb9e

<b>Adrian Naoe</b><br />

exercise-12-vrzn_webdev/Odrunia_Mark_Ryan/Odrunia_Mark_Ryan.html

Line 133 in 9fceb9e

<b>Andronicus Dimasacat</b><br />

exercise-12-vrzn_webdev/Odrunia_Mark_Ryan/Odrunia_Mark_Ryan.html

Line 236 in 9fceb9e

<h1>Leave a comment</h1><br>

I noticed u used <b> and <em> a lot.
I recommend that u wrap them in a <p>
refer to this article about block and inline elements.

THIRD SUGGESTED CHANGE

comment section seems to accept blank spaces for your input and textarea.

exercise-12-vrzn_webdev/Odrunia_Mark_Ryan/scripts.js

Line 6 in 9fceb9e

if (name.value.length > 0 && txtarea.value.length > 0) {

this change could be enough to fix it.

if(name.value.trim().length > 0 && txtarea.value.trim().length > 0)

refer to trim() here

These are the minor issues I would to point out. Again, these suggestions aren't mandatory, but they could contribute to better
code quality and adherence to best practices.

THANK YOU!

recommended changes

@go-christianharrel

Upon code review, I have noticed lines in your code that do not adhere to the guidelines that are given to us.

Please fix these issues ASAP.

First Issue

follow guidelines in naming classes

exercise-12-vrzn_webdev/go_christianharrel/go_christianharrel.html

Line 112 in 68129bc

<h1 class="heading2" id="works">My Works</h1>

exercise-12-vrzn_webdev/go_christianharrel/go_christianharrel.html

Line 201 in 68129bc

<h1 class="heading2" id="gallery">My Gallery</h1>

exercise-12-vrzn_webdev/go_christianharrel/go_christianharrel.html

Line 295 in 68129bc

<h1 class="heading2" id="comments">Comment Section</h1>

make it heading-two

exercise-12-vrzn_webdev/go_christianharrel/go_christianharrel.html

Lines 116 to 146 in 68129bc

	<div class="box2">
	<h3>Web Development</h3>
	</div>
	</a>
	<a href="#">
	<div class="box2">
	<h3>SIA</h3>
	</div>
	</a>
	<a href="#">
	<div class="box2">
	<h3>Multimedia</h3>
	</div>
	</a>
	<a href="#">
	<div class="box2">
	<h3>Project Management</h3>
	</div>
	</a>
	<a href="#">
	<div class="box2">
	<h3>Database Admin</h3>
	</div>
	</a>
	<a href="#">
	<div class="box2">

make it box-two

Second Issue

Avoid using <br>

exercise-12-vrzn_webdev/go_christianharrel/go_christianharrel.html

Line 32 in 68129bc

I'm <span>Christian Harrel Go<br /></span>PUPT Student,

Please make the proper changes and make sure to still adhere to the proper guidelines that are given to us.

Thank You!

fix anchor tag path

adhering to the instructions that are given to us, please change the path of your anchor tag to "#"

@Naoe-Adrian : HTML file

Refer to the anchor tags in your my-works-container div.

Below is a suggested change for your anchor tag:

<a href="#"></a>

Thank You!

Scores & Feedback

exercise-12-vrzn_webdev/Odrunia_Mark_Ryan/Odrunia_Mark_Ryan.html

Line 205 in 75ffbd1

<p>

it's not a good practice to embed p within a p. Use a container element instead.

---

team score 10/10

recommended changes

@Dimasacat-Andronicus

Upon code review, I have noticed a line in your code that does not adhere to the guidelines that are given to us.

Please fix this issue ASAP.

exercise-12-vrzn_webdev/dimasacat_andronicus/dimasacat_andronicus.html

Line 245 in a1f85c8

<div class="comment-inputstyle">

simply adhere to the class naming guidelines

this should be comment-input-style

Please make the proper changes and make sure to still adhere to the proper guidelines that are given to us.

Thank You!

create documentation in README.md file

create documentation in the README.md file

indicate the name of our group, a short description of the project, and of course the Netlify URL where it is deployed.

utilize your knowledge in markdown, and make it detailed and creative.

Thank You!