Skip to content

Commit

Permalink
feat: code structure change
Browse files Browse the repository at this point in the history
  • Loading branch information
@theritikchoure
theritikchoure committed Jun 3, 2023
1 parent 52081ad commit 40aab35
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 68 deletions.
133 changes: 67 additions & 66 deletions assets/js/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,38 @@
function randHex() {
return (Math.floor(Math.random() * 56) + 200).toString(16);
}
// Declare all the global variables here
const searchForm = document.getElementById('search-form');
const cookieModal = document.getElementById('cookie-modal');
const cookieBtn = document.getElementById('cookie-accept');
const loader = document.getElementById("loader");
const formPreference = document.getElementById('PREFERENCE');
const listings = document.getElementById("listings");
const listingHeading = document.getElementById("listing-heading");
const backToTopBtn = document.getElementById("btn-back-to-top");

function randColor() {
return randHex() + "" + randHex() + "" + randHex();
window.onload = async () => {
let contentType = localStorage.getItem('content');

if (location.hash !== '') {
if (!location.hash.includes('#listings')) contentType = location.hash.includes('#internship') ? 'internships' : 'jobs';
}

await changeContent(contentType);

let cookieConsent = localStorage.getItem('cookie-accept');
if (JSON.parse(cookieConsent)) {
cookieModal.classList.add('hidden');
}

if (location.hash !== '') {
document.getElementById(location.hash.replace('#', '')).scrollIntoView();
}
}

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction();
};

// Job card html content generator
const jobsContentHtml = (job, id) => {
let contentType = localStorage.getItem('content');

Expand Down Expand Up @@ -64,40 +91,15 @@ const jobsContentHtml = (job, id) => {
return content;
}

let cookieModal = document.getElementById('cookie-modal');
let cookieBtn = document.getElementById('cookie-accept');


window.onload = async () => {
let contentType = localStorage.getItem('content');

if (location.hash !== '') {
if (!location.hash.includes('#listings')) contentType = location.hash.includes('#internship') ? 'internships' : 'jobs';
}

await changeContent(contentType);

let cookieConsent = localStorage.getItem('cookie-accept');
if (JSON.parse(cookieConsent)) {
cookieModal.classList.add('hidden');
}

if (location.hash !== '') {
document.getElementById(location.hash.replace('#', '')).scrollIntoView();
// const myDiv = document.getElementById('myDiv');
// myDiv.scrollIntoView();
console.log(document.getElementById(location.hash.replace('#', '')))
}
}

const changeContent = async (type = 'jobs', skill = null) => {
// Change content based on job type (jobs/internships),
// if skill is provided then filter based on that skill on selected job type (jobs/internships)
async function changeContent(type = 'jobs', skill = null) {
let str = '';
let headingText = '';
localStorage.setItem('content', type);
let formPreference = document.getElementById('PREFERENCE');
formPreference.value = type === 'internships' ? '2' : '1';
let listings = document.getElementById("listings");
let listingHeading = document.getElementById("listing-heading");

let loader = document.getElementById("loader");
// Set the job preference for subscribe form
formPreference.value = type === 'internships' ? '2' : '1';

loader.classList.toggle('hidden'); // loading starts

Expand All @@ -108,8 +110,6 @@ const changeContent = async (type = 'jobs', skill = null) => {
}

if (type === 'internships') {
console.log(type)
let str = '';
let id = internshipsData.length;

let filteredInternships = internshipsData.filter((job) => {
Expand All @@ -127,7 +127,7 @@ const changeContent = async (type = 'jobs', skill = null) => {
}
})

listingHeading.innerText = `Latest Internships with #${skill} skill`;
headingText = `Latest Internships with #${skill} skill`;
} else {
if (skill && filteredInternships.length === 0) {
alert('No internships found for this skill. Showing all internships.')
Expand All @@ -141,13 +141,10 @@ const changeContent = async (type = 'jobs', skill = null) => {
}
})

listingHeading.innerText = 'Latest Internships';
headingText = 'Latest Internships';
}

listings.insertAdjacentHTML('beforeend', str);
} else {
console.log(type)
let str = '';
let id = jobsData.length;

let filteredJobs = jobsData.filter((job) => {
Expand All @@ -160,77 +157,81 @@ const changeContent = async (type = 'jobs', skill = null) => {
filteredJobs.forEach((job) => {
if (skill) {
str += jobsContentHtml(job, id--);
} else {
str += jobsContentHtml(job, id--);
}
})

listingHeading.innerText = `Latest Jobs with #${skill} skill`;
headingText = `Latest Jobs with #${skill} skill`;
} else {
if (skill && filteredJobs.length === 0) {
alert('No jobs found for this skill. Showing all jobs.')
alert('No jobs found for this skill. Showing all jobs.');
}

jobsData.forEach((job) => {
str += jobsContentHtml(job, id--);
})

listingHeading.innerText = 'Latest Jobs';
headingText = 'Latest Jobs';
}

listings.insertAdjacentHTML('beforeend', str);
}

loader.classList.toggle('hidden');
listingHeading.innerText = headingText;
listings.insertAdjacentHTML('beforeend', str); // Add all jobs card to the DOM
loader.classList.toggle('hidden'); // loading ends
}

cookieBtn.onclick = function () {
// Cookie accept handle function
function cookieAccept() {
localStorage.setItem('cookie-accept', true);
cookieModal.classList.add('hidden');
}

let mybutton = document.getElementById("btn-back-to-top");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction();
};

function scrollFunction() {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
mybutton.style.display = "block";
backToTopBtn.style.display = "block";
} else {
mybutton.style.display = "none";
backToTopBtn.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
mybutton.addEventListener("click", backToTop);

// When the user clicks on the button, scroll to the top of the document
function backToTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}

// Copy to clipboard
async function copyToClipboard(text) {
await navigator.clipboard.writeText(text);
alert("Copied to clipboard")
}

const searchForm = document.getElementById('search-form');

// Search form submit event
searchForm.addEventListener('submit', (event) => {
let contentType = localStorage.getItem('content');
let skill = searchForm['skill'];
event.preventDefault();
changeContent(contentType, skill.value);
});

// Search form reset event
searchForm.addEventListener('reset', (event) => {
event.preventDefault();
if(searchForm['skill'].value === '') return;
if (searchForm['skill'].value === '') return;
searchForm['skill'].value = '';
changeContent(localStorage.getItem('content'), null);
})
})

// Generate random hex
function randHex() {
return (Math.floor(Math.random() * 56) + 200).toString(16);
}

// Generate random color
function randColor() {
return randHex() + "" + randHex() + "" + randHex();
}
4 changes: 2 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ <h3 class="uppercase text-gray-50 font-bold">Developers/Legal</h3>
the devs.</div>
</footer>

<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light"
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" onclick="backToTop()"
class="inline-block p-3 bg-green-500 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-green-800 hover:shadow-lg focus:bg-green-800 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-500 active:shadow-lg transition duration-150 ease-in-out bottom-5 right-5"
id="btn-back-to-top">
<svg aria-hidden="true" focusable="false" data-prefix="fas" class="w-4 h-4" role="img"
Expand All @@ -231,7 +231,7 @@ <h3 class="uppercase text-gray-50 font-bold">Developers/Legal</h3>
</p>
</div>
<div>
<button class="btn accept" id="cookie-accept">Accept</button>
<button class="btn accept" id="cookie-accept" onclick="cookieAccept()" >Accept</button>
</div>
</section>

Expand Down

0 comments on commit 40aab35

Please sign in to comment.