Skip to content

feat: Add a helpful tips section #76

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
lavbingi wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: Add a helpful tips section #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
24 changes: 24 additions & 0 deletions css/feature.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/* Updated styling for the new Tip Box to match the dark theme */
.tip-box {
background-color: #24292f; /* Darker background color */
border: 1px solid #444c56; /* Darker border color */
border-left: 5px solid #00b894; /* A green border on the left (you can keep this) */
border-radius: 5px;
padding: 1.5rem;
margin-top: 2rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
font-family: sans-serif;
max-width: 400px;
}

.tip-box h4 {
font-size: 1.1rem;
color: #c9d1d9; /* Lighter text color for readability */
margin-top: 0;
}

.tip-box p {
font-size: 1rem;
line-height: 1.5;
color: #8b949e; /* Lighter text color */
}
32 changes: 32 additions & 0 deletions feature/feature.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
const tips = [
"Don't be afraid to ask questions! The community is here to help.",
"Always read the project's CONTRIBUTING.md file before you start.",
"Start with small changes, like fixing a typo in the documentation.",
"When you create a pull request, link it to the issue you are solving.",
"Provide clear and concise commit messages.",
"Reviewers will give you feedback. It's a learning opportunity!",
"Always be polite and respectful to maintainers and other contributors.",
];

// Get references to the HTML elements
const tipText = document.getElementById('tip-text');
const newTipButton = document.getElementById('new-tip-button');

// Function to get a random tip from the array
function getRandomTip() {
const randomIndex = Math.floor(Math.random() * tips.length);
return tips[randomIndex];
}

// Function to update the tip text on the page
function updateTip() {
tipText.textContent = getRandomTip();
}

// Add an event listener to the button
if (newTipButton) {
newTipButton.addEventListener('click', updateTip);
}

// Display a random tip when the page first loads
updateTip();
15 changes: 12 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<link rel="stylesheet" href="css/feature.css">
</head>
<style>

Expand Down Expand Up @@ -135,7 +135,7 @@
line-height: 1.25;
color: #464a4c;
vertical-align: middle;
background: #fff url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' v…'0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E) no-repeat right .75rem center;
background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center;
-webkit-background-size: 8px 10px;
background-size: 8px 10px;
border: 1px solid rgba(0,0,0,.15);
Expand Down Expand Up @@ -172,7 +172,6 @@
cursor: url(hand.cur), pointer;
}


</style>

<body>
Expand Down Expand Up @@ -248,6 +247,13 @@ <h1>Find Great Open Source Opportunities.</h1>
</tbody>
</table>
</div>
<div class="tip-box">
<h4>Helpful Tip for Contributors</h4>
<p id="tip-text">
Don't be afraid to ask questions! The open-source community is here to help.
</p>
<button id="new-tip-button">Show another tip</button>
</div>

</div>
</div>
Expand All @@ -257,6 +263,9 @@ <h1>Find Great Open Source Opportunities.</h1>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<script src="feature/feature.js"></script>
</body>
</html>

Expand Down